01_display(가시속성) p.167

html태그는 저마다 보이지 않는 특성을 가지고 있는데 이것을 display속성이라고 한다.

display의 속성의 종류로는 block, inline, inline-block, table, cell, none.....등이 있다.

블럭요소의 종류

p태그인 나는 블럭요소입니다. 왼쪽에서부터 오른쪽까지 공간을 무조건 차지하지요. 블럭요소는 줄바꿈이 자동으로 변경됩니다. 또한 가로, 세로크기 값을 설정하여 크기를 지정할 수 있고, 블럭요소의 종류로는 p, h1~h6, div, header, nav, main, section, article, aside, footer, address, dl, dt, dd, ol, ul, li, form, fieldset, hr, table....등이 있습니다.

인라인요소의 종류

박스모델 계산하기

box model이란? 블럭요소와 인라인요소가 가질 수 있는 크기와 마진, 패딩, 테두리값을 사용하여 배치하는 개념을 말한다.

박스모델 계산공식:
가로 전체크기 = 패딩 + 마진 + 테두리 +가로크기
세로 전체크기 = 패딩 + 마진 + 테두리 + 세로크기

박스크기 계산하기 연습

• padding : 10px; 위,오른,아래,왼쪽 모두 값 설정
• padding : 10px 20px; 위,아래 10px, 오른,왼쪽 20px
• padding : 10px 20px 30px 40px; 위, 오른, 아래, 왼쪽순으로 설정(시계방향)
• padding-right: 10px; 방향을 지정하여 설정

margin설정도 padding과 동일한 방법으로 설정한다.

테두리 설정- border:선두께 선모양 선색상;(위 아래 왼쪽 오른쪽)

border-top:1px solid #f00; - 방향을 지정하여 설정할 수도 있음.

box-sizing:콘텐츠 박스의 테두리, 패딩값을 포함하여 계산하는 속성이기 때문에 박스가 바깥으로 커지지않고 안쪽으로 영역 작아짐. (border-box) 원래 기본값은 content-box