Real Front-End Series [Web(Front) - CSS 2]

display와 flex

display

display 속성

• 웹페이지의 레이아웃을 결정하는 중요한 속성

속성명	설명
display	요소의 표시 방식을 지정하는 속성 기본형: display: 표시방식; [Block 계열] • block : 블록 레벨 요소 • inline : 인라인 요소 • inline-block : 인라인-블록 요소 [Box 계열] • flex : 플렉스 박스 (1차원 레이아웃) • grid : 그리드 (2차원 레이아웃) [기타] • none : 요소를 표시하지 않음 • contents : 컨테이너 자체는 사라지고 자식만 표시 • list-item : 목록 항목처럼 표시 • …

block과 line, inline-block

구분	block	inline-block	inline
줄바꿈	항상 새 줄에서 시작	줄바꿈 없음, 다른 요소와 같은 줄	줄바꿈 없음, 다른 요소와 같은 줄
너비	사용 가능, 지정하지 않으면 100%	사용 가능, 기본은 내용물 너비만큼	적용 안 됨, 내용물 너비만큼만 적용
높이	사용 가능, 내용을 기준으로 자동 설정	사용 가능, 기본은 내용물 높이만큼	적용 안 됨, 내용물 높이만큼만 적용
패딩	상하좌우 모두 적용	상하좌우 모두 적용	좌우만 적용되고 상하는 시각적으로만 적용 (레이아웃 영향 없음)
마진	상하좌우 모두 적용 (상하 margin collapse 발생)	상하좌우 모두 적용	좌우만 적용되고 상하는 무시
특징	div, p, h1~h6 등이 기본값	button, input 등이 기본값	span, a, strong 등이 기본값

list를 이용한 nav menu 생성

• 일반적으로 nav menu 구성을 위해 list 사용
  • semantic하고 구조적인 HTML 구성 가능
  • 중첩 메뉴 구현 용이
  • 반응형 디자인 적용 용이

float와 clear

block 요소의 가로 방향 배치

• 공간 분할 tag인 div는 block요소인데 실제 화면은 가로 방향 배치가 필요한 경우가 많음
• inline-block을 사용하면 크기를 지정하면서 가로 배치가 가능하지만...
  • 태그 사이에 개행 문자 삽입에 따른 미세한 공백(4px) 문제
    • 코드 포맷까지 신경을 써야 함.
  • 부모의 text-align 속성에 레이아웃이 이동
  • 이처럼 레이아웃이 복잡해지면 고려할 요소가 많으므로
  • 단순히 가로 배치를 위해서 inline-block 사용 X

float

• 원래 의도는 이미지 주변에 텍스트 배치이며 레이아웃 구성 측면에서 block 요소의 가로 배치에도 사용됨
  • 최근에는 레이아웃 구성을 위해 flex, grid등이 사용되기 때문에 코드 유지 보수를 위해서만 학습 권장

속성명	설명
float	요소를 띄워서 텍스트 흐름에서 벗어나게 하는 속성 기본형: float: 방향; 값: none (띄우지 않음), left (왼쪽으로 띄움), right (오른쪽으로 띄움) 특징 • 요소가 일반 흐름(normal flow)에서 벗어남 • 띄워진 block 요소는 상하 margin collapse가 발생하지 않음 • 띄워진 요소 주변을 텍스트/인라인 요소가 감싸게 됨

clear

• float을 중지시키는 속성
  • 요소가 float된 요소의 주변에 배치되지 않고 다음줄로 내려가게 됨

속성명	설명
clear	float를 중지시키는 속성 기본형: clear: 방향; 값: none (양쪽 float 모두 허용), left (왼쪽 float 해제), right (오른쪽 float 해제), both (양쪽 모두 해제) 특징 • 새로운 일반 흐름(normal flow)을 시작하게 함

flex

flexible box model

• element를 효율적으로 배치, 정렬, 분산할 수 있는 1차원 레이아웃
• 부모 컨테이너(flex container)에서 자식 아이템(flex item)을 배치하는 방법 정의
  • 부모 컨테이너의 display 속성이 flex
• flex item들이 배치된 방향의 축을 main axis(메인 축), 교차하는 축을 cross axis(교차 축)이라고 함
  • flex item의 배치 방향에 따라 가로, 세로 방향이 변경됨

flex container에게 적용되는 속성

속성명	설명
display	컨테이너 정의 (컨테이너가 다른 요소와 어울리는 방식) 기본형: display: flex; 또는 display: inline-flex; 값: flex(블록), inline-flex(인라인)
flex-direction	주축 방향 설정 기본형: flex-direction: 방향; 값: row, row-reverse, column, column-reverse
flex-wrap	공간이 부족할 때 줄바꿈 설정 기본형: flex-wrap: 방식; 값: nowrap(기본값), wrap, wrap-reverse
justify-content	주축 방향 정렬 기본형: justify-content: 정렬방식; 값: flex-start, flex-end, center, space-between, space-around, space-evenly
align-items	교차축 정렬 기본형: align-items: 정렬방식; 값: stretch(기본값), flex-start, flex-end, center, baseline
align-content	wrap되어 여러 줄일 경우 교차축 정렬 기본형: align-content: 정렬방식; 값: stretch(기본값), flex-start, flex-end, center, space-between, space-around
gap	flex container 내 item 사이의 간격 지정 기본형: gap: 크기; 값: 길이(px 등), row-gap, column-gap 별도 설정 가능

flex item에게 적용되는 속성

속성명	설명
flex-grow	남은 공간을 차지할 비율 지정 (stretch 개념) 기본형: flex-grow: 숫자; 값: 0 이상 정수 (기본값 0)
flex-shrink	공간이 부족할 때 줄어들 비율 지정 기본형: flex-shrink: 숫자; 값: 0 이상 정수 (기본값 1)
flex-basis	주축 방향 기본 크기 지정 (width/height 재정의 개념) 기본형: flex-basis: 크기; 기본값: auto ※ 일반 width, height보다 우선순위가 높음
flex	grow / shrink / basis 단축 속성 기본형: flex: grow shrink basis; 예: flex: 0 1 auto; (기본값)
align-self	교차축 방향으로 개별 item 정렬 기본형: align-self: 정렬방식; 값: auto, stretch, flex-start, flex-end, center, baseline
order	flex item의 배치 순서 지정 (낮은 번호부터 배치) 기본형: order: 숫자; 기본값: 0

기타

none

• html 요소를 렌더링 하지 않음, 즉 렌더트리에 구성되지 않음
• 일반적으로 JavaScript 이벤트를 통해 요소를 교체할 때 사용
• 유사상품 : visibility: hidden;
  • 렌더트리에 구성되며 단지 보이지 않음.

position

position

position

• 요소를 문서 내에 배치하는 방법을 지정하는 속성

속성명	설명
position	요소의 위치 지정 방법 설정 기본형: position: static | relative | absolute | fixed | sticky; 값: static(기본값), relative(상대위치), absolute(절대위치), fixed(고정위치), sticky(스크롤 고정)
top, right, bottom, left	요소의 위/오른쪽/아래쪽/왼쪽 위치 지정 (음수는 반대방향) 기본형: [방향속성]: auto | <length> | <percentage> ; 값: auto(기본값), 길이값(px, em 등), 백분율(%)

position 속성

static

• 기본 속성으로 일반적인 문서 흐름에 따라 배치
  • block 요소는 top->bottom, inline 요소는 left->right
• 다른 위치 속성 (top, right, bottom, left, z-index)에 영향을 받지 않음.

relative

• 일단 요소를 static 하게 배치 후
• 자신의 원래 위치에서 top, bottom, left, right 만큼 이동
• 다른 요소는 원래 위치를 차지하고 있음

absolute

• top, left 등은 요소의 상위 요소 중 "위치가 설정된 즉 static이 아닌 조상 요소"를 기준으로 배치
  • 대상이 없다면 최종적으로 body 태그를 기준으로 배치
  • Top, left 등이 없다면 그냥 부모 위치 기준
• 문서 흐름에 제거되면 다른 요소의 위치에 영향을 주지 않음
• width를 따로 지정하지 않으면 내용물 만큼만 위치를 차지함

fixed

• 요소를 뷰포트 기준으로 특정 위치에 고정
  • 스크롤을 하더라도 항상 같은 위치에 고정되며 문서 흐름에서 제거됨
  • absolute와 마찬가지로 block 요소의 width는 content로 한정 - 적절한 width 지정 필요

기타

기타 속성

속성명	설명
visibility	요소를 화면에 보이거나 숨기기 위해 사용 기본형: visibility: 값; 값: visible, hidden
z-index	요소의 쌓임 순서 지정 (높은 숫자가 위에 배치) 기본형: z-index: auto | <integer> ; 값: auto(기본값), 정수값(음수/양수)

z-index와 visibility

• .modal과 .modal-backdrop은 평소에는 숨겨져 있다가 "Show Modal"이 클릭되면 보임 - visibility
• 이때 z-index를 이용해서 다른 요소 위에 쌓이므로 전체적인 layout에는 영향을 주지 않음

반응형 웹

반응형 웹

반응형 웹이란?

• 디바이스의 종류에 따라 페이지의 레이아웃 등이 자동으로 재조정 되는 것
  • 웹 요소를 디바이스에 맞게 재배치하고 각 요소의 표시 방법만 변경
  • 내용을 수정하지 않고 한 페이지로 다양한 디바이스/환경에 대응

미디어 쿼리

미디어 쿼리

• 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 적용하는 방법으로 특정 미디어에 대해 특정 CSS 적용
• 기본 형태
  @media 미디어 유형 [ [and/or/not] 조건]...

속성 값	설명
미디어 유형	all | print | screen | tv | aural | braille | handheld | projection | tty | embossed
and / or / not	추가적인 조건 연결

• 주요 조건

속성 값	설명
width, min-width, max-width	화면의 너비
height, min-height, max-height	화면의 높이
device-width, min-device-width, max-device-width	장치의 너비
device-height, min-device-height, max-device-height	장치의 높이
orientation	장치의 방향 (landscape | portrait)

조건 활용

• viewport 크기 및 방향에 따른 CSS 처리
  • 미디어 쿼리 종단점(break point : 서로 다른 CSS를 적용할 화면의 크기)에 따라 처리
  • 일반적인 디바이스의 크기 확인
• mobile first
  • 일반적으로 모바일에서 제약 사항이 많기 때문에 '모바일' -> '데스크톱' 방향으로 속성 재정의
  • 따라서 가장 낮은 단계는 특별히 @media를 지정하지 않음

/* 스마트폰 가로 & 테블릿 세로 : 최소 481px */
@media only screen and (min-width : 481px) { ... }

/* 태블릿 가로 & 작은 랩탑 : 최소 769px */
@media only screen and (min-width : 769px) { ... }

/* 일반 데스크톱 : 최소 1280px */
@media only screen and (min-width : 1280px) { ... }