기록/새싹x코딩온

[새싹x코딩온] 웹 퍼블리싱 과정 2주차 - 1 | CSS - 문자 속성, 박스 모델 속성

루미미 2023. 6. 20. 19:59

CSS 가상 클래스 선택자

  • :first-child - 선택자가 형제 요소 중 첫째라면 선택, 선택자가 첫째가 아니라면 선택이 안됨
  • :last-child - 선택자가 형제 요소 중 막내라면 선택
  • :nth-child(n) - 형제 요소 중 (n)째라면 선택
  • :nth-of-type(n) - 요소 중에 (n)째라면 선택
  • :not(요소) - 선택한 요소를 제외

 

CSS 가상 요소 선택자

- 선택 된 요소의 앞, 뒤에 별도의 Content를 삽입하는 선택자

- 반드시  Content라는 속성을 사용

- 빈 값('')이라도 넣어주어야 적용이 됨

- 실제로 의미 없는 HTML 태그를 만들지 않고 요소 삽입이 가능하여 자주 사용

- 예를 들어 쇼핑몰 페이지에 메뉴에 Hot, 추천 등을 넣기 위해 별도의 태그를 삽입하는 것이 아니라 가상 요소 선택자를 활용하여 처리하면 편리함

  • ::before - 선택한 요소의 내부 앞에 내용(Content)을 삽입
  • ::after - 선택한 요소의 내부 뒤에 내용(Content)을 삽입

 

CSS 속성 선택자

- 지정한 특정 속성을 가지로 있는 태그를 선택하는 선택자

  • [속성] - 속성을 포함한 요소 선택
  • [속성="속성값"] - 속성을 포함하고 값이 속성값인 요소 선택

 

CSS 기본 속성

<글꼴, 문자>

font-weight

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

font-size

  • 16px - 기본 크기
  • 단위 - px, em, rem 등 단위로 지정

line-height

  • 숫자 - 요소의 글꼴 크기의 배수로 지정
  • 단위 - px, em, rem 등의 단위로 지정

font-family

- 웹 폰트로 글꼴을 설정할 수 있다.

 

color

- 글자의 색상을 설정할 수 있다.

 

text-align

  • left - 왼쪽 정렬 (기본값)
  • right - 오른쪽 정렬
  • center - 가운데 정렬

text-decoration

  • none - 장식없음
  • underline - 밑줄
  • line-through - 중앙선

 

<박스 모델>

display

  • block - 상자(레이아웃) 요소
  • inline - 글자 요소
  • inline-block - 글자 + 상자 요소
  • flex - 플렉스 박스 (1차원 레이아웃)
  • grid - 그리드 (2차원 레이아웃)
  • none - 보여짐 특성 없음, 화면에서 사라짐
  • 기타 - table, table-row, table-cell 등

 

inline 요소

- 글자를 만들기 위한 요소들

- 포함한 콘텐츠 크기만큼 자동으로 줄어든다.

- inline 요소 안에 block 요소를 넣을 수는 없다.

- margin이 가로 적용은 되지만 세로 적용은 안된다.

- padding은 가로만 적용이 되지만 세로는 배경색만 적용이 된다.

- inline 요소로는 a, span 등이 있다.

 

block 요소

- 상자(레이아웃)를 만들기 위한 요소들

- 요소가 수직으로 쌓인다.

- 가로 크기는 부모 요소의 크기만큼 자동으로 늘어난다.

- 세로 크기는 포함한 콘텐츠 크기만큼 자동으로 줄어든다.

- 가로 크기, 세로 크기를 조절할 수 있다.

- block 요소로는 h, p, ul, ol, li, div 태그 등이 있다.

 

inline-block 요소

- block 요소가 수직으로만 쌓이는 문제점을 해결하고자 나온 개념

- inline 요소와 block 요소의 특징을 합친 요소이다.

 

  inline block inline-block
기본 넓이 컨텐츠 만큼 부모의 넓이 컨텐츠 만큼
width, height 무시 적용 적용
가로 공간 차지 공유 독점 공유
margin 가로만 가로, 세로 전부
*세로 상쇄		 가로, 세로 전부
padding 가로만
*세로는 배경색만		 가로, 세로 전부 가로, 세로 전부

 

margin

- 요소의 외부 여백(공간)을 지정하는 속성

- 가로(세로) 너비가 있는 요소의 가운데 정렬에 활용할 수 있다.

- 음수를 사용할 수 있다.

  • 0 - 외부 여백 없음 (기본값)
  • auto - 브라우저가 여백을 계산
  • 단위 - px, em, vw 등 단위로 지정

padding

- 요소의 내부 여백(공간)을 지정하는 속성

  • 0 - 내부 여백 없음 (기본값)
  • 단위 - 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 - 뷰포트 세로 너비의 백분율

 

line-height

- 영역 요소 내부 컨텐츠 글자의 줄 높이

- box model의 크기 단위 적용 가능 (font에도 적용가능)

- 컨텐츠가 한 줄인 경우 box-height와 line-height를 동일하게 하면 세로 중앙 정렬 효과

 

border

- 요소 테두리 선을 지정하는 단축 속성

border: 선-두께 선-종류 선-색상;

 

border-radius

- 요소의 모서리를 둥글게 깎음

  • 0 - 둥글게 없음 (기본값)
  • 단위 - px, em, vw 등 단위로 지정

box-sizing

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

  • content-box - 요소의 내용(content)으로 크기 계산
  • border-box - 요소의 내용 + padding + border로 크기 계산

content-box

 

border-box

 

opacity

- 요소 투명도 조절

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

 

※ 요소를 숨기는 3가지 방법

 ● opacity(투명하게 만들기)

   - 모습만 숨기는 방법 / 속성 남음 / 자리 차지

 ● visibility : hidden

   - 모습과 속성을 숨기는 방법 / 자리 차지

 ● display : none

   - 그냥 없애 버리는 방법 / 자리도 사라짐

 

overflow

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

  • visible - 넘친 내용을 그대로 보여줌
  • hidden - 넘친 내용을 잘라냄
  • scroll - 넘친 내용을 잘라냄, 스크롤바 생성
  • auto - 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성