유튜버 "테크보이 워니" 님의
"웹사이트 코딩할때 필요한 HTML 이 영상 하나로 끝내세요" 영상을 보고 정리한 내용입니다.
알짜배기 정보 감사합니다. ( youtu.be/50JOpxN0554 )
저의 블로그에 같은 카테고리에 이 영상에 대한 간단한 후기글을 써두었습니다.
궁금하신 분은 읽어봐도 좋을 것 같습니다.
( https://thoughtprovo-king.tistory.com/4 )
~목차~
1. html
2. head
3. body
3-1. 텍스트 관련 태그
3-2. table 태그
3-3. media 관련 태그
3-4. list 관련 태그
3-5. div 와 span의 차이점
3-6. input 관련 태그
3-7. 로그인 form 만들기
1. html: 이 문서는 웹사이트를 나타내는 문서이다. 라고 명시하는 역할을 한다.
* html은 head섹션과 body섹션으로 나눠진다.
* 주석쓰는 법: <!-- something -->을 사용한다.
2. head
<!doctype html>
<html>
<head>
<title> Hong's HTML for web development</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<meta name="description" content="Hong's docs"/>
</head>
- title: 이 문서가 어떤 문서인지 명시해준다.
- link: 다른 곳에 저장된 파일들을 이 html문서에 불러온다.
-- href [에이치 ref]: 이 파일의 위치, rel, type은 어떤 파일인지 알려준다.
-- meta: 이 html이 어떤 정보를 담고있는지 자세히 알려주는 태그, 이 웹사이트가 sns 등에 공유될 때 웹사이트의 간략한 소개를 보여주는 역할을 한다.
-- style: css코드를 쓸 수 있도록 해주는 태그, 위의 href에서 css파일을 불러오는 것으로 대체할 수 있다. (코드의 간결성, 가독성이 좋아진다.)
3. body : 문서의 실제 내용을 작성한다
- 각 태그마다 class(속성)를 지정하고(ex. class="item"),
이 class에 따라 css를 이용하여 색상, 폰트 사이즈 등을 스타일링할 수 있다.
3-1. 텍스트관련 태그 ( 위 코드: HTML, 아래 코드: CSS )
<p class="item"> Hello world</p>
<div class="item2"> Hi </div>
<a href="google.com">google</a>.item {
color: blue;
}
.item2 {
color: brown;
}
-- h1, h2, ..., h6 : head 구분, 글씨체가 갈수록 작아진다.
-- b: 볼드
-- i : 이태릭
-- p: 글의 한 문단
-- U : 밑줄
-- br : 줄 바꿈
-- a : href뒤에 웹 주소의 링크를 띄울 수 있다. target="_blank"는 새 창열기
3-2. table 태그
<table border="1">
<thead>
<tr>
<th>age</th>
<th>name</th>
</thead>
<tbody>
<tr>
<td>400</td>
<td>Turtle</td>
</tr>
</tbody>
</table>
- border : 테두리를 지정, 숫자가 클수록 굵어진다.
- th : 각 column을 지정한다.
3-3. media 관련 태그
<video src="https://w3schools.com/html/mov_bbb.mp4" controls></video>
-- img : src="원하는 이미지의 주소" 를 입력한다.
-- video: src="원하는 이미지의 주소" 를 입력한다. 재생하려면 controls 요소를 함께 사용해야 한다. 자동 재생하려면 controls대신 autoplay를 입력한다.
-- width=100% 속성을 추가하면 자동으로 웹화면에 맞춘 크기로 표현된다.
3-4. list 관련 태그
<ol>
<li>hong</li>
<li>jin</li>
</ol>
<ul>
<li>hong</li>
<li>jin</li>
</ul>
- ol(ordered list)
- ul(unordered list)
3-5. div 와 span의 차이점 (위 코드: HTML, 아래 코드: CSS )
-밑줄, 글자배경색 등을 적용할 때
<div class="top">상단</div>
<span class="mid">중단</span>.top {
background: rgb(42, 129, 63);
}
.mid{
background:blueviolet;
}
- div: 글자가 있는 한 줄 전체를 차지(block element)
- span: 글자 내용물 만큼만 차지(inline element)
3-6. input 관련 태그: user한테 정보를 입력받을 때
1. 텍스트 <input type="text" /><br>
2. 체크박스 <input type="checkbox" /><br>
3. 라디오 <input type="radio"/><br>
4. 색깔 <input type="color"/><br>
5. 여러문장<textarea></textarea><br>
6. 드랍다운 <select name="이름 선택">
<option value="First">Seoul</option>
<option value="Second">Busan</option>
</select>
- input을 사용할 때는 원하는 형식에 맞게 type선정을 제대로 하는 것이 중요하다.
- 각 라인의 끝에 줄바꿈을 위해 <br>을 사용하였다.
- color박스는 색을 고를 수 있도록 되어있다. (지금 검정색을 선택해놓은 상태)
3-7. 로그인 form 만들기
<div class="form">
<input type="email" placeholder="이메일 입력"/>
<input type="password" placeholder="비밀번호 입력"/>
<button type="submit"> 로그인</button>
</div>.form{
width:450px;
height:40px;
border:2px solid gray;
display: flex;
align-items: center;
}
- input type에 email을 입력하면 @를 포함하지 않은 형식은 오류라고 경고해준다.
- 배운대로 로그인 형식을 만들고, 위에서 배운 내용을 응용해서 박스 테두리를 쳐주기 위해 css를 사용.
- display: flex를 사용하여 일정하게 가로정렬, align-items: center로 위아래 일정하게 마진을 두고 정렬해주었다.
소통하고 싶은 내용이 있으면 언제든지 댓글을 달아주세요.
'Web Development' 카테고리의 다른 글
| [웹개발] 어떻게 공부해나갈까?🧑💻 by. 코딩의 ㅋ는 알지만 코 까지는 모르는 사람 (0) | 2021.03.26 |
|---|---|
| [바닐라JS,HTML,CSS] 그림판 웹 사이트 만들기 후기, 윈도우 서버 host (with 노마드코더) (2) | 2021.01.26 |
| [Hosting] 깃헙으로 호스팅하기, Apache로 호스팅하기(윈도우) (0) | 2021.01.26 |
| [HTML] 부모와 자식 태그가 필요한 이유, 예시 (0) | 2021.01.22 |
| [HTML]유튜브보고 HTML/CSS 사용해서 웹사이트 만들어 본 후기 (0) | 2021.01.19 |
