HTML+CSS 기초 강의 - 31. CSS 속성 기초 3 - 요소의 크기와 영역 속성
요소의 너비와 높이 그리고 영역의 범위
패딩, 마진, 테두리 값을 주게 되면 HTML 요소가 차지하는 영역의 크기와 내부영역의 위치가 가변으로 변하게 됩니다.
HTML 요소에 너비와 높이 값이 지정되어 있지만 이 값은 패딩, 마진, 테두리 값이 모두 0인 상태의 요소가 차지하는 영역의 크기를 말합니다.
아래처럼 <div> 태그에 마진, 패딩, 테두리 0 으로 크기를 정한 처음의 박스 영역에서 패딩, 테두리, 마진을 차례로 추가함에 따라 점점 차지하는 영역이 커지는 것을 알 수 있습니다.
예를 들어 너비 960px인 데스크톱 환경용 웹디자인을 한다고 가정하면 항상 패딩과 테두리선 너비를 미리 계산해서 HTML 요소의 너비값을 지정할 때 그만큼 차감을 해서 960px으로 맞춰줘야 합니다.
* HTML 요소가 차지하는 영역이 커지지 않게 할 수 없나?
"box-sizing:border-box" 속성을 사용하면 차지하는 영역이 계속 커지는 현상을 피해 마진을 제외한 패딩과 테두리 크기 값이 HTML 요소의 가로/세로 크기값에 포함됩니다. 자세한 사용법은 중급 CSS에서 배우게 됩니다.
크기와 위치 속성
HTML 요소를 문서에서 배치해 레이아웃을 만드는데 있어 가장 기초가 되는 속성들입니다.
여기서는 복잡한 고급 레이아웃을 구성하는 방법은 제외하고, 기초적인 배치를 하는 방법에 대해서만 알아봅니다.
너비와 높이값
HTML 요소의 크기를 지정합니다.
"<span>" 태그와 같은 일부 텍스트 태그들은 너비와 높이 값을 지정해도 적용되지 않으므로 주의해야 합니다.
HTML 요소의 크기는 다음과 같이 지정합니다.
div{
width:25%;
height:100px;
}
반응형 웹이나 가변 레이아웃을 위해 크기 값은 부모 HTML 요소의 크기를 기준으로 퍼센트(%) 값으로 입력할 수 있습니다.
한줄로 여러개의 HTML 요소를 배치해야 하는 경우 여백과 함께 퍼센트 값으로 적절히 요소를 배치할 수 있습니다.
퍼셋트 값으로 숫자가 딱 떨어지지 않는 한줄에 3개, 7개 배치와 같은 레이아웃을 구성할 경우에는 소숫점 자리까지 표시를 해서 100%에 최대한 근접하게 맞춰야 합니다.
할줄에 3개의 요소를 배치할 경우 각 요소는 width:33.3333% 로 7개를 배치할 경우에는 14.2857% 와 같이 입력해서 한줄의 전체 너비를 맞출 수 있습니다.
너비와 높이값으로 사용할 수 있는 단위는 다음과 같습니다.
단위/값 | 설명 |
auto | 크기값이 지정되지 않았을 경우 기본값. 브라우저가 요소의 위치에 따라 크기를 자동으로 계산합니다. |
px | 픽셀 값으로 크기를 고정으로 지정. 패딩, 픽셀단위로 전체 HTML 문서의 레이아웃을 그릴 경우 테두리, 마진 값에 따라 차지하는 영역이 커지는 것을 고려해야 합니다. |
% | 퍼센트 값으로 크기를 결정. 부모 요소의 크기를 기준으로 퍼센트 값만큼 크기가 결정됩니다. |
initial | 기본값으로 리셋함. 브라우저에 정해진 기본값을 사용함. |
inherit | 부모 요소의 크기 속성을 상속 받음. |
HTML 요소의 표시와 화면 배치
HTML 요소는 기본 값으로 문서안에 표시되는 것이 기본입니다.
경우에 따라서는 표시될 필요가 없는 경우도 있고, 사용자 액션에 반응해서 보이게, 또는 보이지 않게 해야할 경우도 있습니다.
모든 요소의 기본 display 상태는 display:initial 입니다. 해당 요소를 보이지 않게 하려면 display:none 을 속성 값으로 지정하면 됩니다.
display 속성 값은 20개가 넘습니다. 그만큼 다양하고 복잡한 화면 레이아웃을 만들어 내는데 있어서 "display" 속성은 중요한 역할을 합니다.
여기서는 가장 많이 사용하는 기초 속성 값인 inline, block, inline-block, flex, contents 에 대해서만 알아봅니다.
값 | 설명 |
inline | 요소가 태그처럼 동작합니다. 이어진 여러요소에 적용하면 한줄로 요소들이 나열됩니다. 태그와 마찬가지로 크기값을 지정할 수 없습니다. 요소 안에 들어있는 컨텐츠의 길이나 크기에 따라 줄의 너비가 정해지기 때문에 크기를 제한할 필요가 있는 요소에는 적합하지 않습니다. |
block | 요소가 태그처럼 동작합니다. 크기값을 지정할 수 있습니다. |
inline-block | 요소처럼 동작하지만 크기값을 지정할 수 있습니다. 이어진 여러 요소에 적용하면 원하는 크기를 가진 요소들을 한줄로 배치할 수 있습니다. 배치를 적당히 잘하면 테이블같은 모양으로 만들 수도 있고, 테이블보다 조금더 유연하게 배치를 할 수도 있습니다. 예를 들면 원소주기율표 같은 것을 만들 수도 있습니다. |
flex | 과거에는 box, flexbox로 사용하던 속성 값으로 표준값으로 flex로 단일화되었습니다. 자식 요소들을 묶는 컨테이너 요소에 사용합니다. 자식 요소들을 가로, 또는 세로 방향으로 inline-block 으로 배치해줍니다. 박스 형태의 영역을 가지는 많은 아이템들을 한방향으로 정렬해 배치하는데 굉장히 편리하기 때문에, 특히 포토갤러리형 목록을 배치하는데 많이 사용됩니다. |
contents | 조금 독특한 속성값인데 사용하면 해당 요소가 사라지고, 자식 요소들이 부모요소 DOM의 자식으로 올라가 붙게됩니다. 일종의 투명 컨테이너 같은 개념으로 자식 요소들을 하나로 묶어서 관리하기 위한 용도로 사용합니다. |
절대 위치와 상대위치
HTML 요소는 기본적으로 요소가 오는 순서에 따라 배치됩니다. 내용의 흐름에 따라 표시가 되는 텍스트 중심의 문서라면 아무런 문제가 없겠지만, 홈페이지나 동적인 페이지, 반응형 웹페이지라면 이렇게 순서대로만 배치해서는 예쁜 페이지를 만들 수 없습니다.
이때 위치를 제어해주는 속성이 position 과 float 입니다.
position 은 HTML 요소가 부모 요소의 영역안에 위치하는 방식을 결정합니다. relative, absolute, fixed 가 가장 많이 사용됩니다.
position 속성에 사용 가능한 값은 다음과 같습니다.
값 | 설명 |
relative | 태그가 위치한 현재 위치를 기준으로 상대 위치를 가집니다. 예를들어 position:relative 속성을 부여하고 left:20px를 주면 태그가 차지하는 영역이 왼쪽으로 20px 이동합니다. |
static | 기본값입니다. 태그가 위치한 순서대로 요소가 표시됩니다. 위치를 임의로 조정할 수 없습니다. left, top 등 태그 위치를 지정하는 속성이 적용되지 않습니다. |
absolute | 바로 위 부모 요소의 위치를 기준으로 상대적으로 위치가 정해집니다. position:absolute 속성을 주고 left:20px 속성을 같이 주면 부모 태그의 왼쪽 끝에서 20px만큼 해당 요소가 밖으로 삐져 나오게 됩니다. 항상 부모태그의 영역과 위치가 기준이 된다는 점을 기억해야 합니다. |
fixed | 브라우저 창을 기준으로 고정된 위치를 가집니다. left:0 을 주면 현재 요소는 브라우저 창 왼쪽 끝에 고정되어 표시됩니다. |
sticky | 사용자 스크롤에 따라 요소가 같이 스크롤되어 이동합니다. 지정된 크기만큼 스크롤될 때까지는 relative 처럼 지정된 위치에 고정되어 있다가, 지정한 크기 이상 스크롤 되면 fixed 속성 처럼 화면 스크롤과 무관하게 특정 위치에 고정되어 보이게 됩니다. 즉, 지정된 화면 스크롤 임계값을 기준으로 relative 속성과 fixed 속성을 오간다고 이해하면 됩니다. 단, 이 속성은 인터넷익스플로러에서는 전혀 지원되지 않기 때문에, 사용할 때 신중해야 합니다. 인터넷 익스플로러 호환성이 필요할 경우 사용하지 않는 것이 좋습니다. |
float 속성은 요소가 떠 있는 위치를 지정하는 속성입니다. 쉽게 설명하면 이미지 주변으로 텍스트를 흘려서 배치해야할 때 float을 사용해 이미지 위치를 강제로 지정해줌으로써 텍스트 내용이 이미지와 겹치지 않고 자연스럽게 줄바꿈이 되야할 때 사용합니다.
그밖에 여러개의 요소들을 왼쪽이나 오른쪽 정렬로 한줄로 배치를 해야할 때도 사용할 수 있습니다.
특히 순서대로 배치된 요소들을 역순으로 배치해야할 때 오른쪽 정렬을 하면 역순으로 배치가 되기 때문에 경우에 따라 매우 유용할 수도 있습니다.
float 속성에 사용할 수 있는 값은 다음과 같습니다.
값 | 설명 |
none | 요소를 유동시키지 않고 기본 배치 상태로 리셋합니다. |
left | 요소를 왼쪽 정렬로 유동시킵니다. 연달아 있는 요소들을 유동시킨 경우 순서대로 한줄로 배치가 됩니다. 마지막으로 유동시킨 요소의 다음 요소가 유동이 아니어도 유동된 요소들 끝에 붙게 되므로 주의해야 합니다. 유동시킨 마지막 요소, 또는 유동시키지 않은 첫 요소에는 clear 속성을 사용해 남은 공간을 비워줌으로써 유동한 요소들과 구분시킬 수 있습니다. |
right | 요소를 오른쪽 정렬로 유동시킵니다. 연달아 있는 요소들을 유동시킨 경우 역순으로 한줄로 배치가 됩니다. 역순으로 배치된다는 점에 주의해야 하는데, 처음 유동한 요소가 가장 오른쪽에 오고, 그 다음 요소들이 순서대로 왼쪽에 차례대로 배치가 됩니다. 마지막으로 유동시킨 요소의 다음 요소가 유동이 아니어도 유동된 요소들 끝에 붙게 되므로 주의해야 합니다. 유동시킨 마지막 요소, 또는 유동시키지 않은 첫 요소에는 clear 속성을 사용해 남은 공간을 비워줌으로써 유동한 요소들과 구분시킬 수 있습니다. |