oday I learned - 요소와 구조

14568 단어 htmlTILTIL

서론

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

개발을 처음 배우는 단계에서
지금 이것과 씨름하는 것은 답이 아니라고 판단하고
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태그 안에 있어야한다.





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

[BOJ]11660번: 구간 합 구하기 5 (Java)
[BOJ] 9996번: 한국이 그리울 땐 서버에 접속하지 (Java)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage