[Boost UI] HTML 태그 / 텍스트 / 내외부링크 / div,span / 리스트 / 이미지

현재 태그의 개수는 대략 130개

그러나 실제 웹 사이트에선 대략 20~30개 정도가 사용

 

HEADING <h1> ~ <h6> 문서 내의 제목표현시 사용. 제목 레벨 따라 h1 ~ h6

Paragraph 단락과 개행 <p> 블록 레벨 태그

LineBreak 개행 <br>

 

텍스트 태그

---

텍스트 표현 태그 4가지 (인라인 레벨 태그)

<b> 글자 굵게 표현

<i> 글자를 이탤릭체(글자 기울임)로 표현

<u> 밑줄 표현

<s> 중간선 표현

기타 태그

 

앵커(anchor) 태그

---

앞서 HTML의 HT는 하이퍼 텍스트의 약자 이며 이는 곧 링크를 의미

앵커태그는 링크 생성하여 다른 페이지로 이동, 현재 페이지 내에서 특정 위치로 초점 이동

외부링크 : 하이퍼 레퍼런스 속성인 href에 URL을 입력 <a href = "https://www.google.com"> google </a>

내부링크 : 만약 href="#idid"이면 id값이 idid인 곳으로 이동한다.

예를 들어 <h1 id="idid"> <a href="#idid"> id이동 </a> </h1> 이면 id이동 클릭시 h1으로 이동한다.

다른 속성들을 찾아보자

target = "self" 이면 클릭시 새창이 아닌 기존 태그에서 이동되고(target속성입력안하면 기본적으로 self로 이동) target="_blank"이면 새탭으로 이동된다.

 

의미없는 wrap용 태그

---

의미는 없으나 요소들을 묶기 위한 태그. 스타일을 주거나 서버에 보내는 데이터 담는 용도

<div> 블록 레벨 태그. 한 줄을 생성해서 내용 표현. 주로 wrap, container라는 class명을 사용

<span> 인라인 레벨 태그. 인라인 레벨은 한 줄 안에서 표현되는 요소

 

리스트 태그

---

ul : (unordered list)순서 없는 나열 리스트 (중첩가능. ul태그의 자식 태그는 li태그만 가능. li태그는 ol태그 혹은 ul태그만 부모태그이고 li태그의 자식 태그는 대부분 가능하다.)

ol : (ordered list)순서 있는 나열 리스트 (중첩가능. ol태그의 자식 태그는 li태그만 가능. li태그는 ol태그 혹은 ul태그만 부모태그이고 li태그의 자식 태그는 대부분 가능하다.)

dl : (definition/description list)용어와 정의를 표현할 때 사용

dt : 용어를 나타내는 태그

dd : 용어를 정의,설명하는 태그

 

이미지 태그

---

img : 문서에 이미지 삽입, 빈태그

src (source)속성 : img태그의 필수 속성, 이미지 경로 지정.

src 속성의 상대경로 : 상대경로는 웹 페이지를 기준으로 상대적 이미지 위치. src="./images/pizza.png"

src 속성의 절대경로 : 실제 그 이미지가 위치한 곳의 전체 경로src="C:/users/document/images/pizza.png" src="http://www.naver.com/pizza.png"

alt 속성 : 이미지의 대체 텍스트, src속성과 더불어 반드시 들어가야 하는 속성

width/height 속성 : 이 속성이 없으면 이미지는 원본 크기 출력. 이미지의 가로/세로 크기 속성. 값 단위 무필요. 값 입력시 자동 픽셀 단위 계산. 둘 중 하나만 선언하면 나머지 속성은 비율에 맞게 자동 출력. 

Gif : 제한적인 색, 작은 용량, 애니메이션, 투명 이미지 가능

jpg : 높은 압축률, 자연스런 색상, 사진 그림에 사용. 투명을 지원하지 않기에 사진의 하얀배경 그대로 포함

png : 이미지 손실 없고 투명과 반투명 지원

반투명부분