[CSS] 레이아웃을 구성하는 CSS 박스 모델 (2)

Preface

이번 장에선 display와 float 속성을 사용하여 원하는 위치에 요소를 나타내는 방법을 공부했다.

유튜브 강의로 이 부분을 봤을 땐 어렵다고 느꼈었는데, 막상 책을 보며 실습하자 크게 어렵진 않았다.

다만, 이번 장의 마지막 부분에 있는 position: absolute 속성을 사용하여 사진 위에 텍스트를 표현하는 예제와 마무리 문제 3번은 조금 헷갈리는 부분이 있었다.

전자는 텍스트의 위치 값이 마음대로 조절되지 않았고, 후자에선 링크 요소인 a의 display 속성을 block으로 지정했는데도 float: left 속성을 통해 모든 요소가 한 줄에 가로로 나타나는 것이 이해 되지 않았다.

내가 공부한 내용에 따르면 블록 요소는 한 줄을 전부 차지하는데, float를 사용하면 이 특성이 무시되는 것 같다.

글을 업로드한 후 코드를 조금 더 살펴볼 생각이다.

4. 웹 문서의 레이아웃 만들기

- display 속성: 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용할 수 있게 한다.

→ 주로 웹 문서의 내비게이션을 만들면서 메뉴 항목을 가로로 배치할 때 사용하며, 이미지를 표 형태로 배치할 수도 있다.

1) block: 인라인 레벨 요소를 블록 레벨 요소로 만든다.

2) inline: 블록 레벨 요소를 인라인 레벨 요소로 만든다.

3) inline-block: 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며 마진과 패딩을 지정할 수 있다.

4) none: 해당 요소를 화면에 표시하지 않는다.

- float 속성: 웹 요소를 문서 위에 떠 있게 만든다. (왼쪽 구석이나 오른쪽 구석에 배치)

1) left: 해당 요소를 문서의 왼쪽에 배치한다.

2) right: 해당 요소를 문서의 오른쪽에 배치한다.

3) none: 좌우 어느 쪽에도 배치하지 않는다. (기본값)

- clear 속성: float 속성이 더 이상 유용하지 않다고 알려준다.

1) left: float: left를 해제한다.

2) right: float: right를 해제한다.

3) both: float: left와 float: right를 해제한다.

- inline-block과 float: left의 차이

1) display: inline-block: 가로로 배치하면서도 기본 마진과 패딩을 가지고 있다.

2) float: left: 가로로 배치될 때 요소에 기본 마진과 패딩이 없으며 clear 과정이 필요하다.

5. 웹 요소의 위치 지정하기

- 웹 요소의 위치를 정하는 속성

1) left: 기준 위치와 요소 사이에 왼쪽으로 얼마나 떨어져 있는지 지정한다.

2) right: 기준 위치와 요소 사이에 오른쪽으로 얼마나 떨어져 있는지 지정한다.

3) top: 기준 위치와 요소 사이에 위쪽으로 얼마나 떨어져 있는지 지정한다.

4) bottom: 기준 위치와 요소 사이에 아래쪽으로 얼마나 떨어져 있는지 지정한다.

- position 속성: 웹 문서 안의 요소를 자유자재로 배치한다.

1) static: 문서의 흐름에 맞춰 배치한다. (기본값)

2) relative: 위칫값을 지정할 수 있다는 점을 제외하면 static과 동일하다.

3) absolute: relative값을 사용한 상위 요소를 기준으로 위치를 지정해 배치한다.

→ 부모 요소에 position: relative라고 지정해야 원하는 대로 배치할 수 있다.

4) fixed: 브라우저 창을 기준으로 위치를 지정해 배치한다.

→ 웹 브라우저에서 스크롤하더라도 항상 같은 위치에 나타난다.

728x90