HTML/CSS - Replit Sumarry Table

devmoonsh·2020년 8월 19일
1

HTML/CSS

목록 보기
5/5
post-thumbnail

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, &nbsp |
| [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 |

profile
Junior front-end developer

1개의 댓글

comment-user-thumbnail
2020년 8월 20일

오 벨로그로 표도 만들 수 있군요..?!

답글 달기