MLP) [HTML] HTML 기초(1)

채개바라 2024. 1. 15. 21:19

2024. 1. 15. 21:19

글자 태그

사용 빈도가 매우 높은 가장 일반적인 태그. 일부 태그들은 style 시트로 대체되고 있다.

<body>

normal 텍스트입니다

italic 텍스트입니다

bold 텍스트입니다

em텍스트입니다

strong텍스트입니다

<ins>밑줄 그은 문자</ins>를 만들어요

<del>취소선</del>을 만들어요

윗첨자를 만들 때 사용해요

아래첨자를 만들 때 사용해요

태그 내용을 시각적(다른 색상)으로 강조해요

이메일주소: <address>kce95@naver.com</address>

작은 글자 태그입니다

</body>

파일 경로(path)

1. 상대 경로

현재 파일의 위치를 기준으로 연결하려는 파일의 상대적인 경로를 적는 것
자기 자신이 기준이기 때문에 자기 자신의 위치가 바뀌는 것에 취약함

" 서울시 서울동 서울 아파트 301호에 살고 있는 사람이 말하는 옆 집 "
" 저의 조카는 저보다 10살이 어립니다" -- 상대적인 조카의 나이는 여전히 유효하기 때문에 10년이 지나도 O
나의 위치에 따라서 달라집니다

기호	의미
./	현재 디렉토리 [생략 가능]
../	상위 디렉토리

2. 절대 경로

파일의 root부터 해당 파일까지의 전체 위치정보(URL)
절대 경로는 보통 다른 사람의 문서나 파일을 이용할 때 사용
절대 경로는 정해진 경로로만 이동해서 무슨 일이 있어도 찾아가지만 후에 경로가 변경되면 파일을 찾지 못해서 에러가 발생할 수 있다.

" 서울시 서울동 서울 아파트 302호 "
" 저의 조카는 10살입니다" -- 10년 뒤 20살이기 때문에 10년이 지나면 X
나의 위치와는 무관합니다

기호	의미
/	최상위(root) 디렉토리

상대경로 vs 절대경로

상대경로 절대경로

"assets/lion.jpg" "/assets/lion.jpg"

지금 작업 중인 파일과 같은 위치에 있는 가장 상위 위치에서 시작해

assets 폴더 안에 lion.jpg를 의미 assets 폴더 안에 있는 lion.jpg를 의미

[첫 번째 Case: myproject.html에서 lion.png 접근]

출처: https://www.youtube.com/watch?v=-8hi72CBfUQ&t=306

상대경로: <img src="image/lion.jpg">
지금 작업 중인 파일인 myproject.html과 image 폴더가 같은 위치에 있음
절대경로: <img src="/image/lion.jpg">
가장 최상위 폴더인 likelion에서 시작해서 image 폴더 내의 lion.jpg를 가리킴

[두 번째 Case: myproject.html에서 lion.png 접근]

상대경로: <img src="../image/lion.jpg">
지금 작업 중인 파일인 myproject.html에서 한 번 상위(밖으로)로 나와 image 폴더 내의 lion.jpg를 가리킴
절대경로: <img src="/image/lion.jpg">
가장 최상위 폴더인 likelion에서 시작해서 image 폴더 내의 lion.jpg를 가리킴

<a> 태그의 id 속성으로 내부 링크(책갈피) 기능 구현

<a> 태그는 외부뿐만 아니라 내부 웹페이지 내에서도 연결할 수 있다. 연결 지점을 id 속성으로 세팅해두면 클릭하는 순간 바로 이동한다. → 책갈피 기능

<a id=”이동위치이름”> 이동할 위치</a>
<a href=”#이동위치이름”> 위치 이동 클릭</a>

<a id="chap02"><h2>Chapter02</h2></a>

어쩌구 저쩌구 [<a href="#chap03">3장으로 이동</a>]

<hr>

<a id="chap03"><h2>Chapter03</h2></a>

어쩌구 저쩌구 [<a href="#chap02">2장으로 이동</a>| <a href="#top">TOP으로 이동</a>]

table 만들기

html에서 표를 구현할 때 <table> 태그 안에 <tr>, <td>, <th>를 넣어 열과 행 및 제목을 구분하여 표를 만든다.

태그

<tr> (table row): 행
<td> (table data): 열(행의 내용)
<th> (table heading): 행, 열의 제목
<caption>: 표 제목
<thead>: 머리글
<tbody>: 본문
<tfoot>: 꼬리말

    <h1>표 만들기 - table태그</h1>
    <!-- 3행 2열 테이블 만들기 -->
    <table border="1" width="300" height="150">
        <!-- 1행 tr태그 (table row; 행) -->
        <tr>
            <!-- 2열: td태그 (table data, table definition; 열) -->
            <td>1행1열</td>
            <td>1행2열</td>
        </tr>

        <!-- 2행 -->
        <tr>
            <td>2행1열</td>
            <td>2행2열</td>
        </tr>

        <!-- 3행 -->
      <tr>
        <td>3행1열</td>
        <td>3행2열</td>
      </tr>
    </table>

    <table border="1" width="90%">
        <caption>월별 저축액</caption>
        <thead>
            <tr>
                <th>Month</th>
                <th>Savings</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1월</td>
                <td>500,000원</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>2월</td>
                <td>300,000원</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>3월</td>
                <td>100,000원</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>총합계</td>
                <td>900,000원</td>
            </tr>
        </tfoot>
    </table>

열병합(colspan) & 행병합(rowspan)

colspan: 열(세로줄)을 확장하여 넓힌다
좌우병합
rowspan: 행(가로줄)을 확장하여 넓힌다
상하병합

<body>
    <h1>table의 열병합(colspan), 행병합(rowspan)</h1>
    <h2>Left, Top에서 병합하자</h2>
    <!-- 3행 4열 테이블 -->
    <table border="1" width="400">
        <tr>
            <th colspan="3">1,1</th>
            <!-- <td>1,2</td>
            <td>1,3</td> -->
            <th rowspan="3">1,4</th>
        </tr>
        <tr>
            <td>2,1</td>
            <td rowspan="2">2,2</td>
            <td>2,3</td>
            <!-- <td>2,4</td> -->
        </tr>
        <tr>
            <td>3,1</td>
            <!-- <td>3,2</td> -->
            <td>3,3</td>
            <!-- <td>3,4</td> -->
        </tr>
    </table>
</body>

<iframe> 태그

iframe 태그(inline frame): 해당 웹 페이지 안에 다른 html 파일을 불러와서 삽입할 수 있는 기능을 제공

<iframe width="560" height="315" src="https://www.youtube.com/embed/JZcdEM1-xhw?si=bOUCJRsQB9UKSz0Q" 
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>

유튜브에서 <iframe> 태그 추출하여 웹페이지에서 동영상을 재생 가능하도록 함

<audio> 태그 & <video> 태그

<audio> 태그

src: 음악 파일의 경로 지정
autoplay: 음악 자동 재생
loop: 음악 반복 재생
controls: 음악 재생 도구 출력

<video> 태그

src: 비디오 파일의 경로 지정
autoplay: 비디오 자동 재생
loop: 비디오 반복 재생
controls: 비디오 재생 도구 출력
width: 비디오의 너비 지정
height: 비디오의 높이 지정

<!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>오디오 재생-audio</h1>
    <audio src="audios/I_Have_A_Dream.mp3" controls="controls"></audio>
    <hr>
    <audio controls loop="2" autoplay> 
        <!-- 브라우저마다 지원되는 파일이 다르기 때문에 여러 파일 형식을 넣어줌 -->
        <source src="audios/Ob-La-Di Ob-La-Da.ogg">
        <source src="audios/Ob-La-Di Ob-La-Da.mp3">
        <source src="audios/Ob-La-Di Ob-La-Da.wav">
        오디오가 지원되지 않는 브라우저입니다
    </audio>
    <hr>
    <h1>비디오 재생 -video</h1>
    <video controls poster="audios/a.png">
        <source src="audios/wildlife.mp4" width="300">
    </video>
</body>
</html>

저작자표시 비영리 변경금지

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

StartCode