잠토의 잠망경

[html] html 기본 문법 본문

공부/html

[html] html 기본 문법

잠수함토끼 2020. 5. 30. 17:57

brief

category tag 주요 내용
html lang lang="ko"
head title 아래 참고 제목
head meta meta charset="UTF-8" 인코딩 방식
body h1 제목, 크기 설정됨
body h1 제목, 크기 설정됨
body p 문장
body br 줄바꿈
body strong 강조, bold
body b 강조, bold
body em, i 이태릭체
body hr split
body span 문장 그룹 color
body ul, li unordered list, 순서 없는 목록
body ol, li ordered list, 순서 없는 목록
body ol, li start="5" 시작 순서 주기
body dl, dt, dd 특정 항목과 설명을 한 set으로 묶어서 표시
body table, tr, td table 추가
body img image 추가
body a href= link 추가
body div 영역별 구조화, border 같은 느낌

html 태그

head 태그

title 태그

meta 태그

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>html 연습</title>
</head>
<body>

</body>
</html>

body 태그

사람들이 실제로 보는 내용이 들어가는 부분

github


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>html 연습</title>
</head>
<body>
    <h1>나의 생각</h1>
    <p>오늘도 즐거운 하루를 보냈습니다.
    여류가 있는 생활을 한다면 더 좋지 않을까요?
    </p>
</body>
</html>

h1 태그

h로 시작하는 head 내용 크기 지정

github

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>html 연습</title>
</head>
<body>
    <h1>나의 생각</h1>
    <h5>나의 작은 글씨</h5>
    <p>오늘도 즐거운 하루를 보냈습니다.
    여류가 있는 생활을 한다면 더 좋지 않을까요?
    </p>
</body>
</html>

p, br 태그

p:paragraph 문장의 시작을 의미
br: 강제 줄바꿈

github

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>html 연습</title>
</head>
<body>
    <h1>나의 생각</h1>
    <h5>나의 작은 글씨</h5>
    <p>오늘도 즐거운 하루를 보냈습니다.
    여류가 있는 생활을 한다면 더 좋지 않을까요?
    </p>

    <p>오늘도<br> 즐거운 하루를 보냈습니다.
    여류가 있는 생활을 한다면 더 좋지 않을까요?
    </p>
</body>
</html>

b, strong 태그

strong, b 모두 사이 문자열을 강조한다. bold로 치환됨

strong : 시각장애인을 위한 설명 용으로 사용됨

github

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>html 연습</title>
</head>
<body>
    <h1>나의 생각</h1>
    <h5>나의 작은 글씨</h5>
    <p>오늘도 즐거운 하루를 보냈습니다.
    여류가 있는 생활을 한다면 더 좋지 않을까요?
    </p>

    <p>오늘도<br> 즐거운 하루를 보냈습니다.
    여류가 있는 생활을 한다면 더 좋지 않을까요?
    </p>

    <p>오늘도<br> 즐거운 <strong>하루</strong>를 보냈습니다.
        여류가 있는 생활을 한다면 더 <b>좋지</b> 않을까요?
    </p>

</body>
</html>

em, i 태그

이테릭체 표기

github

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>html 연습</title>
</head>
<body>
    <h1>나의 생각</h1>
    <h5>나의 작은 글씨</h5>
    <p>오늘도 즐거운 하루를 보냈습니다.
    여류가 있는 생활을 한다면 더 좋지 않을까요?
    </p>

    <p>오늘도<br> 즐거운 하루를 보냈습니다.
    여류가 있는 생활을 한다면 더 좋지 않을까요?
    </p>

    <p>오늘도<br> 즐거운 <strong>하루</strong>를 보냈습니다.
        여류가 있는 생활을 한다면 더 <b>좋지</b> 않을까요?
    </p>

    <p>
        <i>이테릭체확인 들어갑니다.</i><br>
        <em>이것도 이테릭체확인 들어갑니다.</em>
    </p>

</body>
</html>

hr

가로줄

github

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>html 연습</title>
</head>
<body>
    <hr>
    <p>test 01 test</p>
    <p>test 02 test</p>
    <p>test 03 test</p>
</body>
</html>

span tag

해당 문장을 색을 먹인다거나 기타 등등

github

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>html 연습</title>
</head>
<body>
    <hr>
    <p>오늘도 <span style="color: #ff0000">즐거운 <strong>하루를</strong> 보냈습니다.</span>
        여류가 있는 생활을 한다면 더 <b>좋지</b> 않을까요?
    </p>
</body>
</html>

ul, li tag

ul : unorded list, 순서 없는 목록
li : list item

github

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>html 연습</title>
</head>
<body>
    <hr>
    <h1>unorded list</h1>
    <ul>
        <li>item1</li>
        <li>item2</li>
    </ul>
</body>
</html>

ol, li tag

ol: ordered list

github

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>html 연습</title>
</head>
<body>
    <h1>orded list</h1>
    <ol>
       <li>item1</li>
       <li>item2</li>
    </ol>

</body>
</html>

ol tag

github

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>html 연습</title>
</head>
<body>
    <h1>unorded list</h1>
    <ul>
        <li>item1</li>
        <li>item2</li>
    </ul>
    <hr>
    <h1>orded list</h1>
    <ol type="a">
       <li>item1</li>
       <li>item2</li>
    </ol>
</body>
</html>

중첩된 목록 만들기

ol에서 start를 넣어서 시작을 설정할 수 있다.

github

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>html 연습</title>
</head>
<body>    
    <hr>
    <h1>중첩된 목록 만들기</h1>
    <ul>
        <li>나라
            <ol type="A">
                <li>한국</li>
                <li>미국</li>
            </ol>
        </li>
        <li>도시
            <ol type="1" start="5">
                <li>서울</li>
                <li>워싱턴</li>
            </ol>
        </li>
    </ul>

</body>
</html>

dl, dt, dd tag

dl: description list

특정 항목과 설명을 하나의 set으로 묶어서 표시하는 경우임

githug

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>html 연습</title>
</head>
<body>
    <hr>
    <h1>dl tag</h1>
    <h2>dl is "description list"</h2>
    <dl>
        <dt>국어</dt>
            <dd>철수: 01</dd>
            <dd>순이: 02</dd>
            <dd>경수: 03</dd>
        <dt>영어</dt>
            <dd>철수: 11</dd>
            <dd>순이: 12</dd>
            <dd>경수: 13</dd>
    </dl>

</body>
</html>

table, tr, td tag : 표만들기

table: table의 영역
tr: table의 row
td: table의 column

github

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>html 연습</title>
</head>
<body>

    <h1>table</h1>

    <table>
        <tr>
            <td>내용 r1-1</td>
            <td>내용 r1-2</td>
            <td>내용 r1-3</td>
            <td>내용 r1-4</td>
        </tr>
        <tr>
            <td>내용 r2-1</td>
            <td>내용 r2-2</td>
        </tr>
    </table>

</body>
</html>

table - border

table의 영역 굵기를 표기하는 용도로 사용된다.

github

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>html 연습</title>
</head>
<body>


    <hr>

    <h1>table</h1>

    <table border="3">
        <tr>
            <td>내용 r1-1</td>
            <td>내용 r1-2</td>
            <td>내용 r1-3</td>
            <td>내용 r1-4</td>
        </tr>
        <tr>
            <td>내용 r2-1</td>
            <td>내용 r2-2</td>
        </tr>
    </table>

</body>
</html>

border="1"

border="3"

table - thread, tbody, tfoot tag

thead: table + head
tbody: table + body
tfoot: table + foot

우리가 자주 사용할 table의 header와 footer 그리고 내용을 정의하는 부분이다.

github

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>html 연습</title>
</head>
<body>
    <hr>
    <h1>tfoot, thead, tbody tag</h1>
    <table border="2">
        <caption>오늘의 지역 날씨</caption>
        <thead>
            <tr>
                <th>지역</th>
                <th>온도</th>
                <th>강수량</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>아산시</td>
                <td>21</td>
                <td>70</td>
            </tr>

            <tr>
                <td>서울시</td>
                <td>22</td>
                <td>10</td>
            </tr>


            <tr>
                <td>제주도</td>
                <td>31</td>
                <td>2</td>
            </tr>

        </tbody>
        <tfoot>
            <tr>
                <th>합계</th>
                <td>100</td>
                <td>10</td>
            </tr>

        </tfoot>
    </table>

</body>
</html>

img tag

image를 적용하는 tage

github


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>html 연습</title>
</head>
<body>


    <hr>

    <h1>image link</h1>
    <img width="300" height="300" src="http://image.kyobobook.co.kr/images/book/xlarge/882/x9791162241882.jpg">
</body>
</html>

a href= tage

링크 걸기

github

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>html 연습</title>
</head>
<body>


    <hr>

    <h1>하이퍼링크</h1>
    <a href="http://mellowlee.tistory.com/">mellowlee tistory</a>
</body>
</html>

div tag

div로 영역별 color, border를 지정할 수 있다.

github

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>html 연습</title>
</head>
<body>
    <hr>
    <h1>div</h1>
    <h2>보일 위치 지정</h2>
    <div style="border: red 3px solid;width: 300px;height: 100px">
        div 첫번째
        <div style="border: aqua 3px solid;width: 100px;height: 500px">
            div 두번째
        </div>
    </div>


</body>
</html>

'공부/html' Related Articles more
Comments