🌎 Web/CSS

[CSS] CSS에서 위치를 담당하는 요소들

오늘 ONEUL 2022. 3. 23. 00:22

디스플레이(Display)

display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 중요한 속성 중 하나이다. html의 모든 요소는 각각의 기본 display 속성 값을 가지고 있고, CSS를 통해 속성 값을 바꿀 수 있다.

li {
  display: inline;
}

/* <li> 요소를 inline으로 변경하면 가로메뉴를 만들 수 있다 */

 

 

인라인-블록(inline-block)

  • 요소 자체는 인라인(inline) 요소처럼 동작하지만, 내부에서는 블록(block) 요소처럼 동작한다.
  • 인라인 요소와 다르게 너비와 높이를 설정할 수 있다.
  • 블록 요소처럼 margin을 이용하여 여백을 지정할 수 있다.
  • 주로 메뉴나 내비게이션 바를 만들 때 사용된다.

 

 

HTML 요소 숨기기

  1. display 속성 값을 none으로 설정
    • 해당 요소는 보이지 않고, 레이아웃에도 영향을 미치지 않는다.
    • 하지만 기능은 한다. (ex. <script> 태그는 default가 display: none; 이다.)
  2. visibility 속성 값을 hidden으로 설정
    • 해당 요소는 보이지 않지만, 레이아웃에는 영향을 준다.

 

 

 

 

최대 너비(Max-width)

max-width를 설정하면 목적에 따라 화면에 보이는 레이아웃을 적절히 조절할 수 있다. (ex. 반응형 웹)

속성 설명
max-width 해당 HTML 요소가 가질 수 있는 최대 너비(width)를 설정함.
min-width 해당 HTML 요소가 가질 수 있는 최소 너비(width)를 설정함.
max-height 해당 HTML 요소가 가질 수 있는 최대 높이(height)를 설정함.
min-height 해당 HTML 요소가 가질 수 있는 최소 높이(height)를 설정함.

 

 

 

 

포지션(Position)

position 속성은 html 요소가 위치를 결정하는 방식을 설정한다. CSS에서 요소의 위치를 결정하는 방식은 5가지다.

  1. static(정적) - 기본 방식으로 top, right, bottom, left 속성 값에 영향받지 않는다.
  2. relative(상대적) - 해당 요소가 정적 위치 지정 방식일 때의 위치에 상대적으로 위치한다.
  3. fixed(고정적) - 뷰포트(viewport) 기준으로 특정 위치에 고정된다.
  4. absolute(절대적) - 위치가 설정된 바로 상위의 조상(ancestor) 요소에 상대적으로 위치한다. (like <body> 태그)
  5. sticky(끈적) - 사용자의 스크롤 위치에 따라 상대적으로 위치하다가, 주어진 위치가 뷰포트를 만나면 고정된다.
속성 설명
position HTML 요소의 위치를 결정하는 방식을 설정함. (static, relative, fixed, absolute, sticky)
top 위치가 설정된 조상 요소의 위로부터의 여백을 설정함.
right 위치가 설정된 조상 요소의 오른쪽으로부터의 여백을 설정함.
bottom 위치가 설정된 조상 요소의 아래로부터의 여백을 설정함.
left 위치가 설정된 조상 요소의 왼쪽으로부터의 여백을 설정함.
z-index 겹쳐지는 요소들이 쌓이는 스택(stack)의 순서를 설정함.

 

 

 

 

플로트(Float)

float 속성은 해당 html 요소가 주변의 다른 요소들과 잘 어우러지게 해 준다. 레이아웃(layout) 작성할 때 주로 사용된다.

div.page {
	border: 3px solid #CD5C5C;
	overflow: auto;
}
h2 {
	text-align: center;
}
header {
	border: 3px solid #FFD700;
}
nav {
	border: 3px solid #FF1493;
	width: 150px;
	float: left;
}
section {
	border: 3px solid #00BFFF;
	margin-left: 156px;
}
footer {
	border: 3px solid #00FA9A;
}
  • left - 컨테이너 왼쪽
  • right - 컨테이너 오른쪽
  • none - 기본값
  • inherit - 상위 요소의  float값을 상속
속성 설명
float HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 설정함.
clear float 속성이 적용된 후 나타나는 요소들이 더 이상 float 속성에 영향을 받지 않도록 설정함.
overflow 내용(content)의 크기가 해당 요소를 감싸고 있는 컨테이너 요소보다 클 때 어떻게 처리할지를 설정함.

 

 

 

 

정렬(Align)

블록(block) 타입의 요소를 정렬하기 위한 방법

  • margin 속성을 이용한 가운데 정렬 - 해당 요소에 width 속성 값을 설정한 후, margin 속성 값을 auto로 설정한다.
  • position 속성을 이용한 좌우 정렬 - <body> 요소에 margin과 padding 속성 값을 0으로 설정한 후, position 속성 값을 absolute로, right 또는 left 속성 값을 설정한다.
  • float 속성을 이용한 좌우 정렬 - 마찬가지로 <body> 요소에 margin과 padding 속성값을 0으로 설정한 후, float 속성값을 right 또는 left로 설정한다.

인라인(inline) 타입의 요소를 정렬하기 위한 방법

  • text 속성을 이용한 가운데 정렬 - text-align 속성 값을 center로 설정한다.
  • line-height 속성을 이용한 수직 정렬 - 자식 요소의 line-height을 부모 요소의 height과 동일하게 설정한다. (참고자료)

이미지(img) 요소를 정렬하기 위한 방법

  • display 속성을 이용한 가운데 정렬 - display 속성 값을 block으로 설정한 후, margin 속성 값을 auto로 설정한다.

화면 정중앙에 요소를 정렬하는 방법

  • position 속성과 transform 속성을 이용하여 화면의 정중앙에 정렬한다.
.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

 

 

 

※ 참고자료

http://www.tcpschool.com/css/intro

https://www.w3schools.com/css/default.asp

저작자표시