Today I learned 5 - 요소와 구조

angie·2022년 4월 15일

TIL html

HTML&CSS

목록 보기

1/11

서론

자바스크립트를 공부하다가 중급으로 넘어가니
점점 머리가 아파오고 제대로 이해한건지
잘 공부하고 있는지 모를정도로 어려워졌다.

개발을 처음 배우는 단계에서
지금 이것과 씨름하는 것은 답이 아니라고 판단하고
HTML과 CSS를 모두 공부하고 다시 자바스크립트로 돌아오기로 했다.

둘 다 금방 배운다길래 하루이틀이면
다 훑어볼 수 있을 줄 알았더니 생각보단 많다😅

Codecademy

HTML 공부를 시작하면서 Codecademy를 접하게 됐는데,
코딩 공부하기 너무 좋은 사이트다!!

개념 하나하나씩 차근 차근 직접 코드를 쳐보며 알아가는데
인강 듣는 것 보다 훨씬 이해가 잘 된다.

Today I Leanred

오늘의 TIL은 이틀동안 배운 HTML 기초개념들에 대한 내용이다.

Document type declaration

HTML 문서의 가장 첫줄에 입력해야할 내용이다.
해당 문서가 현재의 표준 HTML(2022기준 HTML5)로 작성되었다는 걸 알리는 부분이다.

codecademy강의에서는 강의 초반이 아니라 강의 후반에 알려주는데,
HTML 문서 처음 작성할 때 헷갈렸어서
HTML에 가장 처음 필요한 요소이기에 맨 상단에 적는다.

<!DOCTYPE html>

HTML의 기본 구조

<!DOCTYPE html>
	<html>
    	<head>
        	<title>This is title</title>
        </head>
        <body>
        </body>
    </html>

HTML의 가변적인 요소들을 제외한 HTML의 기본 구조이다.
가변적인 요소, 즉, 텍스트와 사진 등의 요소들은 body태그 사이에 들어간다.

HTML의 기본 요소

headings

크기가 큰 것부터 h1부터 h6까지 있다.

<h1>heading1</h1>
<h2>heading2</h2>
<h3>heading3</h3>
<h4>heading4</h4>
<h5>heading5</h5>
<h6>heading6</h6>

divs

<div></div>

화면을 분할하는데 쓰이는 요소
요소들을 묶어 같은 style을 적용할 수 있게 한다.
가독성을 위해 들여쓰기를 하자!

attributes

속성이란 뜻
opening tag에 추가하여 elements에 추가적인 정보를 넣을 때 사용

<tag name="value"></tag>

-> name에 해당되는 부분이 attribute이다

displaying text

텍스트를 보여주는 태그에는 두가지가 있다.

<p>Paragraph</p>
<span>Inline-text</span>

< p >

텍스트에서 단락을 표시할 때 쓰는 태그

< span >

범위를 지정하거나 영역을 나눠 줄 바꿈 없이 일정 범위를 지정해 속성을 줌
어떤 의미는 없음, 범위를 지정하기 위한 기능

styling text

<em>Italic</em>
<strong>Bold</strong>

< em >

태그로 감싸진 텍스트를 italic으로 만든다. (기울임)

< strong >

태그로 감싸진 텍스트를 bold으로 만든다. (두껍게)

line breaks

단락을 띄우고 싶을 때 사용

<br>

closing tag없이 opening tag만 사용

list

unordered list

<ul>
  <li>Play more music 🎸</li>
  <li>Read more books 📚</li>
</ul>

bullet point로 목록을 만들 수 있다.

ordered list

<ol>
  <li>Preheat oven to 325 F 👩‍🍳</li>
  <li>Drop cookie dough 🍪</li>
  <li>Bake for 15 min ⏰</li>
</ol>

1,2,3 순서대로 번호가 붙은 목록을 만들 수 있다.

images

<img src="image.jpg>

closing tag가 필요없다.
해당하는 이미지의 속성을 src에 넣어준다.

image alts

alternative text란 의미의 속성값으로 이미지에 부가설명을 넣어준다.

<img src="#" alt="A field of yellow sunflowers" />

사용목적

사용자에게 이미지가 보이지 않을 때, 사용자는 이미지 위에 마우스 오버하여 이미지의 내용을 보고 어떤 이미지인지 추측할 수 있다.
보는 것에 어려움이 있는 사용자에게 이미지의 내용을 컴퓨터가 읽어줄 수 있다.
검색 엔진이 이미지를 인지할 수 있다.

videos

<video src="myVideo.mp4" width="320" height="240" controls>
  Video not supported
</video>

< video ></ video>

이미지 태그와 다르게 closing tag가 필요하다.

width, height

비디오의 사이즈를 지정해준다.

controls

기본적인 조작 버튼을 만들어준다.

Video not supported

비디오에 지정된 텍스트는 비디오가 로딩되지 않을때에만 보여지는 텍스트이다.

HTML document standards

preparing for HTML

가장 처음 적어둔 HTML의 기본 구조를 포함한 내용이다.

<!DOCTYPE html>

문서 첫줄에 해당 문서의 코드가 html로 작성됐음을 알리는 태그다.
여기서 'html'은 가장 최신 표준인 HTML5를 의미한다.

the head

<head>This is head</head>

head 요소는 웹 페이지의 메타데이터를 가지고 있다.
메타데이터는 웹 페이지 안에 직접 나타나지 않는 정보이다.

page titles

<html>
  <head>
    <title>My Coding Journal</title>
  </head>
</html>

브라우저의 탭에 보여지는 웹 페이지의 title
항상 head태그 안에 있어야한다.

*링크 파트는 헷갈려서 따로 포스팅하겠다.

angie

better than more

다음 포스트