29일차(2022.02.04) _ Display속성, Box 모델

1. display 속성

 

- 모든 HTML 태그는 display 속성을 가지고 있음
- 기존의 display 속성은 따로 변경할 수 있음

1. inline
 - 너비(가로)와 높이(세로)의 수치를 가지지 못함
 - 너비와 높이의 수치를 변경하더라도 변경이 안됨
 - 즉, 크기는 무조건 Contents 내용의 크기만큼 차지
 - margin 적용 안됨 > inline block 으로 바꾸거나 해야 함
 - a, img

2. block
 - 너비(가로)와 높이(세로)의 수치를 조정할 수 있음
 - 크기는 조정가능하지만, 가상의 너비가 있음
 - 즉, 너비의 크기를 조정하더라도 가상의 너비는 고정이기 때문에 아래의 내용이 올라오지 않음
 - 가상의 너비는 브라우저의 전체 너비와 같음
 - 상속 시에 너비를 따로 지정하지 않을 시 부모의 너비를 따라감
 - h, hr, p

3. inline-block
 - inline의 특성과 block의 특성을 합친 것
 - 가성의 너비를 가지지 않음
 - width, height 사용 가능

4. none
 - 화면에 표시되지 않음, 자리도 차지하지 않음
 - visibility : hidden -> 화면에 표시되지는 않지만 자리는 차지함 (display속성 아님)

 

설명1. Box 개념

 

각 태그들은 각각 inline, block중에 하나의 Display 속성(Box 모델)을 가지고 있다. 

 

    <h1>AA</h1>
    <h1>BB</h1>
    <h1>CC</h1>
    DD
    EE

 

HTML에 위와 같은 코드를 작성했다면,

 

 

각각 이런식으로 모든 Element는 테두리가 안보이지만

원래는 Box 형태로 공간을 차지하기 마련이다.

모든 Box들은 왼쪽으로, 위로 올라가려는 속성이 있다.

웹브라우저는 공간을 왼쪽부터, 위쪽부터 채우기 때문에 공간만 있다면

왼쪽으로, 위로 채우기 시작한다. 

근데 AA, BB, CC의 경우에는 자동으로 줄이 바뀌어 있고, DD EE는 줄이 안바껴있다. 

h 태그의 경우에는 display속성이 block이기 때문에, 가로의 크기가 웹브라우저의 크기와 동일하다.

그래서 좌측으로 더이상 올라갈 수 있는 공간이 없기 때문에

AA다음에 BB가 올라올 수가 없게 된다.

CC도 마찬가지이고 DD도 결국 CC가 h태그이기때문에 block display 속성을 가지고있어서 위로 올라오지 못한다.

 

근데 EE의 경우는 DD가 그냥 아무런 태그도 없기 때문에 옆에 올라온 것을 확인할 수 있다.

이는 inline 속성을 가지고 있어서 그렇다.

inline 속성은 Contents의 크기만큼 그 크기를 가지기 때문에 

DD만큼 크기를 차지하고 좌측에 공간이 남았기 때문에 EE가 옆으로 올라오게 된 것이다. 

 

---

2. Box 모델

 

- Box의 구성 요소

1. margin
 - Element(Box)와 Element(Box)간의 간격
 - 부모Box의 간격을 조정하면 자식Box도 같이 따라감
 - 방향 : top, right, bottom, left

 1) Element간 간격 띄우기
  margin - 방향 : 값 
  - 해당 방향의 간격을 값만큼 띄움

  - short hand (단축) 사용법
    margin : top값 right값 bottom값 left값
    - 수치의 순서가 맞아야 함 (위를 기준, 시계방향)

  - top과 bottom 수치가 같고 right과 left수치가 같을 때
    margin : top/bottom값 right/left값 
    - 총 두 개의 값만 주면 됨

  - 4방향 모두 같은 값을 가질 때
    margin : 값

  - Element를 항상 가운데 정렬시킬 때
    margin : tom/botom값(사용자정의) auto(좌우는 클라이언트 화면에 따라 자동계산)
    - auto를 사용시에는 너비의크기가 있는경우만 사용가능 (inline속성인경우 불가)

  - 자식 태그에서 margin-top을 줄 경우 부모와 동일하게 움직이는 버그 발생
   --- 부모 태그에 overflow : hidden 선언 시 버그 해결

2. border
 - Element의 테두리 (기본 흰색)
 - 방향 : top, right, bottom, left

 1) 테두리 선 조정
  border - 방향 - color : 테두리의 색 지정
  border - 방향 - style : 선의 종류
  border - 방향 - width : 선의 두깨

 - short hand (단축) 사용법
   border - 방향 : color값 width값 style값  (값의 순서는 상관 없음)

 - 4방향 모두 같은 값을 가질 때
   border : color값 width값 style값

 2) Round 처리(둥근모서리) : border - radius
  - 좌측 상단 : border - top - left - radius : 반지름 값
  - 우측 상단 : border - top - right - radius : 반지름값
  - 좌측 하단 : border - bottom - left - radius : 반지름값
  - 우측 하단 : border - bottom - right - radius : 반지름값

  - short hand (단축) 사용법
   border - radius : TL값 TR값 BR값 BL값

  - 4방향 모두 같은 값을 가질 때
   border - radius : 반지름값

 3) table의 테두리에 선을 표시할 때
  - td와 td간 기본적으로 간격이 존재
  - 간격 조정 : border - spacing : 값
  - spacing이 0이더라도 border - collapes 값이 기본적으로 seperate라서 선이 두꺼움
   --- border - collapes : collapes -> 합쳐진 선들 중 하나만 사용
   --- seperate -> 둘 다 사용

3. padding
 - 테두리(border)와 contents간의 간격
 - 사용 방법은 margin과 동일함
 - 방향 : top, right, bottom, left

 1) 각 방향별로 다른 값을 넣을 때
   padding - 방향 : 값 

 2) 방향별로 다른 값을 한꺼번에 넣을 때
   padding : top값 right값 bottom값 left값

 3) top/bottom과 right/left값이 각각 같을 때
   padding : top/bottom값 right/left값

 4) 네 방향 모두 같은 값일 때
   padding : 값 

 5) box-sizing
  - content - box : 기본값, padding 값을 주게 되면 늘어난 값 만큼 전체 box 사이즈가 커짐
  - border - boc : padding 값을 주더라도 box 사이즈가 변경되지 않음
   --- 대신 Contents의 내용이 박스범위 외부로 튀어나올 수 있음


4. contents
 - Element내의 Contents(Element, Text 등등..)

 

설명1. Box 모델 구성 요소

 

 

웹브라우저의 f12번을 누르면 개발자모드가 나오는데, Box모델마다 각각의 수치가 나온다.

파란색 배경안에 들어가있는 숫자는 Contents의 너비 x 높이이다.

현제 이 Box 모델에는 padding, border, margin의 모든 방향에 아무런 값도 넣지 않았기 때문에

4방향 모두 -로 표시가 되어있다.