html/ex1_html_basic.html at master · sangmin0816/html · 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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!-- !과 탭 키 하면 자동 형식 -->
<!DOCTYPE html>
<html lang="en">
<!-- 한국의 언어코드는 ko 또는 ko_kr -->
<head>

    <meta charset="UTF-8">
    <!-- meta는 문서 정보를 나타냄. meta는 데이터의 데이터라는 의미
    기본적으로 태그는 열고 닫아야 하지만, meta는 독립적이라 안 닫아도 됨

    charset = characterset : 글자 세팅을 의미함. 문서와 문서 사이의 코드 형식. 문자 형식
    euc-kr은 한글, 영어. utf-8은 다국어 지원. 둘다 유니코드지만 범주성이 다름.
    메모장의 기본 규격은 ansi로 미국 표준 규격이라 나중에 한국어 안 맞을 수 있음 -->


    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- viewport는 모바일 모드, 반응형(device-width)으로 할 건지 등등 보기 설정. 기본 배율을 1.0으로 설정(1로 하면 못 인식하는 경우 있어서 float로). 내용물의 폭은 기기의 폭에 맞춤-->
    <title>html 기초</title>
    <!-- title은 문서에 대한 제목 -->
    <style>
    .red_text{color: red; font-size: 20px;}
    .blue_text{color: blue; font-size: 30px; font: bolder;}
    </style>
    <script></script>
</head>
<!-- meta, title, style tag는 헤드 태그 안에서만 쓰여야 함. 나머지는 body. head에는 문서가 열리기 전에, body는 문서 로딩되면서.
    script는 head와 body에서 모두 쓰일 수 있음. 기본적인 태그를 tamplete 태그라 함 -->


<body>
<!--
    형식을 안 맞춰도 돌아가지만, W3C 규격 맞춰야 통과됨. 빠른 완성 목록 안 뜨면 ctrl+스페이스바 누르기. h는 각 영역의 제목, 1부터 6까지 내림차순으로 작아지는 제목.
    수정 후에는 반드시 저장 후 새로고침 해야 반영됨. live server extension 설치하면 저장만 해도 실시간 반영되는 거 볼 수 있다.
    h1{내용}+h2{내용} 이런 식으로 이어쓰면 자동 완성 할 수 있음.
    보통은 h1은 문서에 하나. h2은 한 화면에 하나. 꼭 그렇게 할 필요는 없지만 업계 표준. h3는 한 화면보다는 작은 단위.
    h 안에 p를, p 안에 h를, h 안에 h를, p 안에 p를 쓸 수 없다.
    주석은 ctrl+/누르면 할 수 있음. 중요한 부분, 이해 어려운 부분에 달아두기.
    나중에는 코드 인스펙션 돌려서 주석 제거하지만, 나중 위해서 보관해야 둠.
-->
    <script></script>
    <h1>제목1</h1>
    <h2>제목2</h2>
    <h3>제목3</h3>
    <h4>제목4</h4>
    <h5>제목5</h5>
    <h6>제목6</h6>
    <hr>
    <p>test  1</p>
    <p>test 2</p>
    <p>문단내용<br>
        <strong>우리나라</strong>&nbsp;&nbsp;&nbsp;&nbsp;

        <span class="red_text">대한</span>민국
        <ins>아름다운</ins><em>우리</em>강산
    </p>

    <hr>
    <h2>시멘틱 태그: 구역을 나타내는 태그</h2>
    <div>
        <header>구역내용</header>
        <nav>메뉴</nav>
        <article>우리나라</article>&nbsp;&nbsp;&nbsp;&nbsp;
        <section class="red_text">대한</section>민국
        <figure class = "blue_text">아름다운</figure><address>우리</address>강산
        <footer>하단</footer>
    </div>

<!--
    div와 header 등의 관계는 부모-자식 관계이다. header 등의 관계는 형제 관계라 함.
    *참고: &nbsp;는 자식 태그가 아니라 문자열 태그로 인식함.
    항상 전체가 div 태그가 감싸고 있다.
 -->

    <pre class="blue_text">아름다운 이 땅에
            금수 강산에
                기태 할아버지가 터잡으시고
    </pre>


    <!--
        가로선 hr. 문단 내 강제 줄바꿈 br 덧붙이기. pre 태그 안에 쓰면 그대로 반영됨(폰트도 달라짐)
        강조는 strong 안에. b는 브라우저별로 달라져서, 그냥 strong으로 통일함.
        밑줄은 ins 안에.
        두 칸 이상의 공백은 &nbsp;로 표시. 하나 당 한 칸의 공백.
        이탤릭체는 em 태그 안에.
        span class = "rtxt" 태그 안에 쓰면 특정 단어 구역만 스타일을 구분할 수 있다.
        style에서 .rtxt의 서식을 지정할 수 있다. 색깔.
        .은 태그의 클래스 의미
        *인라인 방식: 한 줄 안에 다 들어오는 태그. 태그를 단다고 줄바꿈이 안 됨. 폰트 사이즈만 지정 가능. width, height는 지정 불가.
        div 안에 쓰면 가장 큰 단위의 구역을 나타냄.
        div, article, section, figure, address은 블록방식 태그로, 시멘틱 태그로 부른다. 태그 별로 줄바꿈이 됨. 이외에도 많이 있음. aside, header, content, footer, navigator 등
        헤더와 푸터는 같은 사이트 내에서 동일함. 페이지 컨텐츠만 달라질 뿐.
        *시멘틱 태그: 구역을 나누는 개념
    -->

</body>
</html>


<!--
    크로스브라우징: 하나의 문서를 여러 브라우저가 여러봄
    크로스 미디어: 하나의 문서를 다양한 기기에서 열어봄
    웹표준(문법), 호환성, 접근성(장애인 또는 고령자도 접근 가능하도록)을 생각해야 한다.
    브라우저의 html 코드를 보려면 f12 눌러서 개발자 도구를 보면된다. 안 되면 크롬 메뉴에서 도구 더보기 - 개발자 도구 들어가기
    기기 변경도 가능하다. 변경 후 F5 누르면 모바일 버전도 볼 수 있다. 기기 모양을 보여주는 스킨도 있긴한데, 지금은 거의 없고 ipad만 있더라.
 -->


<!--
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

"html:5"해서 자동 형식

-->