[CSS] 레이아웃(Layout)과 관련된 속성

 

 

 

 

1. 레이아웃(Layout)

화면에 엘리먼트들을 어떻게 배치할 것인지 의미

 

 

2. 레이아웃 관련 속성들

 

1) display

엘리먼트를 어떻게 표시할 지 그 방법에 관한 속성

div {
	 display: none | block | inline | flex;
}

 

display: none;	- 엘리먼트를 화면에 숨기기 위해 사용됨 - 엘리먼트가 존재하긴 하지만 화면에 보이지 않게 함 - 주로 자바스크립트 코드를 넣을 때 사용됨, <script> 태그의 display 속성 기본값은 display: none;
display: block;	- 블록 단위로 엘리먼트를 배치 - 블록 단위: 엘리먼트가 새로운 줄에서 시작하여 위차한 곳 전체의 width를 차지한다는 것 - 대표적으로 <p>, <div>, <h1> ~ <h6> 태그의 display 속성 기본값은 display: block;
display: inline;	- 엘리먼트를 라인 안에 넣는 것 - 이 속성을 사용하면 모든 width, height 관련된 속성들의 효과가 없어짐 - <span> 태그의 display 속성 기본값은 display: inline;
display: flex;	- 엘리먼트를 블록 레벨의 플렉스 컨테이너로 표시하는 것 - 컨테이너이기 때문에 내부에 다른 엘리먼트들을 포함함

 

 

2) visibility

엘리먼트를 화면에 보여주거나 감추기 위한 속성

div {
	visibility: visible | hidden;
}

 

visibility: visible;	엘리먼트를 visible하게 하는 것(화면에 보이게 하는 것)
visibility: hidden;	엘리먼트를 hidden 하는 것(화면에 안보이게 하는 것), 화면에 보이진 않지만 영역은 그대로 차지함

 

 

3) position

엘리먼트를 어떻게 위치시킬 것인지 정의하기 위한 속성

div {
	position: static | fixed | relative | absolute;
}

 

position: static;	기본값, 엘리먼트를 원래의 순서대로 위치시킴
position: fixed;	엘리먼트를 브라우저 window에 상대적으로 위치시킴
position: relative;	엘리먼트를 보통의 위치에 상대적으로 위치 시킴
position: absolute;	엘리먼트를 절대 위치에 위치시키는데 이때 기준은 첫 번째 상위 엘리먼트

 

 

4) width/height

가로/세로 길이를 정의하기 위한 속성

div {
    width: auto | value;
    height: auto | value;
    min-width: auto | value;
    min-height: auto | value;
    max-width: auto | value;
    max-height: auto | value;
}

 

min-width/min-height	최소 가로/세로 길이를 정의하기 위한 속성
max-width/max-height	최대 가로/세로 길이를 정의하기 위한 속성

 

 

 

3. 많이 사용하는 기타 속성

background-color: 엘리먼트의 배경색을 지정하기 위한 속성

border: 엘리먼트에 테두리를 넣기 위한 속성