📖HTML 이란?
- HTML은 웹 페이지가 어떻게 구성되는지를 브라우저에 알려주며, 사용자가 보는 웹 페이지의 뼈대를 만듬.
- HTML은 문서의 구조를 잡아줌
웹 접근성?
웹 접근성이란 장애를 가진 사람을 포함한 모든 사용자가 웹사이트와 웹 애플리케이션을 제한 없이 이용할 수 있도록 보장하는 개념입니다. 다시 말해, 시각·청각·운동·인지 장애가 있는 사용자도 웹의 콘텐츠와 기능을 쉽게 접근하고 이용할 수 있도록 하는 것을 의미합니다
웹 접근성이 중요한 이유
- 모든 사용자의 동등한 정보 접근 보장여러 나라에서는 웹 접근성을 보장하도록 법적으로 규정(예: 한국의 "국가정보화기본법", 미국의 "ADA", 유럽의 "EN 301 549" 등). 접근성을 준수하지 않을 경우 법적 책임이 발생할 수도 있음.
- 장애 여부와 관계없이 누구나 웹 서비스를 이용할 수 있도록 해야 함. 디지털 소외 계층(노인, 장애인 등)도 쉽게 웹을 사용할 수 있도록 지원. 법적 및 윤리적 책임
- 검색 엔진 최적화(SEO) 및 사용자 경험 향상
- 접근성을 높이면 검색 엔진이 콘텐츠를 더 잘 이해할 수 있어 SEO에 긍정적인 영향을 미침. 직관적인 네비게이션과 명확한 콘텐츠 제공은 모든 사용자에게 더 나은 경험을 제공.
HTML문법
tag: 문서 구조 · 내용 정의
attribute : tag의 옵션값을 준다
계층 구조 부모- 자식의 계층 구조를 가짐 이를 통해 레이아웃 설정
대소문자를 구별X
HTML 기본 구조
HTML 문서는 다음과 같은 기본 구조를 가집니다:
<!DOCTYPE html>
<html lang = "ko">
<head>
<title>페이지 제목</title>
</head>
<body>
<!-- 웹 페이지 내용 -->
</body>
</html>1. 문서 형식 정의 tag
- html tag
- html 태그는 모든 html요소의 부모
- 1개만 존재
- head tag
- 메타데이터를 포함 한다
- 메타데이터란 ⇒ html문서의 title,style,link,script등 에 대한 데이터
- 화면에 표시 X
- 메타데이터를 포함 한다
- title tag
- 는 문저의 제목을 정한다 이는 웹브라우저의 탭에 표시
- html 태그는 모든 html요소의 부모
- style tag
- 말 그대로 html의스타일 정의를 해줌
- link tag
- link 요소에는 외부 리소스와의 연계 정보를 정의한다. 주로 HTML과 외부 CSS 파일을 연계에 사용된다
- meta tag
- description, keywords, author, 기타 메타데이터 정의에 사용된다. 메타데이터는 브라우저, 검색엔진(keywords) 등에 의해 사용된다.
- charset 어트리뷰트는 브라우저가 사용할 문자셋을 정의한다.
- description : 웹페이지의 설명
- author: 작성자
- http-equov : 주기적 새로고침 등에 사용
- ex)
<meta http-equiv="refresh" content="30">text 형식 태그
- Heading tag
- h 태그는 h1~ h6까지 존재
Text Formatting tag
- b : bold체(굵게)를 지정한다. 의미론적(Semantic) 중요성의 의미는 없다.
- strong:bold체(굵게)를 지정 sementic 중요성을 가짐
- i : Italic체를 지정한다. 의미론적(Semantic) 중요성의 의미는 없다.
- em :Italic체를 지정한다. 의미론적(Semantic) 중요성을 가짐
- mark: 하이라이트 지정(형광팬)
- s & del : 둘다 취소선 s는 의미론적 중요성 x del은 O
- sub/sup : sub 태그는 subscripted(아래에 쓰인) text를 sup 태그는 superscripted(위에 쓰인) text를 지정한다.
본문 테그
p: 단락지정
br: 줄바꿈
  :띄어쓰기
pre: 적혀진대로 출력됨
hr: 수평 줄
q: 인용문
attribute
herf : href 어트리뷰트는 이동하고자 하는 파일의 위치(경로)를 값으로 받는다. 경로(path)란 파일 시스템 상에서 특정 파일의 위치를 의미한다.
target :target 어트리뷰트는 링크를 클릭했을 때 윈도우를 어떻게 오픈할 지를 지정한다.
Value Description
| _self | 링크를 클릭했을 때 연결문서를 현재 윈도우에서 오픈한다 (기본값) |
| _blank | 링크를 클릭했을 때 연결문서를 새로운 윈도우나 탭에서 오픈한다 |
List & Table
<ol>(ordered list): 순서 있는리스트
type 어트리뷰트를 사용하여 순서를 나타내는 문자를 지정할 수 있다
Value Description
| “1” | 숫자 (기본값) |
| “A” | 대문자 알파벳 |
| “a” | 소문자 알파벳 |
| “I” | 대문자 로마숫자 |
| “i” | 소문자 로마숫자 |
start 어트리뷰트로 리스트의 시작값을 지정할 수 있다.
<ul>(unordered list): 순서없는 리스트
중첩 list가 가능하다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>리스트 태그 예제</title>
</head>
<body>
<h1>리스트 태그 예제</h1>
<h2>순서 없는 리스트 (ul)</h2>
<ul type="square">
<li>사과</li>
<li>바나나</li>
<li>체리</li>
</ul>
<h2>순서 있는 리스트 (ol)</h2>
<ol type="A" start="3">
<li>첫 번째 단계</li>
<li>두 번째 단계</li>
<li>세 번째 단계</li>
</ol>
<ol type="I" reversed>
<li>로마 숫자 3</li>
<li>로마 숫자 2</li>
<li>로마 숫자 1</li>
</ol>
<h2>중첩 리스트</h2>
<ul type="circle">
<li>프론트엔드
<ul type="square">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<ul>
<li>photoshop</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</ul>
</li>
</ul>
</body>
</html>표(table)를 만들 때 사용하는 태그이다. 과거에는 테이블 태그를 사용하여 레이아웃을 구성하기도 하였으나 모던 웹에서는 주로 공간 분할 태그인 div 태그를 사용하여 레이아웃을 구성한다.
tag Description
| table | 표를 감싸는 태그 |
| tr | 표 내부의 행 (table row) |
| th | 행 내부의 제목 셀 (table heading) |
| td | 행 내부의 일반 셀 (table data) |
테이블 태그의 어트리뷰트는 아래와 같다.
<thead>, <tbody>, <tfoot> 태그 - 표 구조 정의하기
- HTML 테이블에서 헤더, 본문, 푸터를 구분하여 테이블 데이터를 구조화하는 데 사용됨. • 이 태그들은 테이블의 읽기 가독성을 높이고 접근성을 향상시키며, 테이블을 명확히 구분하는 역할을 함.
attribute Description
| border | 표 테두리 두께 지정. (CSS border property를 사용하는 것이 더 나은 방법이다.) |
| rowspan | 해당 셀이 점유하는 행의 수 지정 |
| colspan | 해당 셀이 점유하는 열의 수 지정 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8 ">
<meta name="viewport"content="width = device-width,initial-scale=1.0">
<title> test </title>
</head>
<body>
<table border="1">
<thead style="background-color: antiquewhite;">
<tr>
<td rowspan="2">이름</td>
<td colspan="2">개인정보</td>
<td rowspan="2"> 직업</td>
</tr>
<tr>
<td>나이</td>
<td>성별</td>
</tr>
</thead>
<tbody>
<tr>
<td>김철수</td>
<td>30</td>
<td>남</td>
<td>개발자</td>
</tr>
<tr>
<td>이영희</td>
<td>25</td>
<td>여</td>
<td>디자이너</td>
</tr>
<tr>
<td rowspan="2"> 박민수</td>
<td rowspan="2"> 40</td>
<td>남</td>
<td>기획자</td>
</tr>
<tr>
<td>여</td>
<td>마케터</td>
</tr>
</tbody>
<tfoot style="background-color: aquamarine;">
<tr>
<td colspan="3"> 총인원</td>
<td> 4명</td>
</tr>
</tfoot>
</table>
</body>
</html><a> 태그 - 링크 만들기
- 하이퍼링크를 생성할 때 사용됨. • 이 태그는 웹 페이지 간의 이동, 외부 웹사이트 연결, 이메일 링크, 전화번호 호출 등 다양한 링크 기능을 제공함. • <a> 태그는 텍스트뿐만 아니라 이미지, 버튼 등 다른 요소를 링크로 변환할 수 있음.
이미지등 멀티 미디어
- <img> 태그 - 이미지 삽입하기
- 이미지를 문서에 삽입할 때 사용됨. • <img>는 **빈 태그(self-closing tag)**로, 닫는 태그 없이 사용됨. • 이미지를 표시하려면 src 속성을 통해 이미지 파일의 경로를 지정해야 하며, alt 속성을 사용하여 대체 텍스트를 제공하는 것이 권장됨. • 비율을 유지하고 싶다면 넓이만 입력하면 됨.
src 이미지 파일 경로 alt 이미지 파일이 없을 경우 표시되는 문장 width 이미지의 너비 (CSS에서 지정하는 것이 일반적) height 이미지의 높이 (CSS에서 지정하는 것이 일반적) - <audio> 태그 - 오디오 삽입
- <audio> 태그는 HTML 문서에서 오디오 파일을 삽입하고 재생할 때 사용됨. • 이 태그는 브라우저에 기본 제공되는 오디오 컨트롤(재생, 일시정지, 볼륨 조절 등)을 사용할 수 있으며, 다양한 파일 형식을 지원함.
src 음악 파일 경로 preload 재생 전에 음악 파일을 모두 불러올 것인지 지정 autoplay 음악 파일을 자동의 재생 개시할 것인지 지정 loop 음악을 반복할 것인지 지정 controls 음악 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다. - <video> 태그 – 비디오 삽입 • <video> 태그는 HTML 문서에서 비디오를 삽입하고 재생할 때 사용됨. • 이 태그는 브라우저에 기본 제공되는 비디오 컨트롤(재생, 일시정지, 볼륨 조절 등)을 사용할 수 있음.attribute Description
src 동영상 파일 경로 poster 동영상 준비 중에 표시될 이미지 파일 경로 preload 재생 전에 동영상 파일을 모두 불러올 것인지 지정 autoplay 동영상 파일을 자동의 재생 개시할 것인지 지정 loop 동영상을 반복할 것인지 지정 controls 동영상 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다. width 동영상의 너비를 지정 height 동영상의 높이를 지정
form
from 태그는 사용자가 입력한 데이터를 수집하는용도
input, textarea, button, select, checkbox, radio button, submit button등의 태그를 포함한
attribute Value Description
| action | URL | 입력 데이터(form data)가 전송될 URL 지정 | |
| method | get / post | 입력 데이터(form data) 전달 방식 지정 |
GET
• GET 방식은 전송 URL에 입력 데이터를 쿼리스트링으로 보내는 방식이다.예) http://jsonplaceholder.typicode.com/posts?userId=1&id=1 • 전송 URL 바로 뒤에 ‘?’를 통해 데이터의 시작을 알려주고, key-value형태의 데이터를 추가한다. 1개 이상의 전송 데이터는 ‘&’로 구분한다. • URL에 전송 데이터가 모두 노출되기 때문에 보안에 문제가 있으며 전송할 수 있는 데이터의 한계가 있다. (최대 255자). • REST API에서 GET 메소드는 모든 또는 특정 리소스의 조회를 요청한다.
- • GET 방식은 전송 URL에 입력 데이터를 쿼리스트링으로 보내는 방식이다.예) http://jsonplaceholder.typicode.com/posts?userId=1&id=1
- • 전송 URL 바로 뒤에 ‘?’를 통해 데이터의 시작을 알려주고, key-value형태의 데이터를 추가한다. 1개 이상의 전송 데이터는 ‘&’로 구분한다.
- • URL에 전송 데이터가 모두 노출되기 때문에 보안에 문제가 있으며 전송할 수 있는 데이터의 한계가 있다. (최대 255자).
- • REST API에서 GET 메소드는 모든 또는 특정 리소스의 조회를 요청한다.
POST
• POST 방식은 Request Body에 담아 보내는 방식이다.예) http://jsonplaceholder.typicode.com/posts • URL에 전송 데이터가 모두 노출되지 않지만 GET에 비해 속도가 느리다. • REST API에서 POST 메소드는 특정 리소스의 생성을 요청한다.
- • POST 방식은 Request Body에 담아 보내는 방식이다.예) http://jsonplaceholder.typicode.com/posts
- • URL에 전송 데이터가 모두 노출되지 않지만 GET에 비해 속도가 느리다.
- • REST API에서 POST 메소드는 특정 리소스의 생성을 요청한다.
div응용 태그
의미를 가짐
tag Description
| header | 헤더를 의미한다 |
| nav | 내비게이션을 의미한다 |
| aside | 사이드에 위치하는 공간을 의미한다 |
| section | 본문의 여러 내용(article)을 포함하는 공간을 의미한다 |
| article | 분문의 주내용이 들어가는 공간을 의미한다 |
| footer | 푸터를 의미한다 |
HTML Semantic element
📖 1. 자바스크립트 개요
📖 2. CSS 개요
🔹 2차시: CSS 개념과 선택자
📌 학습 목표
- CSS의 기본 개념과 역할을 이해한다.
- 다양한 CSS 선택자를 활용하여 스타일을 적용할 수 있다.
📌 1. CSS란?
🔎 CSS (Cascading Style Sheets)
- HTML의 디자인(스타일) 을 담당하는 언어
- 웹 페이지의 색상, 레이아웃, 폰트 스타일을 조정하는 역할
- 유지보수를 쉽게 하기 위해 외부 스타일시트 사용 권장
📌 2. CSS 적용 방법
🔎 CSS를 적용하는 3가지 방법
1.인라인 스타일 (style 속성 사용)
<p style="color: red;">이 문장은 빨간색입니다.</p>
2.내부 스타일시트 (<style> 태그 사용)
<style>
p { color: blue; }
</style>3.외부 스타일시트 (.css 파일로 연결) ✅ 추천
<link rel="stylesheet" href="style.css">📌 3. CSS 선택자
🔎 주요 선택자 종류
- 기본 선택자
- * {}: 전체 선택
- p {}: 태그 선택
- .class {}: 클래스 선택
- #id {}: 아이디 선택
- 가상 요소 선택자
- ::before, ::after: 특정 요소 앞/뒤에 콘텐츠 추가
- 속성 선택자
💡 학습 회고
✅ 좋았던 점: CSS 선택자를 활용하여 디자인을 세밀하게 조정할 수 있었다.
📖 3. CSS 박스 모델과 레이아웃
🔹 3차시: CSS 박스 모델과 배치
📌 학습 목표
- 박스 모델의 개념을 이해하고 활용할 수 있다.
- Flexbox와 Grid를 활용한 레이아웃 설계 가능
📌 학습 목표
- 박스 모델의 개념을 이해하고 활용할 수 있다.
- Flexbox와 Grid를 활용한 레이아웃 설계 가능
📌 1. CSS 박스 모델
🔎 박스 모델 개념
- HTML 요소는 박스 형태 로 렌더링됨
- 구성 요소:
- Content (내용)
- Padding (내용과 테두리 사이 여백)
- Border (테두리)
- Margin (다른 요소와의 간격)
📌 2. CSS 레이아웃
🔎 Flexbox 활용
- display: flex; 사용 시 가로 정렬
- justify-content → 가로 방향 정렬
- align-items → 세로 방향 정렬
📖 4. 반응형 웹 디자인
🔹 4차시: 반응형 웹과 미디어쿼리
📌 학습 목표
- 다양한 화면 크기에 맞춰 반응형 디자인을 적용할 수 있다.
📌 1. 미디어쿼리 활용
🔎 미디어쿼리란?
- 다양한 디바이스 크기 에 맞춰 스타일을 변경하는 기능
✅ 좋았던 점: 반응형 웹사이트를 만들 수 있는 기초를 배웠다.
CSS Grid를 활용한 레이아웃 연습
@media (max-width: 600px) {
body {
background-color: lightgray;
}
}추가 실습
1.그리드를 사용한 웹페이지 구성및 사이드바를 고정 하는 연습
HTML코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8 ">
<meta name="viewport"content="width = device-width,initial-scale=1.0">
<link rel="stylesheet" href="../CSS/reset.css">
<link rel="stylesheet" href="../CSS/sementicTagExample.css">
</head>
<body>
<div class="layout_grid">
<header>
<div class="Top">
<h1><b>My WebSite</b></h1>
</div>
</header>
<div class="nav_area">
<nav>
<ul>
<li><a class="nav_item" href="#">Home</a></li>
<li><a class="nav_item" href="#">Introduce</a></li>
<li><a class="nav_item" href="#">inqure</a></li>
</ul>
</nav>
</div>
<div class="rec_paper">
<h2><b>추천 글</b></h2>
<ol>
<li><a href="https://developer.mozilla.org/ko/docs/Web/HTML">HTML Document`</a></li>
<li><a href="https://developer.mozilla.org/ko/docs/Web/CSS">CSS Document</a></li>
<li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript">Javascript Document</a></li>
</ol>
</div>
<div class="recent_paper">
<pre>
uname -a
처음오는게 버젼 마지막에 aarch64 ==> arm 64비트
echo $PATH
PATH에 설정되있는 경로로 실행코드를 찾아감
which [명령어]
명령어의 PATH를 알수있음
이로한 작업을 하는게 shelㅣ이다 ===> .bashrc
sh ==> 쉘 명령어 실행시키는 명령어
새로운 창의 쉘을 열어야함?
pi@raspberrypi:~ $ ls -al /boot/config.txt
-rwxr-xr-x 1 root root 2132 Dec 5 05:17 /boot/config.txt
uname -a
처음오는게 버젼 마지막에 aarch64 ==> arm 64비트
echo $PATH
PATH에 설정되있는 경로로 실행코드를 찾아감
which [명령어]
명령어의 PATH를 알수있음
이로한 작업을 하는게 shelㅣ이다 ===> .bashrc
sh ==> 쉘 명령어 실행시키는 명령어
새로운 창의 쉘을 열어야함?
pi@raspberrypi:~ $ ls -al /boot/config.txt
-rwxr-xr-x 1 root root 2132 Dec 5 05:17 /boot/config.txt
uname -a
처음오는게 버젼 마지막에 aarch64 ==> arm 64비트
echo $PATH
PATH에 설정되있는 경로로 실행코드를 찾아감
which [명령어]
명령어의 PATH를 알수있음
이로한 작업을 하는게 shelㅣ이다 ===> .bashrc
sh ==> 쉘 명령어 실행시키는 명령어
새로운 창의 쉘을 열어야함?
pi@raspberrypi:~ $ ls -al /boot/config.txt
-rwxr-xr-x 1 root root 2132 Dec 5 05:17 /boot/config.txt
uname -a
처음오는게 버젼 마지막에 aarch64 ==> arm 64비트
echo $PATH
PATH에 설정되있는 경로로 실행코드를 찾아감
which [명령어]
명령어의 PATH를 알수있음
이로한 작업을 하는게 shelㅣ이다 ===> .bashrc
sh ==> 쉘 명령어 실행시키는 명령어
새로운 창의 쉘을 열어야함?
pi@raspberrypi:~ $ ls -al /boot/config.txt
-rwxr-xr-x 1 root root 2132 Dec 5 05:17 /boot/config.txt
uname -a
처음오는게 버젼 마지막에 aarch64 ==> arm 64비트
echo $PATH
PATH에 설정되있는 경로로 실행코드를 찾아감
which [명령어]
명령어의 PATH를 알수있음
이로한 작업을 하는게 shelㅣ이다 ===> .bashrc
sh ==> 쉘 명령어 실행시키는 명령어
새로운 창의 쉘을 열어야함?
</pre>
</div>
</div>
</body>
</html>CSS코드
*{
font-size: 10px;
margin: auto;
padding: 3vw;
background-color: rgb(202, 214, 214);
}
.layout_grid {
display: grid;
grid-template-columns: repeat(10, 9vw); /* 10개 컬럼으로 10등분 */
grid-template-rows: repeat(10, 9vw);
height: 100vh; /* 레이아웃 전체 높이 설정 */
width: 100vw;
}
header {
grid-row: 1;
grid-column: 1 / -1;
font-size: 3rem;
display: flex;
justify-content: center; /* 네비게이션을 우측으로 배치 */
align-items: center;
padding: 20px;
background-color: cadetblue;
border-radius: 8px 8px 0 0;
}
h1{
background-color: cadetblue;
}
.nav_area {
grid-row: 2 / span 1;
grid-column: 1 / -1;
font-size: 2rem;
align-items: center;
position: sticky;
top: 0;
}
.nav_area ul{
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: 15px;
justify-content:center;
align-items: center;
}
.nav_item{
color: aliceblue;
font-size: 1.2rem;
}
.rec_paper {
grid-column: 1 / 3; /* 왼쪽 절반 */
background-color: white;
padding: 20px;
border-radius: 10px;
min-height: 30vh;
max-height: 70vh;
position: sticky;
top: 0;
display: ;
}
.recent_paper {
grid-column: 3 / -1; /* 오른쪽 영역 차지 */
background-color: white;
padding: 20px;
border-radius: 10px;
min-height: 30vh; /* 최소 높이 유지 */
height: auto; /* 내용에 따라 자동으로 늘어나도록 설정 */
}
📌 1. 이번실습 핵심 내용
- HTML 시맨틱 태그 사용
- CSS Grid 레이아웃을 활용한 레이아웃 배치
- Sticky Position을 이용한 네비게이션바 및 추천 섹션 고정
- 반응형 디자인을 위한 vw, vh 단위 적용
- 그리드 사용 시 gap 속성으로 인한 레이아웃 조정 문제 해결
📌 3. 회고 (4L 회고법 적용)
✅ Liked (좋았던 점)
- CSS Grid를 활용하여 레이아웃을 깔끔하게 배치할 수 있었다.
- position: sticky;를 활용해 네비게이션바와 추천 글을 화면에 고정하는 방법을 익혔다.
- vw, vh 단위를 적극적으로 사용하여 반응형 웹 디자인을 구축할 수 있었다.
🎓 Learned (새롭게 배운 점)
- CSS Grid와 Flexbox의 차이점
- Grid는 이차원(가로+세로) 배치에 적합, Flexbox는 일차원(가로 또는 세로) 정렬에 적합
- Sticky Position 활용
- position: sticky;를 활용하면 스크롤 시 특정 요소를 고정할 수 있다.
- Grid gap 속성이 레이아웃에 미치는 영향
- gap이 지나치게 크면 한 화면에 모든 콘텐츠가 보이지 않는 문제가 발생할 수 있음 → gap 최소화 필요
❌ Lacked (부족했던 점)
- 그리드 사용 시 gap을 크게 하면 전체 화면이 맞지 않는 문제 발생
- pre 태그 내 긴 내용(쉘 명령어)이 한 화면에 들어가지 않는 문제
- 해결책: overflow: auto;를 사용하여 스크롤 추가
🚀 Longed for (더 하고 싶은 것)
- JavaScript를 활용한 인터랙티브 기능 추가 (ex: 다크 모드 버튼, 네비게이션 효과)
- CSS Grid와 Flexbox를 조합하여 보다 유연한 레이아웃 구성
- 반응형 웹 최적화
- 모바일 화면 (max-width: 600px)에서 레이아웃 자동 조정 기능 추가
document.addEventListener("scroll", function () {
let nav = document.querySelector(".nav_area");
if (window.scrollY > 50) {
nav.style.backgroundColor = "rgba(0,0,0,0.8)";
} else {
nav.style.backgroundColor = "transparent";
}
});2.사이드 메뉴바 만들어보기
- HTML코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사이드 메뉴</title>
<link rel="stylesheet" href="../CSS/test.css"> <!-- CSS 파일 연결 -->
</head>
<body>
<div class="side_menu_container">
<div class="side-menu" id="sideMenu">
<h2>사이드 메뉴</h2>
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">소개</a></li>
<li><a href="#">서비스</a></li>
<li><a href="#">연락처</a></li>
</ul>
</div>
<button class="trigger-button" id="menuButton">메뉴 열기</button>
</div>
<script src="../1233.js"></script> <!-- JavaScript 파일 연결 -->
</body>
</html>
- js코드
const menuButton = document.getElementById('menuButton');
const sideMenu = document.getElementById('sideMenu');
// 버튼 클릭 시 메뉴 열기/닫기
menuButton.addEventListener('click', () => {
sideMenu.classList.toggle('open'); // 메뉴 열기/닫기
menuButton.classList.toggle('visible'); // 버튼 위치 변경
console.log("clicked")
});
// 메뉴가 닫힐 때 버튼 다시 숨기기
sideMenu.addEventListener('transitionend', () => {
if (!sideMenu.classList.contains('open')) {
menuButton.classList.remove('visible');
}
});
- HTML을 활용한 사이드 메뉴의 구조 설계
- CSS를 이용한 애니메이션 및 레이아웃 스타일링
- JavaScript 이벤트 리스너(click, transitionend)를 활용한 메뉴 동작 구현
- 클래스 토글을 활용하여 메뉴의 열림/닫힘 상태 조작
- 버튼을 눌렀을 때 메뉴가 열리고 닫히도록 애니메이션 효과 적용
1) HTML 구조
✅ 핵심 포인트
- <div class="side-menu">: 사이드 메뉴의 컨테이너
- <button> 요소를 사용하여 클릭 시 메뉴가 열리도록 구현
- <ul> 목록을 활용하여 메뉴 항목 구성
🔹 3) JavaScript 구현
✅ 핵심 포인트
- classList.toggle('open')을 사용하여 메뉴가 열리고 닫히도록 구현
- console.log("clicked")를 추가하여 클릭 이벤트가 정상적으로 작동하는지 디버깅
- transitionend 이벤트를 활용하여 메뉴가 닫힌 후 버튼을 다시 표시하도록 설정
Gpt에게 물어본 수정 및 개선사항 - <button>이 div 내부에 위치하여 처음에는 보이지 않도록 설정하고, 메뉴가 닫혔을 때 다시 나타나도록 개선
- 버튼(.trigger-button)을 메뉴가 닫히면 보이도록 수정
- 애니메이션 속도를 ease-in-out으로 변경하여 부드럽게 적용
- if (!sideMenu.classList.contains('open'))을 활용하여 메뉴가 닫히면 버튼을 다시 보이게 설정
❌ Lacked (부족했던 점)
- 메뉴가 열릴 때 버튼을 숨기는 코드(menuButton.style.display = "none";)가 처음에는 적용되지 않음
- 해결책: transitionend 이벤트를 활용하여 메뉴 닫힐 때 버튼 다시 보이도록 수정
- 메뉴를 열었을 때 바깥을 클릭하면 닫히도록 하는 기능이 빠져 있음
- 해결책: window.addEventListener('click', function(event) { ... }) 추가
🚀 Longed for (더 하고 싶은 것)
- 메뉴가 열릴 때 배경을 흐리게 하는 효과 추가
- 메뉴가 esc 키를 누르면 자동으로 닫히도록 설정
- 다크 모드 및 컬러 테마 변경 기능 추가
🔹 1차시: 자바스크립트의 개요
📌 학습 목표
- 자바스크립트의 정의와 필요성을 설명할 수 있다.
- 웹 개발에서 자바스크립트의 역할을 이해할 수 있다.
🔎 자바스크립트란?
- 웹페이지를 동적으로 만들 수 있는 프로그래밍 언어
- HTML이 웹사이트의 구조, CSS가 디자인을 담당하는 것과 달리, JavaScript는 동작을 담당
- 활용 예시:
- 버튼 클릭 반응
- 사진 슬라이드쇼
- 채팅 기능
- 웹 기반 게임 제작
🔎 자바스크립트를 배워야 하는 이유
- 비교적 쉽게 학습 가능 (직관적인 문법)
- 웹브라우저에서 바로 실행 가능 → 별도의 설치 없이 사용 가능
- 다양한 분야에서 활용 가능
- 웹 개발: 동적인 UI 구현, 사용자 입력 처리
- 모바일 앱 개발: React Native, PWA
- 게임 개발: HTML5 Canvas, Three.js
- 인공지능: TensorFlow.js 활용 가능
📖 2. 자바스크립트 개발 환경 설정
🔹 2차시: 개발 환경 설정
📌 학습 목표
- VS Code를 설치하고 JavaScript 개발을 위한 기본 설정을 할 수 있다.
- HTML 파일을 생성하고 JavaScript 파일을 연결할 수 있다.
- 간단한 JavaScript 코드를 실행하고 브라우저에서 확인할 수 있다.
📌 1. VS Code 설치 및 기본 설정
- Prettier (코드 포맷 정리)
- Live Server (HTML 파일 실시간 미리보기)
📌 2. HTML 파일 생성 및 JavaScript 연결 (p.7-12)
- 인라인 스크립트 사용
- 🔎 HTML에서 JavaScript 실행 방법
- 🔎 VS Code 설치 및 필수 확장 프로그램
사용방법
1.인라인 스크립트
<script>
console.log("인라인 스크립트 실행!");
</script>2.외부 Javascript 파일 연결
<script src="script.js"></script>
✅ 추천 방식: 외부 JavaScript 파일을 사용하는 것이 유지보수에 유리!
📌 3. 웹 브라우저에서 JavaScript 실행 (p.20-22)
🔎 개발자 도구 활용
- F12 키 → Console 탭에서 console.log() 결과 확인
- 브라우저에서 발생한 에러 확인 가능
✍️ 오늘의 실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript 학습</title>
</head>
<body>
<h1>JavaScript 실행 테스트</h1>
<script>
console.log("JavaScript 연결 성공!");
</script>
</body>
</html>✅ 좋았던 점: Live Server를 활용하여 실시간으로 HTML과 JavaScript 실행 결과를 확인할 수 있어서 편리함.
실행결과
📖 3. 자바스크립트 변수 (250207_03_javascript_variables.pdf)
🔹 3차시: 변수와 스코프
📌 학습 목표
- 자바스크립트에서 변수를 선언하고 사용할 수 있다.
- 변수의 유효 범위(Scope)와 호이스팅(Hoisting)의 개념을 이해한다.
📌 1. 변수의 개념
🔎 변수란?
- 데이터를 저장하는 컨테이너
- let, const, var로 선언 가능
🔎 변수 선언 방법
let name = "홍길동"; // 변경 가능
const birthYear = 1990; // 변경 불가
var age = 30; // 사용 비추천📌 2. 변수의 스코프(Scope)
🔎 전역 스코프 vs 지역 스코프
let globalVar = "전역 변수";
function example() {
let localVar = "지역 변수";
console.log(globalVar); // O
console.log(localVar); // O
}
console.log(globalVar); // O
console.log(localVar); // X (오류 발생)다른 언어에서의 전역변수 지역 변수의 개념이다.
✅ Tip: let, const는 블록 스코프를 가지므로 {} 안에서만 접근 가능!
3. 호이스팅(Hoisting)
🔎 호이스팅이란?
- 자바스크립트는 변수 선언을 코드의 최상단으로 끌어올리는 특성을 가짐
🔎 호이스팅이란?
- 자바스크립트는 변수 선언을 코드의 최상단으로 끌어올리는 특성을 가짐
console.log(age); // undefined
var age = 30;- let, const는 호이스팅되지만 TDZ(일시적 사각지대)로 인해 사용 불가
console.log(name); // ReferenceError 발생
let name = "홍길동";✍️ 오늘의 실습
- HTML코드
- js코드
function test() {
console.log(a); // undefined
var a = 10;
console.log(a); // 10
}
test();✅ 좋았던 점: let, const가 var보다 안정적인 이유를 이해함.
📌 전체 학습 회고
이번 학습을 통해 HTML, CSS, JavaScript의 기본 개념과 활용 방법을 깊이 있게 익힐 수 있었습니다. 특히 CSS Grid와 Flexbox의 차이를 이해하고, 다양한 레이아웃을 구성하는 방법을 배웠으며, 반응형 디자인과 웹 접근성의 중요성도 다시 한번 깨달았습니다. JavaScript를 활용하여 동적인 UI를 구현하는 과정에서 이벤트 리스너와 클래스 토글을 이용한 사이드 메뉴 기능을 구현한 것이 가장 흥미로웠습니다. 또한, 호이스팅과 스코프 개념을 학습하며 JavaScript의 실행 방식을 더 잘 이해할 수 있었습니다.
'HancomAI_academy' 카테고리의 다른 글
| 🛠️ 팀 일정 관리 웹앱 제작기: AWS EC2 + Express.js + React 실습 적용기 (0) | 2025.03.24 |
|---|---|
| [스나이퍼팩토리] 한컴AI아카데미 4주차 후기 (1) | 2025.02.23 |
| 6. 컴포넌트 기초 (1) | 2025.02.23 |
| [스나이퍼팩토리] 한컴AI아카데미 3주차 - JavaScript 강의 후기 & 학습일지 (1) | 2025.02.15 |
| Hancom AI Academy 1일차 (0) | 2025.01.31 |