HTML (Hyper Text Markup Language)
- 웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어
HTML 태그 구성
<열린태그 속성 = "속성값"> 컨텐츠 </닫힌태그>
- 컨텐츠 : 열린 태그와 닫힌 태그 사이에 있는 내용
- 속성 : HTML 태그가 갖고 있는 추가 정보
- 속성값 : 어떤 역할을 수행할지 구체적인 명령 진행
기본 예시
<!DOCTYPE html> <!--html5 문서 선언, 본 문서는 html5로 구성되어있다고 정의-->
<html> <!--모든 코드는 이 태그 안에서 작성되어야함-->
<head> <!--요약 정보. 웹사이트에서 노출되지 않는 정보.-->
<meta charset="UTF-8"> <!-- 한글 텍스트 깨짐 방지. 디폴트로 넣어줘라-->
<title>abcdefg</title> <!-- 브라우저 상단탭 제목-->
</head>
<body> <!--웹사이트에서 눈에 보이는 정보. 이미지, 텍스트 등-->
<h1 style="color:navy;">안녕!</h1> <!--h1태그의 style속성. 속성값은 color:navy;-->
</body>
</html>
<img> 태그
<img src="logo.png" alt="회사로고" width="200px" height="">- 닫힌 태그 없음.
- src속성 : 삽입할 이미지 파일 경로
- alt속성 : 웹사이트가 이미지 출력 못하면, 텍스트 정보로 대체.
- width, height : 둘 중 하나만 입력하면, 기존에 갖고 있던 비율대로 나머지가 조정됨.
<h>태그, <p> 태그
<h1>hello</h1>
<h3>hello</h3>
<p>paragraph</p>- <h> 태그 : 제목, 부제목 표현
- 숫자 값이 클수록 폰트 사이즈는 작음. 숫자 : 정보의 중요도
- <h1>은 제일 중요 -> html 문서에서 한 번만 사용됨.
- <p> 태그 : 본문 내용 표현
<ul>태그, <ol>태그
- unordered list, 순서가 없는 리스트 생성 시 활용
- 메뉴 버튼 만들 때 사용
- ordered list, 순서가 있는 리스트 생성 시 활용
- 번호가 메겨짐
- 자식 태그로 <li> 태그 사용
<a> 태그
<a href="https://www.naver.com/" target="_blank">네이버</a>
<!-- 자주 쓰이는 형태 -->
<h1>
<a>
<img>
</a>
</h1>- 텍스트, 이미지 클릭 시, 다른 웹페이지로 이동시키는 기능. 컨텐츠를 클릭할 수 있게끔 바꿈.
- href : 연결할 웹페이지의 url 주소
- target : 웹페이지 연결 방식, _blank : 새 탭으로 이동.
구조를 잡을 때 사용하는 태그
목차, 머리글, 상단 : <header>태그, <nav>태그
<header>
<img src="logo.png" alt="로고"> <!-- 머리글에 로고가 오는 경우 많음-->
<nav> <!-- 상단에 메뉴 버튼 영역이 오는 경우 많음-->
<ul>
<li>홈</li>
<li>목록</li>
</ul>
</nav>
</header>header : 웹사이트의 머리글을 담는 공간
nav : 메뉴 버튼을 담는 공간. 주로 <ul>, <ol>, <li>, <a>
본문 : <main>, <article>
<main role="main"> <!--본문-->
<article> <!--정보-->
<h#>..</#h>
</article>
</main>- 문서의 주요 내용을 담는 태그
- IE(Internet Explorer)는 지원하지 않으므로, role="main" 속성 필수 입력
- <article>
- 문서의 주요 이미지나 텍스트 등의 정보를 담고 구역을 설정.
- 태그 내에 구역을 대표하는 타이틀 <h#>태그가 반드시 존재해야함.
하단 : <footer>
<footer>
<div>
<p>주소 : #####</p>
</div>
</footer>- <div> : 앞선 것들은 상단, 본문, 하단처럼 공간에 대한 의미가 있었지만, <div>는 이와 다르게 임의의 공간을 만드는 태그.
HTML 태그의 두 가지 성격 - Block요소, Inline요소
- 줄바꿈 현상, 가로.세로, 상.하배치
Block 요소
- y축 방향으로 정렬 (줄바꿈 현상 나타남)
- 공간을 만들 수 있고(가로,세로 길이 설정 가능), 상.하배치 가능
- p태그, h태그, div, header 등 공간 만들 때 쓰는 태그들 등
Inline 요소
- x축 방향으로 정렬 (줄바꿈 현상 안나타남)
- 공간을 만들 수 없고, 상.하배치 불가능
'HTML, CSS, JS' 카테고리의 다른 글
| CSS 기초 (0) | 2025.10.09 |
|---|---|
| 자바스크립트 DOM (0) | 2025.10.07 |
| 자바스크립트 기초2 (0) | 2025.10.04 |
| 자바스크립트 기초1 (0) | 2025.10.04 |