- html은 구조, css는 디자인, javascript는 상호작용
- html 파일에 css, javascript 파일 연결하기
// css 파일 연결
<link rel="stylesheet" href="style.css">
// javascript 파일 연결
<script src="index.js"></script>HTML
- HTML(HyperText Markup Language)은 웹 페이지를 위한 지배적인 마크업 언어이다.
- 마크업 언어란?
태그 등을 이용하여 문서나 데이터의 구조를 기록하는 언어의 한 가지이다.
- 마크업 언어란?
CSS
- 글꼴:
font-family
.emphasize {
font-family: "SF Pro KR", "MalgunGothic", "Verdana";
// 사용하고자 하는 글꼴이 없으면 순서대로 다음 글꼴을 사용
}- 크기:
font-size
.title {
font-size: 24px;
}단위
단위는 크게 절대단위와 상대단위로 나눌 수 있다.
절대 단위
규격이 정해져 있고 각 단위들끼리 값 변환이 가능하다.
-
cm -
mm -
pt(포인트, 1pt = 1/72in) -
px(픽셀, 1px = 1/96in)- 표시 장치(모니터)에 따라서 상대적인 크기를 가진다. 저해상도 장치의 경우 1px가 픽셀(점) 하나라면, 고해상도 장치에서 1px는 여러개의 픽셀(점)이다.
-
in(인치, 1in = 2.54cm)
-
pc(파이커, 1pc = 12pt)
상대 단위
환경에 따라 유동적으로 바뀔 수 있는 크기를 나타내는 단위. 반응형 웹 디자인 시 주로 사용
-
%: 브라우저 기본 글꼴 크기를 100%로 하고 상대적 크기를 나타냄 -
em: 브라우저 기본 글꼴 크기를 1em으로 하고 상대적 크기를 나타냄 -
rem: 최상위 요소(보통은 html 태그)의 기본 글꼴 크기를 1rem으로 하고 상대적 크기를 나타냄 -
ex: x-height, 소문자 x의 높이를 1로 함 -
vh: 브라우저 화면 높이의 100분의 1을 1vh로 함
예를 들어, 브라우저 화면 높이가 900px인 경우 1vh = 9px -
vw: 브라우저 화면 너비의 100분의 1을 1vw로 함
예를 들어, 브라우저 화면 너비가 700px인 경우 1vw = 7px
절대적이고 확실한 크기 정하고 싶을 때: px
보통의 경우: rem
화면 너비 및 높이에 따른 상대적인 크기가 중요한 경우: vw,vh
기타 스타일링
- 굵기:
font-weight - 밑줄, 가로줄:
text-decoration - 자간:
letter-spacing - 행간:
line-height - 정렬:
text-align(가로로 정렬할 경우)
유효 값:left,right,center,justify
박스 모델
- block-level elements: 줄바꿈이 되는 요소 - div, p
- inline elements: 줄바꿈이 되지 않는 요소 - span, h1, h2
- 넘치는 컨텐츠 처리
p {
height: 40px;
overflow: auto; //컨텐츠가 넘치면 자동으로 스크롤
} 넘치는 컨텐츠를 무시하고 가리고 싶을 경우 hidden을 사용한다. overflow 속성은 x축과 y축을 따로 지정하는 것도 가능하다. (overflow-x, overflow-y) 이렇게 하면 한 방향으로만 스크롤이 가능하게 만들 수도 있다.
- content-box VS. border-box
* {
box-sizing: border-box;
}모든 요소에 box-sizing: border-box를 적용해 너비 계산을 단순하게 할 수 있다.
Sprint - querySelector 과제 제출하기
- querySelector 이용한 과제 - 기사 제목 바꾸기
- html에서 태그에 클래스 달아준 후, javascript에서 바꿀 부분 지정 및 변경
<h4 class="title"> 무리뉴, "손흥민과 사랑에 빠졌다"... </h4>document.querySelector('.title').textContent="무리뉴, "김홍식과 사랑에 빠졌다"..."- html파일에 css를 적용하는 방법 - head 부분에 link 태그
<head>
<link rel="stylesheet" href="style.css">
<head/>