HTML/CSS 기본 26일차

2819 단어 HTML/CSS 기본프론트엔드 스쿨HTML/CSS 기본

📌 font 관련 속성

🧃 text-align

  • block요소에 적용 가능

🧃 text-indent

  • 첫번째 줄 앞부분 들여쓰기
  • 자식에게 상속됨
  • block 요소에만 적용
text-indent: 20px; or 50%; (전체 가로의 절반)

🧃 text-decoration

  • css 단축속성 shorthand

  • underline, color, style, thickness 순서는 상관없음

  • underline
    overline 글씨 위 줄
    line-through 글씨 중간, 취소선

  • thickness
    solid 실선
    double 두줄
    dotted 점선
    dashed 긴 점선
    wavy 물결

text-decoration: line-through red 2px dotted;

🧃 word-break

  • break-all: 영어, 자동 줄바꿈
  • keep-all: 한중일, 스페이싱없으면 부모 뚫고 나옴

🧃 text-transform

  • 한글에는 적용X
  • 몇가지 언어에만 한정적으로 적용
  • 눈에 보이는 스타일만 변경
  • uppercase 대문자화
    lowercase 소문자화
    capitalize 단어의 앞글자 대문자

📌 상대길이, 절대길이

  1. 상대길이
    a. 글꼴 상대길이 - em, rem
    b. 뷰포트 백분율길이 - vw, vh

  2. 절대길이 - px..

  • px 절대길이 단위
    font-size 를 설정할 땐 접근성 문제 때문에 상대길이를 사용 (확대시 브라우저 설정을 먹지 않고 계속 절대길이로 고정되어 있음)

🧃 상대길이 단위 em

  • 1em = 부모의 font-size
  • % 퍼센트랑 같음

🧃 상대길이 단위 rem

  • 1rem = root의 font-size
  • root는 <html>의 <body>를 이야기함
    =브라우저에 설정된 폰트 사이즈

🧃 상대길이 단위 vw

  • viewport width
  • 뷰포트의 길이를 100으로 두고 50vw -> 너비의 절반
  • 디바이스에 따라서 반응형으로 웹사이트를 만들떄 유용

🧃 상대길이 단위 vh

  • viewport height

뷰포트?
브라우저에서 웹사이트를 볼 수 있는 크기

🧃 상대길이 vmin

  • 가로 세로 중에 더 짧은 쪽

🧃 상대길이 vmax

  • 가로 세로 중에 더 긴 쪽
  • 화면이 세로모드, 가로모드일 때 마다 다르게 정해짐
  • 반응형 웹사이트 중에서 가로, 세로모드를 대응해야하는 일이 있을 때 사용

🧃 퍼센트

  • 100%에 해당하는 기준 = 부모의 해당 값

📌 함수 표기법

🧃 calc()

  • 여러개의 단위를 섞어서 계산가능
  • 나누기, 곱하기는 숫자로만
calc(100% - 80px)

🧃 min()

min(100%, 500px)
  • 두개 값중에 작은 값 선택됨
  • 화면이 작을 땐 100%가 더 작은 값으로 선택되지만 화면을 늘리면 500px이 작은 값이 되고 이 이상 안늘어남

🧃 max()

min(100%, 500px)
  • 두개 값중에 큰 값 선택됨
  • 화면이 클 땐 100%가 더 큰 값으로 선택되지만 화면을 줄이면 500px이 더 큰 값이 되고 화면을 더 줄여도 500px보다 안작아짐
  • 익스플로러는 지원X
[javascript] undefined / undeclared / null의 차이

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage