생활코딩 WEB1 - HTML & Internet (3)

2022년 01월 05일

슬용이
작성자
2022.01.05.:42

2022-01-05
부모 자식과 목록 / 문서의 구조와 슈퍼스타들 / HTML 태그의 제왕 / 웹사이트 완성

1. 속해 있는 태그들

<parent>
	<child></child>
</parent>

<!-- 예시 -->
<p>
	<a href="https://opentutorials.org">opentutorials</a>
</p>

parent 태그에 대해서 child 태그를 자식태그라고 부른다. 이처럼 한 태그에 대해 속해 있는 태그들이 있다.

<ul>
  <li>1.금호</li>
  <li>2.은하</li>
  <li>3.동해</li>
  <li>4.마요</li>
</ul>

<li> 태그는 <ul>태그를 꼭 필요로 한다. 목차는 영어로 list이고, 리스트를 만드는 태그는 <li>이다.

그런데 누군가가 와서, 2.은하를 빼라고 한다.

그럼 우리는 중간에 끼여있는 2.은하를 빼고 다시 숫자를 붙여야 하는 상황이 되는데, 이럴 경우를 위해 <ol>이 존재한다.

<ol> 정의와 쓰임새

<ol> 태그는 순서가 있는 리스트를 정의한다. 순서가 있는 리스트는 숫자나 알파벳일 수 있다.
<li> 태그는 각각의 항목 리스트에 사용 된다.
Tip: 리스트 스타일을 적용하려면 CSS를 사용한다.
Tip: 순서가 없는 리스트는 <ul> 태그를 사용한다.

항상 극단적인 상황을 예상하며 코딩이 왜 이렇게 만들어졌을까 공감하며 탐구하자!

2. 그럼 HTML의 슈퍼스타들은 뭘까?

<head>와 <body>는 본문을 구분시켜주는 태그이다.

<body>는 본문을 뜻하는 것이고, <head>는 <body>에 대한 설명이 적혀진다.

그리고, 이 둘 위에는 더 상위 개념이 있는데 이 문서가 html이라는 걸 나타내기 위해

제일 상단에 <!docutype html>을 적어준다.

<!docutype html>
<html>
<head>
	<title>WEB1 - html</title>
	<meta charest=”UTF-8”>
</head>
<body>
  <h1><a href = "index.html">WEB</a></h1>
  <ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
    </ol>
 </body>

컴퓨터는 0과 1로 정보를 저장하는데, 그 방법은 여러가지가 있다.

가끔 웹페이지에서 한글이 깨지는 경우가 있는데, 이런 경우가 바로 잘못된 방법으로 읽혔을 때이다.

이걸 방지하기 위해 컴퓨터에게 우리가 어떤 방법을 사용했는지 알려줘야 하는데,

<head> 부분에 적혀있는 <meta charest=”UTF-8”>가 이것이다.

그럼 <title>은 뭘까?

<title>WEB1 - html</title>

타이틀은 말 그대로 '타이틀'을 뜻하는 것인데,

이것은 검색엔진에서 <title>을 이용해 분류하기 때문에 안 쓰면 우리만 손해이니 꼭 쓰도록 하자.

3. 태그의 제왕

우리가 여태 배운 것이 태그의 왕국이었다면, 이번에 배울 태그는 왕국의 제왕이라 볼 수 있다.

이 태그가 있기 때문에 웹페이지를 발견하고, 검색결과를 만들 수 있는데

HTML의 약자 HyperTextMarkupLanguage의 HyperText가 바로 이 태그를 의미한다.

<a>

이 태그의 이름은 <a> 닻anchor. 을 의미하며, 링크 기능이 있다.

<a> 정의와 쓰임새

<a> 태그는 한 페이지에서 다른 페이지로 이동할 수 있는 하이퍼 링크를 뜻한다

<a> 태그의 가장 중요한 요소는 링크의 목적지를 나타내는 href 속성이다.

기본적으로 브라우저에서는 다음과 같이 나타난다

방문하지 않은 링크는 밑줄이 그어져 있고 파란색이다.
방문한 링크는 밑줄이 그어져 있고 보라색이다.
활성 링크는 밑줄이 그어져 있고 빨간색이다.
Tip: 만약, <a> 태그가 <href> 속성이 없다면, 그것은 하이퍼링크의 플레이스홀더일 뿐이다.
Tip: 유효한 다른 페이지가 지정된 것이 아니라면, 현재 브라우저를 노출시킨다.
Tip: 스타일을 변경하려면 CSS Links나 CSS Button을 사용해야한다.

오늘은 부트캠프 대비 겸 맥북에어 M1을 구매하였다! 열심히 해야지!

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

생활코딩 WEB2 - CSS (3) (0)	2022.01.11
생활코딩 WEB2 - CSS (2) (0)	2022.01.10
생활코딩 WEB2 - CSS (1) (0)	2022.01.09
생활코딩 WEB1 - HTML & Internet (2) (0)	2022.01.04
생활코딩 WEB1 - HTML & Internet (1) (0)	2022.01.04

다음 글이 없습니다.

이전 글이 없습니다.