HTML, CSS, JS의 기본 개념, 용도, 사용방법, 관계 등등
HTML
웹페이즈의 기본적인 구조를 만든다.
[HTML 태그, 구조]
- 문서 유형 선언 <!DOCTYPE html> - HTML5 문서 선언
- 루트(root) 요소 <html> ~ </html> - HTML5 문서의 시작과 종료
- <head> ~ </head> - 웹페이지 정보를 알리는 곳
- <body> ~ </body> - HTML5 문서의 실제 콘텐츠를 쓰는 곳
- <title> - 웹페이지 제목
- <h1~6> - 제목 태그
- <p> - 문단
- <a> - 하이퍼링크, href을 이용하여 링크페이지 작성
- <ul>, <ol>, <li> - 순서 없는 목록, 각 항목 넣는 태그, 순서 있는 목록
- <input> - 사용자 입력 받는 태그
- <div> - 레이아웃을 나누는데 자주 쓰임
- <span> - 텍스트 특정 부분을 CSS와 함께 사용
CSS
HTML로 만들어진 구조에 컬러, 폰트, 레이아웃 등 스타일을 지정하는 방식을 가진 언어이다.
웹사이트 시각적으로 보기 편하게 만들어준다.
[CSS 구조]
선언된 블록 내에서 (선택자 속성: 속성값;) 형태로 정의한다. ex) div { 속성: (속성값)(단위); }
CSS은 대표적으로 인라인 스타일 시트, 내부 스타일 시트, 외부 스타일 시트로 나눌 수 있다.
인라인 스타일 시트는 html 문단 안에 style을 같이 넣는 형식이다.
ex) <h1 style = "color : blue; border=1px; " > 안녕 </h1>
내부 스타일 시트는 <head> 태그안에 형식으로 안에 <style>태그를 넣어 CSS 언어를 사용한다.
ex) <style> h1{ color : blue; border : 1px;}
외부 스타일 시트는 CSS 파일을 따로 만들어서 <link> 태그를 이용하여 불러오는 형식이다.
ex) <link href="color.css"> 같은 형식으로 html
CSS 우선순위는 인라인 > 내부 > 외부 순으로 한다.
[CSS 선택자, 속성]
기본 선택자
- 전체 선택자 - html 내부 모든 태크 선택 ex) *{ ...}
- 태그 선택자 - 특정 태그 선택 ex p { ...}
JS(JavaScript)
콘텐츠를 동적으로 만들어주며, 멀티미디어 등 동적 기능으로 웹사이트를 interactive하게 만들어주는 언어이다.
스크립트 태그(<script>)를 사용하여 HTML 문서에 어느위치에서 사용가능하다. 보통 <body> 태그 아래에 사용한다.
자바스크립트 파일을 따로 만들어 .js 확장자의 파일을 불러들일 수 있다.
[JS의 기본 문법]
- 변수 선언 - var(선언과 값 초기화), let(지역 변수과 값 초기화), const(읽기 전용 상수 선언)
- ex) var a = 'test'; let b ='test'; const c = 'test';
- 데이터 타입 - 숫자, 문자열(string), 불리언(boolen)
- 함수 선언 - function name(parameter) { ... } 형태로 안에 retrun 값이 있어야함
- 조건문 - if, else if, else, switch, c언어와 동일
- 반복문 - for, while, do ~ while, c언어와 동일
DOM(Document Object Model) 조작 함수
DOM은 HTML 객체를 문서로 모델링하는 것이다. 즉, 웹 페이지 문서 구조(HTML)를 프로그래밍 언어(JS)로 연결시킨다.
DOM은 트리구조로 표현할 수 있다.
- document.getElementsByld - HTML의 id요소 접근
- docuument.querySelector - CSS 선택자를 사용하여 요소 선택
- document.createElement - 새로운 HTML 요소 추가
- addEventListener - 요소의 이벤트에 대한 반응 연결
- element.innerHTML - 요소의 HTML 내용을 설정하거나 반환
- element.setAttribute(name, value) - 지정된 요소의 속성 값을 설정( 있으면 업데이트 없으면 추가)
연습
<!-- 다음을 이해해 봅시다 -->
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>h1태그</h1>
<p>p 태그</p>
<button onclick="changeColor()">배경색 변경</button>
<script>
function changeColor() {
document.body.style.backgroundColor = "yellow";
}
</script>
</body>
</html>\웹페이지 배경색을 노란색으로 변경하는 함수가 들어있어 <button onclick>이 버튼 생성해 클릭하면 변경된다.
<!-- 다음을 이해해 봅시다 -->
<!DOCTYPE html>
<html>
<body>
<h2>배열 이해하기</h2>
<p id="demo"></p>
<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
script의 cars 배열값이 나열해서 HTML에 나타낸다.
'web hacking(Knockon Bootcamp)' 카테고리의 다른 글
| [2주차 TIL] KnockOn Bootcamp JavaScript (0) | 2024.12.13 |
|---|---|
| [2주차 TIL] KnockOn Bootcamp HTML 기본 태그 (0) | 2024.12.11 |
| [1주차 TIL] KnockOn Bootcamp, 프록시(Proxy) (0) | 2024.12.08 |
| [1주차 TIL] KnockOn Bootcamp, 패킷(Packet) (0) | 2024.12.07 |
| [1주차 TIL] KnockOn Bootcamp, Cookie & Session (0) | 2024.12.06 |