생활코딩 WEB1 HTML

채개바라 2024. 1. 8. 21:22

2024. 1. 8. 21:22

HTML

Hyper Text Markup Language

W3C: 웹과 관련된 기술 표준을 정하는 컨소시엄

웹 페이지는 HTML 문서로 만들기로 정함. HTML문서로 클라이언트에게 서비스하고자 하는 내용을 넣으면 됨

Hyper Text: 텍스트를 누르면 해당 페이지를 초월(나감)하여 다른 페이지로 연결되어 이동함
Markup: 표시(< > 마크)를 이용함 (< >, tag, element)
Language: 많은 규칙들을 모아 정리해 놓은 언어

태그(tag)

<strong>creating web pages</strong>

< > 여는 태그

</> 닫는 태그

글자를 진하게 <strong> </strong>
밑줄 <u> </u>

혁명적인 변화

우리의 머릿 속에 있지 않더라도 검색을 통해 알 수 있다면 이미 알고 있는 것과 다름없지 않을까?

제목을 나타내는 태그 <h1> ~ <h6>

<h1> 요소가 가장 중요한 제목을 정의하고, <h6> 요소가 가장 덜 중요한 제목을 정의한다.

통계에 기반한 학습

HTML에는 약 150개 이상의 태그가 존재한다. 그럼 그 150개의 태그를 다 외워야 할까? 그렇지 않다. 검색을 통해 알 수 있기 때문에 전부 외우지 않아도 된다. 그러나 태그를 하나도 모르고 있으면 너무 불편하고, 어떤 태그들은 지식이 있어야 이해할 수 있는 것들이 있기 때문에 기본적으로 알면 좋을 만한 태그가 무엇인가를 판단하게 해주는 통계를 살펴보자.

https://www.advancedwebranking.com/html

HTML Study - AWR SEO Guide

This study looks at 11 mm index pages gathered from Top 20 Google results to uncover how people write HTML markup as new web tech emerge.

www.advancedwebranking.com

>> 전세계 웹페이지들이 어떤 종류의 태그들로 이루어져 있는지에 대한 통계

줄바꿈: <br> vs <p>

<br> 태그

일반적인 태그들은 열고(< >) 닫는(</>) 태그가 쌍으로 존재하지만,
<br> 태그는 단지 줄바꿈이라고 하는 시각적인 의미만을 가지고 있기 때문에
무언가를 감쌀 필요가 없다. 그래서 닫는 태그가 없다.

<p> 태그

<br> 태그 말고 단락을 표현하는 데 쓰는 <p> 태그가 있다.
<p> </p> 태그는 어디서부터 어디까지가 단락인지를 감싸서 표현한다.

<br> 태그보다는 <p> 태그를 쓰는 것이 더 좋은 결정이다. 왜냐하면 <p> 태그는 웹페이지를 좀 더 정보로서 가치 있게 만들기 때문이다. 단락을 의미론적으로 표현해 줄 수 있기 때문이다. <br> 태그는 시각적인 줄바꿈일 뿐이다.

최후의 문법 속성 & img

<img 태그>

※ unsplash.com: 저작권에 구애받지 않고 이미지를 사용할 수 있는 사이트

https://unsplash.com/

아름다운 무료 이미지 및 사진 | Unsplash

어떤 프로젝트를 위해서든 다운로드 및 사용할 수 있는 아름다운 무료 이미지 및 사진입니다. 어떤 로열티 프리 또는 스톡 사진보다 좋습니다.

unsplash.com

Attribute(속성) // 태그가 태그의 이름만으로는 정보가 부족할 때 속성을 통해 더 많은 의미를 부가할 수 있다.

부모자식과 목록

<parent> ---- 부모 태그
<child></child> ---- 자식 태그
</parent> ---- 부모 태그

태그에는 서로 포함 관계로 연관이 있는 부모자식 태그가 있다.

어떤 태그들은 자식 태그가 있는 곳에 항상 부모 태그가 있고, 부모 태그가 있으면 항상 자식 태그가 있는 사이 좋은 태그들이 있다.

<li> & <ul> 태그

<li> </li> 태그: list item(목록 항목) - 목록 작성시 목록에 해당하는 항목을 나타내는 태그
<ul> </ul> 태그: unordered list(질서정연하지 않은, 순서가 없는 목록) - 순서 없는 목록을 표현하는 태그

여기서 <ul> </ul> 태그는 부모 태그, <li> </li> 태그는 자식 태그에 해당한다.

<li> 태그는 반드시 부모 태그를 가지고 있다. 그리고 부모 태그인 <ul> 태그는 반드시 자식 태그를 가지고 있다.

<li> & <ol> 태그

<li> </li> 태그: list item(목록 항목) - 목록 작성시 목록에 해당하는 항목을 나타내는 태그
<ol> </ol> 태그: ordered list(질서정연한, 순서가 있는 목록) 으로 순서 있는 목록을 표현하는 태그

<ol> 태그는 <ul> 태그와 반대로 숫자를 표시해주며 순서가 있는 목록을 형성해준다.

※ 목록 태그 심화

    <body>
        <h1>ol tag - 순서 있는 목록(ordered list)</h1>
        <!-- ol태그 속성
        [1] type: 1 (default), A, a, I, i
        [2] start : 시작값을 지정 (숫자)
        -->
        <ol type="1" start="5">
            <li>Facebook</li>
            <li>Tweeter</li>
            <li>Instagram</li>
        </ol>
        <hr color="blue">

        <h1>ul tag - 순서 없는 목록(unordered list)</h1>
        <!-- ul태그 속성
        [1] type: disc(default), circle, square
        -->
        <ul type="circle">
            <li>Facebook</li>
            <li>Tweeter</li>
            <li>Instagram</li>
        </ul>
        <hr color="red">

        <h1>중첩 리스트 (목록 안에 목록)</h1>
        <ul>
            <li>Coffee</li>
            <li>Tea</li>
            <ul type="square">
                <li>Black tea</li>
                <li>Green tea</li>
            </ul>
            <li>Milk</li>
        </ul>
    </body>

문서의 구조와 슈퍼스타들

<title> 태그: 제목 태그

웹페이지의 제목이 WEB1 - html로 바뀐 것을 확인할 수 있다.

<title> 태그를 사용하면 웹페이지의 제목을 사용자에게 명시적으로 알려줄 수 있을 뿐만 아니라

검색 엔진과 같은 기계들은 바로 이 <title>을 책으로 치면 책 표지와 같은 정보로 사용한다.

<head> 태그

본문을 설명하는 태그

여러 부가적인 내용이 있는 영역

※ <meta charset = "utf-8">

내가 쓴 내용을 utf-8 형식으로 열어서 보여달라고 컴퓨터에게 명령하는 의미

<body> 태그

본문의 내용이 담겨 있는 태그

우리가 보는 웹페이지의 모습

<html> 태그

고위직 태그인 <head> 태그와 <body> 태그를 감싸는 단 하나의 최고위층 태그

<html> 태그 위에 관용적인 표현으로 '이 문서는 HTML이다'라고 알려주는 <!doctype html>을 적어주면 된다.

[정리]

HTML 태그의 제왕

<a> 태그

이 태그의 이름은 "anchor" 의 첫 글자를 딴 < a > 이다.
"anchor" 는 배가 정박할 때 사용하는 "닻" 을 의미한다.

정보의 바다에 정박한다는 의미인, 시적인 표현인 < a > 의 기능은
바로 < 링크 > 이다.

href: hyper reference // 초월할(이동할) 참고 사이트

+ 추가적인 속성

1. 새 탭으로 열기

target = "_blank"

2. 설명 문구 (툴팁)

마우스를 올려놓으면 어떤 사이트가 뜰 것인지에 대한 간단한 문구가 적힌 박스를 띄우고 싶을 때

title = "문구 내용"

웹사이트 완성

1.html

2.html

3.html

index.html

파일을 각각 만들어서 내용을 바꿔준다.

목록에 파일 링크를 걸어서 각 목록을 클릭했을 때 링크로 연결될 수 있도록 하는 역할을 한다.

<ol>

<li><a href = "3.html">JavaScript</a></li>

</ol>

[완성된 웹사이트]

https://codms7870.github.io/my-first-web-site/

WEB1 - Welcome

HTML CSS JavaScript WEB The World Wide Web (WWW or simply the Web) is an information system that enables content sharing over the Internet through user-friendly ways meant to appeal to users beyond IT specialists and hobbyists.[1] It allows documents and o

codms7870.github.io

저작자표시 비영리 변경금지

StartCode