1)html,css,js 의미
html : 뼈대
css : 뼈대에 속성부여(간격,크기,색깔)
Js : 이벤트부여(클릭,로그인시 특정행동에 특정결과를 부여, 클릭하면 클씨의 색깔이 바뀐다)
2)웹의 html,css,js 어떻게 구성되어있는지 확인할수있는 방법
- 크롬에서 command+option+I 입력
- Element -> html, css 확인가능
- Console -> js 입력가능
- Network 확인가능
3)html 문법
- 유형1 기본문법
<tag>contect</tag>
- 유형2 속성추가
<a href="https://www.inflearn.com">go to inflearn</a>
- 유형3 tag안에 tag
<div>
<h2>welcome to inflearn</h2>
</div>- 유형4 self closing tag
<img src="이미지주소복붙" />
4) html tag의 구성
- html tag안에 head tag와 body tag로 구성
- head tag : 설정, css연결, js연결
- body tag : 보이는 부분을 만든다.
<html>
<head></head>
<body></body>
</html>5) css와 html 연결
주의) head tag안에 입력해라
-
A) css 파일을 따로 만들고
css 파일과 html 파일을 연결하는 방식
<link href="web.css" rel="stylesheet" />href="web.css"
어떤 css파일과 연결할지 입력한다.rel="stylesheet"
link tag의 어떤 역할을 하는지 명시한다.
- B) html 파일안에 css 직접 입력하는 방식
<style>
p {
color: tomato;
}
</style>6) js와 html 연결
주의) head tag안에 작성
-
A) js파일 만들고
js파일과 html파일을 연결하는 방식
<script src="web.js" type="text/javascript"></script>src="web.js"
어떤 js파일과 연결할지 입력한다.type="text/javascript"
javascript임을 명시한다.
-
B) html안에 js 직접 입력하는 방식
<script>
console.log("100");
</script>
dev