[코딩 공부_05] HTML의 각종 태그들 정리

오늘 수업에서 배운 각종 태그들을 정리하는 시간을 가져보도록 하겠다.

엄청 중요한 태그라고 생각하기 때문에 더 열심히 정리하였다!! 😎😎

---

①  목록태그  : list를 나열할 때 목록을 구분해주는 태그로, 목록태그의 종류는 총 3가지가 있다.

  - 순차적 목록(Order List) → <ol> : 순서가 있는 목록, 자동으로 각 항목에 기본 값으로 숫자가 부여된다.

  - 비순차적 목록(Unorder List) → <ul> : 순서가 없는 목록, 자동으로 원형 특수문자가 부여된다.

  - 정의형 목록(Definition List) → <dl> : 특정한 개념이나 용어에 대한 설명이나 정의를 할 떄 사용, 가끔 사용한다.

 * <ol> <ul> <dl> 모두 목록을 구분해주기 때문에 list를 표시해주는 <li>태그를 둘러싸고 있는 형태이다.

 * <li> 태그는 블록 요소, 텍스트, 인라인 요소, 블록 요소 모두 포함이 가능하다!!

순차적 목록,  <ol> 

- <ol>을 사용하면 순서를 표현할 수 있다.

- 보기와 같이 숫자가 아닌 다른 문자로도 표현이 가능하다. 

  <ol type="A">와 같이 type을 지정하면 알파벳, 로마숫자 등 변경이 가능하다.

- 목록 태그를 그룹이라고 생각하면 쉽다!

  그룹A > 그룹 A-1 > 그룹 A-2 ... 이런 식으로 생각하면 조금 더 쉽게 태그를 사용할 수 있다.

** <ol> 다음은 <li> 태그만 사용 가능하다. → <h3> X

 

 

비순차적 목록,  <ul> 

- <ul> 태그는 순서대로 목록이 나오며, 원형 특수문자가 나오게 된다.

** 블릿 특수문자 머릿글 제거나 가로 수평 배열.. 등 CSS를 이용하여 가능하다.

아직 기초적인 html을 배우고 있기 때문에 작성 XX

 

 

정의형 목록,  <dl> 

- <dl> = 큰 그룹, <dt> = 소 그룹 (<dl> 안에 속하는 <dt> 안의 list)

- <dl>은 자동으로 들여쓰기가 된다.

- 순차적 목록이나 비순차적 목록은 항목들을 나열하는 의미가 있지만 정의형 목록은 '이것이 무엇이다.'처럼 정의를 내리거나 용어에 대한 설명에 사용한다.

 

 

 

② 영상, 이미지 요소를 추가할 수 있는 태그,  <img> <a> <iframe> 

 

src : source의 경로를 뜻한다!

이미지를 추가하자,  <img> 태그 

- 이미지 삽입을 하기 위해 꼭 오는 필수 태그이며, 꼭 사용해야하는 속성이 있다.

바로, src → 파일 경로를 지정하는 속성이다.

- src="경로지정" → (vsc 편집기 기준) "./" 작성하면 내가 저장된 폴더 기준으로 이미지 목록이 나오며, 외부 사진인 경우 반드시 http://를 작성해야한다!!

 * 반드시 alt 속성을 사용해야한다. 웹 표준성 > 웹 접근성의 규칙을 지켜야 하기 때문이다.

(웹 접근성 : 스크린 리더기에서 alt 이미지를 읽는다.)

 

 

링크를 추가하자,  <a> 

- 링크를 만드는 태그이다. 텍스트와 함께 사용하면 텍스트 안에 링크가 만들어지고, 이미지와 함께 사용하면 이미지 안에 링크가 만들어진다.

* <a href="링크할 주소>, <a>태그와 반드시 함께 와야하는 속성은 href 속성!! 

** <a> 태그 안에서 사용가능한 속성 : href, target, download, rel, hreflang, type

     - href : 링크한 문서나 사이트의 주소 입력

     - target : 링크한 내용이 표시될 위치(현재 창 또는 새창)을 지정

     - download : 링크한 내용이 아닌 다운로드가 된다.

     - rel : 현재 문서와 링크한 문서의 관계를 알려준다.

     - hreflang : 링크한 문서의 언어를 지정한다.

     - type : 링크한 문서의 파일 유형을 알려준다.

 

 

영상을 추가하자,  <iframe> 

- 별도의 웹페이지 문서를 테이블, 이미지와 같은 객체처를 특정 위치에 삽입하는 기능이다.

- src 속성 값을 통해 웹사이트의 주소를 입력하고, width와 hegiht 값을 이용해 너비와 높이를 지정한다.

** 유튜브 사이트에 들어가서 업로드 또한 가능!!

(영상>공유>내보내기>퍼가기>복사>html에 붙여넣기)

 

 

③ 표를 만들 수 있는  <table> 

** <tr></tr> : 표의 행(가로)을 만드는 태그

  - rowspan : 표의 행(가로)을 합칠 수 있는 속성

** <td></td> : 표의 열(세로)을 만드는 태그

  - colspan : 표의 열(세로)을 합칠 수 있는 속성

 (나는 외우기 힘들어서 행은 아우가 행님한테 넙죽 거린다, 열은 10의 1을 생각하면서 쓸 때가 많다..😳

억지스럽지만 이렇게 하지 않으면.. 외워지지가 않는다 😥)