Development Project

HTML_태그정리 본문

Language/HTML&CSS

HTML_태그정리

나를 위한 시간 2022. 1. 13. 23:19
  • Visual Studio Code 사용시 단축키
    • 기본 구조 만들기 : ! + ENTER
    • 주석 : CTRL + /
    • 실행 : ALT + L + O
  1. 기본 용어 정리
    • HTML
      - HyperText Markup Language의 약자
      - 웹 페이지는 HTML 문서라고도 불리며, HTML 태그들로 구성됨

    • 태그(Tag)
      - HTML 페이지에서 객체를 만들기 위해 사용
      - 보통 시작 태그와 끝 태그의 한쌍으로 구성 (종료태그 없는 태그도 존재 ex>br태그 )
      - 일부 태그는 태그 내부에 다른 태그를 넣을 수 있음
      <h1>HELLO HTML</h1>​
      => 시작태그 : < > 끝태그 : </ > 

    • 요소(Element)
      - 태그를 통해 만들어진 객체
      <h1>HELLO HTML</h1>​​
      => 위 코드 한줄 전체

    • 속성(Attribute)
      - 태그에 추가 정보를 부여할 때 사용
      - [속성이름 = '속성값' or "속성값"] 형태로 사용
      <h1 title="header">HELLO HTML</h1>​
      => h1태그의 title이라는 속성에 header라는 속성 값을 준 형태

  2. 페이지 구조
    <!-- ! + ENTER 누르면 생기는 구조 -->
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
  
</body>
</html>​
    1. <!DOCTYPE html>
      - 웹 브라우저가 현재 웹 페이지가 HTML 문서임을 인식하게 해줌
      - 모든 HTML문서는 반드시 위 태그를 표기해야하며, 가장 첫 번째 줄에 있어야 함

    2. <html lang="en"> </html>
      - 모든 HTML 페이지의 루트(root) 요소를 정의함
      - 모든 HTML 태그는 html 태그의 내부에 작성하며, html 태그에 lang 속성 입력 가능
      국가 속성값 국가  속성값
      한국 ko 미국 en
      일본 ja 러시아어 ru
      중국 zh 독일어 de
      - lang 속성은 실제 웹 브라우저가 동작하는 데 어떤 영향도 끼치지 않음
      - 대신 구글과 같은 검색엔진이 웹 페이지를 탐색할때 해당 웹페이지가 어떤 언어로 만들어졌는지 쉽게 인식함

    3. <head> </head>
      - HTML 문서의 메타데이터(metadata)를 정의함
      - head 태그는 body 태그에서 필요한 스타일시트와 자바스크립트를 제공하는데 사용
      - 다음의 표는 head 태그 안에 넣을 수 있는 태그임
      태그이름 설명
      title 제목 설정 태그 | HTML 문서 전체의 타이틀을 표현
      meta 추가 정보 전달 태그 | 웹 서버와 웹 브라우저간에 상호 교환되는 정보를 정의하는데 사용
      script 스크립트 추가 태그 | 자바스크립트 같은 Client-Side Scripts를 정의할 때 사용
      link 다른 파일 추가 태그 | 해당 문서와 외부 소스 사이의 관계를 정의할 때 사용
      style 스타일 시트 추가 태그 | 해당 HTML문서의 스타일 정보를 정의할 때 사용
      base 기본 경로 지정 태그 | 기준이 되는 Base URL/URI를 설정하여 사용 가능
       
    4. <meta charset="UTF-8">
      - meta 태그의 charset 속성은 해당 HTML 문서의 문자 인코딩 방식을 명시함

    5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
      - 오래된 브라우저 지원을 위해 사용
      - 가장 최신 Internet Explorer 버전으로 랜더링하라는 의미

    6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
      - 뷰포트(viewport) 크기 조절을 위한 것으로, 각각의 기기장치를 인식할 때 사용하는 중요한 태그
      - width=device-width 는 장치의 화면 너비를 따르도록 페이지 너비를 설정함
      - initial-scale=1.0 은 브라우저에서 페이지를 처음 로드할 때 초기확대/축소수준을 설정함
    7. <title>Document</title>
      - HTML문서(웹페이지)의 제목을 Document로 설정하라는 의미

    8. <body> </body>
      - HTML 문서의 텍스트, 하이퍼링크, 이미지, 리스트 등과 같은 모든 콘텐츠를 포함하는 영역을 정의할 때 사용
      - HTML 문서에는 단 하나의 <body> 요소만이 존재 가능
  3. 글자 태그
    1. 제목
      - h1~h6 태그 (head의 약자)
      <!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <h1>h1 태그입니다.</h1>
    <h2>h2 태그입니다.</h2>
    <h3>h3 태그입니다.</h3>
    <h4>h4 태그입니다.</h4>
    <h5>h5 태그입니다.</h5>
    <h6>h6 태그입니다.</h6>
</body>
</html>​
    2. 본문
      • p 태그
        - 단락으로 표현 == 한줄의 영역을 차지하고 띄어쓰기가 됨
        - 가시속성(display : block) - default
        <!DOCTYPE html>
<html lang="en">
  <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>Document</title>
  </head>
  <body>
    <p>저는 p태그입니다.</p>
    <p>저는 p태그입니다.</p>
  </body>
</html>​
      • span 태그
        - 문장으로 표현 == 내가 넣은 컨텐츠만큼만 영역을 차지함
        - 가시속성(display : inline) - default
        <!DOCTYPE html>
<html lang="en">
  <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>Document</title>
  </head>
  <body>
    <span>저는 span태그입니다.</span>
    <span>저는 span태그입니다.</span>
  </body>
</html>​
      • br 태그 / hr 태그
        태그이름 설명
        br 줄바꿈 태그 [ <br/> ]
        hr 수평줄 태그 [ <hr/> ] 
        <!DOCTYPE html>
<html lang="en">
  <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>Document</title>
  </head>
  <body>
    <span>저는 span태그입니다.</span>
    <br />
    <span>저는 span태그입니다.</span>

    <hr />
    저는 일반 text입니다. 저는 일반 text입니다.
  </body>
</html>​
    3. a 태그 (앵커 태그)
      - 서로 다른 웹 페이지 사이를 이동하거나 웹 페이지 내부에서 특정한 위치로 이동할 때 사용
      <!DOCTYPE html>
<html lang="en">
  <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>Document</title>
  </head>
  <body>
    <a href="https://www.naver.com">네이버로 이동</a>
  </body>
</html>​
    4. 글자 형태
      태그 이름 설명
      b 굵은 글자 태그
      i 기울어진 글자 태그
      small 작은 글자 태그
      sub 아래에 달라 붙는 글자 태그
      sup 위에 달라 붙는 글자 태그
      ins 밑줄 글자 태그
      del 가운데 줄이 그어진 글자 태그 
      <!DOCTYPE html>
<html lang="en">
  <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>Document</title>
  </head>
  <body>
    <h1><b>h1, b태그</b></h1>
    <h1><i>h1, i태그</i></h1>
    <h1><small>h1, small태그</small></h1>
    <h1><sub>h1, sub태그</sub></h1>
    <h1><sup>h1, sup태그</sup></h1>
    <h1><ins>h1, ins태그</ins></h1>
    <h1><del>h1, del태그</del></h1>

    <b>h1, b태그</b></br>
    <i>h1, i태그</i></br>
    <small>h1, small태그</small></br>
    <sub>h1, sub태그</sub></br>
    <sup>h1, sup태그</sup></br>
    <ins>h1, ins태그</ins></br>
    <del>h1, del태그</del></br>
  </body>
</html>​

    5. 루비 문자
      - 일본어에서 자주 사용되는 글자 형식으로, 한자 위에 표시되는 글자를 의미
      태그 이름 설명
      ruby 루비 문자 선언 태그
      rt 위에 위치하는 작은 문자 태그
      rp ruby 태그를 지원할 경우 출력되지 않는 태그 
      <!DOCTYPE html>
<html lang="en">
  <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>Document</title>
  </head>
  <body>
    <ruby>
      <span>大韓民國</span>
      <rp>(</rp>
      <rt>대한민국</rt>
      <rp>)</rp>
    </ruby>
  </body>
</html>​
       
      • ruby 지원할 경우
      • ruby 지원하지 않을 경우 : 大韓民國(대한민국)
  4. 목록 태그
    1. 기본 목록
      태그 이름 설명
      ul 순서가 없는 목록 태그
      ol 순서가 있는 목록 태그
      li 목록 요소 
      <!DOCTYPE html>
<html lang="en">
  <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>Document</title>
  </head>
  <body>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JS</li>
    </ul>

    <ol>
      <li>HTML</li>
      <li>CSS</li>
      <li>JS</li>
    </ol>
  </body>
</html>​
    2. 정의 목록
      - 특정 용어와 그 정의를 표현할 때 사용하는 태그
      태그 이름 설명
      dl 정의 목록 태그
      dt 정의 용어 태그
      dd 정의 설명 태그 
      <!DOCTYPE html>
<html lang="en">
  <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>Document</title>
  </head>
  <body>
    <dl>
      <dt>용어A</dt>
      <dd>용어A의 첫번째 뜻</dd>
      <dd>용어A의 두번째 뜻</dd>
      <dd>용어A의 세번째 뜻</dd>

      <dt>용어B</dt>
      <dd>용어B의 첫번째 뜻</dd>
      <dd>용어B의 두번째 뜻</dd>
    </dl>
  </body>
</html>​


  5. 테이블 태그
    1. 테이블 태그 기본
      - 표를 만들 때는 table 태그 사용
      태그 이름 설명
      tr (table row의 약자) 표 내부의 행 태그
      th (table header의 약자) 행 내부의 제목 셀 태그
      td (table data의 약자) 행 내부의 일반 셀 태그 
      <!DOCTYPE html>
<html lang="en">
  <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>Document</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>메뉴</th>
        <th>가격</th>
      </tr>
      <tr>
        <td>아이스아메리카노</td>
        <td>3500</td>
      </tr>
      <tr>
        <td>아이스카페라떼</td>
        <td>4500</td>
      </tr>
    </table>
  </body>
</html>
       
    2. 테이블 태그의 속성
      - th 태그와 td 태그 속성
      속성이름 설명
      rowspan 셀의 높이 지정 | 행 병합
      colspan 셀의 너비 지정 | 셀 병합 
      <!DOCTYPE html>
<html lang="en">
  <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>Document</title>
  </head>
  <body>
    <table border="1px solid black">
      <caption>
        주문한 카페음료
      </caption>
      <tr bgcolor="yellow">
        <th>이름</th>
        <th colspan="2">가격/용량</th>
        <th>비고</th>
      </tr>
      <tr align="center">
        <td>아이스 아메리카노</td>
        <td>2000원</td>
        <td>500mL</td>
        <td rowspan="2"></td>
      </tr>
      <tr align="center">
        <td>아이스 카페라떼</td>
        <td>3500원</td>
        <td>450mL</td>
      </tr>
    </table>
  </body>
</html>​
  6. 이미지 태그
    - 이미지 태그의 속성
    속성 이름 설명
    src 이미지의 경로 지정 (필수 속성)
    alt 이미지가 없을 때 나오는 글자 지정
    width 이미지의 너비 지정
    height 이미지의 높이 지정 
    <img src="../NAVER.PNG" width="500px" />​

    • 경로 지정방법
      • 절대 경로 : 어떤 페이지나 파일이 가진 고유한 경로로, 외부 웹페이지로 연결할 때 사용함
      • 상대 경로 : 특정 위치를 기준으로 파일을 찾는 경로로, 내부 자료를 연결할 때 사용함
        1. 현재를 기준으로
          &amp;amp;amp;amp;amp;amp;lt;img src = ./img/banana.png"&amp;amp;amp;amp;amp;amp;gt;
        2. 상위를 기준으로
          &amp;amp;amp;amp;amp;amp;lt;img src = "../img/banana.png"&amp;amp;amp;amp;amp;amp;gt;
        3. 루트를 기준으로
          &amp;amp;amp;amp;amp;amp;lt;img src = "../../../img/banana.png"&amp;amp;amp;amp;amp;amp;gt; or &amp;amp;amp;amp;amp;amp;lt;img src = "/img/banana.png"&amp;amp;amp;amp;amp;amp;gt;
  7. 오디오 태그
    1. audio 태그
      - 웹 브라우저에서 플러그인의 도움 없이 음악을 재생할 수 있게 해주는 태그
      속성 이름 설명
      src 음악 파일의 경로 지정
      preload 음악을 재생하기 전에 모두 불러올지 지정
      autoplay 음악을 자동 재생할지 지정
      loop 음악을 반복할지 지정
      controls 음악 재생 도구를 출력할지 지정 
      <!DOCTYPE html>
<html lang="en">
  <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>Document</title>
  </head>
  <body>
    <audio src="/music.mp3" controls="controls" autoplay="autoplay"></audio>
  </body>
</html>​
    2. source 태그
      - 웹 브라우저마다 지원하는 음악 파일 형식이 다른 점을 보완하기 위한 태그
      <audio controls = "controls">
  <source src ="music.mp3" type="audio/mp3"/>
  <source src ="music.ogg" type="audio/ogg"/>
</audio>​
  8. 비디오 태그
    1. video 태그
      - 웹 페이지에서 동영상을 볼 수 있게 해줌
      속성이름 설명
      src 비디오 파일의 경로 지정
      poster 비디오 준비 중일 때의 이미지 파일 경로 지정
      preload 비디오를 재생하기 전에 모두 불러올지 지정
      autoplay 비디오를 자동 재생할지 지정
      loop 비디오를 반복할지 지정
      controls 비디오 재생 도구를 출력할지 지정
      width 비디오의 너비 지정
      height 비디오의 높이 지정 
      <!DOCTYPE html>
<html lang="en">
  <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>Document</title>
  </head>
  <body>
    <video
      poster="http://placehold.it/640x360"
      width="640"
      height="360"
      controls="controls"
    >
      <source src="동영상.mp4" type="video/mp4" />
      <source src="동영상.webm" type="video/webm" />
    </video>
  </body>
</html>​

  9. 입력 양식 태그
    1. 입력 양식 개요(form태그)
      • form 태그란?
        - 웹 페이지에서는 form 요소를 사용하여 사용자로부터 입력을 받을 수 있음
        - 또한, 사용자가 입력한 데이터를 서버로 보낼 때에도 form 요소를 사용함
        - form 태그에 지정된 action 속성의 장소로 method 속성에 적힌 방식으로 전달됨
      • form 태그의 속성
        • action = "처리할페이지주소" 또는 "JSP파일명"
          - 입력 데이터의 전달 위치를 지정하는 속성

        • method = "get" 또는 "post"
          - 입력 데이터의 전달 방식을 선택하는 속성
          • get
            - 주소에 데이터를 추가하여 전달하는 방식
             
            <!DOCTYPE html>
<html lang="en">
  <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>Document</title>
  </head>
  <body>
    <form action="#" method="get">
      <input type="text" name="search" />
      <input type="submit" />
    </form>
  </body>
</html>


          • post
            - 데이터(data)를 별도로 첨부하여 전달하는 방식으로, 주소가 변경되지 않음
             
            <!DOCTYPE html>
<html lang="en">
  <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>Document</title>
  </head>
  <body>
    <!-- method="post"속성일 경우, action에 값이 필수적(#은 안됨) -->
    <form action="#" method="post">
      <input type="text" name="search" />
      <input type="submit" />
    </form>
  </body>
</html>

    2. 기본 input 태그
      • input 태그
        - 데이터를 입력할 수 있는 태그
        <input type="타입"/>​

        - input 태그의 속성 종류
        속성 설명
        name 입력한 값을 구분하기 위해 이름 지정
        value 기본값 지정
        placeholder 미리보기 텍스트 지정
        autofocus 자동 커서 설정(true)
        maxlength 글자 수 제한 지정
        readonly 읽기 전용 지정
        - input 태그의 type 속성값
        속성 설명
        text 글자 입력 양식을 지정
        password 비밀번호 입력 양식을 지정
        file 파일 입력 양식을 지정
        hidden 보이지 않음
        image 이미지 형태를 지정
        checkbox / radio 체크박스(중복가능) 생성 / 라디오(중복불가능) 생성
        reset 초기화 버튼 생성
        submit 제출 버튼 생성
        button 버튼을 생성

        - 사용예시
        <!DOCTYPE html>
<html lang="en">
  <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>Document</title>
  </head>
  <body>
    <form action="#" method="get">
      <!-- 일반 텍스트 입력 -->
      ID : <input type="text" name="id" placeholder="ID를 입력해주세요." autofocus />

      <!-- 패스워드 입력-->
      PW : <input type="password" name="pw" placeholder="PW를 입력해주세요." maxlength="10"/><hr />

      <!-- 선택버튼 (중복 가능) -->
      <p>여러분들이 좋아하는 커피를 모두 골라주세요.</p>
      아메리카노<input type="checkbox" name="coffee" value="ame" />
      카페라떼<input type="checkbox" name="coffee" value="latte" /><hr />

      <!-- 선택버튼 (중복 불가) -->
      <p>성별을 입력해주세요.</p>
      남자<input type="radio" name="gender" value="men" /> 
      여자<input type="radio" name="gender" value="women" /><hr />

      <!-- select 태그 : 여러개의 목록에서 몇 가지를 선택할 수 있는 입력 양식 요소 -->
      <select>
        <option value="마라탕">마라탕</option>
        <option value="닭발">닭발</option>
        <option value="곱창">곱창</option>
      </select><hr />

      <!-- 파일 업로드 -->
      <input type="file" /><hr />

      <!-- 색상 지정 -->
      <input type="color" /><hr />

      <!-- 수치 입력 -->
      <input type="number" /><hr />

      <!-- 범위 지정 -->
      <input type="range" /><hr />

      <!-- 날짜 입력 -->
      <input type="date" /><hr />

      <!-- 제출-->
      <input type="submit" value="보내기" />

      <!-- 리셋-->
      <input type="reset" value="리셋" />
    </form>
  </body>
</html>​
    3. textarea 태그
      - 여러 줄의 글자를 입력할 때 사용
      속성 설명
      cols 태그의 너비를 지정
      rows 태그의 높이를 지정 
      <!DOCTYPE html>
<html lang="en">
  <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>Document</title>
  </head>
  <body>
    <textarea
      placeholder="적고 싶은 말을 편하게 적어주세요."
      name="some_text"
      style="resize: none; width: 100%"
      rows="5"
    ></textarea>
  </body>
</html>​
       
       
    4. select 태그
      • select 태그
        - 여러개의 목록에서 몇 가지를 선택할 수 있는 입력 양식 요소
        - select 태그에 사용되는 태그 이름
        태그 설명
        select 선택 양식을 생성
        optgroup 옵션을 그룹화
        option 옵션 생성 

        <!DOCTYPE html>
<html lang="en">
  <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>Document</title>
  </head>
  <body>
    <!-- 중복 선택 불가 -->
    <select>
      <option value="탕수육">탕수육</option>
      <option value="짜장면">짜장면</option>
      <option value="짬뽕">짬뽕</option>
    </select>
    <!-- 중복 선택 가능-->
    <select multiple="multiple">
      <option value="김밥">김밥</option>
      <option value="떡볶이">떡볶이</option>
      <option value="순대">순대</option>
      <option value="오뎅">오뎅</option>
    </select>
    <!-- 선택 옵션 묶기 가능(카테고리화) -->
    <select>
      <optgroup label="패스트푸드">
        <option>햄버거</option>
        <option>치킨</option>
        <option>피자</option>
      </optgroup>
      <optgroup label="양식">
        <option>스파게티</option>
        <option>스테이크</option>
        <option>도리아</option>
      </optgroup>
    </select>
  </body>
</html>​
         
    5. fieldset 태그와 legend 태그
      • fieldset, legend 태그
        - 입력양식을 설명하는 태그
        <!DOCTYPE html>
<html lang="en">
  <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>Document</title>
  </head>
  <body>
    <form>
      <fieldset>
        <legend>입력 양식</legend>
        <table>
          <tr>
            <td><label for="name">이름</label></td>
            <td><input id="name" type="text" /></td>
          </tr>
          <tr>
            <td><label for="mail">이메일</label></td>
            <td><input id="mail" type="text" /></td>
          </tr>
        </table>
        <input type="submit" />
      </fieldset>
    </form>
  </body>
</html>​

  10. 공간 분할 태그
    1. div 태그와 span 태그 + p 태그
        p태그 div태그 span태그
      block / inline 속성 block block inline
      특징 문자 정보를 표현하는 단락으로, 아래에는 인라인 요소만 기재가능 HTML 문서의 영역을 구분하는 역할로, 해당 태그 아래에 모든 태그 기재 가능 줄바꿈 없이 영역 묶기
       
      • block VS inline 속성
        • block 속성
          - 요소가 새로운 행(new line)에서 시작하며, 가로크기가 부모요소의 가로길이와 같음
          - ex) div태그 / p태그 / h1~h6태그 / 테이블태그 / form태그 / 목록태그 
        • inline 속성
          - 다른 요소들과 같은 라인에 표시되며, 크기는 포함하고 있는 내용에 의해 결정됨
          - ex) span태그 / a태그 / input태그 / 글자형식태그
    2. <!DOCTYPE html> <html lang="en"> <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>Document</title> </head> <body> <p style="background-color: red">p태그(block속성)</p> <div style="background-color: yellow">div태그(block속성)</div> <span style="background-color: blue">span태그(inline속성)</span> <hr /> <div style="background-color: yellow"> <p style="background-color: red">p품은 div</p> </div> <div style="background-color: yellow"> <span style="background-color: blue">span품은 div</span> </div> <!-- span은 inline 속성이라 block속성인 div를 품을 수 없음 --> <span style="background-color: blue" ><div style="background-color: yellow">div 품은 span</div> </span> <!-- span은 inline 속성이라 block속성인 p를 품을 수 없음 --> <span style="background-color: blue"> <p style="background-color: red">p 품은 span</p> </span> </body> </html>​
    3. 시멘틱 구조 태그
      • 시멘틱 웹
        - 의미론적인 웹 == 문서의 의미에 맞게 구성된 웹
        - 태그이름을 통해 요소의 의미를 내포할 수 있어, 코드의 가독성을 높이고 유지보수를 쉽게할 수 있음
        - 시멘틱 구조 태그 ( 태그종류는 많음)
        태그 이름 설명
        header 헤더를 의미
        nav 내비게이션을 의미
        aside 사이드에 위치하는 공간을 의미
        section 여러 중심 내용을 감싸는 공간을 의미
        article 글자가 많이 들어가는 부분을 의미
        footer 푸터를 의미

        - 시멘틱 태그는 모두 div태그와 같은 기능을 함
        - 하지만, 태그는 검색 엔진이나 그 이외의 기계적인 동작들이 웹 페이지를 쉽게 이해할 수 있게함

 

저작자표시

'Language > HTML&CSS' 카테고리의 다른 글

CSS_태그정리  (0) 2022.01.17
'Language/HTML&CSS' Related Articles more
Comments