HTML?
HyperText Mashup Language
- 웹페이지(HTML+CSS+JS)의 뼈대(Block)
- 가독성을 고려하여 작성할 것
HTML Element
크게 Head와 Body로 구분된다.
들여쓰기를 이용해서 Element의 종속관계를 구분함<!DOCTYPE html> <html> <head> <title> </title> </head> <body> </body> </html>
Tag
ordered list, unordered list
<ol> <li>1.ㄱ</li> <li>2.ㄴ</li> </ol> <ul> <li>*ㄱ</li> <li>*ㄴ</li> </ul>
anchor : 외부 사이트로 연결, 같은 페이지 내에서도 가능
<a href='사이트주소' target='_blank'></a> <a href='#내부class'></a>
audio, video, embed, img
<audio src="/images/OOO.mp4" controls></audio> <video src="사이트링크" controls width="100" height="50"></video> <embed src="~~~.gif"/> <img src="OOO.jpg"/>
form, input, label : 작성된 데이터를 Submit하고 서버로 전달할 때 사용 (Survey를 만든다고 가정)
<form action="http://server1"> <lable for="fname">이름:</label> <input type="text" name="fname" id="fname"><br> 나이: <input type="number" name="age" max="100"><br> <input type="checkbox" name="vehicle" value="car"> 나는 차가 있다<br> <input type="range" name="satisfy" min="0" max="5" step=0.5><br> <input type="radio" name="options" value="bus"><br> <input type="radio" name="options" value="SUV"><br> <input type="submit" value="submit"> <input type="password" name="password" required> </form>
- radio의 경우, 같은 name에 속해있을 경우 하나만 선택가능
- 중복 선택이 필요할 경우 checkbox 사용
- 이외에도 select(Dropdown 기능, option으로 항목 생성), datalist, textarea 등등
Layout Elements
Semantic Elements
<header> <nav> <main> <section> <article> <aside> <figure> <figcaption> <footer> <details> <summary>
Non-Semantic Elements
<div>,<span>
신문의 틀을 구상한다는 느낌으로 구조화
-> 전체적으로 어떤 내용을 어떻게 담을 것인지에 대해 고민해보고 설계하기
느낀 점
배운 점을 블로그에 문서화하니 보다 더 구조적으로 이해가 되는 느낌을 받았다.
다음은 CSS 강의를 듣고 TIL을 작성할 예정 !
