learn-html-css/index.html at main · dlgkdud4759/learn-html-css · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!doctype html>
<html lang="ko-KR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>멋사 프론트엔드 부트캠프 15기 - 이하영</title>
    <link rel="shortcut icon" href="/public/favicon/likelion.ico" type="image/x-icon" />
    <link rel="icon" href="/public/favicon/likelion.svg" />
    <link rel="preload" as="font" href="/public/font/suit/SUIT-Variable.woff2" />
    <link rel="stylesheet" href="/public/font/suit/SUIT-Variable.css" />
    <link rel="stylesheet" href="/src/common/index.css" />
    <link rel="stylesheet" href="/src/common/main.css" />
    <base href="/src/html/" target="_blank" />
  </head>
  <body>
    <h1>HTML/CSS</h1>
    <h2>HTML</h2>
    <ul>
      <!-- 01-basic-structure.html 파일은 <base> 요소의 경로를 기준으로 연결 -->
      <li><a href="./01-basic-structure.html">HTML 기본 구조</a></li>
      <li><a href="/src/html/02-heading-paragraph.html">제목과 단락</a></li>
      <li><a href="/src/html/03-image-figure.html">이미지와 피규어</a></li>
      <li><a href="/src/html/04-anchor.html">하이퍼 링크</a></li>
      <li><a href="/src/html/05-unordered-ordered-list.html">비순차, 순차 목록</a></li>
      <li><a href="/src/html/06-definition-list.html">정의형 목록</a></li>
      <li><a href="/src/html/07-phrasing-element.html">어휘 요소들</a></li>
      <li><a href="/src/html/08-blockquote-br.html">인용문과 줄바꿈</a></li>
      <li><a href="/src/html/09-table.html">테이블 관련 요소</a></li>
      <li><a href="/src/html/10-container-element.html">컨테이너 요소</a></li>
      <li><a href="/src/html/11-section-main.html">섹션과 메인 요소</a></li>
      <li><a href="/src/html/12-text-level-element.html">텍스트 레벨 요소</a></li>
      <li><a href="/src/html/13-address.html">address 요소</a></li>
      <li><a href="/src/html/14-picture-source.html">Picture와 Source 요소</a></li>
      <li><a href="/src/html/15-video-track.html">Video 관련 요소</a></li>
      <li><a href="/src/html/16-iframe-object.html">iframe과 object 요소</a></li>
      <li><a href="/src/html/17-map-area.html">Map과 Area 요소</a></li>
      <li><a href="/src/html/18-form-input.html">form(input) 요소</a></li>
      <li><a href="/src/html/19-form-input.html">form(button) 요소</a></li>
      <li><a href="/src/html/20-form-select-textarea.html">form(Select, Textarea) 요소</a></li>
      <li><a href="/src/html/21-dialog-popover.html">dialog 요소</a></li>
      <li><a href="/src/html/22-details-summary.html">details, summary 요소</a></li>
      <li><a href="/src/html/23-script.html">script 요소</a></li>
      <li><a href="/src/html/24-interactive-attribute.html">interactive, attribute 요소</a></li>
    </ul>
  </body>
  <h2>CSS</h2>
  <ul>
    <li><a href="/src/css/01-css-basic.html">CSS 기초</a></li>
    <li><a href="/src/css/02-selector.html">CSS 선택자</a></li>
    <li><a href="/src/css/03-specificity.html">상속, 겹침, 우선순위</a></li>
    <li><a href="/src/css/04-typography.html">타이포그래피 및 단위</a></li>
    <li><a href="/src/css/05-box-model.html">CSS 박스 모델</a></li>
    <li><a href="/src/css/06-list.html">리스트 스타일링</a></li>
    <li><a href="/src/css/07-nesting.html">CSS Nesting</a></li>
    <li><a href="/src/css/08-position.html">CSS Position</a></li>
    <li><a href="/src/css/09-custom-properties.html">사용자 정의 속성</a></li>
    <li><a href="/src/css/10-background.html">CSS 배경</a></li>
    <li><a href="/src/css/11-float.html">CSS Float</a></li>
    <li><a href="/src/css/12-media-query.html">CSS 미디어쿼리</a></li>
    <li><a href="/src/css/13-logical-properties.html">CSS 논리 속성 및 논리값</a></li>
    <li><a href="/src/css/14-flexbox.html">flex 레이아웃</a></li>
    <li><a href="/src/css/15-stacking-context.html">Stacking Context</a></li>
    <li><a href="/src/css/16-gridbox.html">Grid 레이아웃</a></li>
    <li><a href="/src/css/17-multi-column.html">멀티 컬럼 레이아웃</a></li>
    <li><a href="/src/css/18-subgrid.html">SubGrid</a></li>
    <li><a href="/src/css/19-transition-animation.html">Transition 애니메이션</a></li>
    <li><a href="/src/css/20-keyframes-animation.html">Keyframes 애니메이션</a></li>
    <li><a href="/src/css/21-mask.html">CSS Mask</a></li>
    <li><a href="/src/css/22-light-dark.html">라이트/다크 모드</a></li>
    <li><a href="/src/css/23-container-query.html">컨테이너 쿼리</a></li>
    <li><a href="/src/css/24-layer.html"></a>@layer 규칙</li>
  </ul>
  <h2>UI</h2>
  <ul>
    <li><a href="/src/ui/avatars/avatars.html">아바타(상태 디자인)</a></li>
    <li><a href="/src/ui/terms/terms.html">웹 관련 용어</a></li>
    <li><a href="/src/ui/utility-bar/utility-bar.html">유틸리티 바</a></li>
    <li><a href="/src/ui/15th-members/15th-members.html">멋사 프론트엔드 부트캠프 15기</a></li>
    <li><a href="/src/ui/notifications/notifications.html">알림(Notifications)</a></li>
    <li><a href="/src/ui/netflix-form/netflix-form.html">넷플릭스 Form</a></li>
    <li><a href="/src/ui/search-bar/search-bar.html">네이버 검색 Form</a></li>
    <li><a href="/src/ui/login/login-components.html">네이버 로그인 컴포넌트</a></li>
    <li><a href="/src/ui/login/login.html">네이버 로그인</a></li>
    <li><a href="/src/ui/webcafe-layout/webcafe-layout.html">Webcafe 레이아웃</a></li>
    <li><a href="/src/ui/news/news.html">이디야 News</a></li>
    <li><a href="/src/ui/container-query-layout/container-query-layout.html">컨테이너 쿼리 레이아웃</a></li>
  </ul>
</html>