1. HTML의 구성
Tag
HTML은 Text들을 구분해주는 'tag'로 둘러싸여있다.
Tag는 기본적으로 <이름 속성 ="값"> Text </이름> 형식으로 되어있다.
Index
최초 파일은 index.html로 작성한다. 왜냐하면 웹서버들이 기본적으로 index.html 파일을 제일 먼저 찾도록 되어있기 때문이다.
2. 기초Tag와 기초 지식
<!DOCTYPE html> : 구글 크롬과 같은 브라우저가 이 문서는 html임을 인식할 수 있도록 알려주는 tag이다.
<html></html> : 안에 있는 text들이 html임을 나타내준다. 별다른 기능은 없다. 태그는 한번 열면 반드시 닫아줘야 한다는 의미로 닫는 태그도 작성한다.
<head> : 유저에게 보이는 것은 아니고, 내가 만드는 웹사이트의 정보를 소스코드에서 제공하는 것이다.
<body> : 유저에게 보이는 내용이 들어가는 태그이다.
<h1> : 제목을 쓰고 싶을 때 쓰는 tag로, h1 ~ h6까지 있다.
<div> : 단순히 text를 구분만 해주는 태그이다. 의미가 없다는 뜻으로 non-semantic tag 로 분류한다.
<span> : div와 마찬가지로 non-semantic tag이다. span 자체는 짧다는 뜻이다.
>>> 다만, <div> tag는 contents를 새로운 줄에 block 형태로 만들어주고, <span> tag는 inline 형태로 원래 문단을 해치치 않는 형태로 구분지어 주는 역할을 한다. 다시 말해, <div>는 한줄에 1개의 tag만 허용하며, <span>은 1줄에 여러 개의 태그가 올 수 있다.
<img src> : Image를 추가해주는 tag이다. 아래와 같은 양식으로 표현한다.
<img src="Image 경로/image 파일이름" width="100px" height="100px">
Image 경로에서는 "../" 를 통해 상위폴더에 접근할 수 있다. ex) ../images/picture1.jpg
image 파일이 들어있는 경로 및 폴더명을 잘 써주는게 중요하다.
<a> : text에 link를 걸어주는 tag이다.
<a href="링크를 걸어줄 주소"> Text </a>
>>링크의 위치를 조절하기 위해서는 주소 뒤에 style="text-align:center"와 같은 형식으로 작성해주면 된다.
>><a> tag 사이에 <img> tag를 넣으면 그림에 링크를 달 수 있다.
>> <div> tag 안에 <a>, <img>, text를 한번에 넣으면, 모두가 포함된 링크를 만들수도 있다.
<meta charset="...">
: ... 에 utf-8을 넣어준다. meta는 '추가'같은 뜻인데, 이 태그가 문서를 utf-8방식으로 encoding(암호화) 한다는 뜻이다. 달리 말해서 웹사이트가 어떤 언어로 작성되어있는지 알려주고, 변환해주는 역할을 하는 태그이다.
특히, 어떤 meta태그는 다음, 네이버, 구글 등 특정 플랫폼에서만 쓰이도록 되어있기도 하다.
개발자도구
위 meta charset 에서 살펴본 사진과 같이, 'F12' Key를 누르거나, 웹페이지에서 마우스 우측 클릭을 하여 '검사' 에 들어가면 개발자 도구가 나온다.
위 모양으로 된 아이콘 (단축키 Ctrl+Shift+C)를 누르면 html과 CSS의 속성 정보를 살펴볼 수 있다.
어떤 element를 클릭하여 Styles Tab을 보면 해당 element에 적용된 CSS 정보를 볼 수 있고, Computed Tab에서는 position과 box model의 정보를 살펴볼 수 있다. (position, box model 내용은 추후 기술)
또한 개발자도구 자체에서 어떤 Code를 작성하여 웹페이지가 어떻게 변하는지 직접 볼 수도 있다.
Console Tab에 들어가서 특정 코드를 실행해보면 웹페이지가 어떻게 작동하는지 바로 검사해볼 수 있다.
ID and Class
코드 안에 똑같은 태그를 갖는 text들이 있을 때, 구분하여 표기할 뿐만 아니라 그것들에 개별적으로 속성을 부여하기 위해서 ID와 Class를 사용한다.
ID는 고유한 것으로, element마다 1개씩만 부여할 수 있다. 주민등록번호 같은것이라고 할 수 있다.
Class는 여러개 존재할 수 있는 구분자이다.
보통 element들은 완전히 고유한 것은 잘 없고, 중복으로 사용되는 경우가 많으므로 주로 class를 많이 사용한다.
주석(Comment)
주석은 '<!-- 주석 -->' 의 형태로 표기할 수 있다.
여러 줄을 주석처리 할때는 '/* 주석 */'의 형태로 처리하면 된다.
단축키로는 VS Code의 경우 주석처리를 하고 싶은 곳을 block 처리한 뒤, 'Ctrl+/ ' 처리를 해주면 된다.
'Programming-[Frontend] > HTML,CSS' 카테고리의 다른 글
| CSS / Transition, Transform, Animation, Media Query (0) | 2020.07.03 |
|---|---|
| CSS / Flexbox, Selector(Pseudo-selector), States (0) | 2020.07.02 |
| CSS / 기본 / Box, Block, Align, Position (0) | 2020.06.18 |
| CSS / 기본 / Tag, Text(Font) (0) | 2020.06.17 |
| HTML, CSS / 기본 개념 (0) | 2020.06.12 |
