CSS 기초 - 공간분할태그 / 자주 쓰이는 속성

1. 공간분할태그

: 경계를 분할하거나 영역을 나눌 때 사용하는 태그

- <div>, <p>, <span>

 

2. display 속성

1) block

: 무조건 가로로 한 줄의 영역을 차지하는 속성

div, p 등 → 디폴트값이 block임 

p태그가 block의 속성을 갖고 있어서 한 줄을 다 차지해 개행이 되는 것이었음..!

width, height 값 설정이 가능

 

2) inline

: 내가 담은 컨텐츠까지만 크기로 삼는 속성

span, a 등 → 디폴트값이 inline임

width, height 값 설정이 불가능

왜? → 이미 '컨텐츠'로 내가 크기를 설정을 해 놓은 것

 

 

width, height 값을 p태그, span태그 똑같이 200px로 설정했지만

inline이 디폴트값인 span태그는 크기가 달라지지 않은 것을 알 수 있다!

 

3) none

: none 설정을 해두면 사용자 눈에 보이지 않게 하는 기능

 

 

이런 식으로 hover와 함께 쓰면 

none속성으로 인해 보이지 않다가 마우스를 올리면 볼 수 있게 된다.

 

Q. 무슨 노래 들으세요? A. 뉴진스 ditto요!
Q. 오늘 점심 뭐 드세요? A. 다욧도시락

 

3. box model

1) margin

: 테두리(경계선)를 기준으로 바깥 쪽 여백

- 기본적으로 body태그에는 8px의 마진이 존재함

 

실제로 이동한 건 아니지만 margin을 이용하여 이동한 것처럼 보이게 됨

 

2) padding

: 테두리를 기준으로 안 쪽 여백을 지정하는 속성(테두리와 내용 사이의 여백)

 

 

margin이 아니라 테두리와 'box' 사이 padding 값을 이용하여 만든 것

'box'의 위치를 생각하면 쉽게 이해할 수 있다.

 

3) boxSizing

: 요소의 크기를 화면에 표시하는 방법

 

(1) content-box(디폴트값)

: 컨텐츠의 영역만을 크기로 삼는 속성(내가 설정한 너비 = 컨텐츠의 너비)

- 패딩, 보더 값이 들어가면 들어간 만큼 크기가 커짐

 

(2) border-box

: content + padding + border = 내가 설정한 너비

- 패딩, 보더 값이 들어가도 크기는 커지지 않고, 컨텐츠가 작아짐

- 디자인할 때 보더박스를 더 많이 사용함

 

 

 

* 테두리 속성

- border-width : 테두리 두께 지정

- border-color : 테두리 색상 지정

- border-radius : 테두리 모서리를 둥글게 만드는 속성 

     → border-위/아래-좌/우-radius  (ex)border-top-right-radius: 50px;