HTML5 총정리 / 시멘틱 코딩하기

✍[연말 결산으로 HTML5와 CSS3를 공부하는 계기]

: 내가 지원하는 직무가 풀스택 혹은 백엔드더라도 어느 정도 프런트에 대한 지식이 제대로 정립돼 있어야 하기도 하고, 또 사이드 프로젝트를 하더라도 아는 프런트엔드 개발자가 없어서 현실적으로 내가 해야 하는 경우가 많기 때문에 알아야만 하는 상황도 된다..

아무튼 풀스택을 하든 백엔드를 하든 html과 css는 기초 지식의 범주에 있다고 생각돼서 공부 시작 !!

📌[공부한 강좌]

[HTML5&CSS3] 실전 HTML5 & CSS3 동영상 강좌 제 1강 Web 과 HTML

실전 HTML5 & CSS3 동영상 강좌 제 1강 Web 과 HTML 이번 강의는 Web 과 HTML편입니다. 1강 Web 과 HTML 인사드립니다.우리는Web을구성하고있는HTML과CSS입니다. - Web이란? - HTML이란? - CSS란? PC로 보실때는 서울

seouliotcenter.tistory.com

✨[사용한 버전]

HTML5
CSS3

✨ [사용한 툴 및 플러그인]

vscode
- prettier
- korean
- auto close tag
- material syntax - dark

💡 [기본용어]

WEB : 1개 이상의 사이트가 연결되어있는 인터넷 서비스의 한 형태
인터넷 : 1개 이상의 네트워크가 연결되어 있는 형태
프로토콜(Protocol) : 네트워크상에서 약속한 통신규약 (Http, FTP, SMTP, POP, DHCP)
IP : 네트워크상에서 컴퓨터를 식별할 수 있는 주소
DNS : IP주소를 인간이 쉽게 외우도록 맵핑한 문자열
Port : IP주소가 컴퓨터를 식별할 수 있게 해 준다면, Port번호는 해당 컴퓨터에서 구동되고 있는 프로그램을 구분할 수 있는 번호
HTML(Hyper Text Markup Language) : 정보를 가지고 있으면서 웹문서를 표현하기 위한 태그들로 구성
CSS(Cascading Style Sheet) : 화면상의 레이아웃을 컨트롤
태그 : HTML문서를 구성하고 있는 요소로 이름과 속성을 가진다.
- 열린 태그, 시작 태그 - <div>
- 닫힌 태그, 종료 태그 - </div>
- <a href=””>에서 a는 태그의 이름이고 href는 속성이 된다.

[HTML]

vscode에서 html파일 생성 뒤 본문에 !(느낌표)를 입력하고 enter를 치면 html5의 기본 템플릿이 생성된다.
- <meta> 태그의 name속성 = 정보의 종류, content속성 = 정보의 값을 쓴다.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- 정보 종류(name) = 웹페이지가 출력되는 영역을 의미<head> 태그 안에는 <style> 태그와 <Script> 태그 등이 포함된다.
- 뷰포트(viewport) : 실제 웹페이지 표시되는 부분 => viewport는 모바일 장치만 해당하는 부분이다.
- width=device-width : 가로길이 = 기기가 가진 가로 사이즈에 맞게
- initial-scale=1.0 : 웹페이지가 처음 출력될때 기본 크기는 1.0배로 출력할 것이다
<body> 태그 안에는 실제 정보에 관한 태그들이 들어간다.

[DOM이란?]

Document Object Model의 약자로 웹 브라우저가 HTML페이지를 인식하는 방식, document개체와 관련된 객체의 집합을 의미한다. ⇒ HTML문서를 브라우저가 이해할 수 있도록 만든 Tree자료구조
DOM의 기본 구조

DOM은 tree형식의 자료 구조를 가진다.

[브라우저의 렌더링 과정]

파싱 (구문분석)
렌더링 HTML이 파싱을 거치면 DOM tree, CSS가 파싱을 거치면 CSSOM tree, JS가 파싱을 거치면 AST가 된다. DOM은 CSSOM과 합쳐져 렌더트리를 형성하고, 렌더 트리를 통해 렌더링이 실행된다.
HTML, CSS, JS로 작성된 문서들을 파싱해 브라우저에 시각적으로 출력하는 것으로, HTML이 파싱을 거치면 DOM tree, CSS가 파싱을 거치면 CSSOM tree, JS가 파싱을 거치면 AST가 된다. DOM은 CSSOM과 합쳐져 렌더트리를 형성하고, 렌더 트리를 통해 렌더링이 실행된다.

[태그]

<br/> - 문장 뒤에 붙으면 줄을 개행해 준다. 열린 태그와 닫는 태그의 구분 없이 하나의 태그에 써준다.
- 개행 태그를 써주지 않으면 편집 시 줄 바꿈을 하더라도 웹 상에는 표현되지 않는다.
<h></h> - 한 태그가 끝나면 자동으로 개행된다. 글자의 크기를 조절해 준다.

<p></p> - 한 태그가 끝나면 자동으로 개행된다. 본문에 사용되는 태그로 하나의 단락을 이뤄준다. 기본적으로 16px로 설정된다.
<a href=””>웹에 보여줄 이름 </a> - 하이퍼링크를 걸 때 사용하는 a태그(앵크태그)
- href의 속성에 값을 부여하면 웹에 보여줄 이름을 클릭할 때 해당 속성값으로 이동한다. 자동으로 개행되지 않는다.
- target속성을 _blank 또는 _self로 줄 수 있는데 blank로 할 경우 새 탭에서 열리고 self로 할 경우 현재 페이지의 url을 변경해 준다.
- target속성을 지정하지 않으면 기본은 self이다.
<i></i> - 이탤릭체
<sup></sup> - 윗첨자
<ins></ins> - 아래 밑줄
<del></del> - 가운데 줄

<리스트 태그>

-자동으로 개행된다.

-수평과 수직 구조로 덩어리들을 나열해 줄 수 있다.

<ul></ul> - 순서가 없음 (unorderlist)
<li></li> - ul태그와 ol태그 사이에 li로 리스트를 작성해 준다.
- ul과 ol태그 없이 li만 쓸 경우 ul태그처럼 된다.
<ol></ol> - 순서가 있음 (orderlist)
<dl></dl> - 리스트 태그이자 정의 태그로 용어를 설명하고자 할 때 쓴다.
- <dt></dt>
- <dd></dd>
<table>
- <tr></tr> - 행
- <td></td> - 열
<img/> - 이미지를 출력해 주는 태그로 src라는 속성을 사용해 이미지 경로를 설정해 준다.
- alt 속성은 이미지가 엑박이 될 시에 어떤 문구를 보여줄지 설정해 준다.
- title 속성은 이미지 위에 마우스를 올렸을 때 나타나는 문구를 설정해 준다.
<form></form> - 데이터를 한 번에 전송할 때 사용하는 태그
- action속성에는 서버 쪽의 주소를 적어준다.
- method속성은 get/post방식을 적어준다. 입력하지 않으면 default는 get방식이다.
- input태그의 size속성은 width와 같이 좌우의 길이를 조정해 준다.
- input태그의 type속성을 file로 선택하면 파일을 선택할 수 있는 버튼이 생성된다.
- input태그를 radio나 checkbox type으로 설정할 때 name은 동일하게 설정해 주고 value속성을 통해 값을 다르게 준다.
<select></select> - 드롭다운으로 선택할 수 있게 해 준다.
- <option></option>

[레이아웃 구성 태그]

제일 초기에 해당 태그로 구성을 잡고 가기

HTML태그는 블록요소(자동개행o, div태그)와 라인요소(자동개행x, span태그)로 나눌 수 있다.

- 예전에는 table을 이용해 웹 전체 화면의 레이아웃을 잡았지만, 요즘의 모던웹은 div태그를 사용한다. (웹 표준 코딩의 대표)

- 하지만 div태그는 아무런 의미를 가지고 있지 않으므로 아래와 같은 시멘틱 태그들을 이용해야 한다. (ide에서는 반영되지 않으니 주의)

- 시멘틱 태그들은 div태그로 대체될 수 있으나 코드의 가독성을 위해 사용한다. 해당 태그들 만으로 레이아웃이 나눠지는 것은 아님

⇒ 코드만 보고도 이 태그는 어떤 역할인지, 저 태그는 어떤 역할인지 전체적으로 의미를 파악할 수 있는 코드를 시멘틱 HTML이라고 한다.

<시멘틱 코드 작성을 위한 주의사항>

인라인 요소는 반드시 블럭 요소 안에 써야 한다. 반대로 들어가면 안 된다.
<b> 태그는 <strong> 태그로 <i> 태그는 <em> 태그로 대체한다.
<h> 태그는 상하 관계를 표기 위한 목적으로 사용해야 하며, 스타일을 표현하기 위한 목적으로 사용해서는 안된다.
<br> 태그는 연속으로 사용하지 않는다. (요소 간의 간격을 위해 사용해서는 안된다. 오로지 줄 바꿈을 위한 목적으로만 사용!)

<시멘틱 코드를 사용해야 하는 이유>

1. SEO ( Search engine optimization )

검색을 최적화하기 위해서 우리가 제목, 부제목, 시멘틱 태그를 잘 활용한다면, 특정 키워드로 검색했을 때, 내가 만든 웹사이트가 검색창에 노출될 수 있다. 다시 말해서, 브라우저의 검색 엔진이 내가 만든 웹사이트를 어떤 검색 결과에 띄워줘야 될지를 알려줄 수 있다.

2. 웹 접근성

웹페이지를 시각적이 아니라, 음성으로 읽어주는 "스크린리더"를 이용하거나 또는 키보드만을 이용해서 내가 만든 웹사이트를 이용하는 경우, 적절한 시멘틱 태그로 잘 만들어진 웹사이트라면 스크린리더이든, 키보드만을 사용해서 동작하든 문제없이 동작할 수 있습니다.

3. 유지보수성

단순히, div tag로만 모든 구조를 짜는 것보다 더 한눈에 알아볼 수 있기 때문에, 다른 개발자들이 코드를 유지보수하기가 더 편해진다.

****Button vs A 둘 중에 뭘 써야 할까?

⇒ 특정한 이벤트를 수행할 때는 Button태그를, 경로를 이동할 때는 A태그를!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML STUDY</title>
</head>
<body>
  공부 중~ <br/>
  공부중!!<br/><br/>

  h1태그<br/>
  <h1>h1 : 오늘의 날씨</h1>
  <h2>h2 : 맑음</h2>
  <h3>h3 : 맑음</h3>
  <h4>h4 : 맑음</h4>
  <h5>h5 : 맑음</h5>
  <h6>h6 : 맑음</h6>

  <p>P태그사용테스트P태그사용테스트P태그사용테스트P태그사용테스트P태그사용테스트P태그사용테스트P태그사용테스트P태그사용테스트P태그사용테스트P태그사용테스트P태그사용테스트P태그사용테스트P태그사용테스트P태그사용테스트</p>안녕하세요

  <a href="http://www.naver.com">네이버</a><br/>네이버



  <p><i>i태그는 이태릭체</i></p>
  <p>sup태그는<sup>윗첨자</sup></p>
  <p><ins>ins태그는 아래에 밑줄</ins></p>
  <p><del>del태그는 가운데에 줄</del></p>
  <br/>
  <ul>ul 메뉴 리스트
    <li>서울</li>
    <li>경기</li>
    <li>부산</li>
  </ul>

  <ol>ol 메뉴 리스트
    <li>서울</li>
    <li>경기</li>
    <li>부산</li>
  </ol>

  <li>서울</li>
  <li>경기</li>
  <li>부산</li>
안녕하세요

<ul>사이트 주소
  <li><a href="http://www.naver.com" target="_blank">네이버</a></li>
</ul>

<p>
  리스트태그 테스트
  <li>리스트 태그</li>
  태구테스트
</p>

<dl>
  <dt>메뉴리스트</dt>
    <dd>서울</dd>
    <dd>경기</dd>
    <dd>부산</dd>

    <dt>음료리스트</dt>
    <dd>사과주스</dd>
    <dd>망고주스</dd>
  <br/>
    <dt>공차란</dt>
    <dd>버블티 전문점을 말한다.</dd>
</dl>

<table border="1">
  <tr>
    <td>1행 1열</td>
    <td>1행 2열</td>
    <td>1행 3열</td>
  </tr>
  <tr>
    <td>2행 1열</td>
    <td>2행 2열</td>
    <td>2행 3열</td>
  </tr>
  <tr>
    <td colspan="2">합치기</td>
    <td>평균</td>
  </tr>
</table>

<form>
  이름 : <input type="text"/><br/>
  연락처 : <input type="text" size="3"><br/>
  파일 : <input type="file"><br/>

  선택 : <select>
    <option>1번</option>
    <option default>2번</option>
  </select>
<p>
  성별 : 
  <input type="radio" name="gender" value="M"/>남자<br/>
  <input type="radio" name="gender" value="W" checked="checked"/>여자<br/>
</p>
</form>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>시멘틱 태그 활용</title>
</head>
<body>
  <header>
    <h1>시멘틱 태그를 활용한 웹 레이아웃 구성</h1>
  </header>
  <nav>
    <select>
      <option>서울</option>
      <option>경기</option>
      <option>부산</option>
    </select>
    <ul>
      <li>1번</li>
      <li>2번</li>
    </ul>
  </nav>
  <section>
    <article>
      <p>Best Item</p>
      <ol>
        <li>의자</li>
        <li>책상</li>
      </ol>
    </article>
  </section>
  <aside>
    <img src="#" alt="사이드바"/>
  </aside>
  <footer>
    <p>주식회사 OOO</p>
  </footer>
</body>
</html>

'Study > 2023' 카테고리의 다른 글

CSS3 총정리 / 레이아웃 구조 잡기 (0)	2023.12.13
2023년 1회 sqld개발자 시험 후기 (8)	2023.03.30

구땡기록

HTML5 총정리 / 시멘틱 코딩하기

'Study > 2023' 카테고리의 다른 글

댓글

티스토리툴바

HTML5 총정리 / 시멘틱 코딩하기

'Study > 2023' 카테고리의 다른 글

관련글

댓글

티스토리툴바