[HTML] 웹 프로젝트 2일차! ( tag & attributes )

TAG )

HTML을 구성하는 가장 문법적인 요소이며, 기본적인 형태는 <> </> 이다.

<태그명>  - 시작 태그

</태그명> - 종료 태그

 

예시)

이런식으로 태그를 선언할 수 있다!

하지만 html안에서 이해할 수 없는 태그라면 태그명으로써 저장이 되긴하지만,

태그가 가지고 있는 특성이 웹사이트에 반영되지 않는다.

 

그렇다면 html이 이해할 수 있는 태그에는 무엇이 있을까?

 

- <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

문서의 정보 계층을 구조화하는 태그

-> 숫자가 낮을수록 더욱 중요한 제목임을 의미한다.

코드 반영된 웹

-<u>

밑줄을 쳐주는 태그

코드

코드 반연된 웹 

- <ul>

-> unordered list

순서가 없는 리스트를 의미한다.

 

- <ol>

-> ordered list

순서가 있는 리스트를 의미한다.

 

- <li>

-> list 

리스트의 항목을 의미한다.

 

코드

 

 

코드 반영된 웹

이런식으로 <ul>태그로 감싼 list 항목들은 점으로 표시되고

<ul>태그로 감싼 list 항목들은 1, 2, 3, 이런식으로 순서와 함께 표시된다.

 

-attributes

특정한 태그와 함꼐 쓰이는 속성을 말한다.

 

- <a>

링크를 걸 수 있는 태그이다

 

- <a>의 attributes ( href=" "  target = " " )

-<a href ="링크 주소 " >

href는 a태그의 속성중 하나이며,

링크 주소를 입력하면 내용을 클릭하면 지정한 주소로 바로 이동할 수 있도록 링크를 걸어준다. 

 

-<a href="링크 주소" target = "내용 ">

target은 그 링크를 새 페이지에 열것인지 아니면 사이트 자체에 링크를 열것인지 알려주는 속성이다.

디폴트 값은 target = "_self" 이며 자체에 링크를 열라는 속성이다

만약 target = "_blank" 를 한다면 새 페이지에 링크를 연결하라는 의미가 된다.

 

-<img/>

<img src = "이미지 주소" />

-> <img/>는 자체 종료 태그이며 다른 태그들과는 달리 종료 태그가 없이 단독으로 쓰인다.

img는 항상 src=" " 속성과 같이 쓰이는데 이미지의 주소를 넣으면 해당 이미지가 웹에 실리게끔 한다.

 

코드

코드 반영된 웹

위쪽 go to google 에는 google.com 링크가 걸려있고

아래에는 <img src=" " />에 지정한 이미지가 실려있다.

 

느낀점 ㅎ)

어지저찌 html의 두번째 시간이었는데 생각보다 간단하고 재밌었다 핳 ㅎㅎ

확실히 프론트 엔드쪽이다 보니

코드를 작성하고 저장하면 바로바로 웹이 바뀌는 것이 보여서 더 흥미진진했당!!