[HTML / CSS] 기초 정리

크로스 브라우징 : 여러 브라우저에서 동일한 사용자 경험을 줄 수 있도록 제작하는 기술, 방법

• 크로스 브라우징 이슈가 예전보다 조금씩 사라지고 있음

뷰포트 Viewport : 하나의 웹 페이지가 렌더링되는 구역

 

🔵 웹 이미지

• 비트맵 : 확대/축소 시 계단 현상, 정교하고 다양산 색상 표현가능 (jpg, png)
• 벡터 : 확대/축소에서 품질저하X, 용량 변화X, 정교한 이미지 표현하기 어려움 (svg)

Material Design

• JPG : 압축률이 좋음, 손실 압축(용량 쉽게 조절 가능)
• PNG : 비손실 압축, Alpha Channel 지원(투명한 부분 사용가능)
• GIF : 이미지 파일 내에 이미지 및 문자열 같은 정보들 저장, 8비트(256) 색상만 지원
• WEBP : 구글이 개발한 이미지 포맷, 손실/비손실 압축 지원, 애니메이션 지원, Alpha Channel 지원 (JPG, PNG, GIF 모두 대체 가능 / IE 지원 불가)
• SVG : 마크업 언어 기반의 벡터 그래픽을 표현하는 포맷, 해상도의 영향에서 자유로움, 파일 / 코드 삽입 가능

오픈소스 라이선스 : Apache License, MIT License, BSD License

Beerware

프로젝트 단위는 폴더

ctrl+alt+S : 모든 파일 저장

DOCTYPE : DTD = Document Type Definition, 마크업 언어에서 문서 형식 정의

head 태그 : 웹페이지에 보이지 않는 정보를 작성하는 범위

브라우저는 자동으로 index.html 파일을 찾음

• 브라우저 스타일 초기화

reset.css cdn

reset-css CDN by jsDelivr - A CDN for npm and GitHub

• emmet

<태그 Attribute속성="Value값">내용</태그>

<p>태그는 블록 요소

defer 속성 : script 요소에 HTML구조가 준비된 후 js를 해석하는 속성

 

🔵 선택자

• : 인접 형제 선택자 Adjacent Sibling Combinator

~ : 일반 형제 선택자 General Sibling Combinator

# tabindex 속성

탭 키를 이용해 focus 할 수 있는 순서 지정하는 속성 > Focus가 될 수 있는 요소 만들 수 있음

tabindex="-1"

하나의 페이지에서 focus는 한 요소에만 적용 가능

# 가상 클래스 선택자

• nth-child(n)

형제 요소 중 n번째인 것 선택

div:nth-child(2){...} div태그 중 2번째

• n은 0부터 시작 Zero-Based Numbering

div:nth-child(2n){...} div태그 중 짝수 번째

div:nth-child(2n+1){...} div태그 중 홀수 번째

div:nth-child(n+1){...} div태그 중 2번째부터 선택

• not()
• :not(span){...} span태그가 아닌 것 선택

🔵가상 요소 선택자 Pseudo-Elements

• .box::before{ content:"안녕";} 요소 내부 앞에 내용 삽입함 / 인라인 요소
• .box::after{ content:"안녕";} 요소 내부 뒤에 내용 삽입함 / 인라인 요소

🔵 inherit : 강제 상속

기본적인 폰트 사이즈는 16px

em : 폰트 사이즈가 기준

rem : 루트 폰트 사이즈가 기준

vw : 뷰포트 기준 가로 너비 / vh : 뷰포트 기준 세로 너비

margin : top right bottom left (시계방향)

dashed 파선

rgba(x,x,x,x) 빛의 삼원색 + 투명도(0~1사이의 값)

box-sizing : border-box; 가로 너비, 세로 너비를 그대로 유지하고 싶을 경우 사용 (요소+테두리+내부 여백 크기 다 고려)

flex 1차원 레이아웃

grid 2차원 레이아웃

opacity : 투명도, 0~1 사이의 소수점 숫자

font-style : 글자 기울기

font-weight : 글자 두께

line-height : 줄 두께(?)

font-family : 글꼴 계열 쓰기!!, 글꼴이름 띄어쓰기 있으면 ""로 묶기

sefit 바탕체 계열

sans-serif 고딕체 계열

monospace 고정너비 글꼴 계열, 가독성 높음

cursive 필기체 계열

fantasy 장식 글꼴 계열

text-align 텍스트 수평정렬

background-image:url("경로"); 기본적으로 바둑판식 정렬

background-repeat : no-repeat; 바둑판식 정렬되지 않도록

 

배경 이미지 스크롤

background-attachment:scroll;

background-attachment:fixed;

 

position

relative 요소 자신을 기준

absolute 위치상 부모 요소 기준 / block 요소로 바뀜

fixed 뷰포트 기준 / block 요소로 바뀜

sticky 스크롤 영역 기준

 

요소 쌓임의 조건

1. position 있는지
2. z-index 값 비교
3. html 쓰인 순서

display: flex / inline-flex;

flex-wrap : wrap; 줄바꿈

주축 정렬 방법 / 수평정렬

justify-content:flex-start;

justify-content:flex-end;

justify-content:center;

교차 축 여러 줄 한번에 정렬 방법 / 수직정렬

align-content: flex-start;

align-content: flex-end;

align-content: center;

교차 축 한 줄 정렬 방법

align-items : flex-start;

align-items: flex-end;

align-items: center;

main-axis 주축 / cross-axis 교차 축

order 기본값은 0, 숫자 작을수록 먼저

flex-grow 기본값은 0, flex item 증가 너비 비율

flex-shrink 기본값은 1, flex item 감소 너비 비율

flex-basis 공간 배분 전 기본 너비

전환

transition : 속성명 지속시간 타이밍함수 대기시간;

transition-property 기본값은 all

transition-duration 기본값은 0s / 필수 포함 속성

transition-timing-function 타이밍Easing 함수 지정

• ease 느림빠름느림
• linear 일정하게
• ease-in 느림빠름
• ease-out 빠름느림
• ease-in-out 느림빠름느림

transition-delay 기본값은 0s

변환

• 2D 변환 함수

translate(x,y) 이동 / translateX(x) / translateY(y)

scale(x,y) 크기

rotate(degree) 회전

skewX(x) 기울임 / skewY(y)

• 3D 변환 함수

perspective(n) 원근법

rotateX(x) 회전 / rotateY(y)

perspective 속성 vs perspective 함수

• 속성

관찰 대상의 부모에 적용

perspective: 600px

• 함수

관찰 대상에 적용

원근법 나타내는 함수 perspective()는 맨 앞에 작성해야함

transform: perspective(500px) rotateX(45deg);

skew() 마름모 만들기 / 기울임 추가

요소의 뒷면 보일지 말지

backface-visibility: hidden;

클래스 속성 작명법

BEM Block Element Modifier

요소__일부분 Underscore(Lodash) 기호로 요소의 일부분 표시

요소--상태 Hyphen(Dash) 기호로 요소 상태 표시

• position 값이 fixed, absolute는 가로너비가 최소한으로 줄어듦

일반적으로 블럭요소는 가로너비가 최대한 늘어날려고 함