HTML, CSS, JS의 기본 개념, 용도, 사용방법, 관계
- HTML (HyperText Markup Language)
- HTML은 웹페이지의 뼈대를 만드는 언어입니다.
- 텍스트, 이미지, 링크, 버튼 등 페이지에 보이는 요소들을 배치하고 구조를 잡는 역할을 하며, 집을 짓는다면 벽과 기둥, 창문 같은 부분이 HTML입니다.
- 예를 들어, 글을 쓸 때 제목을 정하거나 문단을 나누는 것도 HTML 태그를 이용하며, 이미지를 넣거나, 다른 페이지로 이동하는 링크를 만드는 것도 모두 HTML로 작성합니다. - CSS (Cascading Style Sheets)
- CSS는 HTML로 만들어진 구조에 디자인을 입히는 역할을 합니다.
- 색상, 글씨 크기, 글꼴, 여백, 레이아웃 등 시각적으로 보이는 모든 요소를 꾸며주는 스타일 시트 언어입니다.
- 예를 들어, 배경을 파란색으로 바꾸거나 버튼을 둥글게 만들고, 글자를 가운데 정렬하는 등의 작업이 CSS를 통해 이루어집니다.
- CSS 덕분에 웹페이지가 더 아름답고 보기 좋게 바뀌며, 사용자에게 좋은 인상을 줄 수 있습니다. - JavaScript
- JavaScript는 웹페이지에 동적인 기능을 추가하는 프로그래밍 언어입니다.
- 사용자의 행동(버튼 클릭, 입력 등)에 따라 페이지가 반응하도록 만들어줍니다.
- 예를 들어, 버튼을 클릭했을 때 알림 창이 뜨거나, 입력한 값을 검사하는 기능, 페이지 내용이 실시간으로 변경되는 인터랙션 등이 모두 JavaScript의 역할입니다.
- JS가 없으면 웹페이지는 단순히 정보를 보여주는 정적인 페이지에 머무르지만, JS를 사용하면 살아있는 웹페이지를 만들 수 있습니다.
| 구분 | HTML | CSS | JavaScript |
| 역할 | 구조 (Structure) | 스타일링 (Design) | 동작 (Interaction) |
| 용도 | 웹페이지의 뼈대를 만든다 (텍스트, 이미지, 링크 등) | 웹페이지를 꾸민다 (색상, 크기, 배치 등) | 웹페이지를 동적으로 만든다 (버튼 클릭 시 이벤트, 데이터 처리 등) |
| 작성 위치 | .html 파일 | .css 파일 | .js 파일 |
| <html>, <body> 내부에 작성 | <style> 태그 안 | <script> 태그 안 | |
| link로 연결 | src로 연결 | ||
| 관계 | HTML이 기본 골격, CSS가 꾸밈, JS가 동작을 부여하는 관계 | ||
| 세 가지가 함께 웹페이지를 완성함 |
- 웹페이지 제작에 필요한 기본적인 HTML 태그들
| 태그 | 설명 | 예시 |
| <html> | HTML 문서의 루트 | <html> ... </html> |
| <head> | 메타데이터, 외부 파일 연결 | <head> <title>문서 제목</title> </head> |
| <body> | 실제 페이지에 보이는 내용 | <body> ... </body> |
| <h1> ~ <h6> | 제목 (숫자가 작을수록 크다) | <h1>큰 제목</h1> |
| <p> | 문단 (Paragraph) | <p>문장입니다.</p> |
| <a> | 링크 (Anchor) | 클릭 |
| <img> | 이미지 삽입 | <img src="image.jpg" alt="설명"> |
| <ul>, <ol>, <li> | 목록 (순서 없는/있는) | <ul><li>아이템</li></ul> |
| <table> | 표 | <table><tr><td>셀</td></tr></table> |
| <div> | 블록 영역 그룹화 | <div>내용</div> |
| <span> | 인라인 영역 그룹화 | <span>내용</span> |
| <form>, <input> | 입력 폼 | <form><input type="text"></form> |
| <button> | 버튼 | <button>클릭</button> |
- CSS의 기본적인 문법과 속성들
1. 주요 선택자
- * : 모든 요소
- 태그명 : 특정 태그
- .클래스명 : 클래스 선택
- #아이디명 : 아이디 선택
2. 주요 속성들
속성 설명 예시 color 글자 색상 color: red; background-color 배경 색상 background-color: yellow; font-size 글자 크기 font-size: 16px; margin 바깥 여백 margin: 10px; padding 안쪽 여백 padding: 10px; border 테두리 border: 1px solid black; width, height 너비, 높이 width: 100px; height: 50px; display 요소 표시 방식 display: block; flex, grid 레이아웃 display: flex;
3. 문법
선택자 {
속성: 값;
속성: 값;
}
- JS의 기본적인 문법과 함수들
1. 주요 기능 및 함수
기능 설명 예시 변수 선언 데이터를 저장 let name = "철수"; 함수 선언 코드 블록 저장 후 실행 function sayHi() { alert("안녕"); } 조건문 분기 처리 if (a > 5) { ... } else { ... } 반복문 반복 실행 for (let i = 0; i < 5; i++) { ... } 이벤트 처리 사용자 상호작용 감지 element.addEventListener("click", 함수); DOM 조작 HTML 요소 변경 document.querySelector("p").textContent = "변경된 내용"; 내장 함수 alert(), console.log(), prompt() 등
2. 기본 문법
// 변수
let a = 10;
const b = 20;
// 함수
function greet() {
console.log("안녕하세요!");
}
// 이벤트
document.querySelector("button").addEventListener("click", greet);
다음을 이해해 봅시다.
<!-- HTML 문서의 유형을 선언 (HTML5 문서임을 브라우저에 알림) -->
<!DOCTYPE html>
<!-- HTML 문서의 시작 -->
<html>
<!-- 문서의 메타데이터(스타일, 제목, 스크립트 등)를 담는 head 부분 -->
<head>
<!-- 문서 내부에 CSS 스타일을 정의 -->
<style>
/* body 태그의 배경색을 연한 파란색으로 설정 */
body {background-color: powderblue;}
/* h1 태그(제목)의 글자색을 파란색으로 설정 */
h1 {color: blue;}
/* p 태그(문단)의 글자색을 빨간색으로 설정 */
p {color: red;}
</style>
</head>
<!-- 문서의 본문 시작 -->
<body>
<!-- h1 태그: 큰 제목 표시 -->
<h1>h1태그</h1>
<!-- p 태그: 단락(문장) 표시 -->
<p>p 태그</p>
<!-- 버튼 생성, 클릭하면 changeColor() 함수 실행 -->
<button onclick="changeColor()">배경색 변경</button>
<!-- JavaScript 코드를 작성하는 영역 -->
<script>
// changeColor 함수 정의
function changeColor() {
// 문서의 body 배경색을 노란색으로 변경
document.body.style.backgroundColor = "yellow";
}
</script>
<!-- 문서의 본문 종료 -->
</body>
<!-- HTML 문서 종료 -->
</html>
실행화면
<!-- HTML5 문서라는 것을 선언 -->
<!DOCTYPE html>
<!-- HTML 문서의 시작 -->
<html>
<!-- 문서의 본문 시작 -->
<body>
<!-- h2 태그: 중간 크기의 제목을 표시 -->
<h2>배열 이해하기</h2>
<!-- p 태그: id="demo" 인 문단 -->
<p id="demo"></p>
<!-- JavaScript 코드를 작성하는 영역 -->
<script>
// 'cars'라는 이름의 배열을 선언하고, 문자열 요소 3개를 저장
var cars = ["Saab", "Volvo", "BMW"];
// id가 "demo"인 HTML 요소를 찾아서, cars 배열의 내용을 표시
document.getElementById("demo").innerHTML = cars;
// 결과: Saab,Volvo,BMW (배열 요소가 쉼표로 구분되어 출력됨)
</script>
<!-- 문서의 본문 종료 -->
</body>
<!-- HTML 문서 종료 -->
</html>
실행화면
실습
- 자신을 소개하는 페이지를 작성해 봅시다(형식 자유)
<!-- HTML5 문서임을 선언 -->
<!DOCTYPE html>
<html> <!-- HTML 문서의 시작 -->
<head> <!-- 문서의 설정 및 스타일을 지정하는 부분 -->
<title>나의 소개</title> <!-- 브라우저 탭에 표시될 제목 -->
<style> <!-- CSS 스타일 정의 시작 -->
body { /* body 태그 전체에 적용할 스타일 */
background-color: #f0f8ff; /* 배경 색을 연한 파란색으로 지정 */
font-family: Arial, sans-serif; /* 글꼴을 Arial 또는 sans-serif로 지정 */
padding: 20px; /* 바깥 여백을 20픽셀로 지정 */
}
h1 { /* h1 태그에 적용할 스타일 */
color: #3333cc; /* 글자 색을 파란 계열로 지정 */
}
p { /* p 태그(문단)에 적용할 스타일 */
color: #000000; /* 글자 색을 검정으로 지정 */
font-size: 18px; /* 글자 크기를 18픽셀로 지정 */
line-height: 1.6; /* 줄 간격을 1.6으로 지정 */
}
button { /* 버튼에 적용할 스타일 */
margin-top: 20px; /* 버튼 위 여백 20픽셀 */
padding: 10px 20px; /* 안쪽 여백 위아래 10픽셀, 좌우 20픽셀 */
background-color: #4CAF50; /* 배경 색을 녹색으로 지정 */
color: white; /* 글자 색을 흰색으로 지정 */
border: none; /* 테두리를 없앰 */
border-radius: 8px; /* 모서리를 둥글게 8픽셀 */
cursor: pointer; /* 마우스 올릴 때 포인터 모양으로 변경 */
}
button:hover { /* 버튼에 마우스를 올렸을 때 스타일 */
background-color: #45a049; /* 조금 더 짙은 녹색으로 변경 */
}
</style> <!-- CSS 스타일 정의 끝 -->
</head> <!-- head 영역 끝 -->
<body> <!-- 웹페이지 본문 시작 -->
<h1>안녕하세요! 👋</h1> <!-- 큰 제목으로 인사말 표시 -->
<p>저는 보안관제로 근무중이며,모의해킹으로 이직을 하기 위해<br>
<strong>ELITE HACKER Bootcamp 4th</strong>를 배우고 있는 직장인입니다.</p>
<!-- 본문 소개 문장, <strong>은 강조 (굵게), <br>은 줄바꿈 -->
<p>진행중인 <strong>pre.Web</strong>, <strong>pre.Rev</strong> 모두에 관심이 있어요.</p>
<!-- pre.Web, pre.Rev 과정에 관심 있다는 소개 -->
<p><strong>pre.Web</strong> 코스를 다 끝내고 나면 <strong>pre.Rev</strong> 코스도 도전할 예정입니다!</p>
<!-- pre.Web 끝난 후 pre.Rev 도전할 계획 -->
<p>취미는 🎮 게임, 🎤 노래 부르기 입니다!</p>
<!-- 취미 소개 -->
<button onclick="alert('응원합니다! 화이팅!')">응원 받기</button>
<!-- 버튼 클릭 시 "응원합니다! 화이팅!" 알림이 뜨는 기능 -->
</body> <!-- 웹페이지 본문 끝 -->
</html> <!-- HTML 문서 끝 -->
실행결과
- 간단한 계산기 페이지 만들기
<!-- HTML5 문서임을 선언 -->
<!DOCTYPE html>
<html>
<head>
<!-- 브라우저 탭 제목을 "간단한 계산기"로 설정 -->
<title>간단한 계산기</title>
</head>
<body>
<!-- 페이지의 메인 제목 -->
<h1>간단한 계산기</h1>
<!-- 사용자가 계산식을 입력하는 텍스트 박스 -->
<input type="text" id="expression" placeholder="계산식을 입력하세요">
<!-- 버튼 클릭 시 calculate() 함수를 호출하여 계산 실행 -->
<button onclick="calculate()">계산!</button>
<!-- 결과가 출력될 영역 -->
<p>Result: <span id="result"></span></p>
<script>
// 계산을 수행하는 함수 정의
function calculate() {
// 사용자가 입력한 수식을 가져옴
var expression = document.getElementById("expression").value;
// eval() 함수를 이용하여 수식 계산
var result = eval(expression);
// 계산된 결과를 HTML의 result 영역에 출력
document.getElementById("result").innerText = result;
}
</script>
</body>
</html>
실행결과
'ELITE HACKER Bootcamp 4th > 1주차' 카테고리의 다른 글
| [1주차 TIL] KnockOn Bootcamp 프록시 (0) | 2025.04.06 |
|---|---|
| [1주차 TIL] KnockOn Bootcamp 패킷 (0) | 2025.04.06 |
| [1주차 TIL] KnockOn Bootcamp Cookie & Session (0) | 2025.04.05 |
| [1주차 TIL] KnockOn Bootcamp HTTP / HTTPS (0) | 2025.04.05 |
| [1주차 TIL] KnockOn Bootcamp Protocol (0) | 2025.04.05 |