프론트엔드 부시기 : 1-1.HTML

구름·2024년 10월 14일
1

프뿌

목록 보기
1/1
post-thumbnail

HTML이란 무엇인가?

Hyper Text Mark up Language

  • 태그를 이용한 Mark up 언어이다.

HTML Tag

<h1 class=”primary”>제목<h1>

HTML 문서 기본 구조 (!치고 enter)

doctype, html, head, body

<!-- 해당 문서가 어느 버전으로 작성되어 있는지 -->
<!DOCTYPE html>

<html lang="en"> <!-- 이 웹 문서가 어느 언어로 작성되어 있는지 -->
  <head> <!-- 웹 문서의 정보를 담당. -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello Html!</title>
  </head>
  <body> <!-- 웹에 표시되는 내용 -->
  </body>
</html>

주석 한 번에 처리하기 : command + /


Emmet

  • 자식 노드 생성 : >
  • 형제 노드 생성 : +
  • 반복 노드 생성 : *
  • 아이디 : #
  • 클래스 : .
  • 콘텐츠 : {}
  • 자동 넘버링 : $
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 자식 노드  > : div>ul>li -->
    <dic>
      <ul>
        <li></li>
      </ul>
    </dic>

    <!-- 형제 노드 + : div>ul+ol+div -->
    <div>
      <u></u>
      <ol></ol>
      <div></div>
    </div>

    <!-- 반복하기 * : div>ul>li*3 -->
    <div>
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>

    <!-- 아이디 # : span#item -->
    <span id="item"></span>
    <div id="item"></div>

    <!-- 클래스 . : span.title -->
    <span class="title"></span>
    <div class="title"></div>

    <!-- 콘텐츠 {} : p.container{Hello World} -->
    <p class="container">Hello World</p>

    <!-- 자동 넘버링 $ : p.container{item$}*5 -->
    <p class="container">item1</p>

    <p class="container">item1</p>
    <p class="container">item2</p>
    <p class="container">item3</p>
    <p class="container">item4</p>
    <p class="container">item5</p>
  </body>
</html>

폰트 태그

<h1> ~ <h6> Heading

  • 웹 페이지의 제목 또는 부제목을 표현할 때 사용
  • 숫자가 작을 수록 큰 제목 표시

<p> Paragraph

  • 하나의 문단을 표시할 때 사용

<hr> Horizontal Rule

  • 가로 선 (종료태그 없음)

<br> Break

  • 줄 바꿈 (종료태그 없음)

<i> Italic

  • 텍스트 이탤릭체 표시

<em> Emphasis

  • 텍스트 이탤릭체 강조

<b> Bold

  • 텍스트를 진하게 표시

<strong>

  • 텍스트를 진하게 강조

표시와 강조 차이

  • 보이기에는 같지만, 태그로서 강조하고 싶을 때 <em> <strong> 사용
  • 웹 접근성 기여
  • 스크린리더가 강조 태그에 대해 거센 억양으로 말함 (시각장애인을 위한 음성출력 프로그램)

목록 태그

<ol> Ordered List

  • 순서가 있는 목록을 표현할 때 사용
  • type 속성으로 글머리 기호를 변경할 수 있음

<ul> Unordered Lists

  • 순서가 없는 목록

<li> Listed item

  • 목록의 하위 항목 : <ul>, <ol> 태그의 하위

<dl> Definition List

  • 사전처럼 용어를 설명하는 목록

<dt> Definition Term

  • 정의되는 용어의 제목

<dd> Definition Description

  • 정의되는 용어의 설명

주의사항

  • <dl>태그는 하나 이상의 <dt>-<dd> 쌍의 태그를 갖고 있어야 함
    • <dt>-<dd> 태그가 반드시 일대일 대응일 필요는 없다.
  • <li>, <dt>-<dd>태그는 밖에서 독립적으로 사용 불가
  • <ul>태그의 하위요소로는 <li>태그가 위치해야 함

Visual Studio Code 단축키

Multi Select 기능

  • command + option + 아래 키

커서 끝으로 이동

  • command + 오른쪽

Table 태그

<table>

  • 표를 만드는 태그 / 표 전체를 감싸는 컨테이너

<caption>

  • 표의 제목이나 설명

<tr>

  • 표의 행
  • 자식으로 <th>, <td>가 반드시 있어야 함

<th>

  • 표의 제목 열
  • 부모 태그 <tr> 안에 있어야 함

<td>

  • 표의 일반 열
  • 부모 태그 <tr> 안에 있어야 함

Table 그룹 관련 태그

<colgroup>

  • 열을 그룹으로 묶을 수 있는 태그

<col>

  • <colgroup>의 자식으로 열 단위를 나눌 수 있음
  • span 속성을 사용하여 열을 그룹으로 묶을 수 있음
    • : 3개의 열을 그룹으로 묶음

<thead>

  • 표의 제목 열을 묶는 그룹 태그

<tbody>

  • 표의 일반적인 데이터들을 묶는 그룹 태그
  • 기본적으로 행그룹태그를 사용하지 않으면 크롬에서 자동으로 <tbody> 로 묶어줌

<tfoot>

  • 표의 하단 영엮을 묶는 그룹 태그

Table 태그 속성

<table>

  • border - 테이블이 갖고 있는 테이블과 셀 모두 선을 표시
  • width - 테이블의 가로너비 설정
  • cellpadding - 셀의 안쪽 여백
  • cellspacing - 셀의 바깥쪽 여백

→ HTML5에서는 웹 표준이 아니므로 CSS 대체 필요

<th>

  • scope - 스크린리더가 데이터를 인식하고 읽는 순서를 결정하게 함
    • th가 열에 쓰일경우 값을 “col”로 설정 <th scope=”col”>
    • th가 행에 쓰일경우 값을 “row”로 설정 <th scope=”row”>

<th>, <td>

  • colspan - 열 병합 <td colspan=”2”>
  • rowspan - 행 병합 <td rowspan=”2”>

<col>

  • width - 열의 가로너비 지정
  • span - 열 그룹화 <col span=”3”>

후기

  • 아직은 너무 Easy하다🥱
  • 태그의 활용을 잘 외워두기만 하면 될 것 같다.
  • 스타일을 지정할 수 있는 (디자인을 적용할 수 있는) CSS가 재밌어 보이고 기대된다.
profile
업계 1위가 되고싶은 디자이너

2개의 댓글

comment-user-thumbnail
2024년 10월 15일

어디까지 올라가는거야 구름

1개의 답글