7가지 태그 알아보기

2022.08.04

 

• <비전공자를 위한 첫 코딩 챌린지> - DAY 3

: 04 태그로 웹 페이지 만들기

---

Review

 

• <비전공자를 위한 첫 코딩 챌린지> - DAY 3

 

: 프로필 링크 페이지를 만들 때 무작정 따라하다보니 어떤 태그가 어떤 용도로 쓰이는지도 모르고
사용했는데 드디어 태그를 배우게 됐다.
책에 있는 예제 코드대로 직접 실행해보면서 익혔다.
오늘은 7개의 태그만 익혔는데 태그는 약 150개 정도라는 것을 알고 나니 머리가 아프다.
목표를 달성하는 데 필요한 태그는 그때마다 검색해서 알아보면 돼서 걱정하지 않아도 된다고 책에 쓰여

있어서 안도의 한숨을 내쉬었다 :-<
앞으로 파이팅이다...!

 

 

<대표적인 태그>

-h : 제목 태그
-br, p, div, span : 순서대로 줄바꿈(br), 문단 지정(p), 영역 지정(div), 범위 지정(span)
텍스트를 나눌 때 사용하는 태그.
-link : 현재 문서와 외부 소스를 연결해주는 태그
-img : 이미지를 나타내는 태그
-form : 폼(입력 양식)을 만드는 태그. 사용자의 입력을 받는 양식을 만들 때 사용
-button : 버튼을 만드는 태그
-ol,ul,li : 리스트를 나타내는 태그

 

---

 

h 태그 예제

 

<h 태그를 사용할 때 주의할 점>
-HTML 한 페이지에서 h1 태그는 한 번만 사용하기
-h 태그는 제목을 나타내는 코드이므로 문단 처음에 배치하기
-검색 엔진에 사용되는 태그이므로 검색어를 고려하기

 

 

---

 

 

br, p 태그 예제

-p 태그는 줄바꿈
-br 태그를 두 번 치면 p 태그 한 번 친 것과 같은 효과가 나타난다.
즉, br 태그는 enter와 유사하다.

 

---

 

div 태그 예제

 

span 태그 예제

 

-div 태그는 줄을 바꾸고, span 태그는 줄바꿈이 없다.

 

---

<link rel="stylesheet" href="style.css">         → link 태그 예제

-rel="stylesheet"는 CSS 속성을 가진 파일과 연결한다는 의미

-href="style.css"는 style.css 파일로 링크한다.

 즉, 현재 파일에서 외부에 있는 자원인 style.css 파일을 스타일시트 관계로 연결시켜 사용한다는 뜻이다.

-link 태그와 a 태그가 비슷하다.

 <a href="http://www.google.com">visit google</a>          →a 태그 예제

 실행 결과 'visit.google' 이라고 뜨는데 클릭하면 구글 페이지로 이동한다.

 

---

img 태그 예제

-src : 이미지 경로, 주소
-alt : alternative(대체하다)의 약자, 이미지를 설명하는 문구
-width : 이미지 가로 크기
-height : 이미지 세로 크기

 

 

내 PC에 저장된 이미지 불러오기

 

1. VSCode에서 내 PC에 저장된 이미지를 불러오기.
2. 이미지 파일명 위에서 마우스 우클릭을 하면 경로 복사가 뜨는데 그걸 클릭해서 img 태그의
src 속성값으로 붙여넣기하면 경로가 입력된다.

 

---

 

form 태그 예제

-input 태그는 사용자 입력을 받는 폼. 사용자가 데이터를 입력하는 영역을 결정한다.
-First name과 Last name은 라벨인데, 상품에 스티커 라벨을 붙이는 것과 비슷하다.
-input 태그에 type 속성을 "submit"으로 주어 제출 버튼을 만들었다.
-form 태그는 제출 버튼을 눌렀을 때 입력값을 처리할 대상을 지정해준다.
→ <p>제출되었습니다</p>
-id : input의 이름을 지정해주는 역할
-type : input 태그의 속성을 결정
-for : label이 설명하는 input 등의 id를 지정

 

---

 

 

button 태그 예제 - Submit 클릭 전

 

-button: 누를 수 있는 버튼
-submit : form을 제출하는 버튼
-reset : form의 입력값을 초기화하는 버튼

 

 

Submit 클릭 후

---

 

ol,ul 태그 예제

 

-ol : ordered list. 순서가 있는 리스트
-ul : unordered list. 순서가 없는 리스트
-li : list item. 목록을 구성하는 개별 항목 (아이템)

 

 

 

 

 

 

 

 

 

 

 

 

*이미지 출처

instagram : @postershop.kr