윈도우 환경 실습
- Visual Studio Code 사용
Explorer: Compact Folders 해제
- 빈 폴더의 경우에도 부모-자식 폴더를 직관적으로 구분 가능
- Visual Studio Code 설정(Ctrl + ,)에 들어가 검색창에 'folder' 입력
- Explorer: Compact Folders 체크 해제
추천 확장 프로그램
- Material Icon Theme : 폴더, 파일 별로 구분 가능한 아이콘이 생김
- Indent-rainbow : 들여 쓰기 정도에 따라 색깔로 구분 가능
- Live Server : 웹 코드를 수정 시 즉각적으로 확인 가능
단축키
- Alt + Shift + 방향키 : 해당 줄/드래그된 영역 복사
- Ctrl + / : 해당 줄/드래그된 영역 주석 처리/해제
- Ctrl + d : 드래그한 것과 동일한 글자를 동시에 수정 가능
- (웹) Ctrl + Shift + c : 개발자 도구 실행 + 요소 선택 활성화
HTML
HTML 기본 문법
콘텐츠를 가지는 태그
- <div> 콘텐츠 </div>
- div : 열리는 태그(시작 태그), /div : 닫히는 태그(종료 태그)
콘텐츠를 가지지 않는 태그
- <br />
- br : 단일 태그, / : 셀프 클로징
- 셀프 클로징은 HTML 버전에 따라 선택 사항 or 필수 사항
속성과 값
- <div title="제목"> 콘텐츠 </div>
- title : 속성(Attribute), "제목" = 값(Value)
- <a href="https://naver.com">네이버 바로가기</a>
- href : 속성, "https://naver.com" : 값
HTML 기본 문서
부모 요소와 자식 요소
- 부모 요소 : 나를 감싸고 있는 한 단계 위의 요소
- 자식 요소 : 내가 감싸고 있는 한 단계 아래 요소
- 들여 쓰기 정도를 보고 부모-자식 관계를 파악하기에 적절히 작성
HTML 주석
- 개발자가 코드 내에 입력한 메모
- 소스 보기나 개발자 도구로 확인이 가능하기에 중요한 정보 작성하지 말 것
- <!-- 주석 내용 -->
- <!-- : 시작 태그, --> : 종료 태그
- 줄 바꿈으로 여러 줄 작성 가능
- 주석 안에 주석을 넣는 것은 안됨
HEAD
- 사람 눈에 보이지는 않는 문서의 정보가 담기는 영역
<Head>가 가질 수 있는 정보의 종류
- 타이틀(제목)
- 메타 데이터 : 인코딩 정보, 문서 설명, 문서 작성자
- CSS, script
<head>
<title>문서 제목</title>
<meta charset="utf-8">
<meta name="description" content="실습 문서">
<meta name="author" content="캐스퍼">
</head>인코딩
- charset : 문서에서 허용하는 문서의 집합
- utf-8 : 어떤 국가의 언어가 나와도 문서 제공
style, link, script
style
- body 태그 내에 존재하는 글자색을 'blue'로 설정
<head>
<title>문서 제목</title>
<style>
body {
color : blue;
}
</style>
</head>link
- head 태그 내의 style이 너무 길어져서 가독성이 떨어지는 경우 활용
<head>
<title>문서 제목</title>
<link rel="stylesheet" href="style.css" />
</head>/* style.css */
body {
color: blue;
}script
- 콘텐츠 방식과 링크 방식 모두 사용 가능
- 링크 방식의 경우 셀프 클로징이 아닌 종료 태그를 꼭 작성해줘야 함
<!-- 콘텐츠 방식 -->
<script>
const hello = 'world';
console.log(hello);
<script>
<!-- 링크 방식 -->
<script src='script.js"></script>Body
- 사람 눈에 실제로 보이는 콘텐츠 영역
block, inline, inline-block
block(블록 레벨 요소)
- 블록처럼 차곡차곡 쌓이고 화면 너비가 꽉 차는 요소
- 블록 크기, 내/외부 여백을 지정할 수 있고 일반적으로 페이지의 구조적 요소를 나타냄
- 인라인 요소를 포함할 수 있으나, 인라인 요소에 포함될 수 없음
- <div>, <article>, <section>,...
lnline
- 블록 요소 내에 포함되는 요소
- 주로 문장, 단어 같은 작은 부분에 사용
- 좌/우 여백만 허용
- <span>, <a>, <strong>,...
line-block
- 글자처럼 취급되나 block의 성질을 가지는 요소
- block과 마찬가지로 크기와 내/외부 여백 지정 가능
- CSS로 성질을 바꾼 것이기 때문에 의미상 인라인 레벨 요소
레이아웃
- HTML5부터 태그를 의미 있게 사용하기 위해 "Semantic(시멘틱)" 태그를 사용하여 문서 구조를 작성
- 단순 <div>를 남발하지 않고 적절한 태그를 사용하여 웹 문서가 답은 정보와 구조를 의미 있게 전달
- 검색엔진의 검색 순위에 가산점을 얻거나 홈페이지의 로딩 속도를 높임
div
- 가장 흔히 사용되는 레이아웃 태그로 단순히 구역을 나누기 위한 태그
header, footer, main
- header : 블로그 글 제목, 작성일 등의 주요 정보를 담는 태그
- footer : 페이지의 바닥줄에 사용되며 저작권 정보, 연락처 등 부차적인 정보를 담는 태그
- main : 페이지의 가장 큰 부분으로 사이트의 내용 즉, 주요 콘텐츠를 담는 태그, 한 번만 사용 가능
section, article, aside
- section : 콘텐츠의 구역을 나누는 태그
- article : 블로그 포스트, 뉴스 기사와 같은 독립적인 문서를 전달하는 태그
- aside : 문서의 주요 내용에 간접적인 정보를 전달하는 태그
콘텐츠 1 - 제목/문단/서식
제목 태그(h1 ~ h6)
- 문서 구획 제목을 나타내는 태그로 Heading(헤딩) 태그라고 부름
- h1부터 h6까지 사용 가능
- h1 태그는 페이지 내에 한 번만 사용하며, 구획의 순서가 지켜져야 함
<!-- 잘 작성된 순서 -->
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h3>제목3</h3>
<h4>제목4</h4>
<h4>제목4</h4>아래의 코드에서 h1-h2-h3 다음 h4가 나와야 하는데 h5와 h6이 등장하여 순서에 어긋난다.
<!-- 잘못 작성된 순서 -->
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h5>제목5</h5>
<h3>제목3</h3>
<h6>제목6</h6>
<h4>제목4</h4>문단 태그(p)
- 문서에서 하나의 문단(Paragraph)을 나타내는 태그
- 제목 태그와 함께 사용되기도 하고 단독으로 사용되기도 함
- 레이아웃 태그처럼 사용하면 안 됨
서식 태그(b/strong, i/em, u, s/del)
<b>, <strong>
- b : 의미를 가지지 않고 단순히 굵은 글씨로 변경
- strong : 굵은 글씨로 변경 후 강조의 의미 부여
- 시각적인 효과는 같지만 의미가 다름으로 사용에 주의
<b>프로그래머스</b>에 오신걸 환영합니다.
프로그래머스 강의를 듣고 <strong>개발자</strong>가 될 수 있었어요!<i>, <em>
- i : 기울임과 동시에 텍스트가 문단의 내용과 구분돼야 하는 경우 사용, ex) 등장인물, 외국어 구절, 기술 용어 등
- em : 기울임과 내용에 강조를 나타냄
- 시각적인 효과는 같지만 의미가 다름으로 사용에 주의
<i>font-size</i>는 CSS 속성명입니다.
우리 회사의 기본 폰트 사이즈는 <em>16px</em> 이에요!<u>
- 글씨에 밑줄을 넣고 주석을 가지는 단어임을 나타냄
- CSS로 스타일링하여 빨간 밑줄을 넣는 것으로 오타를 나타내는 것처럼 사용 가능
- 단순히 밑줄을 긋는 용도로 사용하면 안 됨
프로그래머스의 영문 표기법은 <u>Pgrogress</u> 입니다.<s>, <del>
- s : 단순히 시각적인 취소선만 추가되고 접근성 기기에 취소에 대한 안내는 하지 않음
- del : 문서에서 제거된 텍스트를 나타낼 수 있음, <ins> 태그와 사용 시 제거된 텍스트 옆에 추가된 텍스트 표현 가능
<p>
안녕하세요.<br>
<del>캐ㅍ</del><ins>캐스퍼</ins>입니다.
</p>링크 이동(a)
- 클릭하면 페이지를 이동할 수 있는 링크 요소를 만듦
- href 속성으로 이동하고자 하는 파일 혹은 URL을 작성
- target 속성으로 링크를 새 창(_blank), 현재창(_self) 등 지정 가능
<a href="https://programmers.co.kr" target="_blank">프로그래머스로 바로가기 (새 창)</a>콘텐츠 2 - 멀티미디어
이미지(img, figure/figcaption)
<img>
- 문서 내의 이미지를 넣을 수 있는 태그
- 가장 기본적인 이미지 넣는 방법
- src 속성으로 이미지의 경로를 넣으면 이미지 출력
- alt 속성으로 이미지 로딩에 문제 발생 시 대체 텍스트 출력
<img src="/logo.png" alt="프로그래머스 로고"><figure>, <figcaption>
- 하나의 독립적인 콘텐츠로 분리하고 그에 대한 설명을 넣을 수 있는 태그
- figcaption 태그로 콘텐츠의 설명 혹은 범례를 추가할 수 있고, 처음이나 제일 아래에 추가해서 사용 가능
- 보통 이미지를 넣는데 인용문, 비디오/오디오 등 문서의 흐름에 참조는 되지만 분리되어도 되는 내용을 담음
- figcaption은 여러 줄 사이에 넣으면 안 됨
<figure>
<img src="/hotdog.png" alt="핫도그">
<figcaption>맛있는 핫도그 이미지</figcaption>
</figure>비디오, 오디오(video, audio)
<video>
- 문서 내에 영상을 첨부할 수 있는 태그
- src 속성으로 비디오를 문서 내에 첨부 가능
- poster 속성으로 비디오가 로드되기 전에 포스터를 보여줄 수 있음
- source 태그를 사용하면 여러 타입의 비디오 제공 가능
- 해당 태그 말고도 다양한 속성이 존재
<video src="video.mp4" poster="/poster.png">
비디오 태그가 실행되지 않을 때 보이는 글자
</video>
<video poster="/poster.png">
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
비디오 태그가 실행되지 않을 때 보이는 글자
</video><audio>
- 문서 내에 소리를 첨부할 수 있는 태그
- src 속성으로 문서 내에 소리 첨부 가능
- controls 속성으로 재생/정지 버튼 등이 있는 컨트롤러 제공 가능
- source 태그를 사용하면 여러 타입의 오디오 제공 가능
<video src="audio.mp4" controls>
비디오 태그가 실행되지 않을 때 보이는 글자
</video>
<video controls>
<source src="audio.mp4" type="video/mp3" />
<source src="audio.webm" type="video/ogg" />
비디오 태그가 실행되지 않을 때 보이는 글자
</video>SVG(Scalable Vector Graphics)
- 그래픽으로 만들어진 이미지
- 일반 이미지(래터스 이미지, RGB)와 다르게 수학 공식을 사용하여 해상도의 영향을 받지 않아 확대/축소가 자유로움
- 주로 크기를 자주 바꾸어야 하는 작은 아이콘에서 많이 사용
- 해상도가 다양하게 변화하는 최근 기기들로 인해 아이콘 외에 로고 등 주요 이미지에도 사용
- img 태그처럼 svg 파일을 불러올 수도 있고 태그를 그대로 사용할 수도 있음
- 코드로 이루어져 있기에 스타일을 변경하거나 javascript를 사용해 간단한 기능 추가 가능
콘텐츠 3 - 리스트
정렬되지 않은 (순서가 없는) 목록(ul, li)
- 정렬되지 않은 목록 태그
- 기본 불릿(bullet) 형식으로 목록을 그림
- li 태그를 사용하여 목록을 구성하며, 다양한 태그 포함 가능
- ul의 태그 자식요소로 li 태그만 가능하며, 하위 리스트를 만들려면 li 태그 내에 ul, ol 태그 사용
<ul>
<li>리스트1</li>
<li>리스트2</li>
<li>
리스트3
<ul>
<li>하위 리스트1</li>
<li>하위 리스트2</li>
</ul>
</li>
</ul>정렬된 (순서가 있는) 목록(ol, li)
- 정렬된 목록 태그
- 기본 숫자(1, 2, 3,...) 형식으로 목록을 그림
- li 태그를 사용하여 목록을 구성하며, 다양한 태그 포함 가능
- ul의 태그 자식요소로 li 태그만 가능하며, 하위 리스트를 만들려면 li 태그 내에 ul, ol 태그 사용
<ol>
<li>리스트1</li>
<li>리스트2</li>
<li>
리스트3
<ul>
<li>하위 리스트1</li>
<li>하위 리스트2</li>
</ul>
</li>
</ol>설명 목록(dl, dt, dd)
- 설명 목록 태그
- dt 태그에 사용한 단어 혹은 내용 설명을 dd 태그에 작성 가능
- 주로 용어사전이나 key-value가 있는 쌍의 목록을 나타낼 때 사용
- dt 태그를 여러 개 작성하고 하나의 dd 태그를 작성하는 것으로 여러 개의 용어 설명 가능
- 위와 반대로 dt 태그 하나에 여러 개의 dd 태그를 가질 수 있음
<dl>
<dt>Chrome</dt>
<dd>구글에서 만든 웹 브라우저</dd>
<dt>프로그래머스</dt>
<dd>개발자를 위한 교육</dd>
</dl>콘텐츠 4 - 표
<table>
- 표를 만드는 태그
- tr 태그로 행 구분 가능
- td 태그로 열 생성 가능
<thead>
- 제목 그룹 태그
- thead 태그 안에 열(cell) 제목의 행을 넣음으로써 그룹 지을 수 있음
<tbody>
- 표 본문 요소 태그
- tbody 태그 안에 여러 열(cell)의 행을 넣음으로써 본문 요소를 그룹 지을 수 있음
<tfoot>
- 표 바닥글 요소 태그
- tfoot 태그 안에 여러 열(cell)의 행을 넣음으로써 표의 바닥글 요소를 넣을 수 있음
- HTML4에서는 tfoot이 tbody보다 먼저 작성, HTML5에서는 thead, tbody, tfoot 순으로 배치돼도 됨
<caption>
- 표 설명 태그
- caption 태그를 사용하여 표가 가진 데이터에 대한 설명을 넣을 수 있음
<table>
<caption>샘플 표</caption>
<thead>
<tr>
<th>열1 제목</th>
<th>열2 제목</th>
</tr>
</thead>
<tbody>
<tr>
<td>행2 열1</td>
<td>행2 열2</td>
</tr>
<tr>
<td>행3 열1</td>
<td>행3 열2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>테이블 푸터</td>
<td>데이블 푸터</td>
</tr>
</tfoot>
</table>
콘텐츠 5 - 아이프레임
<iframe>
- 현재 문서 안에 다른 HTML 페이지를 삽입할 수 있는 태그
- src 속성에 원하는 HTML 문서 또는 URL을 넣을 수 있음
- 외부 페이지를 불러올 수 있기 때문에 불러온 외부 페이지의 영향을 받을 수 있음
- name 속성을 지정하면, a 태그의 target 속성을 사용해 iframe에서 문서 또는 URL이 열리게 할 수 있음
<!-- '예시' 링크를 클릭하면 iframe이 해당 페이지로 이동 -->
<iframe name='sample' src='/sample.html' frameborder="0"></iframe>
<a href="sample.html" target="sample">예시</a>양식 태그 1 - form
<form>
- 정보를 제출하기 위한 태그
- 정보를 입력하고 선택할 수 있는 input, selectbox, textarea 등을 가질 수 있음
- 정보를 제출하기 위한 button을 가짐
- action 속성으로 정보가 제출됐을 때 페이지를 이동시킬 수 있음
- method 속성으로 정보가 제출될 때 처리 방식을 결정할 수 있음
<form> - method 속성
- get : 전송 시 url에 '?' 뒤에 붙어 전송, 전달 내용을 확인할 수 있음
- post : 전송 시 url에 나타나지 않음, 보안이 필요한 경우 사용
<input> - type 속성
- text : 입력한 값을 확인 가능
- password : 입력한 값을 확인할 수 없음, *** 형태로 나타남
<form action="./submit.html" method="get">
<label for="name">이름</label>
<input id="name" type="text" name="name">
<select name="opt">
<option>옵션1</option>
<option>옵션2</option>
<option>옵션3</option>
</select>
<button type="submit">전송</button>
</form>
양식 태그 2 - 설명과 입력(label), 버튼
<label>
- input, textarea, selectbox의 설명을 작성할 수 있는 태그
- for 속성을 사용하여 연결하고자 하는 태그에 id 속성을 지정한 뒤 label을 클릭하면 연결한 태그가 선택
- label 태그 안에 input을 넣으면 자동으로 for -> id 연결과 같은 처리를 해줌
- id 속성은 값이 절대로 중복되면 안 됨
- 속성 예시 : readonly, required, placeholder, disabled
<input>
- 사용자에게 데이터를 입력받을 수 있는 대화형 태그
- type 속성의 기본값은 text이며 값에 따라 받을 수 있는 input 유형이 달라짐
- value 속성을 사용해 기본 내용을 입력해 둘 수 있음
- name 속성을 사용해 input의 이름 지정 가능
- type 예시 : checkbox, radio, file, button, hidden
<label for="userid">아이디</label>
<input id="userid" type="text" name="userid">
<label>
비밀번호
<input name="'password" type="password">
</label>
<button>
- 클릭 가능한 버튼을 태그로 form 태그 내 어디든지 사용 가능
- type을 reset으로 지정하고 버튼이 눌리면, 입력한 양식이 모두 초기화
- type을 submit으로 지정하면 form 양식 제출 가능
- button 태그 내 콘텐츠에 태그의 입력이 가능하나, 블록 레벨 태그는 사용하면 안 됨
- disabled 속성을 가질 수 있음
<button type="reset">양식 초기화</button>
<button type="submit">제출</button><input> - button vs <button>
비밀번호 찾기를 위해 새 페이지로 이동할 수 있도록 하는 버튼을 만들 때, button 태그를 사용하면 type 속성의 기본값이 submit이기 때문에 전송이 되어버린다. type 지정을 잘해주면 상관없지만, input 태그를 사용한 button은 데이터 전송이 아예 이루어지지 않기 때문에 오류를 방지할 수 있다.
<select>
- 옵션 메뉴를 제공하는 태그
- option 태그를 사용해 옵션 정의 가능
- 첫 번째 option은 이름이 됨
- value 속성을 선언하지 않으면 option 태그의 콘텐츠가 기본값이 됨
- 첫 번째 옵션이 버튼명이기 때문에 placeholder 속성을 사용할 수 없음
<select name="selectbox" required>
<option value="">선택하세요.</option>
<option value="옵션1">옵션1</option>
<option value="옵션1">옵션2</option>
<option>옵션3</option>
</select>
<textarea>
- 여러 줄을 입력할 수 있는 대화형 태그
- 콘텐츠를 넣으면 사용자가 입력하지 않아도 표시되는 기본값이 됨
- cols/rows 속성으로 기본 너비와 높이를 지정 가능하며 글자 크기 기준으로 정의
<textarea name="content" cols="20" row="5">내용을 입력하세요.</textarea>
HTML 주의사항
- 태그는 대소문자 모두 동작하지만 특별한 상황이 아니면 소문자 사용할 것
- 닫는 태그 생략하지 않도록 주의
- 한글이 아닌 영어로 작성할 것
- id 속성에 중복된 값 사용하지 않도록 주의
- 계층 구조(들여 쓰기) 잘 지킬 것
- 시작 태그, 닫는 태그가 다른 태그와 꼬이지 않도록 주의, ex) <em><span>안녕</em>하세요.</span>
- 의미가 동일한 태그를 중첩해서 사용하면 안 됨, ex) <b><strong>강조</strong><b>
HTML 공부 추천 사이트
- TCP SCHOOL
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
- MDN
HTML: Hypertext Markup Language | MDN
HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현 (CSS), 또는 기
developer.mozilla.org
- W3School
HTML Tutorial
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
결론
느낀 점
- HTML에는 다양한 태그와 속성들이 존재한다는 것을 알게 됨
- 계속 HTML을 접하면서 태그에 익숙해져야 된다는 것을 느낌
어려웠던 내용
- HTML을 본격적으로 배운 것은 처음이었기에 생각보다 내용이 많은 것이 힘들 것 같은 생각이 듦
참고링크
HTML (문서구조/기본문법/인라인,블록 특성)
[MernStack] Blog 만들기 13. [React]Footer 작업하기
https://wuny-dev.tistory.com/43
'[프로그래머스] 데이터 엔지니어링 데브코스 3기 > TIL(Today I Learn)' 카테고리의 다른 글
| [TIL - 8일 차] 데이터 엔지니어링 : 파이썬으로 웹 데이터를 크롤하고 분석하기 (3) (0) | 2024.04.03 |
|---|---|
| [TIL - 7일 차] 데이터 엔지니어링 : 파이썬으로 웹 데이터를 크롤하고 분석하기 (2) (0) | 2024.04.02 |
| [TIL - 5일 차] 데이터 엔지니어링 : 자료구조/알고리즘 풀기 (5) (0) | 2024.03.29 |
| [TIL - 4일 차] 데이터 엔지니어링 : 자료구조/알고리즘 풀기 (4) (0) | 2024.03.28 |
| [TIL - 3일 차] 데이터 엔지니어링 : 자료구조/알고리즘 풀기 (3) (2) | 2024.03.27 |
