ProjectH4C 1개월 3,4주 과제 생활코딩 - HTML (1)

📖기술소개

HTML : Hyper Text Markup Language

그냥 하이퍼텍스트를 가장 중요시 하는 마크업 언어라는 것이다.

웹 브라우저가 이 HTML을 시각화해준다.

📖기본문법

html 파일은 확장자가 *.html 이다.

태그와 태그 사이의 영역에만 해당 태그가 영향을 미칠 수 있다.

<h1>mm0ck3r</h1>

I am <strong>Student</student>

위와 같은 코드가 그 예시이다.

<h1>오늘의 명언</h1>
우리 모두는 <strong>자신의 힘</strong>으로 발견한 내용을 가장 쉽게 익힌다.
(<a target="_blank" href="https://ko.wikipedia.org/wiki/%EB%8F%84%EB%84%90%EB%93%9C_%EC%BB%A4%EB%88%84%EC%8A%A4" title="전설적인 프로그래머">도널드 커누스</a>)

a 태그의 경우 target, href, title과 같은 속성을 갖는다. a태그가 링크를 나타내는 태그는 맞지만, a 태그만 적는다면 정보가 불충분하다.

target에 _blank는 새 탭에 열리게 한다. 저 버튼 위에 커서를 올려놓을 때 조그만 글자를 보여주고 싶으면 title 속성을 사용하면 된다.

<a>태그는 웹의 시작을 나타내는 태그이다. 그만큼 역사도 깊다. 가슴이 웅장해진다...

📖태그의 중첩과 목록

태그는 중첩해서 사용 가능하다.

<ol>
  <li>기술소개</li>
  <li>기본문법</li>
  <li>하이퍼텍스트와 속성</li>
  <li>리스트와 태그의 중첩</li>
</ol>

이건 목록을 나타내는 태그이다. Ordered List라 순서도 같이 나오기는 하다.

이렇게 번호가 매겨진 리스트가 보여진다.

그냥 <li> 태그를 사용해도 되기는 하지만, 하나의 성격으로 묶어주기 위해 사용한다고 생각하자.

<ol>
  <li>기술소개</li>
  <li>기본문법</li>
  <li>하이퍼텍스트와 속성</li>
  <li>리스트와 태그의 중첩</li>
</ol>
<ul>
  <li>최진혁</li>
  <li>최유빈</li>
  <li>한이람</li>
  <li>한이은</li>
</ul>

이렇게 Grouping이 가능해진다.

<ul>은 Unordered List이다.

📖문서의 구조

<html>
    <head>

    </head>
    <body>
        
    </body>
</html>

html의 기본 골격은 위와 같다.

<head> 태그 안에는 본문에 포함되는 내용은 아니지만, 문서의 제목, 문서의 문자 종류 등등 <head>안에 들어가진다.

<html>
    <head>
        <title> I'm mm0ck3r </title>
        <meta charset="UTF-8">
    </head>
    <body>

    </body>
</html>

<head>에 필요한 내용을 작성한다면 위와같이 작성할 수 있다.

<head>에는 또 <meta>를 잘 이용한다면 정보의 정보를 적을 수 있다.

그리고 웹 브라우저의 본문에 보이고 싶은 내용을 <body>태그 안에 적어주면 되는 것이다.

<html>
    <head>
        <title> I'm mm0ck3r </title>
        <meta charset="UTF-8">
    </head>
    <body>
        <ol>
            <li>기술소개</li>
            <li>기본문법</li>
            <li>하이퍼텍스트와 속성</li>
            <li>리스트와 태그의 중첩</li>
          </ol>
          <h2>선행학습</h2>
          본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다. 
    </body>
</html>

요렇게 적어줄 수 있겠다.

📖DOCTYPE

또한, 이 문서가 HTML5임을 선언해주기 위하여 !DOCTHPE html를 붙여줘야 한다.

<!DOCTYPE html>
<html>
    <head>
        <title> I'm mm0ck3r </title>
        <meta charset="UTF-8">
    </head>
    <body>
        <ol>
            <li>기술소개</li>
            <li>기본문법</li>
            <li>하이퍼텍스트와 속성</li>
            <li>리스트와 태그의 중첩</li>
          </ol>
          <h2>선행학습</h2>
          본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다. 
    </body>
</html>

📖웹사이트 만들기

웹사이트를 만들어보자. 웹사이트는 말그대로 사이트와 사이트가 연결되어 있는 느낌이 있어야 한다.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML - 수업소개</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h1><a href="index.html">HTML</a></h1>
        <ol>
            <li><a href="1.html">기술소개</a></li>
            <li><a href="2.html">기본문법</a></li>
            <li><a href="3.html">하이퍼텍스트와 속성</a></li>
            <li><a href="4.html">리스트와 태그의 중첩</a></li>
        </ol>
 
        <h2>선행학습</h2>
 
        본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다. 
    </body>
</html>

이렇게 된다면 1.html, 2.html, 3.html, 4.html로 연결될 수 있다. 그래서 웹사이트라는 개념이 나오게 된 것이다.

두 번째 닫는 a 태그가 이상하다. 생활코딩 측의 오타인 것 같다.

'스터디 그룹 > ProjectH4C' 카테고리의 다른 글

ProjectH4C 2개월 1주차 과제 ( ~ UNIT15) (0)	2021.02.16
ProjectH4C 1개월 3,4주 과제 생활코딩 - HTML (2) (0)	2021.02.13
ProjectH4C 1개월 3,4주 과제 (코드업 66~100) (0)	2021.02.07
ProjectH4C 1개월 3,4주 과제 (코드업 41~65) (0)	2021.02.07
ProjectH4C 1개월 3,4주 과제 (코드업 21~40) (0)	2021.02.04