주제
- #블록 요소
- #IFC
- #인라인 요소
- #CSS 레이아웃
- #BFC
작성: 2024-09-07
작성: 2024-09-07 20:11
HTML CSS를 그리다보면 레이아웃이 생각만큼 잘 구성되지 않아
구글에 많이 물어봤었던 경험이 있습니다.
최근 제로초님의 개발자 토크 영상을 보다가 CSS의 기본에 대해서 알아보기로 했습니다.
- 블록 요소, 인라인 요소, margin 과 정렬을 이해하고자 합니다.
이미 경험적으로 알고 있지만, 정리해둬야 할 필요가 있습니다.
■ css를 수정 해야하는데 경험적으로 이것저것 적용해보면서 눈에 보이는대로만 구현하면 반응형 디자인에서 문제가 발생하거나, 추후 유지보수할 때 복잡해집니다.
- 특별히 생각할 것이 없습니다. 모든 요소는 위에서 아래로, 왼쪽에서 오른쪽 방향으로 배치됩니다.
* 두루미스에서 글을 작성할 때 html 태그를 붙여넣기하면 사라지는데, 해결 방법을 아시나요;;
- p 태그로 두 블럭이 생기고, span 태그는 한줄로 그려집니다.
- 주로 레이아웃을 구성할 때 사용됩니다. (블록을 구성하고, 그 안에 인라인을 구성합니다.)
- 블록레벨 요소가 쌓이는 방식입니다.
- 블록 레벨 요소는 아래와 같습니다.
<div>, <p>, <h1>~<h6>, <ul>, <ol>, <li>, <table>, <form>
- 요소 안의 내용의 길이와 상관없이 부모 요소의 전체 너비를 차지합니다. (한 줄)
- 블록 안에 블록을 넣거나, 인라인 요소를 넣을 수 있습니다.
- width, height, margin, padding을 설정할 수 있습니다.
- div 태그 안에 두 줄이 생성됩니다.
- BFC가 생성되는 때는 아래와 같습니다. 그때그때 찾아보면 됩니다.
- 블록 요소 안에서 구성됩니다. (줄 단위 X)
- width와 height를 직접 설정할 수 없습니다. (내용의 크기만큼 차지합니다.)
- 수평 padding과 margin만 적용할 수 있습니다.
- 인라인 요소 안에 인라인 요소만 포함할 수 있습니다.
<span>, <a>, , <img>, <input> 등
그래서 언제 쓰나요?
- bfc는 float 상호작용이나 margin 상쇄를 처리하기 위해 쓰입니다.
- 자식에게 자유분방한 스타일을 걸면 부모는 감싸지 못 합니다.
(float, position absolute, fixed, display inline-block 등...)
- 이때 부모 요소에 bfc를 줘서 레이아웃을 구성합니다.
(부모 태그에 display: inline-block, overflow: auto, float: left 등을 적용합니다.)
- css는 인접한 두 태그의 상하 마진이 겹칩니다.
ex) 아래 두 div 태그 사이의 상하 간격은 150px이 아닌 100px입니다.
- 위 상황에서 두 태그 사이에 새로운 bfc 요소를 추가합니다.
ps. 두루미스 html 복붙 하는 방법을 아시나요;;
댓글0