[TIL05] HTML 태그

1주차 자기소개페이지 리뷰 후 사용한 태그들과, 새롭게 알게 된 태그들에 대해 더 자세히 알아보기로 하자.👍

HTML 태그

위에 소개한 시맨틱 태그를 제외한 내가 사용했던 태그를 정리해보자.

div 태그

아무것도 나타내지 않는 태그

ol,ul,li 태그

정렬된 목록 ol
정렬되지 않은 목록 ul

• 순서가 필요하면 ol
• 순서가 필요하지 않으면 ul
• ol,ul 은 자식으로 li 만 포함 가능.
• li 단독으로 사용불가 ol,ul에 자식으로 포함되어야 함.
• ol의 항목 순서도는 중요도를 의미할 수 있음.

p 태그

하나의 문단을 설정

a 태그

다른페이지 같은 페이지 다른 URL로 연결할 수 잇는 하이퍼링크 설정.
href,rel,target 을 주요하게 사용.

i 태그

아이콘이나 특수기호

HTML 태그 속성

a 태그 속성

대부분 a 태그에는 href 를 사용하지만 그 외에 다른 속성에 대해서도 알아보자.

• download : 요소가 리소스를 다운로드하는 용도로 사용됨.
• href : 링크 URL
• rel : 현재 문서와 링크 URL의 관계
• target : 링크 URL의 표시,위치 (기본값으론 보고있던 탭에 나타냄)
  • _blank : 다른탭에 나타내라

여기서 잠깐, a 태그를 이용해서 메일보내기 설명 🧐
내가 자기소개 페이지 컨택트 부분에 메일 아이콘을 누르면 나에게 메일을 쓸 수 있는 창이 뜨게 설정했다.

<a href="mailto:[email protected]" title="메일보내기">

링크 넣는란에 mailto:메일주소 만 작성해주면 클릭하면 간단하게 메일을 바로 보낼 수 있는 창이 만들어진다.

img 태그 속성

img 태그에는 간단하게 src로 이미지사진의 파일주소값을 넣어주면 된다.

예시 ✍️

<img src="./img/dohee.jpg" alt="도희사진">

여기서 ./와 alt 뭘까?🧐
./ " 파일이 같은 위치내에 있어!"
../ "파일이 다른 위치에 있어서 나가서 찾을게!"
alt는 파일이 업로드 되지않을때나 마크업할때 컴퓨터가 읽을수있는 이미지에 대한 설명?이라고 생각하면 된다.

정말 유용한 태그, 아주 잘쓰고 있고 배워서 다행인 input태그는 다음 TIL에 작성해야겠다ㅎㅎ