[3일차] DO IT HTML/CSS/JAVASCRIPT 웹 표준의 정석/p167~p292/CSS기본,텍스트로 표현하는 다양한 스타일,CSS 박스모델

 

 

 

NOTE

​

전체 선택자 : * { 속성: 값; } 전체 요소에 스타일 적용

클래스 선택자 : .클래스명 {스타일 속성} 속성을 여러개 지정하여 적용

아이디 선택자 : #아이디명 {속성:값} 하나만 지정하여 사용 할 수 있음

그룹 선택자: 선택자1, 선택자2 {속성:값} 여러 스타일에서 같은 스타일 규칙을 사용

​

CSS 우선 순위

!important -> 인라인 스타일 -> id 스타일 -> 클래스 스타일 -> 타입 스타일

​

FONT 속성

font-family: 글꼴 이름 | [ 글꼴이름, 글꼴이름] ]

font-size: 절대크기, 상대크기 , 크기, 백분율

​

em : 부모 요소에서 지정한 글꼴의 대문자 너비를 기준 (1em) 으로 한 후 비율값 지정

rem : root 기준 (문서 시작 부분에서) 지정한 크기를 기준 1rem 으로 한 후 비율값 지정

​

보통 em 과 rem 단위를 많이 사용함

​

line-height: 글자 줄간격을 조절 할때 사용

​

박스모델 (Box Model)

​

블록 요소 인라인 요소

​

블록 레벨 요소 - 요소를 삽입 했을 때 혼자 한 줄을 차지하는 속성

해당 요소의 너비값이 100% 를 의미 블록 레벨 요소 에는 다른 요소가 나올 수 없다

블록 요소의 대표적인 태그는 h1, div, p 각각 너비가 100% 이며 한 줄씩 차지함

​

인라인 레벨 요소 - 한줄을 차지하지 않음 컨텐츠 만큼만 영역을 차지 나머지 공간에는 다른 요소가 올 수 없음

한 줄에 인라인 레벨 요소를 여러개 표시 가능함

span, img, strong 태그가 대표적인 인라인 요소 태그

​

박스 모델은 컨텐츠 영역, 박스와 컨텐츠 영역 사이의 여백 패딩, 박스의 테두리, 박스 모델 사이의 여백 margin

으로 구성

​

컨텐츠 요소의 간격 배치 등을 고려할때 박스 모델이 사용됨

 

1. 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다.

2. 패딩(padding) : 내용과 테두리 사이의 간격입니다. 패딩은 눈에 보이지 않습니다.

3. 테두리(border) : 내용와 패딩 주변을 감싸는 테두리입니다.

4. 마진(margin) : 테두리와 이웃하는 요소 사이의 간격입니다. 마진은 눈에 보이지 않습니다.

 

 

 

 

 

 

 

 

위의 그림에서 전체 너비(width)를 계산해 보면,

width(70px) + left margin(10px) + left padding(5px) + right padding(5px) + right margin(10px) = 100px 이 됩니다.

 

즉, HTML 요소의 전체 너비(width)를 계산하는 공식은

width + left padding + right padding + left border + right border + left margin + right margin 입니다.

 

또한, HTML 요소의 전체 높이(height)를 계산하는 공식은

height + top padding + bottom padding + top border + bottom border + top margin + bottom margin 입니다.

 

이때 마진(margin) 영역의 크기는 눈으로 바로 확인할 수는 없을 것입니다.

왜냐하면 마진이란 테두리(border)와 이웃하는 요소 사이의 간격이면서, 배경색의 영향을 받지 않기 때문입니다.

하지만 HTML 요소가 차지하는 크기에는 포함됩니다.

 

 

box-sizing

​

content-box

전체 크기 = content-box + border + padding + margin

컨텐츠 크기 = content-box

​

​

content-box 속성값은 지정한 width 및 height 크기는 오직 content 영역의 크기에만 영향을 준다.

​

padding : 0, margin : 0, border : 5px, width : 100px, height : 100px 일 때,

 

 

전체 width = 5px + 100px + 5px = 110px

전체 height = 5px + 100px + 5px = 110px

content width = 100px

content height = 100px

​

​

​

border-box

전체 크기 = border-box = content + border + padding + margin

컨텐츠 크기 = border-box – border – padding – margin

​

padding : 0, margin : 0, border : 5px, width : 100px, height : 100px 일 때,

 

 

 

 

실제 width = 5px + 90px + 5px = 100px

실제 height = 5px + 90px + 5px = 100px

content width = 100px – 5px – 5px = 90px

content height = 100px – 5px – 5px = 90px