HTML - 3 [Tag]

저번글에 작성했던 것처럼 

코드를 작성하면 HTML문법 오류가 없더라도 브라우저는 그냥 그 코드 그대로 보여준다.

브라우저는 언제나 사용자에게 content를 보여준다.

즉, 내가 만든 HTML파일에서 어디에 오류가 있는지 알려주지 않는다는 말이다.

 

이것은 장점으로도 볼 수 있는데, 우리가 실수를 하더라도 페이지에 접속한 유저가

이러한 에러를 직접적으로 볼수가 없다.

 

HTML의 목적은 브라우저에게 내용이 무엇인지 알려주는 것이다.

태그와 태그 사이에 내용이 존재한다. 이러한 태그로 내용의 존재를 나타낸다.

 

예를 들면

위와 같이 태그를 시작과 끝이 있게 달아주고 그 안에 내용을 입력한다.

그러면 브라우저는 김치라는 내용이 food라는 것을 알게 된다.

이처럼 브라우저에게 무엇인지 알려주는 것이 HTML이다.

 

실제 HTML 태그를 이용해서 브라우저가 태그에 해당하는 내용을 이해하는지 알아보자

h1 이라는 태그를 사용했다. <h1> :  태그 시작 </h1> : 태그 끝

'Heade number 1'이라는 뜻을 가지고 있는 실제 HTML 태그이다.

위와 같이 글씨크기가 크게 변한 것을 알수 있다.

그럼 <h2>도 되는지 알아보자  

<h6>까지는 태그가 반영되었지만 h7은 없는 것을 알수 있다. 

 

그럼 태그의 시작만하고 태그의 끝을 닫지 않으면?

위와 같이 모든 내용이 h1태그로 인식되어 버린다.

 

다음은 리스트 태그에 대해 알아보자

ul : unordered list : 순서 없는 리스트

ol : oredered list : 순서 있는 리스트

 

리스트 태그 사이에는 리스트를 구분지어줄 태그도 필요하다

li : list

 

위와 형태가 같다.

 

실제 있는 사이트에서 태그를 가져와 이해해보자

위 웹사이트와 같이 드래그해서 검사를 누르면 해당내용의 HTML태그를 볼 수 있다. 

위 방식은 매우 중요하다. 다른 웹사이트가 동작하는 기능을 볼때 해당 기능을 동작시키기 위해서

태그를 검색할 수 있기 때문이다.

 

 

위태그를 보면 <a></a>라는 태그를 볼 수 있는데

a : anchor : 닻

anchor는 링크와 같이 다른 웹사이트로 이동하는 방법이다.

그냥 a 태그로는 움직일수 없고 attributes (태그에 부가적인 요소를 넣어줌)를 부여해야한다.

 

href : http reference : hyperlink reference

이동할 곳을 알려준다.

 

위와 같이 a 태그 시작부분에 <a href = "http://address"> 링크를 타고 들어갈 문구 </a> 넣으면

위와 같이 hyperlink가 뜨게 되고 이것을 타고 들어가면

실제 구글 홈페이지로 들어간다.

 

target : 페이지를 열때 새로운 페이지에서 열게 할 수 있다.

 

target attributes는 위와 같이 사용하는데 기본값이 _self이다.

이를 _blank로 바꾸면 새로운 창에서 열리게 된다.

위와 같이 새로운창에서 google.com이 열린 것을 볼 수 있다.

 

img : image

img 태그는 시작 끝 형태로 이뤄진것이 아니라 self closing tag 형태이다.

<img />형태로서 이미지는 그자체로 이미지이고 내용이 없기 때문이다.

시작과 끝사이에 들어갈 내용이 없기 때문에 self closing tag 형태이다.

 

이미지를 넣기 위해서 src attributes를 사용하면

 

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

이러한 형식으로 이미지를 줄 수 있다.

web상의 이미지 뿐만이 아니라 로컬 이미지도 가능하다.

위 사진과 같이 vscode 폴더에 이미지를 복붙 하면

src="이미지파일 이름.확장자"를 똑같이 넣어주면 된다.

이미지가 다른 폴더에 있다면

위 와 같이 img/라고 폴더의 경로를 src에 넣어주면 된다. (path notation)

 

 

위와 같이 HTML에는 수많은 기능을 하는 수많은 태그가 있고 태그마다 수많은 attributes가 있다.

태그별로 공통적인 attributes가 있는가 하면 아닌 attributes도 있고 다양하다.