[Section 01] 준비하기
< 01. 환경 설정 하기 >
비쥬얼 스튜디오 코드설치익스텐션설치Material Icon Theme - Philipp Kief
: VSCode 익스플로러(Explorer) 트리의 아이콘을 아름답게 변경해주는 익스텐션.Night Owl - sarah.drasner
: VSCode 화면 테마 익스텐션Auto Close Tag - Jun Han
: HTML 태그의 종료 태그를 자동으로 추가해주는 익스텐션Auto Rename Tag - Jun Han
: 태그의 이름을 수정하면 종료 태그도 함께 수정하게 해주는 익스텐션Code Runner - Jun Han
: 자바스크립트 코드를 NodeJS로 실행하게 해주는 익스텐션ES7+ React/Redux/React-Native snippets - dsznajderHTML CSS Support - ecmel
: HTML 작성 시 CSS 파일에 작성된 id나 class의 연결을 지원해주는 익스텐션HTML to CSS autocompletion
: HTML CSS 문법 자동 완성 익스텐션Live Server - Ritwick Dey
: HTML 실시간 스트리밍뷰 익스텐션Prettier
: 코드 자동 포맷 익스텐션 ( 추가 설정 필요 함! 근데 기억이 안남... )Tailwind CSS IntelliSense
[Section 02] HTML
< 02. 기본 구성 요소 살펴보기 >
1. 기본 구성 요소
DOCTYPE html,html,head,meta,title,body- 브라우저는 기본적으로
ndex.html형식으로 찾게끔 설정되어 있으므로 관용적으로 사용됨.
서버의 루트 폴더에index.html파일만 메인페이지로 읽힌다. ! + 엔터치면 기본 구성 요소 자동 완성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
meta는 속성 및 기능을 추가하는 역할,title은 탭의 제목을 나타냄.meta와title의 순서는 달라져도 상관 없음
utf-8은 국제 표준 언어- 단축키
shift + alt + ↓: 복사ctrl + d: 멀티 커서
- title의 이름은 모두 달라야 함. 검색 시 뜨는 제목이기 때문에 중복 X
< 03. HTML 기본 태그 - 1 >
1. 텍스트 태그
1.1. hN 태그
- 웹 페이지에서 중요한 텍스트 표시
- h1은 1개만! 검색엔진 최적화를 위해 (즉, 상위 노출을 위해)
- h2 ~ h6는 최소화하도록 노력해야 함
- 숫자 건너뛰면 안됨, 한 페이지에 순서대로 존재해야 함.
- 순서가 달라지는 것은 상관 없음
<h3>제목3</h3>
<h2>제목2</h2>
<h1>제목1</h1>
<h4>제목4</h4>- h1에 이미지가 들어갈 경우, 이미지에는 alt 속성값이 필수적으로 들어가므로 검색엔진이 그 alt 속성값을 수집함
1.2. p태그
- 문단을 작성할 때 사용
p태그 안에는hN태그 사용 안됨. 뱉어냄
<p>이것은 단락입니다. HTML에서 텍스트를 구조화하는 데 사용됩니다.</p>1.3. br 태그
- 줄 바꿈
- "/"로 닫아줘야 리액트, 뷰 등 다른 프레임워크에서 문제가 안 생김
p태그 두 번 사용으로 줄 바꿈을 해서는 안 됨
<p>첫 번째 줄입니다.<br>두 번째 줄입니다.</p>1.4. blockquote 태그
- 뒤에
p태그가 꼭 와야 함 - 인용된 글 나타낼 때 사용, 문단 단위
cite태그 : 출처 작성하기
<blockquote>
<p>"가장 아름다운 것들은 우리의 상상 속에 존재합니다."</p>
<cite>— A. Einstein</cite>
</blockquote>q태그 : 중간 일부 내용에 대한 인용에 대해 사용할 때, 단어 단위
<p>그녀는 <q>모든 꿈은 이루어질 수 있다</q>고 말했다.</p>1.5. ins 태그
- 새로 추가된 텍스트
- 글씨 아래 줄
<p>이 문장은 <ins>추가된 내용</ins>이 포함되어 있습니다.</p>
1.6. del 태그
- 삭제된 텍스트
- 글씨 중간 줄
<p>이 문장에서 <del>삭제된 내용</del>이 있습니다.</p>1.7. sub 태그
- 아랫첨자
- 논시멘틱
<p>공기의 원소 기호는 H<sub>2</sub>O</p>
1.8. sup 태그
- 윗첨자
- 논시멘틱
<p>4<sup>2</sup>은 16입니다.</p>
2. 텍스트 강조 태그
2.1. strong 태그
- 문장 단위 강조, 굵은 글씨
- 시멘틱, b 태그가 논시멘틱
<p>이 문장은 <strong>중요한</strong> 내용을 포함하고 있습니다.</p>2.2. em 태그
- 단어 단위 강조, 기울여 쓰기
- 시멘틱, i 태그가 논시멘틱
<p>이 문장은 <em>강조된</em> 내용을 포함하고 있습니다.</p>3. 공간 분할 태그
3.1. div 태그
- 블록 요소 분할
- 시각적인 레이아웃 구분
<div class="movie">
<p>영화 소개</p>
<p>영화를 소개하는 페이지입니다.</p>
</div>
<div class="tv">
<p>TV 프로그램 소개</p>
<p>TV 프로그램을 소개하는 페이지입니다.</p>
</div>3.2. span 태그
- 인라인 요소 분할
- 시각적인 레이아웃 구분
<p>이 문장에서 <span>특정 단어</span>에 그룹을 주었습니다.</p>< 하루 정리 >
오래 앉아있어서 힘들다는 느낌보다는 새로운 프로그램과 내용을 배우면서 즐거움이 더 큰 첫 날이었다.
( 재밌게 공부한 날~~ )
강사님도 말씀하셨듯 아직 첫 날이라 많은 것을 배우진 않아서 내가 개발에 소질있구나하고 착각을 하면 안된다...ㅋㅋ
( 자만 금지, 착각 금지... )
기초 중에 기초를 배운 날이기 때문에 오늘 배운 것은 절대 잊지 않게 저녁 먹고 한 번 더 복습해야겠다.
( 예습 보단 복습!! 복습!! )
첫 시작!