WeCode Replit HTML/CSS 과정을 공부한 뒤 내용을 요약한 표입니다.
| Subject | Contents | Keywords |
|---|---|---|
| [HTML] 1. Introduction to HTML | 1. HTML의 정의와 기능 2. HTML 파일 3. HTML tag | tag, content, attribute, element |
| [HTML] 2. HTML tags | HTML 파일의 구조, tag | <!DOCTYPE>, <html>, <head>, <body>, <h1>~<h5>, <span>, <p>, <a>, <div> |
| [HTML] 3. HTML Attributes | HTML tag의 속성 | <a href>, <img src>, id, class |
| [CSS] 4. Introduction to CSS | 1. CSS 적용 2. CSS 작성법 | 1. 인라인 스타일, style 태그, css 파일에 작성 2. tag: 태그이름, class: .클래스이름, id: #아이디이름 |
| [CSS] 5. font style | 폰트 스타일 | font family, font size, font weight, font style, color |
| [CSS] 6. 문구 스타일 | 텍스트 정렬, indent | text-align, text-indent,   |
| [CSS] 7. Margin과 Padding | margin과 padding을 이용한 스타일링 | margin, padding |
| [CSS] 8. Border | border를 이용한 스타일링 | border, text-decoration: underline |
| [CSS] 8-1. box-sizing | box-sizing: border-box의 필요성 | padding, width, box-sizing: border-box |
| [CSS] 9. 상속, 그룹 | CSS의 상속, 그룹 기능 | 상속(inheritance), 그룹(grouping) |
| [CSS] 10. CSS selector | CSS Selector 표현, 우선순위 | inline styling: 1000점, id: 100점, class: 10점, tag: 1점 |
| [HTML/CSS] 11. 이미지 | 이미지 넣는 법 | <img> 태그, CSS_background-image, background-size, width, height |
| [CSS] 12. Block vs Inline | Block, Inline 차이점, CSS로 display 속성 바꾸기 | display, block, inline, inline-block, none, float |
| [CSS] 12-1. margin auto | margin을 이용한 텍스트 정렬 | 가운데 정렬 -> margin: 0 auto; |
| [HTML/CSS] 13. List | li 태그 사용법 및 활용법 | ol, ul, li, list-style, li:first-child, li:last-child, li:nth-child |
| [HTML/CSS] 14. Table | Table 만들기 | table, thead, tbody, th, tr, td, border, rowspan, colspan, border-collapse: collapse |
| [HTML/CSS] 15. Input | 텍스트 입력창 만들기 | input, input type, textarea, hover |
| [CSS] 16. Position - absolute | Position - absolute, relative, fixed의 차이점 | position, absolute, relative, fixed |
| [CSS] 17. Position - fixed | Position: fiexed를 이용한 header 만들기 | position: fixed, top, left, right, bottom |
| [CSS] 18. 레이아웃 | 1. <div> 태그에 대해 2. 영역 구분 태그 3. 레이아웃 전략 | div, id, class, semantic element |
| [CSS] 18-1. float 기반 레이아웃 | float을 활용한 레이아웃 | float, left, right, none, clear, overflow: hidden |
| [CSS] 18-2. 레이아웃의 모든 것 | 블로그 미션 -> output | position 속성 - relative, absolute, fixed / inline, inline-block, block, float |
| [CSS] 19. Responsive Web | Responsive Web(반응형 웹), Media Query, SCSS에서 관리 쉽게 하기 | Responsive Web, Media Query, SCSS |
| [HTML] 20. Semantic Web, Semantic Tags | 블로그 미션 -> output | Semantic Web, Semantic Tags |
Front-end developer
오 벨로그로 표도 만들 수 있군요..?!