📌 웹과 HTML&CSS에서 놓치기 쉬운 개념들 css 속성과 배치, 정렬, 전환, 변환!

오늘은 CSS의 속성들에 대해 학습했다. 정말 많은 속성들과 개념들이 있었는데 그중에 중요한 것들은 미리 학습해두는 것이 좋다고 생각한다. 물론 직접 웹페이지를 만들면서 학습할 수도 있겠지만 그러면 기능들을 명확하게 알지 못하기 때문에 나중에 활용하지 못하게 된다.

그래서 조금 비효율적이더라도 대부분의 기능들을 미리 학습하고 개념들을 이해하는 것이 도움이 될 것 같다. 전환, 변환, 위치 조정 등과 같은 것은 속성들은 단순이 외우는 것이 아니라 이해가 필요하기 때문이다(은근히 어렵기도 하다).

그럼 시작해보자! 🏃‍

CSS 속성(Properties)

개요

• 박스 모델
• 글꼴, 문자
• 배경
• 배치
• 플렉스(정렬)
• 전환
• 애니메이션
• 변환
• 띄움
• 그리드
• 다단
• 핕러

박스 모델

• width, height - 요소의 가로/세로 너비

  • 기본값: auto - 브라우저가 너비를 계산
    • 인라인요소 - 가로/세로 너비가 자동으로 줄어듬
    • 블록요소 - 가로 너비가 자동으로 늘어남, 세로 너비는 자동으로 줄어듬
  • 단위 - px, em, vw 등

• max-width, max-height - 요소가 커질 수 있는 최대 가로/세로 너비

  • 기본값: none - 최대 너비 제한 없음
  • 단위 - px, em, vw 등

• min-width, min-height - 요소가 작아질 수 있는 최소 가로/세로 너비

  • 기본값: 0 - 최소 너비 제한 없음
  • 단위 - px, em, vw 등

✏️ 단위

• px - 픽셀
• % - 상대적 백분율
• em - 요소의 글꼴 크기
• rem - 루트 요소(html)의 글꼴 크기
• vw - 뷰포트 가로 너비의 백분율
• vh - 뷰포트 세로 너비의 백분율

• margin - 요소의 외부 여백(공간)을 지정하는 단축 속성
  • 기본값: 0 - 외부 여백 없음
  • auto: 브라우저가 여백을 계산 →요소의 가운데 정렬에 활용
  • 단위: px, em, vw 등 → 마이너스 사용 가능

📌 margin의 단축 속성

• margin: top, right, bottom, left ;
• margin: top, bottom left, right ;
• margint: top left, right bottom ;
• margint: top right nottom left ;

📌 margin의 개별 속성

• margin-top ;
• margin-bottom ;
• margin-left ;
• margint-right ;

• padding - 요소의 내부 여백(공간)을 지정하는 단축 속성 → 요소의 크기가 커짐
  • 기본값: 0 - 내부 여백 없음
  • 단위: px, em, vw 등
  • %: 부모 요소의 가로 너비에 대한 비율로 지정

📌 padding 개별 속성

• padding: top, right, bottom, left ;
• padding: top, bottom left, right ;
• padding: top left, right bottom ;
• padding: top right nottom left ;

📌 padding의 개별 속성

• padding-top ;
• padding-bottom ;
• padding-left ;
• padding-right ;

• border: 선-두께 선-종류 선-색상; - 요소의 테두리 선을 지정하는 단축 속성 → 요소의 크기가 커짐

  • 기본값: medium - 기본값이 있긴 하지만 애매해서 직접 단위로 지정하는 것이 좋음
  • 단위: px, em, %
  • 방향으로 개별 속성 설정 가능

• border-style - 요소 테두리 선의 종류

  • 기본값: none - 선 없음
  • solid: 실선(일반 선)
  • dashed: 파선

• border-color - 요소 테두리 선의 색상을 지정하는 단축 속성

  • 기본값: 검정색
  • 색상: 선의 색상
  • transparent: 투명

✏️ 색상 표현

• 색상 이름
• Hex 색상코드 - 16진수 색상(Hexadecimal Colors) #000, #FFFFFF
• RGB - 빛의 삼원색 rgb(255, 255, 255)
• RGBA - 빛의 삼원색 + 투명도(0, 0, 0, 0.5)

• border-radius - 모서리를 둥글게 깎음

  • 기본값: 0 - 둥글게 없음
  • 단위: px, em, % 등
  • border-radius: 10px ; → 반지름이 10px인 원만큼 잘라냄
  • 방향으로 개별 속성 설정 가능(시계방향)

• box-sizing - 요소의 크기 계산 기준을 지정

  • 기본값: content-box - 요소의 내용으로 크기 계산
  • border-box - 요소의 내용 + padding + border의 합으로 크기 계산 → 여러 속성을 넣지만 크기는 키우고 싶지 않을 때!
    

• overflow - 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성

  • 기본값: visible - 넘친 내용을 그대로 보여줌
  • hidden - 넘친 내용을 잘라냄
  • auto - 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성
  • (scroll) - 넘친 내용을 잘라냄, 스크롤바 생성(가로, 세로 둘 다 생김)
    
  • 개별 속성
    • overflow-x
    • overflow-y

• display - 요소의 화면 출력(보여짐) 특성

  • block 기본값: 상자(레이아웃) 요소
  • inline 기본값: 글자 요소
  • inline-block 기본값: 글자 + 상자요소
  • flex: 플렉스 박스(1차원 레이아웃) - 수평이든 수직이든 하나의 축으로 레이아웃 정렬
  • gird: 그리드(2차원 레이아웃) - x축/y축, 행과열 두개의 차원
  • none: 보여짐 특성 없음, 화면에서 사라짐

• opacity - 요소 투명도

  • 기본값: 1 - 불투명
  • 0~1: 0부터 1사이의 소수점 숫자
    

글꼴(서체)

• font-size - 글자의 크기

  • 기본값: 16px
  • 단위: px, em, rem 등

• font-weight - 글자의 두께(가중치)

  • 기본값: normal, 400 - 기본 두께
  • bold: 700 - 두껍게
  • 100 ~ 900: 100단위의 숫자 9개, normal과 bold 이외의 두께

• font-style - 글자의 기울기

  • 기본값: normal - 기울기 없음
  • italic: 이텔릭체

• font-family - 글꼴(서체) 지정 → (후보를 정하는 이유: 글꼴은 여러 이유로 사용할 수 없는 경우가 많음)

  • 글꼴1, “글꼴2”, ... 글꼴계열 ; → (글꼴 이름의 띄어쓰기가 들어가는 경우 따옴표로 묶어줘야 함)

• line-height: 한 줄에 높이, 행간의 유사, 글자는 한 줄의 가운데로 정렬(수직 가운데)

  • 숫자: 요소의 글꼴 크기의 배수로 지정 - 1.4 → 글꼴 크기의 1.4배 → (배수로 입력하는 것이 좋음)
  • 단위: px, em, rem, % 등

글꼴(서체) 종류

• serif - 바탕체 계열
• sans-serif - 고딕체 계열 →(가장 많이 씀)
• monospace - 고정너비(가로폭이 동등) 글꼴 계열
• culsive - 필기체 계열
• fantasy - 장식 글꼴 계열

문자

• color - 글자의 색상

  • 기본값: rgb(0,0,0) - 검정색
  • 색상: 기타 지정 가능한 색상

• text-decoration: 문자의 장식(선)

  • 기본값: 장식 없음
  • underline: 밑줄
  • overline: 윗줄
  • line-through: 중앙 선

• text-align: 문자의 정렬 방식

  • 기본값: 왼쪽 정렬
  • right: 오른쪽 정렬
  • center 가운데 정렬

• text-indent - 문자 첫 줄의 들여쓰기 → 음수 사용 가능

  • 기본값: 0 - 들여쓰기 없음
  • 단위: px, em, rem emd

배경

• background-color - 요소의 배경 색상

  • 기본값: 투명
  • 색상: 지정 가능한 색상

• background-image - 요소의 배경 이미지 삽입

  • 기본값: 이미지 없음
  • url(”경로"): 이미지 경로

• background-repeat

  • 기본값: repeat - 이미지를 수직, 수평 반복
  • repeat-x: 이미지를 수평 반복
  • repeat-y: 이미지를 수직 반복
  • no-repeat: 반복 없음

• background-position - 요소의 배경 이미지 위치

  • 기본값: 0% 0% → 브라우저의 0, 0은 왼쪽 상단
  • 방향: top, botton, left, right, center 방향 → 방향1 방향2
  • 단위: px, em rem 등 → x축, y축

• background-size - 요소의 배경 이미지 크기 → x y 중 하나만 입력해도 자동으로 비율에 맞게 나머지 값 맞춰줌

  • 기본값: 이미지의 실제 크기
  • 단위: px, em, rem
  • cover: 비율을 유지, 요소의 가로/세로 중 더 넓은 너비에 맞춤
  • contain: 비율을 유지, 요소의가로/세로 중 더 짧은 너비에 맞춤

• background-attachment - 요소의 배경 이미지 스크롤 특성

  • 기본값: scroll - 이미지가 요소를 따라서 같이 스크롤
  • fixed: 이미작 뷰포트에 고정, 스크롤X
    

배치

→ 요소를 배치할 때는 기준을 정하고, 그리고 위치를 선언

• position - 요소의 위치 지정 기준(위치 상 부모요소와 구조 상 부모요소가 다를 수 있음)

  • 기본값: static(기준 없음)

  • reative: 요소 자신을 기준 → 변경 전 자리는 안보이지만 채워져 있음, 위치 변경된 것은 허상임, 잘 쓰이지 않음
    

  • absolute: 위치 상 부모 요소를 기준 → 위치 상 부모 요소를 꼭 확인해야 함, 주변 요소와의 상호작용이 무너짐, 공중으로 붕 뜸, 부모 요소의 포지션 값이 없으면 뷰포트를 위치 상 기준으로 함(부모 요소는 static인 것과 동일)
    

  • fixed: 뷰포트(브라우저)를 기준 → 주변과 상호작용X, 공중에 붕 뜸, 항상 화면에 고정됨

  • (sticky: 스크롤 영역 기준)

• top, bottom, left, right - 요소의 각 방향별 거리 지정

  • 기본값: 브라우저가 계산
  • 단위: px, em, rem 등

✏️ 요소 쌓임 순서(Stack order)
(→ 순서대로 다 만족해야 함, 3번이 젤 높다고 위에 쌓이지 않음)

• 어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정

1. 요소에 psition 속성의 값이 있는 경우 위에 쌓임(기본값 static 제외) → relatice, absolute, fixed
2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임
3. 1번과 2번 조건이 같은 경우, HTML의 다음 구조일 수록 위에 쌓임 → HTML의 구조가 더 나중에 작성될 수록

*cf) z-index의 기본값: 0*

• z-index - 요소의 쌓임 정도를 지정
  • 기본값: 부모 요소와 동일한 쌓임 정도, 0
  • 숫자: 숫자가 높을 수록 위에 쌓임

✏️ Position 값 설정과 display

• position 속성의 값으로 absolute, fixed가 지정된 요소는 display 속성이 block으로 변경됨

플렉스(정렬) - 1차원 레이아웃

• 주로 수평 정렬하는데 쓰임

flex-container
flex-item

• display - Flex Container의 화면 출력(보여짐) 특성

  • flex: 블록 요소와 같이 Flex Container 정의
  • inline-flex: 인라인 요소와 같이 Flex Container 정의

• flex-direction - 주 축(Main-axis)을 설정

  • 기본값: row 행 축(좌 ⇒ 우)
  • row-reverse: 행 축(우 ⇒ 좌)
  • column: 열 축(위 ⇒ 아래)
  • column-reverse: 열 축(아래 ⇒ 위)
    

• flex-wrap - Flex Items 묶음(줄 바꿈) 여부
  • 기본값: nowrap - 묶음(줄 바꿈) 없음
  • wrap: 여러 줄로 묶음
    

• justify-content - 주 축의 정렬 방법
  ⇒ 수평 정렬할 때 자주 쓰임

  • 기본값: flex-start - Flex Items를 시작점으로 정렬
  • flex-end: Flex Items를 끝점으로 정렬
  • center: Flex Items를 가운데 정렬
  • space-between: 각 Flex Items 사이를 균등하게 정렬
  • space-around: 각 Flex Items의 외부 여백을 균등하게 정렬

• align-content - 교차 축의 여러 줄 정렬 방법
  → 한 줄일 때 작동 안됨

  • 기본값: stretch - Flex Items를 시작점으로 정렬 → container의 items을 늘림
  • flex-start - Flex Items를 시작점으로 정렬
  • flex-end - Flex Items를 끝점으로 정렬
  • center: Flex Items를 가운데 정렬
  • space-between: 각 Flex Items 사이를 균등하게 정렬
  • space-around: 각 Flex Items의 외부 여백을 균등하게 정렬

• align-items - 교차 축의 한 줄 정렬 방법 → 수직 정렬할 때 주로 쓰임

  • 기본값: stretch - Flex Items를 시작점으로 정렬 → container의 items을 늘림
  • flex-start - Flex Items를 시작점으로 정렬
  • flex-end - Flex Items를 끝점으로 정렬
  • center: Flex Items를 가운데 정렬
  • baselind: Flex Items를 각 줄의 문자 기준선에 정렬

• order - Flex Item의 순서

  • 기본값: 0 - 순서 없음
  • 숫자: 숫자가 작을 수록 먼저

• flex-grow - Flex Items의 증가 너비 비율
  → item의 사이즈가 있어도 비율에 따라 조정됨

  • 기본값: 0 - 증가 비율 없음
  • 숫자: 증가 비율

• flex-shrink - Flex Item의 감소 너비 비율

  숫자 0 →감소 너비를 사용하지 않겠다, 아이템들의 사이즈 안바뀜

  • 기본값: 1 - Flex Container 너비에 따라 감소 비율 적용 → 그래서 컨테이너가 작아지면 그에 맞춰 item도 작아짐
  • 숫자: 감소 비율

• flex-basis - Flex Item의 공간 배분 전 기본 너비
  → 0으로 설정하는 경우가 많음(증가/감소 너비에 맞추기 위해)

  • 기본값: auto - 요소의 content 너비
  • 단위: px, em, rem 등

전환

transition - 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성
→ transition: 속성명 지속시간 타이밍함수 대기시간 ;

• transition-property - 전환 효과를 사용할 속성 이름을 지정

  • 기본값: all - 모든 속성에 적용
  • 속성이름: 전환 효과를 사용할 속성 이름 명시

• transition-duration - 전환 효과의 지속시간을 지정

  • 기본값: 0s - 전환효과 없음
  • 시간: 지속시간(s)을 지정

• transition-timing-function - 전환 효과의 타이밍(Easing) 함수를 지정

• transition-delay - 전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정
  → 지속시간 뒤에 설정

  • 기본값: 0s - 대기시간 없음
  • 시간: 대기시간(s)을 지정

변환

• 요소의 변환 효과

transform: 변환함수1 변환함수2 변환함수3 ... ;
transform: 원근법 이동 크기 회전 기울임 ;

• 원근법을 적용한 rotate 함수

• skew 함수

• perspective - 하위 요소를 관찰하는 원근 거리를 지정
  → 함수가 아니라 속성!
  → 함수보다 속성이 더 권장됨
  

• backface-visibility - 3D 변환으로 회전된 요소의 뒷면 숨김 여부

  • 기본값: visible - 뒷면 보임
  • hidden: 뒷면 숨김