GYM CODING 웹 개발 입문

무료 강의 짐코딩... 👍🏻설명도 자세하고 비전공자도 어렵지 않게 들을 수 있을 것 같다. 심지어 강의 교안 공유까지...............

Emmet으로 HTML 빠르게 가보자 가보자

<글꼴 태그 `h1`~`h6` `p` `hr` `br` `i` `em` `b` `strong`> <목록 태그 `ol` `ul` `li` `dl` `dt` `dd` > <표 태그 `table` `tr` `th` `td`> 이 정도는 진짜 알고 쓰자

Semantic = 의미론적이란 사전적 의미를 가진다. Semantic 태그의 이점과 요소 그리고 시맨틱 유무의 차이를 알아보자. none Semantic vs Semantic

Default Display Value inline VS Block Element div, span 태그

절대주소/상대주소/이미지태그<img>/비디오태그<video>/오디오태그<audio>/하이퍼링크<a href>

Form 미쳤다

Head에는 link base style meta script !~

Inline / Internal / External Style 중 External Style을 습관화 합시다잇 (유지보수 용이, 용량도 적음 👍🏻)

꾸밀 대상을 선택하는 선택자에 대해 살펴보자. 타입 클래스 ID 속성 그룹 결합자

글꼴 사이즈 단위 정렬 색상 기타속성

[키워드] margin width height border border-radius border-sizing(content-box/border-box)

border-collapse / padding / background-color / tr:nth-child / tr:hover

#Block #Inline #Inline-block #navbar

✔️ float #none #left #right #inherit #initial ✔️clear #none #left #right #both

#static #relative #sticky #absolute #fixed

#background-color #background-image #background-size #linear-gradient #radial-gradient

가상클래스 #:link #:visited #:active #:hover #:focus #:nth-child #:not(selector)... 가상 요소 #::first-letter #::first-line #::before #::after #::selec..

Transform : 회전, 크기 조절, 기울이기, 이동 효과 등⭐ display가 block이나 inline-block일 때만 사용 가능 ⭐