TIL/프로그래머스 데브코스

클라우딩 어플리케이션 엔지니어링 TIL Day 3 (1)

개발자 정지은 2023. 12. 20. 15:22

# HTML 콘텐츠

1. 제목 태그 <h1> ~ <h6>

문서 구획 제목을 나타내는 태그

구역의 순서, 계층을 잘 지켜야 함

<h1> 태그는 페이지 내에 한번만 사용되어야 함

<!DOCTYPE html>
<!-- 문서 버전 -->

<html lang="en">
  <!-- HTML 문서 시작 선언 및 문서 기본 언어 설정 -->

  <head>
    <!-- 문서에 필요한 정보가 기입되는 곳 <head></head> -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML만들어보기</title>
    <link rel="stylesheet" href="style.css" />
    <!-- 문서 제목 -->
  </head>
  <body>
    <h1>제목1</h1>
    <h2>제목2</h2>
    <h3>제목3</h3>
    <h4>제목4</h4>
    <h5>제목5</h5>
    <h6>제목6</h6>
  </body>
</html>

- 줄 단위 복사 단축키 : alt + shift + 방향키

 

2. 문단 태그 <p> 

문단을 나타내는 태그, 블록 레벨 요소

레이아웃처럼 사용하면 X

 

3. 서식 태그 <b>, <strong>, <i>, <em>, <u>, <s>, <del>

<b> : 의미를 가지지 않고 단순히 굵은 글씨로 변경, 인라인 레벨 요소

 

<strong> : 굵은 글씨로 변경 후 강조의 의미 부여, 인라인 레벨 요소

 

<i> : 글자를 기울임과 동시에 텍스트가 문단의 내용과 구분되어야 하는 경우 사용

ex ) 등장인물, 외국어 구줄, 기술 용어 등

 

<em> : 기울임과 내용에 강조 의미 부여

 

<u> : 밑줄을 넣어서 주석을 가지는 단어임을 나타냄

단순하게 밑줄 긋는 용도로 사용하면 안됨

만약 단순하게 글자 밑에 밑줄을 넣고 싶다면?
<span> 태그와 같은 태그 사용 후 CSS로 밑줄 넣어주어야 함

 

<s> : 단순히 시각적인 취소선만 추가

 

<del> : 문서에서 제거된 텍스트를 나타냄, <ins> 태그를 함꼐 사용하면 제거된 텍스트 옆에 추가된 텍스트 표현 가능

<!DOCTYPE html>
<!-- 문서 버전 -->

<html lang="en">
  <!-- HTML 문서 시작 선언 및 문서 기본 언어 설정 -->

  <head>
    <!-- 문서에 필요한 정보가 기입되는 곳 <head></head> -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML만들어보기</title>
    <link rel="stylesheet" href="style.css" />
    <!-- 문서 제목 -->
  </head>
  <body>
    <h1>제목1</h1>
    <p>문단태그</p>
    <p>문단태그</p>
    <p>문단태그</p>
    <br />
    <b>굵은 글씨</b>
    <br />
    <strong>굵은 글씨 + 강조</strong>
    <br /><br /><br />
    <i>기울어집니다</i>
    <br />
    <em>기울어집니다 + 강조</em>
    <br /><br /><br />
    <u>밑줄 그려주세요</u>
    <br />
    <s>취소선</s>
    <br />
    <del>삭제된 단어</del>
    <br />
    <ins>추가된 단어</ins>
  </body>
</html>

 

<a> : 클릭하면 페이지를 이동할 수 있는 링크 요소 만드는 태그

href 속성 사용해서 이동하고자 하는 파일 혹은 URL 작성

target 속성 사용해서 이동해야 할 링크를 새 창, 현재창 등 원하는 타겟 지정

<a href="https://www.naver.com" target="_blank">네이버로 이동</a>

클릭하니까 네이버로 이동


# 멀티미디어

 

<img> : 문서 내에 이미지를 넣을 수 있는 태그

-> src 속성 사용 이미지 경로 넣음

-> alt 속성 사용 이미지 로딩 문제 발생 시 대체 텍스트 띄움, 꼭 작성해주어야 함

 

<figure>, <figcaption> : 하나의 독립적인 콘텐츠로 분리하고 그에 대한 설명을 넣을 수 있는 태그

<figure> 태그 안에 이미지, 오디오 등 태그를 넣고 figcaption태그로 설명을 달아줌

 

<video> : 문서 내 영상 첨부 태그

-> src 속성 사용 비디오를 문서 내 첨부

-> poster 속성 사용 비디오가 로드되기 전 포스터 보여줌

-> source 태그 사용 여러 타입 비디오 제공

 

<audio> : 문서 내 소리 첨부

-> src 속성 사용 문서 내 소리 첨부

-> controls 속성 사용 재생/정지 버튼 컨트롤러 띄움

controls 속성 사용하지 않으면 기본적으로 화면에 보이지 않음

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>멀티미디어 만들기</title>
    <link rel="stylesheet" href="chapter05.css" />
  </head>
  <body>
    <img src="assets/image1.jpg" alt="펭수입니다" />
    <br /><br /><br />
    <video src="assets/192357 (1080p).mp4" width="200" autoplay>
      비디오가 재생 안 되면 보이는 글씨입니다
    </video>
    <!-- video 태그 안에 source 태그를 사용하여
    src에 넣고자하는 비디오의 주소, type 속성에 해당 비디오의 확장자를
    입력해주면 브라우저가 자동으로 재생해줌 -->
    <br /><br /><br />

    <audio controls src="assets/once-in-paris-168895.mp3"></audio>
    <br /><br /><br />

    <figure>
      <img src="assets/image1.jpg" alt="펭수입니다" />
      <figcaption>펭수 사진입니다</figcaption>
    </figure>
    <!-- figure 태그는 블럭 레벨 요소 -->
  </body>
</html>

 

<svg> : 그래픽으로 만들어진 이미지

수학 공식을 사용하여 그려지기 때문에 해상도의 영향을 받지 않아 확대/축소 자유로움

크기를 자주 바꾸어야 하는 작은 아이콘에서 많이 사용

viewBox="x축 y축 가로길이 세로길이"

width, height는 태그 자체의 가로, 세로 크기

 

- 동일한 문자 편집 단축기 : control + d

 


# 새롭게 배운 것 & 깨달은 것

제대로 알지 못하고 사용했던 태그들에 대해서 정확한 용도와 사용법에 대해 알 수 있었다