홈 [html/css] 22.09.20 Part 1
포스트
취소

[html/css] 22.09.20 Part 1

게시 2022-09-20
By dapin1490
14 분읽는 시간

책 정보

읽은 책 : 코딩 자율학습 HTML + CSS + 자바스크립트
읽은 분량 : Part 1 - 1 Hello, HTML + CSS + 자바스크립트 ~ 3.5 텍스트 강조하기


Part 1 HTML로 웹 구조 설계하기


1 Hello, HTML + CSS + 자바스크립트

1.1 개발 환경 설정하기

책을 직접 보자. 설명 생략.

1.2 첫 번째 HTML 문서 만들기

프로젝트 폴더 설정 후 index.html 파일 만들기
참고 : 웹 브라우저는 주소에 명시적으로 파일을 요청하지 않으면 가장 먼저 index.html 파일을 요청하기 때문에 HTML 문서는 index.html 파일을 기본으로 만든다.

  • 예시 코드

    1
2
3
4
5
6
7
8
9
10
11
12
13

      <!DOCTYPE html>
  <html lang="ko">
      <head>
          <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>My First Web Page!</title>
      </head>
      <body>
          <!-- 웹 페이지에 표시할 내용 작성 -->
          <p>이것은 파이프가 아니다.</p>
      </body>
  </html>

위 코드를 책에서 시키는 대로 실행해보면 해당 코드로 생성된 웹 페이지를 볼 수 있다.


2 HTML 문서 작성을 위한 기본 내용 살펴보기

2.1 HTML의 기본 구성 요소

  • 태그
    웹 페이지를 구성하는 다양한 요소를 정의하며 html 문법을 이루는 가장 작은 단위. 기본 형식은 <> 안에 태그명을 작성하는 형태. 키보드로 쓸 때는 편의상 부등호를 쓰지만 책에서는 ‘홑화살괄호’라 칭하고 있음.
  • 속성
    태그에 의미나 기능을 보충함. 선택사항이지만 태그 없이 단독으로 사용할 수 없음.
    보통 속성명은 그대로 쓰고 속성값은 큰따옴표 안에 쓴다. 속성값이 여러 개일 때는 쉼표로 구분하면 되고 속성이 여러 개일 때는 공백으로 구분한다.
    예시 코드에 있었던 <html lang="ko"> 태그는 html 문서의 시작(태그)이며, 언어가 한국어임(속성)을 의미한다.
  • 문법
    • 콘텐츠가 있는 문법
      여는 태그와 닫는 태그로 내용물을 감싼다. 여는 태그는 홑화살괄호 안에 태그명을 그대로 쓰고, 닫는 괄호는 여는 홑화살괄호와 태그명 사이에 슬래시가 들어간다.
      예) <p>This is not a pipe.</p> ← 이 한 줄을 통틀어서 요소라고 부른다.
    • 콘텐츠가 없는 문법
      내용물이 없어서 닫는 태그가 필요 없는 태그. 빈 태그라고도 한다.
      예) <br> → 이전 버전의 html에서는 빈 태그에도 닫는 표시가 필요했으나 html5에서는 필요 없다. 그리고 </br>을 쓰면 태그가 제대로 적용되지 않더라.
  • 주석
    코딩할 때 가장 먼저 배우는 것 중 하나인 그 주석. 웹 페이지에 안 나타나긴 하지만 소스 보기로 볼 수 있으니 보안상 중요한 걸 쓰면 안 된다고 한다.
    예) <!-- 이것은 주석이 아니다 -->

2.2 HTML의 기본 구조

위에 나와있는 예제 코드를 다시 보자. 편의상 줄 번호로 표기하겠다.

  • 1번 줄 <!DOCTYPE html> : 문서형 정의.
    항상 가장 처음에 작성해야 한다. 이 웹문서가 html5로 작성되었음을 나타낸다.
  • 2 ~ 13번 줄 <html></html> : 이 문서의 시작과 끝
    모든 태그는 이 안에 작성해야 한다.
  • 3 ~ 8번 줄 <head></head> : 문서 정보
    해당 문서의 메타데이터를 정의하는 영역. 웹 브라우저에 직접 노출되지 않는다.
    • <meta> : 문서의 문자 집합(charset), 특정 브라우저의 렌더링 엔진 지정(http-equiv content), 뷰포트(나중에 배움) 등을 지정한다.
    • title : 문서의 제목 지정. 한 문서당 하나씩만 있고, 여러 문서에서 같은 제목이 중복될 경우 검색 엔진 노출에 불이익을 받을 수 있다(해당 웹 사이트의 신뢰성이 떨어짐).
  • 9 ~ 12번 줄 <body></body> : 웹 브라우저에 표시할 내용

2.3 HTML의 특징 파악하기

2.3.1 블록 요소와 인라인 요소

  • 블록 요소(block element) : 웹 브라우저의 공간 유무와 관계없이 사용할 때마다 자동으로 줄바꿈되는 태그.
  • 인라인 요소(inline element) : 공간이 부족할 때에만 다음 줄로 넘어가는 태그.

2.3.2 부모, 자식, 형제 관계

겉을 감싸는 태그가 부모 태그, 안에 들어간 태그가 자식 태그. 서로 같은 태그 안에 함께 있는 태그는 형제 태그. 부모, 자식, 형제의 사전적 정의와 크게 다르지 않음.

2.3.3 줄 바꿈과 들여쓰기

코드를 보기 좋게 줄 바꿈과 들여쓰기를 잘 하자.


3 실무에서 자주 사용하는 HTML 필수 태그 다루기

* 자주 쓰는 태그만 소개하는 챕터이며, html에서 사용하는 모든 태그를 보고 싶다면 W3C 공식 사이트 참고. W3C(World Wide Web Consortium)는 월드 와이드 웹을 위한 표준을 개발하고 장려하는 국제 조직이다.

3.1 텍스트 작성하기

3.1.1 <hn></hn>(1 ≤ n ≤ 6)

h는 ‘heading’을 의미하고 제목이나 주제에 사용하는 태그이다. 숫자가 작을수록 글씨 크기가 크고 중요한 것으로 취급된다. 이 태그로 작성된 내용은 검색 엔진이 키워드로 인식한다. 검색 엔진 최적화(SEO, Search Engine Optimization)를 하려면 제목을 잘 지어야 한다.
검색 엔진은 무조건 h1 태그부터 순차적으로 검색하므로 번호를 건너뛰지 말고 1번부터 순서대로 써야 한다.
오 내 글은 전부 h2부터 시작하는데.. 글 제목이 당연히 h1으로 들어갈 테니까 괜찮지 않을까?

  • 검색 엔진 최적화(SEO, Search Engine Optimization) : 검색 엔진에서 상위에 랭크(rank)될 수 있도록 검색 엔진에 친화적으로 마크업(markup, 문서 구조)을 작성하는 것

3.1.2 <p></p>

본문에서 문단(paragraph)을 작성할 때 사용.

3.1.3 <br>

문단 내 줄 바꿈

3.1.4 <blockquote></blockquote>

문단 단위의 인용 작성에 사용. 명확한 출처가 있다면 cite 속성에 명시해야 한다. 내부에 반드시 1개 이상의 <p> 태그를 포함해야 한다.

  • 예)

    1
2
3

      <blockquote cite="출처 URL">
      <p>문단 단위 인용문</p>
  </blockquote>

3.1.5 <q></q>

텍스트 단위의 짧은 인용문 작성. 내부의 컨텐츠는 웹 페이지에서 큰따옴표로 묶여 표현된다. soqndp <p>가 없어도 된다는 점을 제외하면 <blockquote>와 사용법이 동일하다.

  • 예)

    1

      <q cite="출처 URL">짧은 인용문</q>

3.1.6 <ins></ins>와 <del></del>

<ins>는 새로 추가된 텍스트임을 나타내고 밑줄을 긋는다. <del>은 삭제된 텍스트임을 나타내고 취소선을 긋는다.

3.1.7 <sup></sup>와 <sub></sub>

<sup>는 위 첨자, <sub>는 아래 첨자.

3.2 그룹 짓기

* 공간 분할 태그 : 관련 있는 요소끼리 그룹지어 다른 영역과 분리하는 것이 공간 분할, 이 작업을 수행하는 것이 공간 분할 태그.

3.2.1 <div></div>

블록 요소와 인라인 요소를 그룹으로 묶음. class 선택자(나중에 배움)를 사용하면 더 좋다.

3.2.2 <span></span>

인라인 요소를 그룹으로 묶음. 한 문단 내에서 일부 텍스트만 다른 서식을 적용하고 싶을 때 사용할 수 있다(← CSS와 함께 사용한다).

3.3 목록 만들기

3.3.1 <ul></ul>(unordered list)

순서가 없는 목록. 내용물은 <li></li>로 작성하며 각 목록마다 글머리 기호(bullet point)가 붙음.

3.3.2 <ol></ol>(ordered list)

순서가 있는 목록. 내용물은 <ul>과 마찬가지로 <li></li>로 작성하며 자동으로 번호가 붙음.

3.3.3 <dl></dl>(description list)

정의형 목록. 정의할 개념은 <dt></dt>(description term), 해당 개념의 정의는 <dd></dd>(description details)로 작성. 실행 결과는 각자 해보자.

3.4 링크와 이미지 넣기

3.4.1 <a></a>

html 내/외부 링크 생성. 링크 경로를 지정하는 href 속성 필수 사용(넣을 링크가 없다면 "#"으로 지정), target(현재 탭 열기/새 탭 열기 지정), title(링크 설명, 마우스를 올리고 잠시 기다리면 보이는 텍스트) 속성 추가 사용 가능. 태그 사이의 내용물에는 해당 태그에 지정된 하이퍼링크가 걸릴 요소(<p>, <img> 등 사용 가능)를 작성한다.

  • 예)
    • 코드
    1

      <a href="https://dapin1490.github.io/satinbower/" target="_blank" title="dapin1490의 블로그">새틴바우어</a>

3.4.2 <img>

이미지 삽입. src 속성과 alt 속성을 가지며 컨텐츠를 포함하지 않는 빈 태그이므로 닫는 태그는 없다. src 속성은 저장소의 상대 경로 또는 링크를 이용해 이미지 경로를 지정하고 alt 속성은 해당 이미지를 설명할 수 있는 텍스트를 쓰는데, 이 설명은 마우스를 올리고 기다리면 나타나며 이미지가 어떠한 오류로 페이지에 나타나지 못했을 때에는 엑스박스 옆에 텍스트로 화면에 나타난다.

  • 예)
    • 코드
    1
2

      <img src="/assets/img/category-it/220206-1-quick-sort.gif" alt="퀵 정렬 애니메이션">
  <img src="#" alt="존재하지 않는 이미지 넣기">
    • 결과
      퀵 정렬 애니메이션
      존재하지 않는 이미지 넣기

3.4.3 <a><img></a>

이미지 링크(이미지에 링크 걸기). 사용법은 <a> 안에 <img>를 넣는 것이다.

3.5 텍스트 강조하기

3.5.1 <strong></strong>

굵은 글씨. 웹 브라우저에서 중요한 부분임을 알려줌. 중첩 가능하며 외관상의 실행 결과는 같지만 구조적으로 더 중요함을 의미함.

3.5.2 <em></em>

기울인 글씨. 텍스트의 의미를 강조할 때 사용하며 마찬가지로 중첩은 가능하나 외관상 차이는 없고 구조적으로 더 강조된다.

IT, HTML
지식 IT HTML
이 기사는 저작권자의 CC BY-NC-ND 4.0 라이센스를 따릅니다.
최근 업데이트
바로가기

[백준][c++] 1966 프린터 큐

[자료구조] Big-O와 이진 탐색 트리