📌 학습한 내용
(참고 사이트 : https://blog.teamtreehouse.com/which-page-layout)
(1) Static Layout (정적인 웹사이트)
: 창 크기(브라우저 크기)에 관계 없이 항상 원래 형태의 틀을 유지하는 웹사이트 (과거 웹사이트의 대부분의 형태)
(2) Liquid Layout (동적인 웹사이트)
: 브라우저 크기에 따라 공간의 크기가 줄어드는 웹사이트(레이아웃의 구조가 바뀌는 것은 아니지만 공간의 크기가 유동적)
(3) Adaptive Layout (적응형 웹사이트)
: 브라우저 크기에 따라 공간의 크기가 줄어드는 웹사이트 + 레이아웃의 구조 자체도 달라짐 (웹 사이트에 접근하는 기기가 다양해짐에 따라 등장)
(4) Responsive Layout (반응형 웹사이트)
: 자연스러운 resize 효과와 특정 지점에서 모바일 버전 레이아웃으로 변화하는 웹사이트 -> 최근에는 적응형과 반응형을 섞어쓰는 것이 일반적)
다른 사용자들이 만든 웹사이드 디자인들을 참고할 수 있다.
국내
DB컷, 지디웹
국외
Awwwards - 각 디자인에 대한 평가 가능, 수상작 위주로 체크
Mediaqueri.cs - PC+ 테블릿 + 모바일 버전 한눈에 확인 가능
bm.straightline.jp - 주로 일본웹사이트 위주
<head>
태그<!DOCTYPE html>
<html>
<head>
<meta charset="utf=8">
<meta name="description" content="Web Tutrial">
<meta name="keywords" content="html, css, tutorual, web">
<meta name="author" content="Jane Jeong">
<title>HTML, CSS Tutorial</title>
<link rel="shortcut icon" type="image/icon" sizes="32x32"
href="favicon.ico">
</head>
<!DOCTYPE html
> : html5 버전 문서를 사용한다는 것을 선언.
html은 <열린태그>주요 텍스트 정보 / 하위 <열린태그></닫힌태그></닫힌태그>로 구성된다.
<head>
는 작성된 문서와 관련된 간단한 요약 정보를 보여준다.
그 내용으로는 <meta>
태그 내에 '속성 = "속성값"'을 담는다. (meta 태그는 닫힌태그가 없다.)
<meta name="description">
속성은 웹사이트의 간단한 한 줄 요약을 만든다.<meta name="keywords">
속성은 웹사이트와 관련된 간단한 단어 정보(태그)를 만든다.<meta name="author">
속성은 해당 사이트의 소유주 혹은 제작자를 담고있다. <title>
: 브라우저의 탭창에 나타나는 제목을 지정해준다.
<link>
: <meta>
태그와 동일하게 닫힌 태그를 가지고 있지 않으며 브라우저 탭창에 나타나는 사이트 아이콘을 설정할 수 있다.
<body>
태그<a>
태그, <img>
태그<a href="https://www.naver.com/" target="_blank">네이버</a>
<img src="" alt="사과 이미지" width="150px" height="80px">
<img src="https://img.icons8.com/emoji/452/red-apple.png" alt="사과 이미지" width="150px" height="180px">
<a>
: 속성값에 작성된 링크로 이동
target
속성에 _blank
속성값을 넣어주게 되면 해당 탭이 아닌 빈탭으로 이동해 링크가 열리게 된다. 반면 _self
혹은 target 속성값을 입력하지 않으면 해당 페이지를 기준으로 열리게 된다.
<img>
: src
의 속성값에 해당하는 이미지를 로컬/웹에서 불러온다.
alt
:
-이미지가 정상적으로 나타나지 않을 경우
-시각장애인들을 위한 screen reador 기능에 사용
width
& height
: 이미지의 크기를 변경
(이때, 비율은 달라지지만 이미지가 잘리지는 않는다.)
<h>
태그<h1>Title</h1>
<h2>Title</h2>
<h3>Title</h3>
<h4>Title</h4>
<h5>Title</h5>
<h6>Title</h6>
<h>
는 항상 순차적으로 사용해야 한다. h1 태그 다음에 바로 h3, h4, h5, h6 태그가 올 수 없다.<h1>기업명 또는 서비스명</h1>
<h1>
<a href="https://www.naver.com/">
<img src="https://img.icons8.com/emoji/452/red-apple.png" alt="애플">
</a>
</h1>
일반적으로 <h>
와 <a>
, <img>
를 함께 쓰는 경우가 많다. (사이트에서 기업의 로고를 누르면 홈페이지의 기본 페이지로 넘어가는 것이 그 예)
(위의 애플 이미지를 누르면 a 태그의 속성값으로 이동한다.)
<p>
태그<p> Nice to meet you</p>
<p><span>동해물</span>과 백두산이 마르고 닳도록</p>
<p><mark>사과</mark>는 사과 나무에서 나는 열매이다.</p>
<p>
: 본문을 입력할 때, 주로 이용. 글자간 공백이 많이 입력되어도 한 칸으로 출력된다.
(<p>
안에서)
<span>
: 단순히 단어를 표기할 때 혹은 글자에 디자인을 적용하고 싶을 때 이용
<mark>
: 특정 단어를 강조하고자 할 때(사전과 같은 역할을 부여하고 싶을 때, 단어에 대한 풀이를 진행하고자 할 때)이용 (<mark>
태그는 디폴드 값으로 노란색이 적용된다.)
<ol>
태그와 <ul>
태그<ol>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ol>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
<ul>
<li><a href="#">영화</a></li>
<li><a href="#">부동산</a></li>
<li><a href="#">음악</a></li>
</ul>
<ol>
: 순서가 있는 리스트 정보를 표현
<ul>
: 순서가 상관없는 리스트 정보를 표현
둘 다 <li>
를 반드시 포함해야 하며, <li>
로 시작해야 한다.
(href="#" 은 임의의 속성값)
<button>
태그<button type="button">닫기</button>
<button type="submit">확인</button>
<button>
태그의 type 의 속성값중
button
: 백엔드와의 데이터 통신을 위한 속성값 submit
: 단순히 팝업창 등을 닫을 때 사용<video src="sample.mp4" controls
autoplay muted
loop
width="300px"
height="300px"
></video>
src
: 파일 불러오기autoplay
: muted
와 결합해서 사용해야 함(chrom의 제약) loop
: 비디오 반복 재생img
와 마찬가지로 width
와 height
변경 가능<iframe>
태그: 유튜브 등의 웹사이트 영상을 가져올 때 사용
<iframe width="560" height="315"
src="https://www.youtube.com/embed/yr0T6w7Fmn4"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
>
</iframe>
<video>
와는 다르게 autoply muted
와 width
, height
를 이용할 수 없다.controls
와 loop
는 사용 가능<head>
태그<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2회차 HYML 강의</title>
</head>
<body>
태그<label>
태그와 <input>
태그<form method="post">
<label for="name">이름</label>
<input type="text" id="name" placeholder="이름을 입력하세요." required
minlength="2" maxlength="8">
<label for="mail">이메일</label>
<input type="email" placeholder="이메일을 입력하세요." id="mail" required>
<label for="pw">비밀번호</label>
<input type="password" placeholder="최소 6글자, 최대 12글자" id="pw" required
minlength="10" maxlength="15">
<label for="num">숫자</label>
<input type="number" id="num" placeholder="숫자만 입력" min="10" max="40" step="5">
<label for="upload">파일 업로드</label>
<input type="file" id="upload" accept="image/png">
<button type="submit">제출</button>
</form>
for
과 id
는 항상 동일하게 지정해준다.
<<input>
(<form>
과 함께 써야함)의 속성>
type="text"
: 텍스트 값 입력placeholder
: 일종의 notice, 입력이 시작되면 사라짐minlength=""
: 최소한의 글자 수maxlength=""
: 최대한의 글자 수required
: 필수적으로 입력받아야 하는 정보에 대해 지정 type="mail"
: @를 넣어서 작성해야 한다.type="password"
: 입력된 글자를 보이지 않게 표기type="number"
: 숫자만 입력 가능type="file"
: 파일 첨부 가능accept=""
: 업로드할 파일의 확장자를 지정 가능<label for="n1">한국</label>
<input type="checkbox" id="n1" name="country" value="한국">
<label for="n2">일본</label>
<input type="checkbox" id="n2" name="country" value="일본">
<label for="n3">중국</label>
<input type="checkbox" id="n3" name="country" value="중국">
checkbox
: 중복 선택이 가능하다.
<label for="n1">한국</label>
<input type="radio" id="n1" name="country" value="한국" checked>
<label for="n2">일본</label>
<input type="radio" id="n2" name="country" value="일본">
<label for="n3">중국</label>
<input type="radio" id="n3" name="country" value="중국">
radio
: 하나만 선택 가능
name
: 서버에 전달시 좌표의 역할, 항목들을 그룹으로 묶어줌
value
: 앞단으로 부터 서버에 전달되는 데이터
<textarea>
태그: 장문을 입력받을 때 사용
<label for="content">문의내용</label>
<textarea id="content" cols="40" rows="8"></textarea>
cols=""
: 너비, 한 줄에 들어가는 글자수를 제한rows=""
: 박스 내에 한 번에 보여지는 줄의 수, 초과할 시 스크롤로 나타남.<select>
태그와 <option>
태그: 콤보상자 형태로 출력할 때 사용
<select name="job">
<option selected disabled>직업을 선택해 주세요.</option>
<option value="학생">학생</option>
<option value="회사원">회사원</option>
<option value="기타">기타</option>
</select>
<slect>
에는 <option>
이 반드시 포함되어야 한다.
selected
: 해당 문구가 처음에 선택된 상태로 나타남disable
: 재선택을 불가하게 함<table>
태그테이블(표)을 만드는 태그.
<table>
<caption>상품 정보</caption>
<thead>
<tr>
<th>상품</th>
<th>색상</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td>맥북 프로 16인치</td>
<td>그레이</td>
<td>3,000원</td>
</tr>
<tr>
<td rowspan="2">아이패드 프로 12인치</td>
<td>레드</td>
<td>1,000원</td>
</tr>
<tr>
<td>블루</td>
<td>1,000원</td>
<tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">총 가격</td>
<td>5,000원</td>
</tr>
</tfoot>
</table>
<caption>
: 도표에 대한 제목rowspan=""
: 행 병합colespan=""
: 열 병합<header>
<h1>
<a href="#">
<img>
</a>
</h1>
<nav>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>
</nav>
</header>
<main role="main">
<section>
<h2>Service</h2>
</section>
<section>
<h2>Portfolio</h2>
</section>
<article>
<h2>Article title</h2>
<p>Nice to meet youNice to meet youNice to meet youNice to meet you</p>
</article>
</main>
<aside></aside>
<footer></footer>
<div></div>
<form></form>
<header>
안에는 웹 사이트 상단에 들어가는 부분을 포함. 상단로고를 구성하는 <h1>
와 <a>
, <img>
등이 이에 속한다. 또한 <nav>
안에는 <ul>
그리고 <la>
, <a>
등이 존재 본문 영역에는 여러 종류의 태그가 사용될 수 있다.
<main>
를 사용할 때, role
을 반드시 지정해줘야 한다. (익스플로러에서 main태그를 지원하지 않기 때문이다.)<section>
에서는 영역을 대표하는 타이틀이 반드시 있어야 한다. 따라서 <h2>
를 반드시 써줘야 한다.<article>
: 실제 정보가 들어가는 공간, section 태그와 동일하게 영역을 대표하는 타이틀이 있어야 하므로 <h2>
가 있어야 한다.<aside>
는 본문 내용과는 관계성이 떨어지는 내용을 기입<footer>
: 웹사이트에서 가장 밑단에 들어가는 정보(사업자 정보, 주소 등)<form>
: (사용자에게 정보를 입력받는 공간)(참조) https://www.w3schools.com/tags/default.asp
<span>Inline</span>
<span>Inline</span>
<span>Inline</span>
<h1>Block</h1>
<h1>Block</h1>
<h1>Block</h1>
Inline
: 글자가 한 줄로 출력되는 것Block
: 줄 바꿈이 일어나면서 y축으로 정렬되는 것📌 학습내용 중 어려웠던 점
📌 해결방법
아무래도 시간에 쫓기다 보니 집중해서 듣지 못한 부분이 있는 것 같다. table 태그와 페이지 구성 태그, 그리고 중요하다고 말씀하신 Inline과 Block의 요소에 대해서는 다시 한 번 인강을 듣고 복습을 해야할 것 같다. table에 대한 대략적인 이해는 했지만, 보다 자세한 학습을 위해 유튜브와 다른 사용자들의 velog를 참조할 예정이다.
📌 학습소감
우선 HTML문법을 생전 처음 접해봤지만 Python과 비교했을 때 코드가 훨씬 간단하고 직관적으로 이루어져 있어 이해하는데 큰 어려움은 없었다. 다만 강의 뒷부분으로 갈수록 수준의 높아지는 반면 시간에 쫓겨 집중력은 떨어졌기에 뒷 부분을 다시 수강해야 한다. 특히 오늘은 수업 내용의 어려움 보다는 velog에 나의 기록을 남기는 부분이 더욱 힘들었다.😅