HTML

HTML

박선규

Jan 15, 2024

Contents

HTML HTML 기본 구조 및 문법 HTML 기본 태그와 속성 실습

📌

HTML은 HyperText Markup Language의 약자로 웹 페이지를 만들 때 사용하는 언어다.

HTML 기본 구조 및 문법

📌

HTML의 기본 문법은 <태그>내용</태그>로 여는 태그와 닫는 태그로 구성 돼있으며 사이에 내용을 입력한다. 닫는 태그는 여는 태그에/를 붙여주어야 한다. 구조는 크게 <head></head>, <body></body>로 구성 돼있고, <head>는 문서의 메타정보(제목, 스타일, 스크립트 등)를 포함하고, <body>는 화면에 표시되는 내용을 입력한다.

HTML 기본 태그와 속성

📌

html에서는 마크업을 태그라고한다.

어트리부트: 속성

<a> :하이퍼 링크 href 어트리부트를 가지고있다

<hr>:선

<b> :진한 글씨

<br>내려쓰기

ul li 순서가없는 리스트

ol li 순서가 있는 리스트

인라인(Inline element)

📌

태그가 내용물의 크기 만큼 차지하는 것을 의미한다.


<body>
    <span>안녕</span> 안녕
</body>

<span> 태그는 인라인 요소이기 때문에 내용물의 크기 만큼 차지하고 뒤의 평문은 같은 줄에 표기된다.

인라인 속성 태그들

📌

블록(Block element)

📌

하나의 태그가 좌우 공간 전체를 차지한다. 한칸의 태그가 블록이라면 다음태그는 다음칸에 작성된다.


<body>
    <div>안녕</div>
</body>

<div></div>코드를 작성하면 내용물은 좌우 전체 크기를 차지하게 된다.


<body>
    <div>안녕</div> 안녕
</body>

태그 뒤에 평문을 넣게 되면 다음 줄에 작성된다.

Block 속성 태그들

📌

<div>,<table>,<h1>~<h6>,<p>,<form>,<ul>,<ol>,<li>,<dl>,<dt>,<dd>,<pre>,<blockquote>등

Inlin과 Block의 크기 비교

(F12) 또는 .html 파일에서 오른쪽 마우스 -검사 를 클릭한다.

Elemets 에서 태그를 클릭하면 해당크기를 확인 할 수 있다.

Inline: 내용물의 크기에 따라 값이 정해지므로 크기가 auto로 표시 돼있음

Block: 가로 세로 각 값이 있음,
세로의 값은 정해져있다. 가로의크기는 F12창의 크기를 조절하면 값이 달라진다.
결론으로 표시된 전체 창의 길이를 나타낸다. — Block: 가로 세로 각 값이 있음, 세로의 값은 정해져있다. 가로의크기는 F12창의 크기를 조절하면 값이 달라진다. 결론으로 표시된 전체 창의 길이를 나타낸다.

📌

웹을 디자인할 때, 블록은 세로의 크기를 조정할 수 있다. 가로와 세로 크기를 정하고 싶다면 인라인-블록을 사용해야한다.

실습

예제

미션(1)


<!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>
    <h1>목차</h1>
    <ol>
        <li>개요</li>
        <li> <a href="https://namu.wiki/w/%EC%9D%B4%EC%83%81%ED%98%81/%EC%84%A0%EC%88%98%20%EA%B2%BD%EB%A0%A5">선수 경력</a></li>
        <ol>
            <li>대회 경력</li>
                <ol>
                    <li>대회 기록</li>
                    <li>개인 기록</li>
                </ol>
            <li>주요 경력</li>    
        </ol>
        <li> <a href="https://namu.wiki/w/%EC%9D%B4%EC%83%81%ED%98%81/%ED%94%8C%EB%A0%88%EC%9D%B4%20%EC%8A%A4%ED%83%80%EC%9D%BC">플레이 스타일</a></li>
        <li>평가</li>
        <li>솔로 랭크</li>
        <li> <a href="https://namu.wiki/w/%EC%9D%B4%EC%83%81%ED%98%81/%EA%B0%9C%EC%9D%B8%20%EB%B0%A9%EC%86%A1">개인 방송</a>
        <li>방송 출연</li>
        <li><a href="https://namu.wiki/w/%EC%9D%B4%EC%83%81%ED%98%81/%EB%B3%84%EB%AA%85">별명</a></li>
        <li>논란 및 사건 사고</li>
        <ol>
            <li>솔로랭크 중 일반인 유저에 대한 발언관련</li>
            <ol>
                <li>정말 <a href="https://namu.wiki/w/%EC%84%B1%ED%9B%88(%EC%9D%B8%ED%84%B0%EB%84%B7%20%EB%B0%A9%EC%86%A1%EC%9D%B8)">성훈</a>의 잘못인가?</li>
            </ol>
        </ol>
        <li><a href="https://namu.wiki/w/%EC%9D%B4%EC%83%81%ED%98%81/%EC%97%AC%EB%8B%B4">여담</a></li>
    </ol>
</body>
</html>

미션(2)


<!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>
    <ol>
        <li><h3>개요</h3></li>
        <hr>
        <span><a href="https://namu.wiki/w/%EB%8C%80%ED%95%9C%EB%AF%BC%EA%B5%AD">대한민국</a>의</span>
        <span><a href="https://namu.wiki/w/%EB%A6%AC%EA%B7%B8%20%EC%98%A4%EB%B8%8C%20%EB%A0%88%EC%A0%84%EB%93%9C">리그오브레전드.</a></span>
        <span><a href="https://namu.wiki/w/%ED%94%84%EB%A1%9C%EA%B2%8C%EC%9D%B4%EB%A8%B8">프로게이머</a>.</span>
        <span><a href="https://namu.wiki/w/LCK">LCK</a>의</span>
        <span><a href="https://namu.wiki/w/T1/%EB%A6%AC%EA%B7%B8%20%EC%98%A4%EB%B8%8C%20%EB%A0%88%EC%A0%84%EB%93%9C">T1</a>소속 주장이자</span>
        <span><a href="https://namu.wiki/w/%EB%AF%B8%EB%93%9C(%EB%A6%AC%EA%B7%B8%20%EC%98%A4%EB%B8%8C%20%EB%A0%88%EC%A0%84%EB%93%9C)">미드라이너</a> 및 파트 오너</span>
        <li><span><a href="https://namu.wiki/w/%EC%9D%B4%EC%83%81%ED%98%81/%EC%84%A0%EC%88%98%20%EA%B2%BD%EB%A0%A5"><h3>선수경력</h3></a></span></li>
        <span>자세한 내용은 <a href="https://namu.wiki/w/%EC%9D%B4%EC%83%81%ED%98%81/%EC%84%A0%EC%88%98%20%EA%B2%BD%EB%A0%A5">이상혁/선수 경력</a>문서를 참고하십시오.</span>
        <ol>
           <li><span><h3>대회 경력</h3></span></li> 
           <hr>
           <table border="1">
            <tr>
                <td>이상혁의 대회 경력</td>
            </tr>
            <tr>
                <td>펼치기 * 접기</td>
            </tr>
            </table>
               <ul>
                    <b>
                        <li>통산 전적[19]: 1256전 850승 406패, 승률 67.7%, 총 킬 4427, 총 데스 2655,
                            총 어시스트 6808, KDA 4.2, 킬 관여율 64.9% (23. 11. 19. 기준) 출처</li>
                        <li><a href="https://namu.wiki/w/%EB%A6%AC%EA%B7%B8%20%EC%98%A4%EB%B8%8C%20%EB%A0%88%EC%A0%84%EB%93%9C%20%EC%9B%94%EB%93%9C%20%EC%B1%94%ED%94%BC%EC%96%B8%EC%8B%AD">월즈</a> 우승 4회, <a href="https://namu.wiki/w/Mid-Season%20Invitational">MSI</a> 우승 2회, <a href="https://namu.wiki/w/League%20of%20Legends%20Champions%20Korea">LCK</a> 우승 10회, <a href="https://namu.wiki/w/IEM">IEM</a> 우승 1회[20],
                            <a href="https://namu.wiki/w/%EB%A6%AC%ED%94%84%ED%8A%B8%20%EB%9D%BC%EC%9D%B4%EB%B2%8C%EC%A6%88">리프트 라이벌즈</a> 우승 1회, <a href="https://namu.wiki/w/%EB%A6%AC%EA%B7%B8%20%EC%98%A4%EB%B8%8C%20%EB%A0%88%EC%A0%84%EB%93%9C%20%EC%98%AC%EC%8A%A4%ED%83%80%EC%A0%84">리그 오브 레전드 올스타전</a> 우승 5회, <a href="https://namu.wiki/w/NLB">NLB</a> 우승 1회,
                                <a href="https://namu.wiki/w/2022%20%ED%95%AD%EC%A0%80%EC%9A%B0%20%EC%95%84%EC%8B%9C%EC%95%88%20%EA%B2%8C%EC%9E%84">아시안
                                    게임</a>
                            금메달</li>
                        <li><b>Worlds MVP 1회</b>[21], <b>MSI MVP</b> 1회, <b>LCK 통합 MVP 2회</b>, <b>
                            LCK 포스트시즌 MVP 1회,
                                LCK All-Pro First team 2회[22]
                    </b>
                    </b></li>
               </ul>
               <br>
               <span><a href="https://namu.wiki/w/SKT%20T1">SKT T1</a>에서 프로 데뷔를 했고, 다른 팀으로의 이적 없이 대부분의 시간동안 주전을 꿰차면서[23] 해당 커리어들을 달성했다. 현재 세계 그 누구와 비교하더라도 이 정도의 경력을 가진 리그 오브 레전드 프로게이머는 없으며, 최고의 선수라는 위상에 걸맞게 LoL e스포츠 최고의 대회인 <a href="https://namu.wiki/w/%EB%A6%AC%EA%B7%B8%20%EC%98%A4%EB%B8%8C%20%EB%A0%88%EC%A0%84%EB%93%9C%20%EC%9B%94%EB%93%9C%20%EC%B1%94%ED%94%BC%EC%96%B8%EC%8B%AD">리그 오브 레전드 월드 챔피언십</a>과 4대 메이저 리그 중 하나인 <a href="https://namu.wiki/w/League%20of%20Legends%20Champions%20Korea">LCK</a> 커리어를 각각 떼어놓고 봐도 독보적인 기록[24]들을 보유하고 있다.[25]</span>
        </ol>
    </ol>
</body>
</html>

미션(3)


<!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>
    <table border="1" bordercolor="red" align="center" cellspacing="0">
        <tr height="30">
            <th style="text-align: center;" width="250"><font color="red">날짜</fontcolor></th>
            <th style="text-align: center;" width="150"><font color="red">방송사</font></th>
            <th style="text-align: center;" width="250"><font color="red">방송명</font></th>
            <th style="text-align: center;" width="150"><font color="red">역할</font></th>
            <th style="text-align: center;" width="200"><font color="red">비고</font></th>
        </tr>
        <tr height="30">
            <td style="text-align: center;" colspan="5" bgcolor="red"><font color="white"><b>2018년</b></font></th>
        </tr>
        <tr height="30">
            <td style="text-align: center;">11월 19일</td>
            <td style="text-align: center;"><a href="https://namu.wiki/w/KBS%202TV"><img src="https://i.namu.wiki/i/e9S7C_xFhRWKPFP-M_8meKjzj_DfPjHLhXSe1QZyx3dXTGcf8f4SdrbG45O2gb_kQkxQzhqN0Vg7MPU6rSViaPxQpo00mPvu7OnUwWlUtlllmIJJyoIkd0EHhmBKod_xqAGLNf4AXZ69rdCTzWLvzQ.svg" width="50"></a></td>
            <td style="text-align: center;"><a href="https://namu.wiki/w/%EB%8C%80%EA%B5%AD%EB%AF%BC%20%ED%86%A0%ED%81%AC%EC%87%BC%20%EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94">대국민 토크쇼 안녕하세요</a></td>
            <td style="text-align: center;">게스트</td>
            <td style="text-align: center;">389회</td>
        </tr>
        <tr height="30">
            <td style="text-align: center;" colspan="5" bgcolor="red"><font color="white"><b>2020년</b></font></th>
        </tr>
        <tr height="30">
            <td style="text-align: center;">1월 1일</td>
            <td style="text-align: center;"><a href="hhttps://namu.wiki/w/%EB%AC%B8%ED%99%94%EB%B0%A9%EC%86%A1?from=MBC"><img src="https://i.namu.wiki/i/ceO9m0KQel-K841YNp4EYgiBQ2SCL5jkeez9ICJQqMJ1fJ8L82Nu-gPj_BYzH_ZLrfqTK_ptHumEPXoiD-04qhcvzaw7PF8tVMqRUleUeUC7U9KtX1AMPggG5Z91IFETG_2v2dH1DhuAgZB4LE_QeA.svg" width="50"></a></td>
            <td style="text-align: center;"><a href="https://namu.wiki/w/%EB%9D%BC%EB%94%94%EC%98%A4%20%EC%8A%A4%ED%83%80(%ED%99%A9%EA%B8%88%EC%96%B4%EC%9E%A5)">라디오 스타</a></td>
            <td style="text-align: center;">게스트</td>
            <td style="text-align: center;">650회</td>
        </tr>
        <tr height="30">
            <td style="text-align: center;">1월 20일</td>
            <td style="text-align: center;"><a href="https://namu.wiki/w/KBS%202TV"><img src="https://i.namu.wiki/i/e9S7C_xFhRWKPFP-M_8meKjzj_DfPjHLhXSe1QZyx3dXTGcf8f4SdrbG45O2gb_kQkxQzhqN0Vg7MPU6rSViaPxQpo00mPvu7OnUwWlUtlllmIJJyoIkd0EHhmBKod_xqAGLNf4AXZ69rdCTzWLvzQ.svg" width="50"></a></td>
            <td style="text-align: center;">더 드리머</td>
            <td style="text-align: center;">게스트</td>
            <td style="text-align: center;">1회</td>
        </tr>
        <tr height="30">
            <td style="text-align: center;">9월 30일</td>
            <td style="text-align: center;"><a href="https://namu.wiki/w/tvN"><img src="https://i.namu.wiki/i/J7ASfbha0VmLAvZLbJYE2jvsIJJtPmnR8q2tGXgHp4dMI93c-mbAgxhBdG0NkNpldOlTqK4UKt4jY0oSKIfO0w.svg" width="40"></a></td>
            <td style="text-align: center;"><a href="https://namu.wiki/w/%EC%9C%A0%20%ED%80%B4%EC%A6%88%20%EC%98%A8%20%EB%8D%94%20%EB%B8%94%EB%9F%AD">유 퀴즈 온 더 블럭</a></td>
            <td style="text-align: center;">게스트</td>
            <td style="text-align: center;">74회</td>
        </tr>
        <tr height="30">
            <td style="text-align: center;" colspan="5" bgcolor="red"><font color="white"><b>2023년</b></font></th>
        </tr>
        <tr height="30">
            <td style="text-align: center;">12월 20일</td>
            <td style="text-align: center;"><a href="https://namu.wiki/w/tvN"><img src="https://i.namu.wiki/i/J7ASfbha0VmLAvZLbJYE2jvsIJJtPmnR8q2tGXgHp4dMI93c-mbAgxhBdG0NkNpldOlTqK4UKt4jY0oSKIfO0w.svg" width="40"></a></td>
            <td style="text-align: center;"><a href="https://namu.wiki/w/%EC%9C%A0%20%ED%80%B4%EC%A6%88%20%EC%98%A8%20%EB%8D%94%20%EB%B8%94%EB%9F%AD">유 퀴즈 온 더 블럭</a></td>
            <td style="text-align: center;">게스트</td>
            <td style="text-align: center;">224회</td>
        </tr>
        <tr height="30">
            <td style="text-align: center;" colspan="5" bgcolor="red"><font color="white"><b>2024년</b></font></th>
        </tr>
        <tr height="30">
            <td style="text-align: center;">1월 27일</td>
            <td style="text-align: center;"><a href="https://namu.wiki/w/JTBC"><img src="https://i.namu.wiki/i/4LW4IeRLclO-JKDh7s0sqa6mU_9aIWgU2vZP9q49tCrElGWcaUzydtauFw7OAwRmg0M27CcCMlXh75_h5rMUZkbhdDYYiLEEx_yhmZIeORG5mDvQ7CSIVNLSNZPBsmXUHEnirdmXc1E1zbtC4eb1pg.svg" width="40"></a></td>
            <td style="text-align: center;"><a href="https://namu.wiki/w/%EC%95%84%EB%8A%94%20%ED%98%95%EB%8B%98">아는 형님</a></td>
            <td style="text-align: center;">게스트</td>
            <td style="text-align: center;">418회</td>
        </tr>
    </table>
</body>
</html>

단축키

💡

alt누른 상태로 복사하면 중복 복사 가능 ctr+shift+하면

이 화면이 뜨면 wrap 하고 문법 접어넣으면 다중 문법 적용

See more posts

HTML

HTML

HTML 기본 구조 및 문법

HTML 기본 태그와 속성

인라인(Inline element)

인라인 속성 태그들

블록(Block element)

Block 속성 태그들

Inlin과 Block의 크기 비교

실습

단축키

More articles

CSS - grid

CSS(Cascaidng Style Sheets)

37. http 프로토콜 통신

VSCODE