본문 바로가기
개발일기/HTML & CSS

[HTML] (4)~(7) 하이퍼링크, 미디어(이미지, 동영상, 오디오), 폼, 세멘틱 코딩

Yoon Yusang 2025. 4. 14. 02:20

[HTML]

(4) 하이퍼링크

<1> <a>

<a href="주소">링크</a>
<a href="#이동할 id">버튼</a>
<a href="주소#id">버튼</a>

- href 속성값으로 주소를 넣어주면, 그 주소로 이동한다.

- 주소뿐만 아니라, # + '현재 페이지의 어떤 요소의 id'를 넣어주면 그 요소가 있는 곳으로 이동한다.

- 해당 주소로 이동한 뒤 어떤 요소의 위치로 창을 이동시키는 경우, 주소 뒤에 # + '요소 id'를 넣어주면 된다.

 

<2> 상대패스(상대주소)

- 현재 파일을 기준으로 목적 파일이 어디에 있는지 지정하는 방법

./파일명 // 현재 폴더와 같은 폴더 안에 존재하는 파일의 주소
../파일명 // 현재 폴더의 윗 계층 폴더 안에 존재하는 파일의 주소

 

<3> 그 외 <a>태그 속성

title 링크에 마우스를 올렸을 때 나오는 텍스트
target "_blank" 새로운 탭을 연다.
"_self" 현재 페이지에서 연다.

 

(5) 미디어(이미지, 동영상, 오디오)

<1> <img>

<img src="파일 주소" alt="이미지 설명" width="폭" height="높이">

- <img> 태그를 통해 이미지를 삽입할 수 있다.

- alt 속성의 경우, 이미지가 표시되지 않는 경우의 대체 텍스트를 지정한다.

 

<2> <video>

＜video src="동영상 주소" autoplay controls width="폭" height="높이">
<p>브라우저가 대응하지 못하는 경우의 텍스트</p>
</video>

- <video> 태그를 통해 동영상을 삽입할 수 있다.

autoplay 지정시 자동재생된다.
loop 지정시 반복재생된다.
controls 지정시 컨트롤 바가 표시된다.
muted 지정시 초기 상태로 음소거가 적용된다.

 

<3> <iframe>

<iframe src="웹페이지 URL" width="폭" height="높이" allowfullscreen>브라우저가 대응하지 못하는 경우의 텍스트</iframe>

- HTML가 표시하는 공간 안에 별개의 HTML 파일을 불러오는 인라인 요소이다.

 

<4> <audio>

<audio src="오디오파일 경로" controls preload="auto">
<p>브라우저가 대응하지 못하는 경우의 텍스트</p>

- 오디오 파일을 불러오는 태그이다.

preload 페이지를 불러올 때, 음성 파일도 불러오는지를 지정한다.
autoplay 지정시 자동으로 재생된다.
loop 지정시 반복 재생된다.
controls 지정시 컨트롤 바가 표시된다.
muted 지정시 초기 상태로 음소거가 적용된다.

 

(6) 폼

<1> <form>

<form action="데이터를 보낼 페이지" method="get">
</form>

- 유저의 데이터 입력을 받는 요소이다.

method get URL에 데이터가 표시되는 방식으로 데이터를 전송한다.
post HTTP 리퀘스트의 헤더와는 독립된 본문의 데이터로서 데이터를 송신한다.
name 폼의 이름을 지정한다.
target _self 현재 열람하고 있는 컨텍스트에 송신결과를 표시한다.
_blank 새로 열람 컨텍스트를 열어 송신결과를 표시한다.
autocomplete 과거에 입력한 값을 표시하는 기능(자동 완성) 기능을 제어한다.

 

<2> <input>

<input type="유형" name="이름" value="값">

 

- type 속성에 다음과 같은 값을 입력해 다양한 타입의 폼을 작성할 수 있다.

text 1줄의 텍스트 입력용 박스
password 비밀번호 입력용 박스
tel 전화번호 입력용 박스
url URL 입력용 박스
email 이메일 주소 입력용 박스
search 검색어 입력용 박스
checkbox 체크박스
radio 라디오 버튼
submit 제출 버튼
reset 리셋 버튼
image 이미지 버튼
button 버튼
datetime-local 연/월/일/시간 입력용 박스
date 연/월/일 입력용 박스
month 연/월 입력용 박스
time 시간 입력용 박스
file 파일 첨부용 버튼
number 숫자 입력용 박스
range 마우스로 값을 지정할 수 있는 슬라이더
color 색 지정용 박스

 

 

<3> <button>

<button type="유형">텍스트</button>

- 버튼의 경우, input이 아닌 button이라는 요소로도 만들 수 있다.

- button 요소로 만들었을 때, 비교적 CSS나 JavaScript로 제어하기가 편하다.

- type 속성에 따라 필요에 따라 다른 종류의 버튼을 만들 수 있다.

button 일반적인 버튼
submit 제출 버튼
reset 리셋 버튼

 

<4> <select>와 <option>

<select name="이름">
    <optgroup label="대분류1">
        <option value="값">내용</option>
        <option value="값">내용</option>
        <option value="값">내용</option>
    </optgroup>
    <optgroup label="대분류2">
        <option value="값">내용</option>
        <option value="값">내용</option>
        <option value="값">내용</option>
    </optgroup>
</select>

- 여러 선택지 중 하나를 고르게 하는 스크롤이 만든다.

- <optgroup>을 통해 대분류로 나눌 수가 있다. (없어도 된다.)

 

<5> <textarea>

<textarea name="이름" rows="폭" cols="높이">내용</textarea>

- 여러 행의 텍스트 입력 박스를 만든다.

 

<6> 그 외, 폼 요소에 지정 가능한 속성

maxlength 최대 문자 수를 지정한다. <input>, <textarea>
size 표시 문자 수를 지정한다. <input> : 텍스트 박스의 폭
<select> : 선택지 칸의 높이
checked 초기 상태로 체크를 넣어준다. <input>의 "radio", "checkbox"
selected 초기 상태로 항목이 선택되어있게 한다. <select>의 <option>
required 필수로 입력하게 한다. <input>, <textarea>, <select>
disabled 선택/입력 불가능하게 한다. <input>, <textarea>, <select>
placeholder 입력 예를 보여준다. <input>, <textarea>
autocomplete 자동완성을 활성화한다. <input>, <textarea>

 

(7) 세멘틱 코딩

<1> 세멘틱 코딩이란?

- 컴퓨터가 HTML문서의 내용을 잘 이해할 수 있도록 HTML의 요소를 잘 정리해 기술하는 것.

- 세멘틱 코딩을 통해 정보의 구조가 알기 쉬워지면, 접근성이 좋아지는 효과가 있다.

 

<2> 세멘틱 코딩을 위한 마크업

- <h1>~<h6> 태그를 사용해, 문서에서 중요한 제목이 무엇인지 드러낸다.

- <section> 태그로 의미 단위로 본문을 나눠준다. <section> 태그는 세멘틱 코딩을 위한 의미 나누기 외에 다른 기능은 없다.

<section>내용</section>

 

 

- <header>, <main>, <footer> 태그로 본문을 세 영역으로 나눠준다.

<header>헤더 영역</header>
<main>메인 콘텐츠</main>
<footer>푸터 영역</footer>

 

- <article>, <aside> 태그로 메인 컨텐츠와 서브 컨텐츠를 나눠준다.

<article>메인 콘텐츠</article>
<aside>서브 콘텐츠</aside>

 

- <nav> 태그로 페이지 내의 네비게이션(메뉴 등)을 표시한다.

<nav>
    <ul>
        <li>내비게이션1</li>
        <li>내비게이션1</li>
        <li>내비게이션1</li>
    </ul>
</nav>

 

- 페이지 아웃라인 예시

<body>
    <header>
        <nav>
            <ul>
                <li>메뉴1</li>
                <li>메뉴2</li>
                <li>메뉴3</li>
                <li>메뉴4</li>
            </ul>
        <nav>
    </header>
    <main>
        <h1>제목</h1>
        <ul>
            <li>배너1</li>
            <li>배너2</li>
            <li>배너3</li>
        </ul>
        <div>
            <section>
                <h2>내용1</h2>
            </section>
            <section>
                <h2>내용2<h2>
            </section>
        </div>
        <aside>
            <ul>
                <li>부가메뉴1</li>
                <li>부가메뉴2</li>
                <li>부가메뉴3</li>
            </ul>
        </aside>
    </main>
</body>
<footer>
    내용
</footer>

'개발일기 > HTML & CSS' 카테고리의 다른 글

[CSS] (1)~(4) CSS 기본 문법, 폰트와 텍스트의 스타일링, CSS 레이아웃, CSS 레이아웃 2  (0) 2025.04.14
[HTML] (1)~(3) HTML 기본 문법, <body>요소에 기술되는 속성, 리스트와 테이블  (0) 2025.04.12

'개발일기/HTML & CSS' Related Articles

티스토리툴바