jinseon's log

[CSS] 레이아웃에 영향을 미치는 속성 본문

HTML & CSS/CSS

[CSS] 레이아웃에 영향을 미치는 속성

J_SEON 2022. 11. 24. 02:16

✔ display

- Block과 Inline 요소의 성격을 바꿀 때 사용

- inline-block을 사용하면 두 요소의 성격을 모두 가짐

    => 줄바꿈 x

    => width와 height는 지정 가능

 

✔ float

- 선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬시키고자 할 때 사용

- 이름 그대로 선택자를 띄워 새로운 레이어층을 만드는 것

    - 레이어 : 층, 다른 레이어 위로 쌓거나 투명도 조절도 가능

- 레이어가 겹쳐지지 않게 왼쪽에서부터 정렬시키고 싶은 경우 float: left;를 연속적으로 입력

 

✔ clear

- float에 대한 속성을 제어하고자 할 때 사용

    => float로 정렬 후 빈 공간을 어떻게 관리할 것인지 지정

 

- both : 모든 공간을 비움

- right : 우측 정렬에 대한 공간을 비움 => 좌측 빈 공간

- left : 좌측 정렬에 대한 공간을 비움 => 우측 빈 공간

- none : 빈 공간이 생기지 않게 함

 

✔ 브라우저와 공간 사이 공백 제거하기

- <html>과 <body> 태그는 margin과 padding 값을 가지므로 초기화를 해주어야 함

- 모든 태그에 대해 지정할 경우 (*) 이용

저작자표시

'HTML & CSS > CSS' 카테고리의 다른 글

[CSS] 마진 병합 현상  (0) 2022.11.24
[CSS] Block 요소와 Inline 요소  (0) 2022.11.24
[CSS] 웹사이트의 레이아웃  (0) 2022.11.23
[CSS] 주요 속성  (0) 2022.11.23
[CSS] 캐스케이딩 (Cascading)  (0) 2022.11.23
'HTML & CSS/CSS' Related Articles more
Comments