html 이란?
HTML 은 Hyper Text Markup Language 약어로 HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어입니다. 다시 말해, 구조를 설계할 때 사용되는 언어로 hyper link 시스템을 가지고 있으며, 흔히 말하는 웹 페이지를 위한 마크업 언어라고 할 수 있습니다.
이 html 문서는 단순히 텍스트 파일에 불과하고 웹 브라우저가 해석을 해서 구조를 통해 화면에 렌더링 해주게 되고 사용자는 View 라고 하는 스크린을 통해 접하게 되는 것입니다. 여기서 웹브라우저는 dom tree라는것을 해석해 우리에게 화면을 보여주는데 이때 html 태그를 해석하게 됩니다.
돔 트리: html 태그들이 트리형태로 계층화 되어 있고 이것을 해석해 브라우저에서 화면을 렌더링 함
html 태그
웹 문서에서 어떤 표시를 해주는것이라고 생각하면 됩니다.
예를들어 입력창, 버튼 글귀, 링크 등을 표시해주는 것이 태그 입니다.
html은 기본적으로 <html></html>로 감싸져 있고 그 안에 모든 태그가 들어가게 됩니다.
그리고 태그는 두가지 종류가 있는데 <> 여는 태그, </> 닫는 태그가 있습니다.
태그 종류에 따라서 닫는태그만 있거나 둘다 있는 태그가 존재합니다.
종류
1. <p>
p태그는 본문의 글귀를 표시하는데 사용됩니다.
<html>
<p>제목</p>
</html>2. <button>
button 태그는 버튼입니다
<html>
<p>제목</p>
<button>버튼</button>
</html>3. <input>
<html>
<p>제목</p>
<input />
<button>버튼</button>
</html>
자바스크립트와 html을 사용한 버튼 색 바꾸기 및 이름 바꾸기
<html>
<h1>메인페이지</h1>
<div style="display: flex">
<p>이름:</p>
<p id="p"></p>
</div>
<div style="display: flex">
<p>나이: 25</p>
</div>
<div style="display: flex;">
<p>주소: 대한민국</p>
</div>
<input id = 'input'/>
<button id="button" >버튼</button>
</html>
<script>
const button = document.getElementById("button");
const input = document.getElementById("input");
const p = document.getElementById("p");
let isClick = false
button.onclick = ()=> {
if(isClick) {
p.innerText = input.value
button.style['color'] = 'red'
isClick = false;
}
else {
p.innerText = input.value
button.style['color'] = 'black'
isClick = true;
}
}
</script>'Javascript' 카테고리의 다른 글
| 11장 호이스팅, 클로저 (0) | 2020.12.07 |
|---|---|
| 10장 React 기초 (0) | 2020.12.07 |
| 8장 객체 (0) | 2020.12.07 |
| 7장 함수 (0) | 2020.12.07 |
| 6장 반복문 (0) | 2020.12.06 |
