[TIL] HTML&CSS (09.08)

👩‍💻 HTML 기본

<!DOCTYPE html>

html 문서의 시작

브라우저에게 해당 문서가 html문서를 포함하고 있음을 알려준다

<html lang="ko"> </html>

접근성을 고려하여 html문서의 언어 속성을 한글로 지정해준다.

[주요 언어 코드]

한국어 : ko

영어 : en

중국어 : zh

일본어 : ja

<head>
	<title>title</title>
   	<meta charset="utf-8" />
</head>

<body>
	<tag-name attribute="">component</tag-name>
</body>

html은 head와 body로 이루어져 있다.

head에는 문서를 구성하는 태그를 지정하고, body에는 문서의 내용을 작성한다.

위의 예시에 있는 <title>은 해당 페이지를 열였을때 브라우저 상단에 뜨는 페이지의 제목이다.

meta tag는 문서에 대한 추가정보를 제공하는 것이다!👏

<meta charset="utf-8" />

meta tag의 예시로, html 파일이 한글로 인코딩 되어있음을 알려준다.

이외의 다양한 태그를 사용할 수 있다!

html에는 너무너무 다양한 태그들이 있고, 우리는 이것을 다 외울 필요는 전혀 없다🙅‍♀️

필요한 태그가 있다면 그때그때 구글링 하면 된다😊

<label for="name"></label>
<input id="name" />

우리는 태그별로 아이디를 부여할 수 있다! 와!

🙌 주의할점

아이디는 unique identifier!

모든 문서에서 동일한 아이디가 중복되면 안되고, 한 태그는 하나의 아이디만 가질 수 있다!

~~lable tag의 id를 부여할 때는 for을 사용한다.~~

👉 label tag 에서 for 속성을 사용하여 label tag와 input tag를 연관시켜, label 태그를 통해 input 태그에 포커스가 가게하거나, 활성화 시킨다.(수정해주신 zzeonghee님 감사합니다❤️)

예전에는 <div></div> 태그를 사용했지만

semantic tag를 사용하는것이 좋다!

semantic tag는 문서에 의미를 부여하는 태그이다.

<div id="footer"> </div>

이렇게 작성해도 footer이라는 것을 알 수 있지만, id를 지정하지 않으면 알기가 어렵다.

<footer> </footer>

위와같이 semantic tag로 작성하면 바로 footer임을 알 수 있다! 너무 멋지다!

👉 소감

html 의 구성에 대해 공부했다. 기본 구성은 이제 알게 되었으니 여러가지 태그를 사용해서 연습해봐야겠다!

기본 구성은 쉬운데 완전히 내것으로 만드는것은 아주 어려운 일이니 열심히 공부해야겠다.

막상 작성하고보니 두서없고 내용도 뒤죽박죽인것같다😂

블로그 작성도 매끄러워질날이 곧 오겠지🥕

~~처음으로 뭔가 내용이 많아진것 같지만 틀린 정보가 있을 수도 있으니~~

~~발견하신분들 말씀해주시면 감사하겠습니다😭~~

'HTML&CSS' 카테고리의 다른 글

[TIL] HTML&CSS (09.09) (0)	2021.09.09
[TIL] HTML&CSS (09.07) (0)	2021.09.07
[TIL] HTML&CSS(09.06) (0)	2021.09.07

Today Mijin Learned

[TIL] HTML&CSS (09.08)

👩‍💻 HTML 기본

👉 소감

'HTML&CSS' 카테고리의 다른 글

티스토리툴바

[TIL] HTML&CSS (09.08)

👩‍💻 HTML 기본

👉 소감

'HTML&CSS' 카테고리의 다른 글

'HTML&CSS' Related Articles

티스토리툴바