html학습정리 _웹표준과 시멘틱태그

웹표준과 시멘틱태그를 지키는 이유, 그리고 html을 학습한 내용을 정리하고자 한다.

[ 웹표준과 시멘틱태그 ]

웹표준

브라우저 간 지켜야하는 기준.

현재 HTML Living Standard(흔히 html5로 일컫음)로 표준화(2014 W3C / 2019 WHATWG).

웹표준을 준수해 작성함으로써 모든 운영체제, 브라우저에서 의도하는 대로 보여질수 있음

웹 접근성

모든 사용자가 동등하게 정보와 기능에 접근할수 있게 함.

웹호환성

웹브라우저버전, 종류와 관계없는 웹사이트 접근

웹표준을 준수함 -> 웹호환성 확보.

시멘틱태그

html5부터 등장한 개념. 의미를 가지고 있는 요소.
검색엔진 최적화, 접근성, 개발자에게 해당요소의 목적(의미) 전달 위함.

따라서 웹표준을 지켜 문서를 작성함으로써 모든 운영체제, 브라우저에서 동일한 웹사이트가 보여지게 되고

이를 통해 웹호환성을 확보할 수 있다. 그리고 시멘틱태그를 사용함으로써 태그의 목적을 명확히하여 검색엔진을 최적화하고 접근성을 높여준다. 이는 개발자의 입장에서 유지보수를 할때 수월하게 만드는 요소이기도 하다.

html 구조

html문서를 브라우저(크롬, 파이어폭스 등)를 통해 우리가 볼 수 있는 웹 페이지로 변환한다.

html문서는 계층적구조를 가진다

--> dom구조 = 문서를 트리형태로 표현.

객체들(요소)로 문서구조를 표현하는 방법(-> Tree형태 속 특정 요소를 찾아 css, javascript를 적용함).

최상위 태그(root tag)는 <html>

그 아래 <head>(html에 대한 정보)와 <body>(브라우저 화면에 표시될 컨텐츠)

<head>

여러 메타정보 설정 <meta charset="UTF-8"> : 인코딩설정 <meta name="viewport"> : 반응형웹, 모바일웹 설정
<link> : favicon 설정, css파일 연결 등
<title>: 웹페이지 제목 설정
<style>: css 작성 태그(권장x)

블록요소와 인라인요소

block element: 페이지의 구조적인 요소를 나타낼 때 사용함. 한 줄 전체를 차지.

<p>, <div>, <form>, <ol>,<ul>,<li>,<h1>...

inline element: 문장,단어 등 작은 부분에 주로 사용. 컨텐츠 크기만큼만 공간 차지.

<span>,<a>,<button>,<img>,<em>, <strong>,<i>...

=> 인라인 요소 안에 블록요소 X. 예외) a

문단작성

<hr> 구분선

<br> 줄바꿈

텍스트 효과

- 단순꾸밈요소

<b>굵게 <i> 기울임

- 시멘틱요소(의미론적 요소)

<strong> <em>기울임(강조)

- 기타 효과들

<mark>형광펜

<del>취소선

<sub>아래첨자 <sup>위첨자

리스트

<ol> 순서o 리스트 --속성 type:기본값 숫자. a,A, i(로마자소문자), l(로마자대문자)로 변경 가능 / start: 시작번

<ul> 순서없는 리스트 --기본스타일은 점으로 css로 변경가능

표(Table)

<table> 선언

<tr> 행 추가(가로줄)

<th> 테이블헤더 <td>테이블데이터

첫번째 tr에 th로 구성하면 가로형 표,

모든 tr의 첫번쨰요소를 th로 주면 세로형 표가 됨.

    <table>
      <tr>
        <th></th>
        <th>월</th>
        <th>화</th>
      </tr>
      <tr>
        <th>8시~</th>
        <td>명상요가</td>
        <td>바렐</td>
      </tr>
      <tr>
        <th>9시~</th>

        <td>리포머</td>
        <td>체어</td>
      </tr>
      <tr>
        <th>10시~</th>
        <td>싱잉볼</td>
        <td>호흡요가</td>
      </tr>
    </table>

위 코드에서 헷갈리지 않게

아래와 같이

각 table header에 scope="col" "row"를 붙여 구분할 수 있음.

    <table>
      <tr>
        <th></th>
        <th scope="col">월</th>
        <th scope="col">화</th>
      </tr>
      <tr>
        <th scope="row">8시~</th>
        <td>명상요가</td>
        <td>바렐</td>
      </tr>
      <tr>
        <th scope="row">9시~</th>

        <td>리포머</td>
        <td>체어</td>
      </tr>
      <tr>
        <th scope="row">10시~</th>
        <td>싱잉볼</td>
        <td>호흡요가</td>
      </tr>
    </table>

*colspan으로 해당th의 하위열의 갯수를 지정할수 있음

    <table>
      <tr>
        <th colspan="3">제품명</th>
        <th>갯수</th>
      </tr>
      <tr>
        <td>딸기쿠키</td>
        <td>녹차마카롱</td>
        <td></td>
        <td>3</td>
      </tr>
      <tr>
        <td>초코쿠키</td>
        <td>레몬마카롱</td>
        <td>휘낭시에</td>
        <td>2</td>
      </tr>
    </table>

전역속성

왠만한 html요소에서 공통적으로 사용가능한 속성

class,id, style, hidden, title, 이벤트핸들링관련속성(onclick,onmouseenter, onmouseleave..)

    <h1>Div</h1>
    <div class="red" hidden>
      <h2>경고</h2>
      <p>조심하세요. 아주 조심하세요.</p>
    </div>
    <p title="div밖 텍스트">div밖에있는 텍스트입니다</p>

hidden을 넣어 div의 컨텐츠가 안보이도록 숨김

title로 마우스올리면 툴팁 내용이 보여짐.

시멘틱태그

html5부터 등장한 개념. 의미를 가지고 있는 요소.

검색엔진 최적화, 접근성, 개발자에게 해당요소의 목적(의미) 전달 위함.

<nav>

<main>: 메인컨텐츠영역(안에 article, section 등). 전체문서에서 하나.

<section>컨텐츠영역.여러개 가능

<article> 컨텐츠 <figure> 비디오,이미지, 코드영역 컨텐츠

<aside> 메인컨텐츠외의 사이드 컨텐츠.

<footer> 저작권, 계약정보, 사이트맵, 연락처

폼 form

사용자의 입력을 받아, 클라이언트 -> 서버로 정보를 보내기 위한 요소.

<form> 태그로 사용하며, 하위에 다음과 같은 태그로 실제입력을 받음.

<input>
<select>
<textarea>

<form> 태그에 사용할 수 있는 속성은 다음과 같다.

action: 폼데이터를 보낼 URI지정.

submit, button 등을 통해 사용자가 제출이벤트를 발생시켰을때, 입력된 데이터를 어디로 보낼지 지정한다.(다른 웹페이지주소, 서버의 주소, 프로젝트 내 다른 html파일 등)
URI : 리소스의 위치를 식별하기 위한 문자열.(URL은 URI의 하위개념)

method: 어떤 방식으로 보낼지 지정.(http메소드 중 어떤 방식)

get : 그대로 url에 드러남(보안취약)
post: request Body에 데이터를 넣어서 전송

id: form의 식별자

▶ input태그

속성 type에 따라 입력받을 타입이 정해진다.

  <body>
    <form>
      <h1>Sign In</h1>
      <input type="email" name="useremail" placeholder="Email을 입력하세요" />
      <input
        type="password"
        name="password"
        placeholder="비밀번호를 입력하세요"
      />
      <input type="submit" value="로그인" />
    </form>

    <form method="get">
      <h2>다양한 input type</h2>
      <input type="date" name="date" />
      <input type="number" value="1" />
      <input type="color" />
      <input type="file" />
      <input type="submit" />
    </form>

    <hr />
    <form method="get">
      <p>음식 맛은 어떠셨나요?</p>
      <textarea cols="30" rows="10" name="review" required></textarea>
      <br />
      <!-- <input type="submit">  // default설정-->
      <!-- 방법 1 -->
      <input type="button" value="응답 제출" />
      <!-- 방법 2 -->
      <button>
        응답 제출
        <!-- <img src="" alt="">
            <span></span> -->
      </button>

      <!-- 버튼 타입 -->
      <button type="reset">Clear</button>
      <button type="button" onclick="">Just Click me!</button>
    </form>
  </body>

requeired 필수작성 설정

disabled 비활성화

checked 기본 체크설정

** label태그

<label>은 입력받는 태그(input, checkbox, radio등)가 어떤 입력인지 설명해주는 역할을 함 -> 접근성 높임.

태그의 id값과 label의 for 값을 매핑함.

* selectbox는 하위요소를 <select>로 감싸는 형태인 반면,

input, checkbox, radio는 해당 태그 한줄한줄 작성하는식으로 구성되어 label태그의 컨텐츠로 어떤 입력값인지 나타냄.

    <form action="">
      <!-- 라디오 -->
      <h3>어디에서 식사하셨나요?</h3>
      <input type="radio" id="inside" name="location" value="in" checked />  
     <!-- name'위치'를 위한, 라디오type, inside구분자(id로 label연결), value값은 in, 기본체크설정-->
      <label for="inside">매장 내 식사</label>
      <input type="radio" id="takeout" name="location" value="out" />
      <label for="takeout">포장</label>

      <!-- 체크박스 -->
      <h3>어떤 메뉴를 주문하셨나요?</h3>
      <input type="checkbox" id="steak" name="menu" value="steak" />
      <label for="steak">스테이크</label>
      <input type="checkbox" id="pasta" name="menu" value="pasta" />
      <label for="pasta">파스타</label>
      <input type="checkbox" id="risotto" name="menu" value="risotto" />
      <label for="risotto">리조또</label>
      <input type="checkbox" id="salad" name="menu" value="salad" />
      <label for="salad">샐러드</label>

      <!-- name을 다르게 제출 -->
      <h3>어떤 음료를 드셨나요?</h3>
      <input type="checkbox" id="sprite" name="sprite" value="true" />
      <label for="sprite">스프라이트</label>
      <input type="checkbox" id="coke" name="coke" value="true" />
      <label for="coke">콜라</label>
      
 </form>

▶ select태그

드롭다운 리스트가 생성되어 선택할 수 있게 함.

1. 필수 <select name="메뉴선택">

선택 <select name="메뉴선택" id="label의 for속성과 매핑" form=select가 form의 하위에속하지 않을때 form의 id와 매핑">

2. select의 하위에 <option>으로 선택지를 하나씩 추가함.

- value: 선택지의 값을 문자열로 나타냄. .

- selected: 초기기본설정값으로 지정.

	<form action="">
      <h3>음식맛은 어땠나요?</h3>
      <!-- Select box, 드롭 다운 리스트 -->
      <select name="stars" id="">
        <option value="bad">1</option>
        <option value="notgood">2</option>
        <option value="soso">3</option>
        <option value="good">4</option>
        <option value="great" selected>5</option>
      </select>

      <br />
      <input type="submit" />
    </form>

+) 컨텐츠 카테고리

메타데이터 컨텐츠	문서의 정보, 다른문서를 가리키는 링크 등을 나타내는 요소
플로우 컨텐츠	메타데이터를 제외한 대부분의 요소. 텍스트나 임베디드콘텐츠를 포함함
섹션 컨텐츠	웹문서의 구획(section)을 나눌 때 사용
헤딩 컨텐츠	섹션의 제목(heading)과 관련된 요소
임베디드 콘텐츠	이미지, 비디오 등 외부소스를 가져오거나 삽입할 때 사용
인터렉티브 콘텐츠	사용자와 상호작용을 위한 콘텐츠 요소

https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html

3.2.5 Content models — HTML5

www.w3.org

저작자표시 비영리 변경금지 (새창열림)

'웹 프론트 > Html,Css' 카테고리의 다른 글

Font를 Preload하는 방법 (0)	2023.04.07

Learning Notes

html학습정리 _웹표준과 시멘틱태그

[ 웹표준과 시멘틱태그 ]

웹표준

웹 접근성

웹호환성

시멘틱태그

html 구조

블록요소와 인라인요소

문단작성

텍스트 효과

리스트

표(Table)

전역속성

시멘틱태그

폼 form

▶ input태그

** label태그

▶ select태그

+) 컨텐츠 카테고리

'웹 프론트 > Html,Css' 카테고리의 다른 글

댓글

티스토리툴바

html학습정리 _웹표준과 시멘틱태그

[ 웹표준과 시멘틱태그 ]

웹표준

웹 접근성

웹호환성

시멘틱태그

html 구조

블록요소와 인라인요소

문단작성

텍스트 효과

리스트

표(Table)

전역속성

시멘틱태그

폼 form

▶ input태그

** label태그

▶ select태그

+) 컨텐츠 카테고리

'웹 프론트 > Html,Css' 카테고리의 다른 글

관련글

댓글

티스토리툴바