[HTML] HTML구성 태그
in Study on Web
HTML은 여러가지 태그로 구성된 마크업 언어이다.
이 언어로 작성된 문서를 통해 홈페이지의 뼈대를 구성한다.
HTML의 태그에 대해서 설명하면 아래와 같다.
기본태그
<!-- ! 치고 엔터 -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 주석은 Ctrl / -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기본태그타이틀</title>
</head>
<body>
</body>
</html>
!치고 엔터를 누르면 자동으로 생성된다.
html문서라고 정의를 하며, 문자열, 언어 등을 구성한다.
title은 홈페이지의 제목을 가리킨다.
그리고 주요 내용이 body에 들어간다.
h태그
제목을 구성하는 태그이다. 중요도의 순서에 따라서 h1~h6까지 나타낸다.
<h1> 제목1 </h1>
<h2> 제목2 </h2>
<h3> 제목3 </h3>
<h4> 제목4 </h4>
<h5> 제목5 </h5>
<h6> 제목6 </h6>
목록태그
목록태그의 종류는 아래와 같다.
- ul(unorder list) : 순서 부여하지 않는 리스트
- ol(order list) : 순서 부여하는 리스트
- li : 리스트 내용
<ul>
<li>list1</li>
<li>list1</li>
</ul>
<ol>
<li>list</li>
<li>list</li>
<li>list</li>
</ol>
위와 같이 작성하면
- list1
- list1
- list
- list
- list
위와 같이 작성된다.
아참, 부모태그>자식태그 * 숫자 형태로 작성하면
부모태크 아래 같은 자식태그가 숫자 만큼 자동으로 작성된다.
a태그
문자를 받아오는 태그이다.
<a href ="https://www.naver.com"> naver </a>
input태그
입력을 받는 태그이다.
텍스트로 입력받는 형태
<!-- text -->
<input type="text" placeholder="아이디를 입력하세요">
<br/>
<!-- password ctrl + space 가 자동완성-->
<input type="password">
하나만 고르는 형태
<!-- radio 한 가지만 선택할 것 ex 성별 : name이라는 속성값으로 그룹화 진행 -->
<!-- 기본 체크 값을 설정하고 싶으면 checked -->
자바반 : <input type="radio" value="자바" name = "ssafy" checked>
파이썬 반 : <input type="radio" value="파이썬" name = "ssafy">
체크박스 형태
<!-- checkbox 다중 선택할 때 ex 추가 메뉴-->
치킨 : <input type="checkbox" value="치킨" name="menu">
삼겹살 : <input type="checkbox" value="삼겹살" name="menu">
<br/>
<!-- input type button -> 버튼 처럼 동작함 -->
<input type="button" value="버튼입니다">
목록에서 고르는 형태
<!-- select 태그 (목록 중에서 고르기) -->
<select name="" id="">
<option value="python">파이썬</option>
<option value="java" selected>자바</option>
<option value="C">C</option>
</select>
div, span 태그
블록을 구분하는 태그이다!
<!-- div, span : 단순 레이아웃 구분 용도 -->
<!-- div는 줄바꿈이 일어난다. -->
<div>
</div>
<!-- span 태그 : CSS와 함께 쓰이기 위한 용도, 줄바꿈은 일어나지 않음. -->
<!-- 시멘틱 웹 : 기계가 쉽게 알아들을 수 있는 웹 (스크린 리더 활용, 검색엔진 최적화를 위함) -->
차이점은 줄바꿈이 일어나는가 여부이다.
시멘틱 웹, 즉 기계가 알아들을 수 있도록 태그를 구성하기 위해 사용한다.
image 태그
이미지를 설치하는 태그이다.
<!-- 픽사베이(pixabay) 접속해서 저작권에서 자유로운 이미지 다운로드 받기! -->
<!-- 이미지 태그에 해당 이미지 넣기 -->
<!--
이미지 가져오는 방법
1. 절대경로
2. 상대경로
-->
<!-- 절대경로의 형태.-->
<img src="C:\Users\SSAFY\Desktop\study\chicken.jpg">
<!-- 상대경로의 형태.
./ 현재 디렉토리 기준
../ 현재 디렉토리의 상위 디렉토리-->
<img src="./chicken.jpg" alt="치킨">
<!-- alt : 이미지가 안보일 때 대체 텍스트 -->
이미지 위에 글씨를 띄우고 싶을땐 CSS에서 background-image를 이용하는 방법을 사용하면 좋다.
픽사베이라는 사이트에서 저작권에 걸리지 않는 이미지를 다운받을 수 있다.
