목차
1. HTML 문법
2. 부모 태그, 자식 태그?
3. tag의 이름
4. 태그의 구조
5. 태그의 속성
6. 인라인과 블록 / 자주 사용하는 태그 정리
1. HTML 문법
웹 페이지에서 F12를 누르면 개발자 모드를 확인할 수 있다.
과 같은 꺽쇠 괄호에 담긴 것들을 볼 수 있다.
이런 양식의 구문을 "태그"라고 부르며 또는 element 라고 부른다.
이러한 태그는 웹페이지의 하나의 구성요소이다.
태그를 보면로 이루어 진것을 볼 수 있는데
같은 태그를 여는 태그,과 같은 태그를 닫는 태그라고 한다.
HTML의 대부분의 문법은 여는태그, 닫는태그가 있으며 예외도 있다.
2. 부모 태그, 자식 태그?
<html>
<head>
<div>
</div>
</head>
</html>위에 HTML 의 태그를 살펴보자.
태그는 위와 같이 감싸는 형태로 있는데 head 태그 같이 다른 태그를 감싸고 있는 것을 부모태그,
div 태그와 같이 감싸져 있는 태그를 자식태그 라고한다.
3. tag의 이름
태그의 이름이란 브라우저가 html 형식의 파일을 읽는데 작성한 태그의 이름을 확인한다.
그 다음에 우리가 볼 수 있는 페이지를 출력해준다.
태그의 이름이 하는 역할이 있다. 이 태그명에 따라 태그의 속성이 달라진다.
이 태그명에 따라 html을 작성하는 것을 시맨틱 태그 작성이라고 한다.
4. 태그의 구조
: 문서의 형식을 HTML5를 사용한다는 뜻. 어떤 버전을 사용하고 있는지 명시해준다.
html 문서라는 내용이고 lang은 태그의 속성이다. 이것에 대해서는 다음에 알아보자.
en은 뜻은 영문으로 작성된 문서라는 뜻이다.
문서의 메타데이터, 브라우저에서 문서의 정보를 전달을 하는 요소를 작성한다
문서의 본문 내용을 담는 태그이며, 사용자에게 보여주고 하는 내용 요소를 작성한다.
태그의 예시
<img src="./htmlDoc.jpg"> img 태그의 예시를 보자. img 태그는 이미지를 페이지에 포함시킬 때 쓰는 태그이다.
src는 이미지 파일을 찾는 속성이다. src 안에 있는 ./는 파일의 현재 경로를 의미하며 상위 폴더는 ../로 작성한다.
5. 태그의 속성
html 문서에 태그를 작성할 때 태그에는 속성이라는 값을 줄 수 있다.
태그의 속성 구조는 다음과 같다.
<여는태그 속성="값"></닫는태그>
한가지 예시를 들자면 대표저인 예시로 a태그를 들 수 있다
a태그는 anchor 링크를 통해서 페이지간의 연결을 시켜주는 의미를 담는 태그이며, 용도는 하이퍼링크를 추가하기 위해서 사용하는 태그이다. href는 hyperlink reference 이동하고 싶은 페이지의 경로이고 속성에 인터넷 주소를 넣으면 해당 페이지로 이동하는 것을 확인 할 수 있다.
6. 인라인과 블록 / 자주 사용하는 태그 정리
html에서 body 태그안에 사용하는 태그들은 크게 두 가지가 나뉜다. 바로 인라인과 블록이다. 이 두가지에 대해서 알아보자.
인라인 : 너비와 높이를 지정할 수 없고 요소에 따라 동적으로 조절, 다른 인라인 요소들과 나란히 배치된다.
블록 : 너비와 높이를 지정할 수 잇고 다른 요소아 나란히 배치가 불가능하며, 브라우저의 한 줄을 다 차지한다.
태그에는 여러가지가 있으며 자주 쓰는 태그들이 있으니 알아두도록 하자
a, h1, h2, h3, p, span, ul, ol, li, input, button, div
등이 있으며 필요한 태그가 있으면 그때 그때 기록할 예정이다.