본문 바로가기
Front-end/Web

HTML 문서의 기본

by 안녕주 2020. 9. 5.

1) 기본 문서 만들기

<!DOCTYPE html>
<html>
	<head>
    	<tittle>기본 문서 만들기</tittle>
    </head>
    <body>
    	<p>Hello World!</p>
	</body>
</html>

- Hello World! 문구가 화면에 나타나도록 <html><head><body><p> 요소 사용

2) 간단한 자기 취미 소개

<!DOCTYPE html>
<html>
	<head>
    	<tittle>간단한 자기 취미소개</tittle>
    </head>
    <body>
    	<h2>나의 취미 소개</h2>
    	<p>나의 취미는 <strong>&lt;디제잉&gt;</strong>입니다.</p>
        <br>
        <p>좋아하는 장르는 R&B를 좋아합니다.</p>
        <p>좋아하는 사람들이랑 함께 음악을 틀면서 파티를 하는 것을 좋아합니다.</p>
	</body>
</html>

-<html><head><body><h2><p><br> 요소 사용, 

- 기타요소 :&lt;는 < 이고 &gt;는 >이다. <strong>은 강조!

3) 자신의 취미활동을 소개하는 목록 만들기

<!DOCTYPE html>
<html>
	<head>
    	<tittle>자신의 취미활동 소개하는 목록 만들기</tittle>
    </head>
    <body>
    	<h1>디제잉과 관련한 나의 취미소개</h1>
        <h3>현재까지 틀어본 디제잉 장르</h3>
    	<ul> <!--순거가 없는 목록-->
            <li>베이스하우스&quot;트랩</li>
            <li>디스코</li>
        </ul>
    	<h3>좋아하는 아티스트</h3>
        <ol> <!--순거가 있는 목록-->
            <li>SUMIN</li>
            <li>콜드</li>
        </ol>
        <h3>좋아하는 노래장르</h3>
    	<dl> <!--사전정의 목록-->
            <dt>디스코</dt><dd>경쾌한 레코드 음악으로 업비트의 빠른 펑크 음악</dd>
            <dt>하우스</dt><dd>디스트음악을 신디사이저로 디지탈하여 80년대 처음 선보인 장르</dd>
        </dl>
	</body>
</html>

- 순서가 없는 목록 <ul>, 순서가 있는 목록<ol>, 사전정의 목록<dl><dt><dd>를 사용

4)시간표 만들기

<!DOCTYPE html>
<html>
	<head>시간표 만들기</tittle>
    </head>
    <body>
        <h3>시간표</h3>
        <br>
        <table border='1'>
        	<thread>
            	<tr>
                	<th>교시</th><th>월</th><th>화</th><th>수</th><th>목</th><th>금</th>
                </tr>
            </thread>
            <tbody>
            	<tr> <!--1교시-->
                	<td>1</td><td></td><td></td><td></td><td></td><td></td>
                </tr>
            	<tr> <!--2교시-->
                	<td>2</td><td></td><td></td><td></td><td></td><td></td>
                </tr>
            	<tr> <!--3교시-->
                	<td>3</td>
                    <td rowspan="2">자료구조</td>
                    <td rowspan="2">통계수학1</td>
                    <td rowspan="2">자료구조</td>
                    <td rowspan="2">통계수학1</td>
                    <td></td>
                </tr>
                <tr> <!--4교시-->
                	<td>4</td><td></td>
                </tr>
                <tr> <!--5교시-->
                	<td>5</td>
                    <td></td>
                    <td rowspan="2">독일어권문화<br>새롭게보기</td>
                    <td></td>
                    <td rowspan="2">독일어권문화<br>새롭게보기</td>
                    <td></td>
                </tr>
                <tr> <!--6교시-->
                	<td>6</td>
                    <td rowspan="2">기초통계학1</td>
                    <td rowspan="2">기초통계학1</td>
                    <td></td>
                </tr>
                <tr> <!--7교시-->
                	<td>7</td><td></td><td></td><td></td>
                </tr>
                <tr> <!--8교시-->
                	<td>8</td>
                    <td rowspan="2">웹프로그래밍<br>기초</td>
                    <td rowspan="2">데이터사이언스<br>개론</td>
                    <td rowspan="2">웹프로그래밍<br>기초</td>
                    <td rowspan="2">데이터사이언스<br>개론</td>
                    <td></td>
                </tr>
        		<tr> <!--9교시-->
                	<td>9</td><td></td>
                </tr>
            </tbody>
	</body>
</html>

- 시간표 만들기.... 노가다....

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

'Front-end > Web' 카테고리의 다른 글

JavaScript 기초 (사칙연산,switch,for,while,if-else)  (0) 2020.09.05
다양한 입력폼 <form>  (0) 2020.09.05
고급표현을 위한 CSS 활용  (0) 2020.09.05
CSS3 스타일시트 기초  (0) 2020.09.05
링크와 멀티미디어  (0) 2020.09.05

관련글

댓글

티스토리툴바