수업을 듣다가 지금까지 배운 내용을 정리하지 않으면 이해를 못할 것 같은 불안감이 들어 한번 크게 정리하고 가겠다.
배운 내용이 추가될 때 마다 추가하도록 하겠다.
HTML이란?
HTML (Hypertext Markup Language,하이퍼텍스트 마크업 언어)는 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다. 이는 개발자로 하여금 복잡하게도 간단하게도 프로그래밍 할 수 있습니다. HTML은 elements로 구성되어 있으며, 이들은 적절한 방법으로 나타내고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업 합니다. tags 는 웹 상의 다른 페이지로 이동하게 하는 하이퍼링크 내용들을 생성하거나, 단어를 강조하는 등의 역할을 합니다.
[출처 : https://developer.mozilla.org]
HTML의 태그
html의 기본 구조는 태그와 엘리먼트로 이루어졌다고 할 수 있다.
각각의 엘리먼트는 "여는 태그 - 내용 - 닫는태그" 의 형식으로 이루어져 있다.
즉, 태그는 특정 속성을 가진 '괄호' 정도로 생각해주면 된다.
때문에, 특정 요소 내에 다른 요소를 사용하는 '내포'도 가능하다.
수업에서 다루지는 않았지만 '블록레벨 요소'와 '인라인 요소'를 구분할 수 있으면 좋은데,
블록 레벨 요소는 새롭게 작성될 시 새로운 줄을 생성하여 단락 간 줄바꿈이 일어나는 요소이고, ex) <p>
인라인 요소는 그것을 작성한 단락 내에서 적용되는 요소를 뜻한다. ex) <em>
<img
src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" />수업 분 중에서도 페이지 내에 이미지를 불러오는 태그가 소개되었었는데, 다른 태그와는 달리 닫는 태그가 없어서 의문을 품었었다.
이는 이미지 가 문서에 무언가를 첨가하기 위해 단일 태그를 사용하는 '빈요소'이기 때문이었다.
즉, 닫는 태그가 필요하지 않다.
src 는 보통 불러오는 파일의 위치를 가리키며, 이 뒤에는 불러오기 옵션이 추가될 수 있다.
ex) alt, width, loading 등
-주의할 점!-
html에서 콤마는 대부분의 경우에 사용하지 않으며, 스페이스바를 기준으로 구분된다.
HTML의 구조
<!DOCTYPE html> 로 시작!
이후 전체는 <html> </html>로 감싸져 있고 <html> 내부에서는 <head> 와 <body>로 이루어져있다.
<head>는 외부로 보여지지 않는 부분(주로 html파일을 다른 파일과 연결하는 부분)이고
<body>는 페이지에서 사용자에게 표시되는 부분이다.
head와 body에 작성되는 내용을 구분하여 학습해보자.
<head>
- <title> 제목명 </title>
페이지 상단에 표시되는 페이지명을 작성하는 태그이다.
- <link/> (빈태그)
주로 <head>에서 html과 css를 연결하는 코드를 작성할 때 사용하는 태그이다.
<link rel = "stylesheet" href = "style.css"/>
정보) href는 hypertxt reference의 약자 / rel = relation(불러오는 파일과 html 문서의 관계)
<body>
- <hn> 제목명 </hn>
<hn> 태그는 주로 내용별로 제목을 작성할 때 사용하는데, 페이지 전체의 내용을
포괄하는 내용을 작성할 때에는 <h1>을 사용한다. 'n'에 해당하는 숫자가 작을 수록 크기가 커진다.
-<p> 본문내용 </p>
주로 <h1> 밑에 평범한 텍스트를 추가할 때 사용하는 태그이다.
- <button> 버튼 내용 </button>
버튼을 생성하는 태그이다. 사이에 이미지를 넣거나
- 리스트 <ol>, <ul>
각각 ordered list와 unordered list의 약자이다.
각각 리스트의 항목으로 <li> 요소를 내포한다.
<ol> 은 순서가 있는 리스트로, 앞에 순서를 나타내는 숫자나 알파벳이 들어간다.
순서 표지로 무엇이 들어갈지는 속성을 통해 정할 수 있다.
ex)
<!DOCTYPE html>
<html>
<body>
<ol type = "I">
<li>자료구조</li>
<li>인공지능과 피지컬 컴퓨팅</li>
<li>응용소프트웨어 개발</li>
</ol>
</body>
</html>
<ul> 은 순서가 없는 리스트로, 숫자나 알파벳 대신 불릿과 같은 기호가 앞에 표시된다.
- 글자/폰트 관련
- <hr/> (단일태그/블록레벨요소)
화면에 긴 가로선을 표시한다.
- <br/>
줄바꿈을 한다.
- <em> </em>
감싼 내용을 이탈릭체로 바꾼다.
- <b> </b>
감싼 내용을 굵은 글씨로 표시한다.
- <del> </del>
감싼 내용에 취소선을 추가한다.
- 링크 태그
- <a> (인라인 레벨 요소)
anchor, 웹페이지나 외부사이트 연결을 위해 하이퍼링크를 표시할 때 사용한다.
<a href = "링크/파일 위치"> 대체텍스트 </a>
바로가기 버튼을 만드는 경우에는 대체 텍스트 대신 이미지를 클릭하면 링크의 페이지로 이동하도록 할 수 있다.
<a href = "https://codingwandori.tistory.com/" target = "_blank">
<img src = "logo.png" alt = "티스토리 바로가기" width = "80"/>
</a>
이때에는 이미지 삽입 태그를 <a> </a> 로 감싸주면 된다.
이때, 옵션인 target은 하이퍼링크를 클릭했을 때 현재 창을 전환할지, 새로운 페이지를 열지 결정하는 태그이다.
기본값은 target = "_self"이며(현재 창 전환)
직접 target = "_blank"로 설정해주어야 새 창 열기로 바뀐다.
또한, <img>의 옵션으로 alt 가 있는 것을 볼 수 있는데, 이는 alternation 의 약자로, 특정 문제로 페이지에 이미지가 로드되지 못했을 때 이미지를 대체하는 텍스트를 의미한다.
HTML <div> 태그의 쓰임
코드를 보다보면 가장 많이 보이는 태그가 <div>이다.
<div>는 division 의 약자로, 구역을 나누는 역할을 하는 기본적인 태그이다.d
div만의 중요한 특성 몇가지가 있다.
1. 웹페이지에 보이지 않는 투명한 박스를 그린다(블록라벨요소)
2. 여러 태그를 하나로 묶는다.(내포/ 그룹화)
3. 클래스나 id를 지정하여 css로 꾸밀 수 있다.
*** src와 href 의 차이 ***
속성에서 가장 자주 쓰이는 옵션이
src = "파일명" 일 것이다.
이는 head에서 사용되는 href = "파일명"과 조금 헷갈릴 수 있는데,
href 는 파일을 참조한다는 의미라면
src는 외부자원을 통째로 가져와 페이지에 적용하는 느낌이라고 보면 된다.
href는 주로 <head>에서 css 스타일을 연결할 때나 하이퍼링크를 연결할 때,
src는 주로 자바스크립트 코드나 이미지와 같은 외부자원을 불러올 때 사용한다.
Class 와 id
- id는 한 태그에 단 하나만 적용되는 기능으로, 중복사용이 불가하다.
기호는 '#'이다.
- Class는 공통적인 그룹의 속성을 정할 때 사용하며, 여러 태그에 사용될 수 있다.
기호는 '.'이다.
클래스는 보통 어떠한 기능이나 디자인을 일괄 적용하고자 할 때 사용하며, ex) 좋아요 버튼, 본문 텍스트, 등
id는 개별적으로 기능을 구성할 때 사용한다. ex) 각각 기능이 다른 버튼들
JS 연결이 갖는 의미
js 연결 코드는 </body> 바로 위에 작성한다.
<script src = "script.js"></script> // js 연결
이제 부처 script.js 내에서 index.html 문서 전체의 내용은
document라는 내장 객체로 관리할 수 있다.
js 기본 문법
c언어와 매우 유사한 느낌이 있다.(세미콜론)
변수선언은 let 아니면 const로 하며, 보통 계속 변하는 값은 let, 가리키는 주솟값이 달라질 일이 없는 변수는
const로 선언한다.
이 외 문법은 거의 동일하지만 조건문에서는 '==' 대신 '==='를 사용한다 .
그리고 '!=' 대신 '!=='를 사용한다.
파이썬의 f문자열과 비슷한 백틱(`) 을 사용한다. (중괄호 내에 변수 삽입 가능)
객체 내에 내장된 매서드와 내장 객체를 자주 사용한다.
내장 객체 : document, console
- 내장 매서드
특히 document 객체의 내장 매서드 querySelector를 자주 사용한다.
querySelector()는 인자로 넘긴 클래스, 아이디, 태그명을 포함하는 요소를 문서 내에서 찾아 가장 먼저 나오는
객체를 반환하는 매서드이다.
console은 개발자 창에서 콘솔 창에 나타나는 메시지를 관할하는 객체로, 가장 많이 사용하는 기능은
console.log()이다.
js의 함수 표현식
JS가 지금까지 배운 언어와 가장 다른 점은 const라는 자료형의 존재이다.
const는 가리키는 값(주솟값)이 변하지 않을 때 사용하는 자료형으로,
숫자, 문자열, 객체는 물론 함수까지 담을 수 있다.
함수까지 담을 수 있다는 const의 특징을 이용하여 js에서는 함수 표현식과 함수 선언식, 두가지 문법을 사용할 수 있다.
1. 함수 선언식
function hello(name) {
return `안녕 ${name}`;
}
2. 함수 표현식
const hello = (name) => {
return `안녕, {name}`;
}
후자의 경우, 함수 자체를 인자로 넘겨야 하는 매서드와 함께 사용한다.
함수 선언식은 표현식과는 달리 전역으로 선언되어 어느시점에서든 사용할 수 있다는 특징이 있다.
속성을 이용한 JS 기능 연결
버튼에 클릭 시 이벤트를 추가하는 간단한 코드를 작성해보겠다.
<button class = "btn">클릭!</button>
index.html에 위와 같은 버튼 요소가 있다고 해보자.
const ClickBtn = document.querySelector(".btn");
(작성 예정)
2026. 6.2 수업 분
html 요소에 이벤트에 대한 '반응'을 추가해주는 가장 보편적인 매서드가
addEventListener이다.
이는 버튼을 포함한 모든 html 요소에 적용할 수 있다.
이를 사용해주기 위해서는 document로 부터 querySelector나 getElementById로 불러와야 하는데,
id의 경우에는 html문서에서 직접 불러오지 않아도, 사용할 수 있다는 특징이 있다.
글자 크기 키우기 코드
html 코드
<!DOCTYPE html>
<html>
<head>
<title>자기소개하기</title>
<link rel = "stylesheet" href = "style.css"/>
</head>
<body>
<h1>안녕하세요 손지완입니다.</h1>
<div class = "editor_box">
<button id = "minus">-</button>
<button id = "plus">+</button>
<p class = "txt">글자 크기 바꿔봅시다</p>
</div>
<script src = "script.js"></script>
</body>
</html>
<!-- 글자 키우기 && 줄이기 페이지 만들기 -->
css 코드
.txt {
font-size : 16px;
transition : 0.1s;
}js 코드
let size = 16;
const txt = document.querySelector(".txt");
const minus = document.getElementById("minus");
const plus = document.getElementById("plus"); // 이거는 id라서 써줘도 되고 안써줘도 된다
plus.addEventListener("click", () => {
size++;
txt.style.fontSize = size + "px";
});
minus.addEventListener("click", () => {
size--; // 크기를 1 줄이고
txt.style.fontSize = size + "px"; // 화면에 반영!
});
이때, 글자크기는 값이 변하는 값이므로 let으로 선언한 후, 실제 글자 스타일에 적용시키기 위해서 txt의 속성에 접근하여
fontSize에 변한 size의 값을 형식에 맞춰서 대입하는 것이다.
이때, JS에서 접근할 때는 font-size가 아니라 fontSize와 같이 camelcase로 접근한다는 것에 주의!
이후, 글자수 세기, 좋아요 버튼까지 추가한 코드를 첨부하겠다.
html
<!DOCTYPE html>
<html>
<head>
<title>자기소개하기</title>
<link rel = "stylesheet" href = "style.css"/>
</head>
<body>
<h1>안녕하세요 손지완입니다.</h1>
<div class = "editor_box">
<button id = "minus">-</button>
<button id = "plus">+</button>
<p class = "txt">글자 크기 바꿔봅시다</p>
<p id = "cur_size">현재 크기 : 16px</p>
</div>
<div id = "heart">좋아요❤️</div>
<p id = "count">0</p>
<textarea id = "txt_box"></textarea>
<p id = "txt_count">0자</p>
<script src = "script.js"></script>
</body>
</html>
css
.txt {
font-size : 16px;
transition : 0.1s;
}
textarea {
width: 100%;
height: 100px;
}
#heart {
color : gray;
cursor: pointer;
}
#heart.liked {
color : red;
}(id 내에 클래스를 추가하는 방식을 기억하자!)
js
// id로 선언해놓았으면 따로 js에서 명시해주지 않아도 사용할 수 있다.
let size = 16;
const txt = document.querySelector(".txt");
const minus = document.getElementById("minus");
const plus = document.getElementById("plus"); // 이거는 id라서 써줘도 되고 안써줘도 된다
plus.addEventListener("click", () => {
size++;
txt.style.fontSize = size + "px";
cur_size.textContent = "현재 크기 : " + txt.style.fontSize;
});
minus.addEventListener("click", () => {
size--; // 크기를 1 줄이고
txt.style.fontSize = size + "px"; // 화면에 반영!
cur_size.textContent = "현재 크기 : " + txt.style.fontSize;
});
let likes = 0;
const heart = document.getElementById("heart");
const count = document.getElementById("count");
heart.addEventListener("click", () => {
likes++;
count.textContent = likes;
heart.classList.add("liked");
})
const txt_box = document.getElementById("txt_box");
const txt_count = document.getElementById("txt_count");
txt_box.addEventListener("input", () => {
txt_count.textContent = txt_box.value.length + "자";
});
추가문제로 이름 입력을 받고 환영메시지를 출력하는 코드를 작성하였다.
<p></p> 안의 내용을 비워놓은 후, id를 이용하여 내용을 추가하는 방식이었다