반응형

 

 

 

 

데이터 분석을 위한 웹 개발 언어

 

✔️ 미디어 쿼리

✔️ js_인터렉티브 웹 요소 생성

✔️ js_윈도우 객체와 스크롤

 

 

 

 

✔️ 미디어 쿼리

 

 

 

 

기본 스타일 설정

미디어 쿼리(@media) : CSS에서 화면 크기나 장치 측성에 따라 스타일을 조정
예) 컴퓨터 화면에서는 큰 폰트 활용, 모바일 기기에서는 상대적으로 작은 폰트 활용'

F12 -> 장치 확인 버튼으로 너비와 높이 바꿔가면서 확인 가능
html {font-size: 80px;}
article {width: 40%; height: 20%; background-color: pink; margin: 100px auto;}
<html lang="ko">
<article>
    <h1>미디어 쿼리</h1>
    <p>화면 크기에 따라서 바뀌는 폰트 사이즈</p>
</article>
</html>

(전체 폰트 크기는 80px이며 화면 너비가 901px 이상인 경우

전체의 40% 너비와 20%의 높이를 가진 박스가 핑크색으로 표시)

 

 

 

 

900px 이하(테블릿) 크기에서의 스타일 변경

@media screen and (max-width: 900px) {
    html { font-size: 40px; }
    article { background-color: orange; }
    h1 { font-size: 2rem; }
    p { font-size: 1.2rem; }
}
<html lang="ko">
<article>
    <h1>미디어 쿼리</h1>
    <p>화면 크기에 따라서 바뀌는 폰트 사이즈</p>
</article>
</html>

(화면 너비가 900px 이하가 되면 박스가 오렌지색으로 바뀌고 전체 폰트 크기가 40px로 줄어듦

h1은 2rem(80px)로 바뀌고, p는 1.2rem(48px)으로 조정되어 900px 이하의 장치 환경에 최적화)

 

 

 

 

400px 이하(모바일) 크기에서의 스타일 변경

@media screen and (max-width: 400px) {
    html { font-size: 20px; }
    article { background-color: aqua; }
    h1 { font-size: 2rem; }
    p { font-size: 1.2rem; }
}
<html lang="ko">
<article>
    <h1>미디어 쿼리</h1>
    <p>화면 크기에 따라서 바뀌는 폰트 사이즈</p>
</article>
</html>

(화면 너비가 400px 이하가 되면 박스가 아쿠아색으로 바뀌고 전체 폰트의 크기가 20px로 줄어듦

h1은 2rem(40px)로 바뀌고, p는 1.2rem(24px)로 조정되어 400px 이하의 장치 환경에 최적화)

 

 

 

 

✔️ js_인터렉티브 웹 요소 생성

 

ID 요소 찾아 출력

const 값 : 한 번 정하면 바뀌지 않음(CSS의 아이디 요소와 비슷)
const의 값에 해당하는 ID를 가진 웹 사이트 요소 찾아 저장

document.querySelector : 웹 페이지에서 원하는 부분 찾는 도구
(원하는 부분은 웹 페이지의 버튼이나 글씨 같은 요소)

console : 웹브라우저에서 확인할 수 있는 메세지창

DOM객체 = 웹페이지 조각

 

 

 

const title = document.querySelector("#title");
console.log(title);
<h1 id="title">HELLO WORLD in H1 tag</h1>

(const title은 #title ID 가진 웹 페이지 요소 찾아 저장하고 콘솔에 h1 태그가 DOM 객체로 웹 페이지에서 확인)

 

 

 

링크 클릭 이벤트 

const link = document.querySelector("a");
link.addEventListener("click", (e) => {
    e.preventDefault();
    console.log("링크를 클릭했습니다.");
});
a { font-size: 100px; color: #555; }
<a href="https://www.naver.com">click</a>

(const link는 a 태그 찾아 저장하고 a 태그가 DOM객체로

click을 누르면 네이버로 가지 않고 '링크를 클릭했습니다'가 콘솔에 나오며

url 텍스트는 100px의 폰트 사이즈와 글자색은 회색으로 설정)

 

 

 

 

마우스 이벤트로 색상 변경

const box = document.querySelector("#box");
box.addEventListener("mouseenter", () => {
    box.style.backgroundColor = "hotpink";
});
box.addEventListener("mouseleave", () => {
    box.style.backgroundColor = "aqua";
});
#box { width: 200px; height: 200px; background-color: aqua; margin: 100px auto; }
<div id="box"></div>

(const box는 #box라는 ID 가진 div 찾아 저장하고

div는 DOM 객체로 너비와 높이 200px, 아쿠아색의 화면 중앙에 있는 박스로

마우스를 올리며 핫핑크로 배경색 변화, 나가면 아쿠아로 복구 설정)

 

 

 

 

반복 요소에 이벤트 연결

e.preventDefault() : 동작을 막는 명령어
const list = document.querySelectorAll(".list li");
for (let el of list) {
    el.addEventListener("click", e => {
        e.preventDefault();
        console.log(e.target.innerText);
    });
}

 

<ul class="list">
    <li><a href="#">item1</a></li>
    <li><a href="#">item2</a></li>
    <li><a href="#">item3</a></li>
    <li><a href="#">item4</a></li>
</ul>

(const list는 클래스 list의 li를 찾아 목록을 DOM 객체로

예를 들어 item1을 클릭하면  콘솔에 선택한 li의 item1을 출력하고 동작을 막아서 콘솔에만 item1 나타남)

 

 

 

 

숫자 증가/감소 버튼

let : 숫자가 바뀔 수 있음
const btnPlus = document.querySelector(".btnPlus");
const btnMinus = document.querySelector(".btnMinus");
let num = 0;
btnPlus.addEventListener("click", e => {
    e.preventDefault();
    num++;
    console.log(`num: ${num}`);
});
btnMinus.addEventListener("click", e => {
    e.preventDefault();
    num--;
    console.log(`num: ${num}`);
});
<a href="#" class="btnPlus">Plus</a>
<a href="#" class="btnMinus">Minus</a>

(const btnPlus와  const btnMinus는 각각 버튼을 찾아 고정 상자에 넣어 DOM 객체로 저장하고

let num은 숫자 저장하며 Plus를 누르면 num이 1씩 커지고, Minus를 누르면 numdl 1씩 작아지고

그 과정에 콘솔에 숫자로 표시)

 

 

 

 

회전하는 박스 생성

const btnLeft = document.querySelector(".btnLeft");
const btnRight = document.querySelector(".btnRight");
const box2 = document.querySelector("#box2");
const deg = 45;
let num2 = 0;
btnLeft.addEventListener("click", e => {
    e.preventDefault();
    num2--;
    console.log(`num2: ${num2}`);
    box2.style.transform = `rotate(${num2 * deg}deg)`;
});
btnRight.addEventListener("click", e => {
    e.preventDefault();
    num2++;
    console.log(`num2: ${num2}`);
    box2.style.transform = `rotate(${num2 * deg}deg)`;
});
#box2 { width: 200px; height: 200px; background-color: blue; transition: 0.3s; }
<a href="#" class="btnLeft">왼쪽으로 회전</a>
<a href="#" class="btnRight">오른쪽으로 회전</a>
<div id="box2">box2</div>

(const btnLeft, const btnRight, const box2는 버튼과 박스를 찾아 고정 박스에 넣어 DOM 객체로 저장하고

const deg는 45도라는 고정된 값 저장, let num2는 회전 횟수를 저장하며

너비와 높이가 200px로 배경색은 파란색이고 0.3초간 부드럽게 움직이는 상자가

오른쪽 클릭 시 45도씩 오른쪽으로 회전, 왼쪽 클릭시 45도씩 왼쪽으로 회전하며

오른쪽으로 1번 움직이는 경우 num이1씩 증가하고, 왼쪽의 경우 num이 1씩 감소하며 그 과정을 콘솔에 숫자로 표시 )

 

 

 

 

✔️ js_윈도우 객체와 스크롤

 

 

 

 

웹 페이지 생성

body { width: 5000px; height: 5000px; }

(HTML의 body에 스크롤바가 생길 수 있도록 너비와 높이가 500px로 구성된 페이지 생성)

 

 

 

 

버튼 고정 및 스크롤 이동

function : 활동을 수행한다는 의미
window : 브라우저 창 전체
function sTo() {window.scrollTo(100, 200);}
function sBy() {window.scrollBy(100, 200);}
div { position: fixed; top: 10px; left: 10px; }
<div>
    <button onclick="sTo()">scrollTo(100,200)</button>
    <button onclick="sBy()">scrollBy(100,200)</button>
</div>

(div에 있는 각 버튼들을 위 10px, 왼쪽 10px 로 고정되어 있으며

scrollTo 버튼을 누르면 바로 가로 100px, 세로 200px 위치로 이동하고

scrollBy 버튼을 누르면 지금 위치에서 오른쪽으로 100px, 아래로 200px씩 더 움직임)

 

 

 

 

이번 내용에서는 HTML과 CSS, Javascript에 대해

미디어 쿼리와 Javascript 기본 활용에 대해 공부하였습니다.

 

HTML을 공부하는 이유는 데이터 분석을 위해서는 데이터 수집을 진행해야 하는데

웹에서 원하는 데이터를 효율적으로 가져오기 위함입니다.

 

더불어 데이터 분석을 위해서 DB와 SQL을 공부도 필요한데

위 블로그 글 참고해서 공부하면 좋을 것 같습니다.

 

 

'BOOTCAMP/SQL(MySQL)' 카테고리의 글 목록

데이터 분석 공부 열심히 하는 중😁

everyonelove.tistory.com

 

반응형

'HTML & CSS & Javascript > 데이터 분석을 위한 웹 개발 언어' 카테고리의 다른 글

[HTML][CSS]웹 개발 언어_CSS flexbox와 grid 레이아웃 설정  (0) 2025.03.14
[HTML][CSS]웹 개발 언어_콘텐츠 요소 변환 및 전환 효과 적용  (0) 2025.03.13
[HTML][CSS]웹 개발 언어_배경과 배치 및 요소의 효과 설정  (0) 2025.03.10
[HTML][CSS]웹 개발 언어_HTML과 CSS 활용한 폰트/텍스트 변환, 레이아웃 설정  (0) 2025.03.08
[HTML][CSS]웹 개발 언어_CSS의 복합 셀렉터와 가상 셀렉터  (0) 2025.03.07

티스토리툴바