[필기] HTML 기초 (1)

코딩을 위한 필수 사이트들

• 깃허브 
• MDN Semantics
• pixabay : 이미지 사이트
• videvo : 소리 파일 사이트
• flexbox froggy : 플렉스박스 연습하기

---

환경설정

-비주얼스튜디오코드 설치 + 필요한 확장 프로그램 설치하기 링크

 

---

Emmet은 자주 쓰다 보면 익숙해질 것임 (외울 필요는 없음)

 

자주 쓰는 Emmet 몇 개

• 태그명을 치고  탭 또는 드롭다운 선택  : 해당 태그 생성
• . (쩜)만 찍고 탭 : 자주 쓰는 div 태그 자동 생성
• . (쩜)찍고 영숫자를 치면 : 영숫자 클래스명을 가진 가장 빈번하게 사용되는 div 태그가 생성
• > 에 탭 (여러 번 가능) : 자식 노드 생성 (예) ol>ul>ol 
• + 에 탭 : : 형제 노드 생성
• * (별표) 숫자 엔터 : 같은 태그줄이 반복 생성
• 쩜 태그명 클래스명 {텍스트} : 예) 결과 <p class="container">텍스트</p>
• 쩜 태그명 클래스명 {텍스트$} : 텍스트에 1 2 3... 이렇게 넘버링이 됨

-자동완성 Emmet 사용하기 짐코딩 시범 링크

-Emmet 공식 사이트에서 배우기 링크

---

텍스트 태그들

• <h1>~<h6>  :제목 태그. 수가 작을 수록 큰 제목
• <p> : 텍스트 문단 나누기 (세로 방향 문단임, 왜냐하면 브라우저는 자동으로 맨 우측에서 행갈이를 하기 때문)
• <br> : 텍스트 행갈이
• <b>, <strong> : 선택 부분 찐하게. 가급적 시멘틱 태그인 strong 태그를 쓸 것
• <i>, <em> : 이텔릭체로 바꿈. 가급적 시멘틱 태그인 em 태그를 쓸 것

---

목록 태그들 

출처: 짐코딩 유튜브

정의하기와 관련한 dt, dd 사용법 보기 링크

 dl>dt+dd*3 : '제목+설명' 으로 이뤄진 텍스트 구조를 3개 만든다는 뜻임.

---

테이블 테그는 크로스플랫폼의 시대에 걸맞지 않으니, 일단 패스 (강의 위치는 여기)

---

시멘틱 태그는, SEO 차원에서 중요하므로, 어떤 게 시멘틱 태그인지 아닌지 확인할 필요가 있음.

 

---

인라인 태그(inline tag)와 블록 태그(block tag)

 

거칠게 말하자면, 블록 태그에 의해 생성된 블록 요소는 세로로 정렬됨. 해당 줄을 모두 차지하기 때문.

짐코딩 설명 링크

 

아래는 블록 태그들 중 일부.

- `<div>`: 구획을 나누는 컨테이너로서, 스타일링과 레이아웃을 위해 자주 사용됩니다.
- `<p>`: 문단을 나타내는 태그로, 텍스트를 단락 단위로 구분합니다.
- `<h1>`, `<h2>`, ..., `<h6>`: 제목을 나타내는 태그로, 숫자가 클수록 글자 크기가 작아집니다.
- `<ul>`: 비순서형 목록(Unordered List)을 나타내는 태그로, 항목들이 순서없이 표시됩니다.
- `<ol>`: 순서형 목록(Ordered List)을 나타내는 태그로, 항목들이 번호와 함께 순서대로 표시됩니다.
- `<li>`: 목록 항목을 나타내는 태그로, `<ul>`이나 `<ol>` 안에 사용되어야 합니다.
- `<table>`: 테이블을 나타내는 태그로, 데이터를 행과 열로 구성하여 표현합니다.
- `<tr>`: 테이블의 행을 나타내는 태그로, `<table>` 안에서 사용되어야 합니다.
- `<td>`: 테이블의 셀을 나타내는 태그로, `<tr>` 안에서 사용되어야 합니다.
- `<th>`: 테이블의 헤더 셀을 나타내는 태그로, `<tr>` 안에서 사용되어야 합니다.
- `<form>`: 폼을 나타내는 태그로, 사용자의 입력을 받기 위해 사용됩니다.
- `<header>`: 문서 머리말을 나타내는 태그로, 페이지 상단에 위치하는 컨텐츠를 담습니다.
- `<footer>`: 문서 바닥글을 나타내는 태그로, 페이지 하단에 위치하는 컨텐츠를 담습니다.
- `<section>`: 문서의 구획을 나누는 태그로, 주제별로 묶어서 표현합니다.
- `<article>`: 독립적인 컨텐츠를 담는 데 사용되는 태그로, 뉴스 기사나 블로그 글 등에 적합합니다.

---

VSC 작성 테크닉

간단히 말해서, Ctrl, Shift, Alt 키를 잘 사용하면 됨.

예) Ctrl Alt 화살표(위 또는 아래)를 같이 쓰면 커서가 아래로 위로 길어짐

---

이미지  태그

 

-문법: <img srd="이미지주소" alt="설명이나 이름"/> 웹 접근성 차원에서 alt 값 넣을 것

-절대경로 : http://www.na.... 이런 식, 또는 내PC의 경우 C:\user... 이런 식

-상대경로 

• ./apple.png 또는 그냥 apple.png : html 문서와 동일한 폴더 위치에 있을 때는 그냥 이미지 파일 이름을 쓰거나 쩜/ 다음에 파일명을 쓰면 된다.
• ../apple.png : 하위 폴더에 있을 때는 쩜쩜 슬러시 다음에 파일명
• 하위폴더명/apple.png : 하위에 있을 때는 하위폴더/파일명

---

오디오 태그 및 비디오 태그 속성들

 

출처: 짐코딩

최소한 controls는 생성해야...

---

a 태그

 

a 태그는 가장 중요한 태그이다.

다른 문서로 이동할 수 있을 뿐 아니라, 해당 문서 내에서 특정 위치로 이동할 수도 있다.

문법은 <a href="주소 또는 위치" target=" ">링크 이름</a>

같은 페이지 내에 특정 위치로 이동하기 (짐코딩 설명 여기)

 

<a href="이동할 아이템 이름">이동</a>