HTML/CSS 정리

html, css 정의 / html 기본 템플릿/기본 태그 / 스타일 넣는 방법 / 태그 선택하여 스타일 넣는 방법

자주 사용하는 네모 박스디자인 css 속성 / margin 과 padding / 간단한 웹 레이아웃 만들기

selector 문법 / 자주 사용하는 a 태그 CSS 속성 / 자주 사용하는 배경(background) CSS 속성 / margin collapse effect / position 속성 사용하기 / 레이아웃 배치 / width 속성 / 자주 사용하는 input,속성

table 태그 / pseudo-class(의사-클래스) / 코드 양을 줄이는 CSS 작성법 (OOCSS) / class 작명에 도움이 되는 작명방식 (BEM)

VSCODE 꿀팁 ! / 반드시 head 태그에 들어갈 내용 / Font / 자주 사용하는 아이콘 fontawesome / 레이아웃 : FlexBox (박스 가로 배치 쉬움) / 반응형 레이아웃

animation(애니메이션) / transition

간단한 웹사이트 제작(포트폴리오)

간단한 웹사이트 제작(포트폴리오)

DOM / Shadow DOM

scss : css에 Preprocessor(전처리언어) / :root : 전역 css 변수 / css 사칙연산 / :root(전역CSS변수) 와 calc() 계산식 함수 동시에 사용

scss를 활용한 간단한 디자인 / 리스트 만들기 / alert 박스 만들기

애니메이션(animation) / transform / 브라우저가 그림그리는 순서 / transform 빠른 이유 / transform 세부 속성 / ANY-WAY 애니메이션 / 좌우로 흔들리는 애니메이션 / 회전 + 크기 증가 / 슬라이드 되는 메뉴

레이아웃 : grid (격자 레이아웃) / grid로 레이아웃 만드는 방법 / 반응형 grid 레이아웃 / position : sticky

CSS 3D animation : 종이처럼 뒤집히는 프로필사진 만들기