Udemy - The Web Developer Boot
Udemy의 The Web Developer Boot 라는 프로그램에서 예전에 HTML 기초를 공부한 것을 올려본다.
1.intro to HTML
MDN 모질라 사이트에서 개발 관련 많은 정보를 얻을 수 있다. 링크는 아래에 있다.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML
2. 유용한 팁
보통 개발환경 이를테면 아톰 같은 곳에서는 ㅇㅇㅇ.html 파일을 생성한 뒤에 가장 첫줄에 html 이라쓰고 텝을 치면
이렇게 기본 구조가 한번에 자동으로 생성된다. 나처럼 게으른 사람한테 딱이다.
**Atom은 무료 개발 프로그램 중 하나이다 구글 검색을 통해 설치가 가능하다.
3. 팁 2 - html 주석처리
<!-- 주석할내용 --> 혹은 주석할 줄을 마우스 포인터로 클릭한 뒤
ctrl + / 를 누르면 주석처리 된다.
4. <head> 에 들어 있는 <title>
타이틀은 본문에 들어가지는 않지만 웹페이지 상단 탭에 뜨게 되고, 결정적으로 구글 등의 검색엔진에서 검색 시에 검색되는 부분이 바로 타이틀 부분이다.
5. 팁5 - MDN HTML element reference
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
약 100여개의 모든 HTML element 들을 한 눈에 볼 수 있는 페이지다.
구글에 검색하면 된다.
6. 리스트
<ol>
<li>야호 </li>
</ol>
<ul>
<li>리스트야</li>
</ul>
7. 같지만 다른 것들 <b> vs<strong> / <i> vs<em>
디자인 적인 의미만 가지고 있는가 다른 기능도 포괄적으로 가지고 있는가의 차이
<b> vs<strong>
<b>나 <strong> 태그나 둘다 적용해보면 글자를 굵게 한다는 것 외에 차이점이 없어보인다.
하지만 b는 단순히 bold 그러니까 그냥 글자를 굵게한다는 '디자인'적인 의미 외에는 아무것도 포함하지 않으나 <strong>은 다른 의미 도 가지고 있다.
그러니 스타일이나 디자인은 훗날 css에서 처리할 예정이니 우리는 <strong>을 애용하도록 하자.
<i> vs<em>
<i> 와 <em> 둘다 글자를 기울이는 용도로 사용된다.
하지만 이것 역시 i태그는 단순히 기울임을 뜻하는 스타일적인 의미지만, em은 empasis 즉 강조의 약자로써 다른 의미도 가지고 있다. 그런 의미에서 우리는 <em>을 애용하자
8. <div> 나눠주기
<div>를 사용하면 블럭 속성이 있기 때문에 자동으로 줄이 바꿔진다.
아무튼 보이지 않지만 나눠 놓고 있다.
나중에 div 그룹 별로 css로 꾸며 줄 수 있다
9. <spam> 나눠주지만 줄을 바꾸진 않음
문장 안에서 특정 부분을 나눠놓고 싶다면(줄바꿈 없이) 스팸을 사용한다.
10.attributes
태그 안에 붙어 있는 밸류값을 의미
<img src="corgi.jpg"> 이미지 테그의 경우 따로 닫아줄 필요가 없다.
<a href="http://www.google.com"> 링크할 텍스트 </a>
11. table - 표 만들기
<table>로 표를 열고, <tr>로 table row 즉 열을 열고, <td> 즉, 테이블 데이터를 입력하고,
<th>그러니까 table hade 즉 해당 테이블 상단을 입력한다.
하지만 이걸 <thead>와 <tbody>로 나눠놓으면 당장 눈앞에 변화는 없지만 나중에 CSS로 편집할 때 변하다.
<table>
<thead>
<tr>
<th> name</th>
<th>age</th>
</thead>
<tbody>
<tr>
<td>철수</td>
<td>20살</td>
</tr>
<tbody>
</table>
12. form 테그에 관하여
<form></form>
폼테그는 우리가 어디에서나 볼 수 있는 빈 창이다.
클릭하면 무언가를 입력할 수 있는 창. 이를테면 네이버의 검색창이나, 아이디 패스워드 입력창 같은 빈 네모칸이 바로 form 이다.
하지만 이 form은 input 을 감싸고 있는 테그다.
box 타입이라 다른 문장들을 밀어내는 성질을 지닌다.
form 속에 있는 input 데이터를 특정한 폼으로 보내거나 저장시킨다
13.<input>
여러모양의 입력창을 만들 수 있다.
text은 평범한 네모 박스이지만 이것을 날짜 타입, 칼라타입, 체크박스 타입등으로 바꿀 수 있다.
placeholder 라는 값을 사용하여 빈칸에 디폴트로 들어 갈 수 있는 내용을 써 넣을 수 있다.
14. <label></label>테그
input을 하나의 라벨로 묶어 줄 수 있다. 두가지 방법이 존재하는데 <label> 안에 인풋을 쑤셔넣는 방법과
<label for="name">으로 해서 인풋의 id과 통일 시켜주는 방법이다. 결과 값은 같으나 훗날 id하나로 label과 input을 동시에 제어하려면 후자의 방법이 낫다.
아래 예시는 위가 for을 사용, 아래가 그냥 넣는 방법이다.
15. 반드시 입력하시오 input에 required 추가
input 테그 안에 required를 추가하면 반드시 입력하라는 경고창을 띄울 수 있다
훗날css 등을 사용하여 특정 형식의 내용을 입력하라 (이메일, 패스워드는 대문자,특수문자 1개 이상 입력하라 등)을 넣을 수 있다.
현재는 required 만 넣으면 자동으로 이부분이 true 인가를 검사하여 경고창을 띄워 준다. 바로 이렇게.
작성하라고!!
참고로 이건 크롬에서 작동되며 다른 브라우저는 확인이 필요하다.
아, 이메일 경고창도 가능하다. 타입을 email로 고치자
이메일 주소를 넣어달라고!!
