본문 바로가기
프론트엔드/HTML | CSS

HTML (3)

SeungEunii 2023. 4. 2. 01:06

5. 목록 생성

 

5-1. 순서가 없는 목록 

 

ul태그는 list정의할 때 사용하는데  무조건 li태그와 같이 쓰인다. 

 

<body>

    <ul>
    <li>사과</li>
            <ul>
                <li>부사</li>
                <li>홍로</li>
                <li>후지</li>
            </ul>
        <li>바나나</li>
        <li>파인애플</li>
    </ul>   

</body>

 

 

실행 화면

 

순서 없음

 

 

5-2. 순서가 있는 목록

 

<body>

    <ol>
        <li>망고</li>
        <li>용과</li>
        <li>토마토</li>
    </ol>

</body>

 

 

실행 화면

 

순서 있음

 

 

6. 경로

 

6-1. 절대 경로

 

경로를 처음부터 끝까지 다 적음

 

<a href="https://www.google.com" target="_blank">구글</a> <br>

 

target은 링크를 클릭했을 때의 위치를 명시하는 것인데

"_blank"는 새로운 창에서 띄우고

"_self"는 현재 위치한 창에서 띄운다 

그리고 "_self"는 기본 값으로 설정되어 있기 때문에 굳이 값을 줄 필요가 없다

 

 

6-2. 상대 경로 

 

현재 폴더(파일) 위치를 기준으로 상대 폴더(파일)의 위치를 지정

 

<!-- ./ 현재 폴더 위치 -->
<a href="./fe01_firstweb.html">첫번째 웹 - 상대경로</a>

<!-- ../ 부모(상위) 폴더 위치 -->
<a href="../test.html">부모폴더의 웹 페이지</a>

 

 

6-3. 메일 경로

 

해당 주소로 메일 전송

mailto 사용) 이메일이나 a태그에 쓴 글을 클릭하면 메일 전송창이 뜸

 

<a href="mailto:이메일주소">메일 보내기</a>

 

 

6-4. 아이디 경로 (특정 위치로 이동)

 

같은 페이지 내에서 이동할 땐

내가 지정해 둔 id 값과 name값에 맞게 href = #속성값 링크를 걸어주면 해당 값에 맞게 이동이 된다. 

 

<a href="#a0">첫번째로</a> 
<a href="#a1">두번째로</a>
<a href="#a2">세번째로</a>

<h1 id="a0">첫번째</h1>
<p><b>Lorem ipsum</b> dolor sit amet, <i>consectetur</i> adipisicing elit, sed do eiusmod tempor <small>incididunt</small> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. log<sub>2</sub>n, 2<sup>n</sup>, <ins>밑줄</ins>, <del>취소선</del> </p>

<h1 id="a1">두번째</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<h1 id="a2">세번째</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

 

 

실행 화면

 

'세번째로' 클릭

 

세 번째로 클릭 시

 

세 번째 글로 이동함

 

 

 

 

7. 표 만들기

 

표를 만들 땐 table 태그를 이용하면 된다table 태그 내엔 tr태그와 td태그가 있어야 한다

 

tr태그는 행(가로), td태그는 열(세로)th태그는 표의 제목 셀로 td태그 대신에 사용한다

th태그를 사용하게 되면 알아서 굵기와 중앙정렬을 해준다 

 

thead 태그는 표의 제목, tbody태그는 표의 본문 -> 이것들은 없어도 되는 것 같다

 

 

<h1>3학년 1반 시간표</h1>
<hr>
<table border="1">
    <thead>
        <tr>
            <th>요일</th>
            <th>월</th>
            <th>화</th>
            <th>수</th>
            <th>목</th>
            <th>금</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1교시</td>
            <td>영어</td>
            <td>국어</td>
            <td>과학</td>
            <td>미술</td>
            <td>국사</td>
        </tr>
        <tr>
            <td>2교시</td>
            <td>도덕</td>
            <td>체육</td>
            <td>영어</td>
            <td>수학</td>
            <td>사회</td>
        </tr>
        <tr>
            <td>3교시</td>
            <td>물리</td>
            <td>화학</td>
            <td>세계사</td>
            <td>일본어</td>
            <td>음악</td>
        </tr>
    </tbody>
</table>

 

 

실행 화면

 

 

표의 첫 번째 행에서 th태그 사용했을 때와 td태그 사용했을 때의 차이이다

 

 

 

7-1. 셀 병합 

 

colspan 은 셀 가로(행) 병합

rowspan 은 셀 세로(열) 병합

 

병합할 셀의 수를 " " 안에 적어주면 된다

colspan="숫자" / rowspan="숫자"

 

<table border="1">
        <tr>
            <th colspan="2">홍차</th>
        </tr>
        <tr>
            <th rowspan="3">중국</th>
            <td>정산소종</td>
        </tr>
        <tr>
            <!-- <th>중국</th> -->
            <td>기문</td>
        </tr>
        <tr>
            <!-- <th>중국</th> -->
            <td>운남</td>
        </tr>
        <tr>
            <th rowspan="4">인도</th>
            <td>아삼</td>
        </tr>
        <tr>
            <!-- <th>인도</th> -->
            <td>실론</td>
        </tr>
        <tr>
            <!-- <th>인도</th> -->
            <td>다질링</td>
        </tr>
        <tr>
            <!-- <th>인도</th> -->
            <td>닐기리</td>
        </tr>
    </table>

 

 

실행 화면

 

 

 

 

8. 이미지 & 오디오 & 동영상 넣기

 

img 태그는 이미지

audio 태그는 오디오

video 태그는 비디오

 

video 태그의 alt 속성엔 혹시라도 이미지가 안 나올 경우 대신 나올 문구를 입력하는 곳이다

audio 태그와 video태그는 실행&멈춤 통제를 하고 싶을 땐 controls="controls"를 이용하면 된다 

 

<!-- 이미지 -->
<img src="https://picsum.photos/300/200" width="400">
<img src="nothing" alt="이미지 대신 나오는 텍스트">


<!-- 오디오 -->
<audio controls="controls">
    <source src="./media/file_example_MP3_700KB.mp3" type="audio/mp3">
</audio>


<!-- 동영상 -->
<video controls="controls">
    <source src="./media/file_example_MP4_480_1_5MG.mp4" type="video/mp4">  
</video>

 

 

실행 화면

 

 

'프론트엔드 > HTML | CSS' 카테고리의 다른 글

HTML (2)  (0) 2023.03.21
HTML (1)  (0) 2023.03.21

'프론트엔드/HTML | CSS' Related Articles

티스토리툴바