[14기 과제] Javascript - 포트폴리오에 동적기능 구현하기
u
uhaeunn
오늘
![[14기 과제] Javascript - 포트폴리오에 동적기능 구현하기](/_next/image?url=https%3A%2F%2Flikelion-blog-images.s3.ap-northeast-2.amazonaws.com%2Fimages%2Fposts%2F21%2F4144c627-f853-49b0-8f6d-a86cfc9c3341.png&w=3840&q=75)
프론트엔드 3주차 세션에서는 Javascript에 대해서 배웠습니다.
2주차 세션에서 웹사이트의 뼈대를 구성하는 html, 구성한 뼈대에 디자인을 입히는 css를 배우고 3주차 세션에서 사이트에 동적 기능을 구현하는 Javascript 언어까지 학습하고 나니 더욱 멋진 사이트를 구현할 수 있게 되었습니다!~
이번주 세션 복습 과제는 '2주차 세션에서 구현한 포트폴리오 사이트에 자바스크립트 언어를 통해 기능을 추가하기' 였습니다.
아래는 Javascript 기능을 추가한 제 포트폴리오 사이트의 홈화면입니다 😆
배운점 - Javascript란?
이번 세션을 통해 저는 자바스크립트 언어를 거의 처음 접해봤는데, python / html / css를 주로 다루다가 새로운 언어를 배우니 기본 문법이나 코드 구조가 익숙치 않아서 쉽지 않았습니다... 😅
먼저, 자바스크립트란 웹의 '근육' 역할을 한다고 이해하면 좋습니다. 정말 다양한 동적 기능 (ex. 마우스를 어느 구역에 갖다 대었을 때 특정 요소가 보이게 함, 버튼을 클릭하면 어떤 기능이 구현되게 함.)을 구현할 수 있는 언어입니다.
1. 자바스크립트 기능 추가방법
자바스크립트는 css와 같이 간단한 코드는 html 파일 내에서 추가할 수도 있고, 따로 '~.js' 파일을 폴더 내에 만들어서 src를 이용해 구현할 수도 있습니다.
javascript
<script src="move.js"></script>저는 html의 body에 위의 코드를 추가하고 폴더 내에 move.js 파일을 따로 만들어 'querySelector'나 'getElementById'를 이용하여 기능을 구현하였습니다.
2. 변수 선언 방법
자바스크립트에서의 '변수'란 자료를 담아두는 공간으로 이해하면 좋습니다. 변수를 설정하면, 한번 선언한 변수를 재사용할 수 있어 편리합니다! let과 const로 변수를 선언할 수 있는데, const는 변수 중에서도 상수를 선언하여, 프로그램 안에서 그 값을 변경할 수 없다는 특징이 있습니다.
javascript
const name = document.getElementById('userName').value;
const messageBox = document.getElementById('welcomeMessage');
const display = document.getElementById('displayName');위 코드는 제가 이번 과제를 하면서 실제로 변수를 const를 이용하여 선언한 구간입니다. 위와 같이 변수 선언 기본형은 'let 변수명', 'const 변수명' 입니다.
3. DOM에서 이벤트 처리하기 - addEventListner() 함수
이번 과제에서 이벤트(마우스 포인터를 갖다대면 사진이 변하는 기능)를 처리하면서 addEventListner() 함수에 대해 알게되었습니다!
이 함수는 특이하게 하나에 이벤트에 하나의 함수만 연결할 수 있는 것이 아니라, 여러 이벤트를 추가할 수 있습니다. 함수의 기본형은 '요소.addEventListner(이벤트, 함수, 캡쳐여부);' 입니다.
javascript
cat.addEventListener("mouseover", () => {
cat.src = "리락쿠마2.jpg";
});위와 같이 코드를 작성하였는데, 이는 'cat'으로 제가 선언한 변수를 요소로, 'mouseover'되면, 사진을 폴더내의 '리락쿠마2.jpg'로 변경하는 기능을 실행한다는 의미입니다.
구현 내용
1. 리락쿠마 사진에 마우스 갖다대면 코리락쿠마 사진으로 변경
저는 리락쿠마를 좋아해서 홈 화면에 리락쿠마 사진을 올려두었는데, 마우스를 위에 갖다대면 코리락쿠마 사진이 나오게 기능을 바꿔보았습니다!
마우스를 사진 위로 대면 위와 같이 사진이 바뀝니다 😏... 기능을 살짝 숨겨두고 싶은 마음에 'NEW rilakkuma will appear...' 멘트는 아주 작게 표시했습니다.. ㅎㅎ
위 기능을 구현한 코드는 아래와 같습니다.
javascript
const cat = document.querySelector('.home-pic');
cat.addEventListener("mouseover", () => {
cat.src = "리락쿠마2.jpg";
});
cat.addEventListener("mouseout", () => {
cat.src = "리락쿠마.jpg";
});기능을 구현하면서 'querySelector'에 대해 알게되었는데,
-querySelector : 모든 문법 사용가능 (알아서 가져온다..라고 생각하시면 됩니다.)
-getElementById : html코드의 id 명칭만 인자로 받습니다.
-getElementByTagName : html코드의 태그이름을 기준으로 요소를 찾습니다. 특정 태그이름 중 몇번째~ 의 의미로 [0] [1] 과 같이 특정 태그를 지정할 수도 있습니다.
이러한 차이가 있다고 합니다! (개인적으로 복잡한 코드에서 태그이름을 통해 요소를 찾는 매서드는 사용하기 힘들 것 같다는 생각이 들었습니다.. 아니라면 알려주세요 ㅎㅎ!!)
2. 방문자의 이름을 입력하면 멘트가 나오는 함수 구현
제 포트폴리오 사이트 방문자가 직접 참여하는 기능을 넣어보고 싶어서 어떤 기능을 추가할지 고민해보다가, 사용자가 이름을 작성하면
' Uhaeun -♥-> 사용자 ' 이런 멘트가 뜨도록 하는 기능입니다. 다른 의미는 없고 그냥 방문해주셔서 감사하다는 의미입니다..하하하😅
javascript
function sayHello() {
const name = document.getElementById('userName').value;
const messageBox = document.getElementById('welcomeMessage');
const display = document.getElementById('displayName');
if (name.trim() !== "") {
display.innerText = name;
messageBox.style.display = "block";
} else {
alert("이름을 입력해주세요!");
}
}처음에 userName을 가져오는 과정에서 .value를 붙이지 않아 어려움을 겪었는데, 위 기능처럼 객체 전체를 가져오는 것이 아니라 사용자가 입력한 '텍스트 데이터' 자체만을 가져오기 위해서는 .value를 붙여야합니다.
python에서와 같이 javascript에서도 함수를 선언할 수 있습니다.
함수를 설정할 때 가장 신경썻던 부분은 예외 처리였는데요, 사용자가 빈칸을 입력하고 confirm을 누르면 함수가 실행되지 않도록 하고, '이름을 입력해주세요!'라는 messageBox창이 뜨도록 코드를 작성했습니다.
3. 홈화면 컨테이너 재배열
홈화면에 이름을 입력하고 결과 멘트가 뜨게하는 기능을 추가하면서 두개의 컨테이너를 좌우로 배치해야했습니다. 홈 화면을 구성할 때 가장 먼저 고민한 것은 화면을 크게 두 구역으로 나누고, 이를 시각적으로 균형 있게 배치하는 것이었습니다.
따라서 원래 홈 화면의 전체 구성요소를 home-container하나로 감싸고 있었는데, home-container안의 요소들을 다시 home-right와 home-left로 나누어 flexbox 기능을 사용하여 가로로 나열, 각 컨테이너 안에서는 좌우/세로 방향 모두 center에 위치하도록 하였습니다!
css
.home-container {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
max-width: 1000px;
margin: 0 auto;;
color: black;
font-size: 25px;
}home-right 컨테이너와 -left 컨테이너 사이의 gap을 지정하고 싶었는데, 왜인지 적용이 계속 되지 않아 그냥 각각 컨테이너의 margin을 조정해 주었습니다.
css
.home-right {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-left: 100px;
}
.home-left{
margin-right: 100px;
}결과물
https://portfolio-with-javascript-features.vercel.app/#home 자바 스크립트 기능을 추가한 포트폴리오 사이트입니다!! 마우스도 리락쿠마 위에 올려보시고.., 이름도 넣어보셨으면 좋겠습니다!!
사이트가 동적으로 움직이기 시작하니까 웹설계가 더욱 재밌어진 것 같네요 ㅎㅎ 자바스크립트의 여러 기능을 다양하게 구현해보고 싶습니다~!! 😆🦁
댓글 0