본문 바로가기
웹 개발

12. CSS레이아웃과 스타일링

by 곽정우 2024. 4. 12.

1. 레이아웃 속성

Z-index

  • HTML 요소의 위치를 설정하게 되면 위치 및 방식에 따라 요소가 겹칠 수 있음
  • 겹쳐지는 요소들이 쌓이는 순서를 결정할 때 z-index를 사용
  • 순서는 숫자의 크기가 클수록 위에 위치하고 작을수록 아래 위치하게 됨

Float

  • HTML 요소가 주변(수평으로 나열된)의 다른 요소들과 자연스럽게 어울리도록 만듦
  • float를 적용받은 요소의 다음에 나오는 모든 요소들이 끌어올려짐
  • float를 적용받은 요소의 다음에 나오는 요소방향을 결정(left, right)
  • 컨텐츠 크기 만큼만 영역을 설정(블록)
  • float를 적용받은 요소는 다른 요소(배경)보다 위에 위치

Clear

  • float 속성이 적용된 이후 나타나는 요소들의 동작을 조절
  • float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기 힘듦
  • clear 속성을 이용하여 float 이후에 등장하는 요소들이 더이상 float 속성에 영향을 받지 않도록 설정(left, right, both)

다단 레이아웃

  • 텍스트를 column 속성으로 다단을 생성
  • 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성
    • column-count: 단의 개수를 설정
    • column-rule: 단과 단사이의 구분선, 구분의 모양, 두께, 색상을 설정
    • column-gap: 단과 단사이의 여백을 설정
    • column-span: 단과 안의 포함된 요소를 다단편집에서 해제(all)

Flex 레이아웃

  • 수평정렬을 하기 위한 속성 (display: flex)

Flex-wrap: 플렉스 라인에 여유가 없을 때 플렉스 요소의 위치를 결정하는 속성

  • nowrap: 기본값. 플렉스 요소가 다음줄로 넘어가지 않음. 요소의 너비를 줄여 한 줄에 배치
  • wrap: 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김
  • wrap-reverse: 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김(단, 아래가 아닌 위쪽으로 넘김)

Flex-direction: 플렉스 요소들이 배치되는 축의 방향을 결정하는 속성

  • row: 기본값. 가로로 배치
  • row-reverse: 가로로 배치(반대)
  • column: 세로로 배치
  • column-reverse: 세로로 배치(반대)

Flex-flow: flex-wrap과 flex-direction을 한꺼번에 지정할 수 있는 속성

  • flex-flow: row nowrap

Justify-content: 플렉스 요소의 수평방향 정렬방식을 설정

  • flex-start: 기본값. 앞쪽에서부터 배치
  • flex-end: 뒤쪽에서부터 배치
  • center: 가운데 배치
  • space-between: 요소들 사이에 여유 공간을 두고 배치(앞뒤 양쪽에 요소를 붙임)
  • space-around: 요소들 사이에 여유 공간을 두고 배치(앞뒤 약간의 공간을 둠)

Align-items: 플렉스 요소의 수직방향 정렬 방식을 설정

  • stretch: 기본값. 아이템들이 수직축 방향으로 늘어남
  • flex-start: 요소들이 시작점으로 정렬
  • flex-end: 요소들이 끝으로 정렬
  • center: 요소들이 가운데로 정렬
  • baseline: 요소들이 텍스트 베이스라인 기준으로 정렬

Align-self: 플렉스 요소에 수직축으로 다른 align 속성값을 설정

 

Order: 플렉스 요소의 순서를 설정

 

Align-content: 플렉스 요소가 설정된 상태에서 요소들이 2줄이상 되었을 때

수직방향 정렬방식을 설정(flex-wrap의 값을 wrap으로 설정해야 함)

  • stretch: 기본값. 아이템들이 수직축 방향으로 늘어남
  • flex-start: 요소들이 시작점으로 정렬
  • flex-end: 요소들이 끝으로 정렬
  • center: 요소들이 가운데로 정렬
  • space-between: 요소들 사이에 여유 공간을 두고 배치(앞뒤 양쪽에 요소를 붙임)
  • space-around: 요소들 사이에 여유 공간을 두고 배치(앞뒤 약간의 공간을 둠)

 

2. 미디어 쿼리(media query)

 

반응형웹:

하나의 웹사이트에서 pc, 스마트폰, 태블릿 등 접속하는 디스플레이 종료에 따라 

화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 방법

@media 매체유형 and (속성에 대한 조건) {
    css 코드 ...
}

 

매체유형

all: 모든 매체
screen: 컴퓨터, 태블릿, 스마트폰 ..
print: 프린터
speech: 스크린 리더

 

em과 rem 특징
상대적인 크기를 정하는 단위

em
- 부모 요소 크기의 몇 배 인지를 단위로 설정
    pc의 일반 텍스트 크기: 16px = 1em
    모바일의 일반 텍스트 크기: 12px = 1em

    HTML
    <div id='hello'> <!-- 32px -->
        <div>안녕하세요!</div> <!-- 32px = 1em -->
    </div>

    CSS
    #hello { font-size: 2em; }
rem
- 문서의 최상위 요소(html)의 몇 배 인지를 크기로 설정

    HTML

    <html>
        <body>
            <div id='hello'>
                <div>안녕하세요!</div> <!-- 32px -->
            </div>
        </body>
    </html>

    CSS
    html { font-size: 2rem } /* 16 * 2 px */

'웹 개발' 카테고리의 다른 글

14. 웹 개발을 위한 기본 CSS 태그 모음 & 요약 정리 5  (0) 2024.04.12
13. 웹 개발을 위한 기본 CSS 태그 모음 & 요약 정리 4  (0) 2024.04.12
11.웹 개발을 위한 기본 CSS 태그 모음 & 요약 정리 3  (1) 2024.04.09
10. CSS 배경과 박스 모델  (0) 2024.04.09
과제- 뉴스기사 페이지 CSS 사용하여 꾸미기  (0) 2024.04.09

관련글

티스토리툴바