HTML 구조와 기본 설정
<!DOCTYPE html>
- HTML5 문서를 선언함
<meta charset="UTF-8">
- 다른 나라의 언어를 사용하게 되면 글자가 깨지는 현상이 나타날 수 있는데, 이를 사용하면 모든 국가의 언어를 지원하여 깨지는 현상을 방지할 수 있음
<!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>
</body>
</html>
텍스트 관련 태그
<h1> ~ <h6>
- 제목 태그 라고 하며 숫자가 커질수록 크기가 작아짐.
- 보통 머리말에 많이 사용함.
<!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>머리말1</h1>
<h2>머리말2</h2>
<h3>머리말3</h3>
<h4>머리말4</h4>
<h5>머리말5</h5>
<h6>머리말6</h6>
</body>
</html>
<p>
- 문단을 나타내고 일반 텍스트를 작성할 때 사용함.
<!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>
<p>첫번째 문단 입니다.</p>
<p>두번째 문단 입니다.</p>
<p>세번째 문단 입니다.</p>
</body>
</html>
링크 태그
<a>
- 화면 이동(링크) 태그
- 특정 웹사이트로 이동하기 위해서 || 같은 화면안에서 메뉴를 이동하기 위해서 사용
<a> 속성
- href: 이동할 URL이나 페이지를 지정함
- a는 herf 라는 속성이 없으면 아무의미가 없는 태그가 되어버림
- 자바스크립트 함수를 호출하는 데도 사용할 수 있음
<!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>
<a href="https://www.naver.com/">네이버</a>
</body>
</html>
이미지 태그
<img>
- 이미지를 삽입함.
- 종료 태그가 없음
<img> 속성
- src: 이미지 경로를 지정함
- alt: 대체 텍스트를 제공함
- 네트워크 오류 시 대체 문구 표시.
- 시각 장애인을 위한 설명 추가 가능.
<!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>
<img src="./img/monkeyLogo.avif" alt="원숭이 냠 먹고있음">
</body>
</html>
속성이란
- 시작태그 안에 있음
- 그 태그의 추가적인 정보 관리를 위해 사용함
- 종료태그에는 사용할 수 없음. 시작태그에만 사용가능
- 모든태그에 공통적으로 쓸 수 있는 속성 : global 속성 / 특정 태그에만 쓸 수 있는 속성 : local 속성
라이브 서버와 물리적 경로 비교
- 라이브 서버: 실시간 코드 변경 사항을 확인할 수 있음
- 물리적 경로: 변경 사항이 반영되지 않으며, 새로 고침이 필요함
새롭게 알게된 사실
img 태그에서 속성 alt의 기능에 대해 알게되었음.
이미지를 잘못 입력했거나 네트워크 장애가 생겨 다운로드가 안될때 alt가 보임.
또한 시각장애인들을 위한 중요한 기능이라는 사실도 알게되었음.
시각장애인들은 이미지가 보이지 않으므로 스크린리더기로 코드를 듣는 시각장애인을 위하여 alt에 코드를 설명하는것도중요함.
'개발 개념 정리 > html, css' 카테고리의 다른 글
| [ HTML ] HTML form 과 다양한 입력 필드 타입 정리 (0) | 2025.03.12 |
|---|---|
| [ HTML ] 목록 태그 (1) | 2025.03.11 |
| [ HTML ] 의미에 맞는 태그 사용하기 (0) | 2025.03.11 |
| [ CSS ] style 속성 (0) | 2025.03.11 |
| 글로벌 속성과 로컬 속성 (0) | 2025.01.13 |