[DAY1] 개요, HTML

유진·2023년 7월 6일

html 강의정리

코드 에디터 Setting하기

prettier 설치

default formatter : prettier로 설정
format on save : 체크하기. prettier가 자동으로 포맷팅해준다.
auto save : 설정에 따라 자동 저장하는 기능.
Auto Close tags : 코드를 자동으로 닫아줄지 결정하는 옵션.

image preview 설치
color highlight 설치
auto rename tag 설치 : 태그 이름 바꿀 때 닫는 태그를 함께 바꿔준다.
live server 설치
Port : 5500
→ 로컬 호스트 서버의 주소를 의미.
→ 기본적으로 자신 컴퓨터에서 웹 서버가 실행되고 이 포트 번호에서 코드가 실행되는 것이다.

HTML이란?

HyperText Markup Language

HTML은 웹 개발자들이 웹페이지의 구조와 내용을 설명하기 위해 사용하는 Markup Language (Programming Language가 아님)

HTML은 문단(paragraph), 링크, 제목, 이미지, 비디오 등 다양한 유형의 콘텐츠를 설명하는 요소로 구성되어 있다.

웹 브라우저는 HTML을 이해하고 HTML 코드를 웹사이트로 렌더링한다.

Element

<p>HTML is a markup language</p>

앞의 <p>를 opening tag라고 한다.
뒤의 </p>를 closing tag라고 한다.
가운데의 HTML is a markup language은 element의 content이다.

위 셋을 합쳐 Element라고 한다.

어떤 element는 다른 요소를 포함할 수 있는데,
그 어떤 element를 부모 요소(parent element)라 하고
그 다른 element를 이를 자식 요소(child element)라 부른다.

HTML Document Structure

1~4를 지켜주어야 한다.

<!DOCTYPE html>
<!-- 1. doc type을 쓴다. 이 문서가 HTML을 쓴다는 걸 브라우저에 알려주기 위해서  -->
<html lang="en">
  <!-- 2. HTML 요소를 만든다. -->
  <head>
    <!-- 3. 헤드 요소. 보통 헤드는 브라우저 창에 안 보이는 걸 위한 것임. 페이지 타이틀, 정보, css 링크 등...  -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>The Basic Language of the Web: HTML</title>
  </head>
  <body>
    <!-- 4. 바디 요소. 웹페이지에서 보여질 내용 -->
    <h1>The Basic Language of the Web: HTML</h1>
  </body>
</html>
<!-- head와 body 안에 무엇을 넣을지는 옵션이지만, head와 body는 꼭 필요하다. -->

Text Elements

heading (h1 ~ h6)

heading에는 h1~h6이 있다 (h1: primary heading, h2: secondary heading, … )

주석 처리하면 렌더링하지 않는다.

한 페이지에는 하나의 h1만 존재하는 것이 좋다.

강조 및 이탤릭체 만들기

강조하기
<b>는 semantic하지 않은 태그로 현재는 잘 사용하지 않는다.
대신 <strong>처럼 의미가 있는 태그를 사용한다.

<p>Posted by <b>Laura Jones</b> on Monday, June 21st 2027</p> <!-- non-semantic -->

<p>Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027</p> <!-- semantic -->

이탤릭체
<i>는 semantic하지 않은 태그로 현재는 잘 사용하지 않는다.
대신 <em>처럼 의미가 있는 태그를 사용한다. (emphasize를 의미)

<p>All modern websites and web applications are built using three <i>fundamental</i> technologies: HTML, CSS and JavaScript. These are the languages of the web.</p>
<!-- non-semantic -->

<p>All modern websites and web applications are built using three <em>fundamental</em> technologies: HTML, CSS and JavaScript. These are the languages of the web.</p>
<!-- semantic -->

List : bullet point와 number 구현하기

ol : ordered list
ul : unordered list
li : list item

ordered list

<ol>
	<li>The opening tag</li>
	<li>The closing tag</li>
	<li>The actual element</li>
</ol>

unordered list

<ul>
	<li>The opening tag</li>
	<li>The closing tag</li>
	<li>The actual element</li>
</ul>

Image

tag

<img />는 content가 아닌 attribute 를 사용하여 element를 표현한다.

attribute

<img />

<img
      src="laura-jones.jpg"
      alt="Headshot of Luara Jones"
      height="50"
      width="50"
/>

src 속성은 브라우저가 이미지를 읽어야 하는 소스를 가리킨다. 내부 파일이나 외부 이미지 주소를 입력할 수 있다.

alt 속성은 이미지에 관해 설명하는 텍스트이다. 구글 크롬 검색 엔진 등이 해당 이미지에 대한 정보를 얻게 해준다. 또한 설명을 지정함으로써 시각 장애인들도 웹사이트를 사용할 수 있게 해준다. (화면 판독기가 해당 이미지의 설명을 읽어주기 때문)

width 속성은 이미지의 너비를 픽셀 단위로 조절해준다. width만 설정해줬을 때, 자동으로 가로 세로 비율이 유지된다.

height 속성은 이미지의 높이를 픽셀 단위로 조절해준다. height만 설정해줬을 때, 자동으로 가로 세로 비율이 유지된다.

💡 참고: VSC에서 이미지 파일에 대해 하단에 픽셀 크기가 표시된다.

<html>

lang 속성으로 사용하는 언어를 지정할 수 있다.
영어 : <html lang=”en”></html>
한국어 : <html lang=”ko”></html>
필요한 언어가 있다면 검색으로 쉽게 찾을 수 있다.

<meta />

charset 속성으로 해당 문서의 character set이 어떤 문자 인코딩 방식을 사용하는지 지정할 수 있다.
charset = “UTF-8”
UTF-8은 전세계 문자와 기호를 인코딩하는데 쓰인다.

Hyperlinks (링크, Link)

tag

<a> 는 ‘anchor’를 의미한다.

attribute

<a>

href 속성으로 원하는 url을 입력해 해당 링크를 가리킨다. 기존의 창에서 해당 링크가 열린다.
href는 ‘hypertext reference’를 의미한다.
href=”#”을 사용해 현재 페이지의 상단으로 스크롤하는 링크를 생성할 수 있다.

target 속성으로 해당 링크를 새 창에서 열도록 할 수 있다.
target="_blank"

<!-- 외부 링크 -->
<a href="https://developer.mozilla.org/ko/docs/Web/HTML" target="_blank">
MDN Web Docs
</a>

<!-- 내부 링크 -->
<a href="blog.html"> Blog </a>

<!-- 아무 곳도 지정하고 싶지 않을 때-->
<!-- url이 없거나 페이지가 없을 때-->
<a href="#">Challenges</a>

HTML 문서를 논리적으로 구조화하기 (그룹화)

Semantic HTML
컨테이너를 사용해서 필요한 요소들끼리 그룹화를 하면 좋다.
이러한 그룹화는 주관적이다.

<nav>

페이지 ‘탐색’을 의미한다. 보통 페이지 상단에 링크가 몇 개 있을 때 필요하다.

<nav>
   <a href="blog.html">Blog</a>
   <a href="#">Challenges</a>
   <a href="#">Flexbox</a>
   <a href="#">CSS Grid</a>
</nav>

자체로는 무언가 하지 않고 a들을 하나로 묶을 뿐이지만, 레이아웃 빌드와 CSS를 다룰 때 해당 내용은 매우 중요하게 쓰인다.

<header>

웹 페이지의 상단을 의미한다.
보다 작은 단위의 상단을 의미할 수도 있다.

<header>
  <h1>📘 The Code Magazine</h1>
  <nav>
    <a href="blog.html">Blog</a>
    <a href="#">Challenges</a>
    <a href="#">Flexbox</a>
    <a href="#">CSS Grid</a>
  </nav>
</header>

article

<article>

페이지의 주요 부분, 독립적인, 완전한 내용의 섹션을 정의하기 위해 쓰인다.
뉴스 기사, 블로그 게시물, 포럼 글, 매거진 기사 등에 사용할 수 있는 일반적인 글 요소에 쓰인다.
article 내부에 header를 넣어 쓸 수도 있다.

<body>

	<header>
		...
	</header>

	<article>
		<header>
			...
		</header>
	</article>

</body>

<footer>

웹 페이지의 하단 영역을 정의하기 위해 사용한다.

<footer>Copyright &copy; 2027 by The Code Magazine.</footer>

HTML Entity Glyphs | CSS-Tricks
- HTML 문서에서 특수 문자나 기호를 표현하기 위해 사용되는 코드이다. 일부 문자는 HTML에서 특별한 의미를 가지기 때문에 직접 작성하면 웹 브라우저가 해당 문자를 해석하거나 잘못 표시할 수 있다. 이러한 문자를 HTML Entity로 대체하여 표시할 수 있다.
- &로 시작하고 ;로 끝나는 특정 텍스트 코드이다. 일반적으로 & 다음에는 약어 또는 기호를 나타내는 이름이 오고, ;로 코드가 끝나는 형식이다. 예를 들면, ©는 저작권 기호를 나타낸다.

aside

<aside>

페이지의 주요 파트에 있는 정보를 보완하는 부차적인 정보에 사용된다.

<aside></aside>

Semantic HTML

특정 element들은 의미나 목적이 있다.

Semantic HTML(의미론적 HTML)은 HTML 요소를 문서의 구조와 의미를 고려하여 사용하는 접근 방식이다. Semantic HTML은 요소의 의미와 목적을 명확하게 표현하고 웹 페이지의 구조를 이해하기 쉽게 만들어 준다. 이를 통해 웹 페이지의 접근성, 검색 엔진 최적화(SEO), 유지 보수성 등을 개선할 수 있다.

non-semantic html 요소의 예로는 <div>가 있다.

유진

다음 포스트

[DAY1] 개요, HTML

코드 에디터 Setting하기

HTML이란?

Element

HTML Document Structure

Text Elements

heading (h1 ~ h6)

강조 및 이탤릭체 만들기

List : bullet point와 number 구현하기

Image

tag

attribute

Hyperlinks (링크, Link)

tag

attribute

HTML 문서를 논리적으로 구조화하기 (그룹화)

navigation

header

article

footer

aside

Semantic HTML

[DAY2] CSS 기초

0개의 댓글