bdfgdfg
HTML,CSS,JS 극 기초 본문
HTML
- 웹페이지 와 그 내용을 구조화 하기 위한 마크업 랭귀지.
기본 태그
HTML은 머리(head)와 몸(body)로 이루어져있다고 생각하면 편하다.
head는 HTML의 전반적인 특성을 설정하는 곳이다.
body는 화면에 그려질(render) 내용들을 넣는 곳이다.
| 태그 | 의미 | |
| <!DOCTYPE html> | 웹 문서의 유형을 html로 지정 | |
| <html> | 모든 html 태그들의 최상위 태그 | |
| <head> | 문서의 공통적인 특성들을 넣는 곳, 전역특성 | |
| <meta> | 메타 데이터 입력 | |
| <title> | 문서의 제목 | |
| <body> | 문서의 본문, 여기에 내용을 나타낸다. | |
<!Doctype html>
<html>
<head>
<title> 제목 </title>
</head>
<body>
<div>
<h1>h1</h1>
<h2>h1</h2>
<h3>h1</h3>
<h4>h1</h4>
<h5>h1</h5>
<h6>h1</h6>
<a href="http://www.naver.com"> 네이버 링크 </a>
</div>
<div>
<img src="https://t1.daumcdn.net/cfile/tistory/24283C3858F778CA2E" width ="200" height="200">
<input type="text" value="기본값">
<input type="password">
</div>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<button>버튼</button>
</div>
</body>
</html>
div는 html 소스를 묶어놓는 것.
간단한 html 작성법. 이외에도 태그는 많고 각 태그별 사용법도 다르지만 검색해서 보면 된다.
CSS(Cascading Style Sheet)
CSS는 무선의 콘텐츠와 레이아웃 그리고 글꼴등의 시각적 요소들로 표현되는 문서의 외관을 분리하기 위한 목적.
<!Doctype html>
<html>
<head>
<title> 제목 </title>
<style type="text/css">
body
{
background-color : black;
}
div
{
color:yellow;
}
#testid { color: red; }
.testclass { color : brown; }
</style>
</head>
<body>
<div id="testid">
div testid 영역
</div>
<div class="testclass">
div class 영역
</div>
<div>
div 영역
</div>
</body>
</html>css에서 id속성은 한 문서(html)에 단 하나의 요소에만 적용이 가능하고 style영역에서 #id로 접근한다.
class속성은 같은 유형으로 반복되는 태그들을 유형별로 분류하고 싶을 때 쓰인다. .class로 접근한다.
<!Doctype html>
<html>
<head>
<title> 제목 </title>
<link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
<div id="testid">
div testid 영역
</div>
<div class="testclass">
div class 영역
</div>
<div>
div 영역
</div>
</body>
</html> body
{
background-color : black;
}
div
{
color:yellow;
}
#testid { color: red; }
.testclass { color : brown; }이렇게 css파일을 분리할 수도 있다. 기존 html코드에서 해당 css파일을 연결만 해주면 된다.
<link rel="stylesheet" type="text/css" href="mycss.css">
자바 스크립트 극기초
자바 스크립트는 웹환경에서 사용하기 위해 만들어진 프로그래밍 언어.
HTML로는 웹의 내용을 작성하고 CSS로 웹을 디자인한다면 자바스크립트로는 웹의 동작을 구현할 수 있다.
-> Node.js와 같은 프레임워크에서는 서버 프로그래밍도 가능.
1. 자바스크립트는 객체 기반의 스크립트 언어.
2. 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어.
<!Doctype html>
<html>
<head>
<title> 제목 </title>
</head>
<body>
<div id="test">
DIV내용물
</div>
<script type="text/javascript">
document.getElementByID("test").innerHTML = "내용물 바꾸기"
</script>
</body>
</html>또한 자바스크립트 언어에서는 var,let,const 키워드는 변수선언에 사용되는 타입들.
var - 중복 선언가능, 재할당 가능, 블록단위가 아닌 함수단위 안에서면 모두 접근가능.
let - 중복선언 불가. 재할당 가능. 블록레벨스코프
const - 중복선언 불가. 재할당 불가. 블록레벨 스코프.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="myDiv">
</div>
<script type="text/javascript">
function test()
{
document.getElementById('myDiv2').style.backgroundColor = 'blue';
}
let names = ["name1","name2"];
document.getElementById("myDiv").innerHTML = names;
for(i = 0; i < 4; ++i)
{
alert(i)
}
</script>
<div id="myDiv2">
<Button onclick="test()">Hello</Button>
</div>
</body>
</html>
JQuery
JQuery는 자바스크립트 라이브러리.
일반적으로 script는 head태그 안에 넣어두는게 일반적.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body>
</body>
</html>기본적인제이쿼리 추가방식.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("div").hide();
});
$("#open").click(function(){
$("div").show();
});
});
</script>
</head>
<body>
<div>
아무 내용물
</div>
<button id="hide">HIDE</button>
<button id="open">OPEN</button>
</body>
</html>
HIDE 누를 시.
또한 animate라는 함수를 이용해서 좀 더 동적인 홈페이지를 만들 수 있음.
좀 더 깊게 공부하는건 국비들어가서 다시 정리.
출처
'웹프로그래밍 > HTML_CSS_Javascript 기초' 카테고리의 다른 글
| [Javascript] 비동기 fetch, promise, async, await (0) | 2023.11.04 |
|---|---|
| 자바스크립트의 스코프 레벨,스코프 체인,클로져 (0) | 2023.09.12 |
| CSS 정리 (0) | 2023.09.10 |
| 요소(element)와 컨테이너(container) (0) | 2023.09.09 |
| VS 코드 익스텐션 유용한것들 (0) | 2023.09.09 |
