프로그래머스 데브코스

[클라우딩 어플리케이션 엔지니어링 TIL] 11. HTML 기초(콘텐츠 태그)

모든 것을 처음 시작하는 초짜 개발자 2024. 4. 24. 22:45

1.학습 주제

  • 콘텐츠
    • 제목/문단/서식/링크 태그
    • 멀티미디어 태그
    • 리스트/표/외부 콘텐츠 태그
  • 양식 태그
  • 지켜야하는 규칙

2.주요 메모 사항 소개

제목/문단/서식/링크 태그

  • 제목태그(<h1>~<h6>)
    • 문서 구획 제목을 나타내는 태그로 Heading(헤딩) 태그라고 명명
    • <h1> 태그는 페이지 내에 한번만 사용되어야 하고 <h2>에서 <h4>를 사용하는 등 건너뛰기를 피해라.
    • 글씨 크기를 변경하기 위해서 사용하면 안된다.
  • <p>
    • 문서에서 하나의 문단을 나타내는 태그.
  • 서식 태그
    • <b>,<strong> :  글씨 두께가 두꺼워지는 태그, <strong>의 경우 "강조"의 의미가 들어감.
    • <i>, <em>: 글씨가 기울게 하는 태그, <i>는 등장인물, 외국어 구절, 기술 용어 등에 사용되고 <em>은 <strong>과 마찬가지로 "강조"의 의미가 들어감.
    • <u>: 글씨에 밑줄을 넣고 주석을 가지는 단어를 나타내는 태그.
    • <s>, <del>: 글씨에 취소선을 추가하는 태그. <del>태그는 문서에서 제거된 텍스트를 나타낼 수 있다.<ins> 태그를 함께 사용하면 제거된 텍스트 옆에 추가된 텍스트를 표현할 수 있다.
    • <strong>,<em>,<u>,<del> 과 같이 기능이 같은 태그가 있지만 문서적으로 의미를 강조하기 위한 태그들이 존재한다. 효과를 넣기 사용한다면 CSS를 사용하라.
  • <a>
    • 링크 요소를 만드는 태그.
    • target 속성을 바꾸는 것으로 창을 띄우는 방식이 다채로워진다.
<h1>제목1</h1>
	<h2>제목2</h2>
    	<!--<h6>잘못된 제목</h6>-->
    	<h3>제목</h3>
        <p>
        	<b>문단</b>
            <strong>문단</strong>
            <i>문단</i>
        	<em>문단</em>
            <u>문단</u>
            <s>문단<s>
            <del>문단</del>
            <ins>문단</ins>
        </p>
        <a href="google.com" target="_self">구글로 가기</a>
        <a href="google.com" target="_blank">새 창으로 구글 가기</a>

제목1

제목2

제목

문단 문단 문단 문단 문단 문단 문단 문단

구글로 가기 새 창으로 구글 가기

멀티미디어 태그

  • <img>: 문서 내에 이미지를 넣을 수 있는 태그
    • src: 이미지의 경로를 삽입
    • alt: 이미지 로딩에 문제가 생겼을 때 대체 텍스트, 검색 시 이 텍스트를 기준으로 검색이 된다.
  • <figure>,<figcaption>: 하나의 독립적인 콘텐츠로 분리하고 그에 대한 설명을 넣을 수 있는 태그
    • 보통 이미지를 넣는 데 인용문, 비디오/오디오 등 문서의 흐름에 참조는 되지만 독립적으로 분리되어도 되는 내용을 담음
    • <figcaption>태그를 사용해 콘텐츠의 설명 혹은 범례를 추가할 수 있고 제일 처음이나 제일 아래 추가해서 사용. 가운데 삽입하면 안됨.
  • <video>:문서 내에 영상을 첨부할 수 있는 태그
    • src: 비디오 영상 경로 삽입
    • poster: 비디오가 로드되기 전에 보여지는 포스터 경로 삽입
    • <source> 태그: 여러 타입의 비디오 사용
  • <audio>: 문서 내에 소리를 첨부할 수 있는 태그
    • src: 소리 파일 경로 삽입
    • <source> 태그: 여러 타입의 오디오 사용
    • controls 속성을 사용하지 않으면 컨트롤러가 없다.
  • <svg>:그래픽으로 만들어진 이미지
    • 수학 공식을 사용하여 해상도의 영향을 받지 않는다.
    • 요청과 응답이 필요가 없기 때문에 속도가 빠르다.
    • 이미지가 복잡할 수록 svg코드가 복잡해진다.

리스트/표/외부 콘텐츠 태그

  • 리스트
      • <ul>, <li>태그
        • 정렬이 안 된 태그
        • <ul>로 감싸고 <li>로 각 글을 쓴다.
        • 현재 글에 적용되는 리스트가 <ul>, <li>이다.
    티스토리 html 모드에서 가져온 <ul>,<li>
    • <ol>, <li> 태그
      1. 정렬이 된 태그
      2. <ol>로 감싸고 <li>로 각 글을 쓴다.
      3. 현재 글에 적용되는 리스트가 <ol>,<li>이다.

티스토리 html 모드에서 가져온 <ol>,<li>

  • <dl>,<dt>,<dd>태그
    • 설명 목록 태그
    • <dt> 태그에 사용된 단어 혹은 내용의 설명을 <dd> 태그에 작성할 수 있다.
    • 주로 용어 사전이나 "키-값"이 있는 쌍의 목록을 나타낼 때 사용
  • 표<table>
    • <tr>: 행태그 <td>: 열 태그
    • <th>: 열의 제목 태그
    • <thead>: 열의 제목 그룹 태그
    • <tbody>: 열의 내용 그룹 태그
    • <tfoot>: 열의 바닥글 그룹 태그
    • <caption> 표의 이름 태그
<table>
    <caption>행운의 편지의 결과</caption>
    <thead>
        <tr>
            <th>사람</th>
            <th>편지 보냄 여부</th>
            <th>대가</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th>HGXWCH</th>
            <th>O</th>
            <th>복권에 당첨되어 20억</th>
        </tr>
        <tr>
            <th>어떤 이</th>
            <th>X</th>
            <th>사직</th>
        </tr>
        <tr>
            <th>편지를 보내지 않아 직장을 잃은 어떤 이</th>
            <th>O</th>
            <th>좋은 직장</th>
        </tr>
        <tr>
            <th>케네디 대통령</th>
            <th>X</th>
            <th>암살</th>
        </tr>
    </tbody>
    <tfoot>
    	 <tr>
            <th>바</th>
            <th>닥</th>
            <th>글</th>
        </tr>
    </tfoot>
</table>
행운의 편지의 결과
사람 편지 보냄 여부 대가
HGXWCH O 복권에 당첨되어 20억
어떤 이 X 사직
편지를 보내지 않아 직장을 잃은 어떤 이 O 좋은 직장
케네디 대통령 X 암살
바 닥 글
  • 외부콘텐츠 태그
    • <iframe> : 현재 문서 안에 다른 HTML 페이지를 삽입할 수 있는 태그
    • 공식 문서에서는 권장하지는 않는 태그이다.

양식태그

  • <form>
    • 정보를 제출하기 위한 태그
    • action: 정보가 제출되었을 때 페이지를 이동시킬 수 있다.
    • method: 정보가 제출될 때 처리 방식을 결정할 수 있다.
  • <input>
    • 사용자에게 데이터를 입력받는 태그
    • type: input 유형을 변경할 수 있다.
      • checkbox(체크박스), radio(라디오 버튼), file(파일 첨부), button(value 속성에 입력된 값을 이름으로 갖는 버튼), hidden(input을 시각적으로 숨김, value에 적힌 값은 전송된다.)
    • value: 기본 값을 입력할 수 있다.
    • name: input의 이름을 지정할 수 있다.
  • <select>
    • 옵션 메뉴를 제공하는 태그
    • 첫 번째 option은 이름이 된다.
    • value 속성을 선언하지 않을 경우 <option>태그의 콘텐츠가 기본값이 된다.
  • <textarea>
    • 여러 줄을 입력할 수 있는 대화형 태그
    • 콘텐츠를 넣으면 기본값이 된다.
  • 자주 사용하는 속성
    • readonly: 읽기 전용으로 변경
    • required: 필수 입력 사항으로 변경한다.
    • placeholder: 부가 설명을 입력해둘 수 있다.(select는 사용 불가)
    • disabled: 요소가 비활성되고 정보 제출 시 값이 제출되지 않는다.
  • <button>
    • 클릭 가능한 버튼을 만드는 태그
    • type에는 제출을 하는 submit과 양식을 초기화하는 reset이 존재
    • 콘텐츠에 태그 입력이 가능하나 블록 레벨 태그는 사용하면 안된다.

지켜야하는 규칙

  • 태그는 가능한 소문자
  • 닫는 태그 생략 주의
  • 한글 사용 시 오류 발생 가능성 존재→영어 우선 사용
  • id는 한 페이지 내 한 번만
  • 계층 구조 유지
  • 동일한 의미 태그 중첩 금지

3. 공부하며 느낀 점

알았던 내용이라서 기초를 다시 다지는 느낌이었다. 알던 내용인데도 정리하려고 하니 양이 굉장히 많다고 느꼈다.

4.출처

 

저작자표시 (새창열림)