ㅁ HTML
H:Hiper
T:text
M:markup ex) < >을 뜻한다. < element attribute="">.
L:language
1) <html>로 시작하여 </html>로 끝난다. 대부분 마크업은 <>로 시작하여</>로 끝난다.예외적으로 <input / >은 끝나는 태그가 없다.
- element가 갖고 있는 속성을 아는 것이 중요하다.
ㅁ Explore
브라우저는 우리가 쓴 코드를 해석해서 화면에 보여주는 도구 ex)chrome,safari...etc
브라우저에는 크게 1)네트워크, 2)랜더링 화면이 있으며
1)네트워크는 주로 랜더링을 가져오는 역할을 하고,
2)랜더링 화면은 HTML. CSS, JavaScript로 이루어진 영역을 해석해서 보여주는 역할을 한다.
ㅁ Tool
파일명 확장자를 .html로 저장하면 메모장을 사용해서 구현할 수 있지만 툴을 사용하여 메모장을 고급스럽게 사용한다. ex)vscode,Atom
ㅁ <html>
<html> <!-- html로 시작한다고 알린다-->
<head> 사람머리와 비슷하며 데이터를 저장하거나 눈에 잘 안보이는 외적인 부분을 표시한다.
<title>제목</title>
</head>
<body>사람몸과 비슷하며 사람 눈에 가장 잘 보이는 곳을 표시한다.
</body>
</html>
ㅁ Element
- <head> html에 필수적으로 들어가는 요소이면서 내용을 저장하며 title이라는 요소를 사용하여 탭의 제목을 나타낸다.
- <body>html에 필수적으로 들어가는 요소이면서 눈에 가장 많이 보이는 요소를 나타낸다.
- <h1~h6> : 숫자가 커질 수록 폰트 크기가 작아진다.
<h1><h2>와 <h1> 의 결과값이 같은 이유는 엘리먼트 하나당 한줄을 다 차지하기 때문이다 = block속성
<h2>
<html>
<head>
</head>
<body>
<h1>제목</h1>
<h2>제목</h2>
<h3>제목</h3>
<h4>제목</h4>
<h5>제목</h5>
<h6>제목</h6>
</body>
</html
결과값
- ul >li 는 block속성이며 리스트 표현할 때 쓴다. ul 은 li를 묶어주는 기능만 있음. ul 안에 다른 태그를 써도 되지만 거의 li를 묶는데에만 사용한다.
<ul>
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
</ul>
결과값
- 태그 a의 목적은 링크를 걸기위해서다. 또한 inline속성이다. <a ㅁ="">에서 a는 엘리먼트 또는 태그라고 하며, ㅁ는 property 또는 속성값이라 한다. < a ㅁ=" 속성값 or 속성value">이다 ㅁ=""의 형태를 querystring이라고 한다.
링크
- 바디 영역에서 모든 컨텐츠는 옆에 붙으려는 성질이 있지만 div 와 span의 어떤 기능을 주지 않지만 block 속성과 inline속성을 이용해 위치를 변경할 수 있다. div=block속성, span=inline속성 속성명 display=속성값 block or inline
<div>영역1</div>
<div>영역2</div>
<span>영역3</span>
<div>영역5</div> <!--영역을 오버하기에 밑으로 떨어진다.-->
<span>영역4</span>
<span>영역6</span>
결과
- i는 inline이며 글자를 기울인다
<div>기본</div>
<i>되나</i>
<i>안되나</i>
결과
- Button은 inline속성이며 버튼을 생성한다.
<button>버튼1</button>
<button>버튼2</button>
결과
- Input은 inline속성이며 닫는 태그가 존재하지 않는다. 결과값은 달라지지 않지만 뒤에 /넣어 닫는 태그가 없다는걸 표시한다. 닫는 태그가 없는 태그들은 속성값이 많다.
<input type="text"/>
<input type="password">
<div>영역10</div>
<input type="radio" checked="checked"/>남자<!-- checked는 기본적으로 체크되어있는-->
<input type="radio"/>여자
'TIL' 카테고리의 다른 글
| Day51(HTML,CSS) (0) | 2023.03.27 |
|---|---|
| Day50 CSS (0) | 2023.03.26 |
| Day48(프로젝트 발표) (0) | 2023.03.24 |
| Day47(프로젝트 마지막 날) (1) | 2023.03.24 |
| Day46 (0) | 2023.03.22 |
