[SeSAC] 웹 풀스택 과정_뭐든 만들어 보기(미니프로젝트)

 

1. 시작

3주차 마지막 수업과 더불어 그동안 배운 HTML, CSS , Js, 부트스트랩, Jquery 등을 사용해서

개인 미니 프로젝트를 진행하는 시간이 있었습니다.

 

2. 요구사항

- 주제는 자유

- 배운것 들을 활용(HTML, CSS , Js, 부트스트랩, Jquery 등)

 

 

3. 주제

스스로 문구를 적고 애니메이션을 통해 화면에 보여주는

간단한 웹 어플리케이션을 만들어봤습니다.

 

스마트폰 어플인 '모두의응원 LED' 를 써보고

제가 따라해볼 수 있을것 같아서 진행해 봤습니다.

 

 

4. 화면

화면은 CSS와 부트스트랩 Grid System 을 사용해서

모바일웹 에서 잘보이는 것을 목적으로 만들었습니다.

 

PC의 브라우저에의 화면을 바꾸고 싶을 수도 있을것 같아서

가능성을 열어두었습니다.

 

1번 / 전광판 : 클릭한 설정들을 적용해서 2번에서 입력한 텍스트에 애니메이션을 적용해서 보여줍니다.

2번 / 사용자 입력창 : 입력하고 싶은 텍스트를 입력합니다.

3번 / 속도 설정 버튼 : 텍스트가 이동하는 속도를 클릭을 통해 조절합니다.

4번 / 크기 설정 버튼 :  텍스트의 크기를 클릭을 통해 조절합니다.

5번 / 폰트, 텍스트 색, 배경색 등을 설정할 수 있는 메뉴를 확장하는 버튼 (미구현)

6번 / 설정된 값을 적용해서 전광판에 보여줍니다.

 

5. 기능

- 구현된것

JQuery 이벤트 핸들러를 사용해서

사용자 입력을 전광판에 보여주는 input 이벤트, 텍스트 속도와 크기를 설정하는 click 이벤트,

이러한 설정값을 적용해서 전광판에 사용자의 입력 텍스트를  좌 -> 우로 이동하는 애니메이션을

적용하는것도 click 이벤트 로 구현했습니다.

 

 

- 추가해보고 싶은것

1. 전광판에 텍스트가 이동하는 애니메이션이 무한 롤링되는 애니메이션으로 만들어 보고싶다.

>> 예를들어 "감사합니다"  메세지는 이동되면서 전광판에는 "합니다      감사" 이런식으로 이어져서 움직이도록.

2. 모바일로 접속했을때 미리보기를 누르면 전광판만 풀사이즈로 가로방향으로 보여주기 

>> 미디어 쿼리에도 세로모드와 가로모드를 검사하는 기능규칙이 있던데 한번 찾아봐서 추가해보고 싶다.

3. 효과주기 기능

>> 폰트 변경, 글 색상 변경, 전광판 배경색 변경

 

- 헤맸던 기억

텍스트 속도와 크기 버튼에서 버튼 안에있는 텍스트값을 저장하려고 자꾸 JQuery의 val()메서드를 사용했다가

시간을 좀 날렸던 기억이 있습니다.

<button type="button" id="btn1" value="24px"> 24 </button>

지금은  태그 속성에 value="24px" 를 추가했지만, 처음에는 value 속성을 추가 안하고

그냥 태그와 태그 사이의 24 값을 가져오려고 했습니다. 그래서 $('#btn1').val() 로 원 하는 값을 가져올 수 없었습니다.

 

JQuery를 안쓰고 DOM을 그냥 쓸때에도 value, innerHTML, textContent 을 써서 값을 가져오는게 헷갈리긴 했었습니다.

value 프로퍼티는 주로 <input> 요소나 <select> 요소와 같은 사용자 입력을 받는 폼 요소들에서 사용되는 것이 일반적입니다.

제가 사용한 button 태그도 보통 value를 사용하는 것이 일반적입니다.

// value="24px" 를 가져오기
let btnValue = $('#btn1').val();
console.log(btnValue) // 24px

// 태그 사이의 텍스트 24 를 가져오기
let btnText = $('#btn1').text();
console.log(btnText) // 24

 

반대로  <div> 요소, <span> 요소, <img> 요소, <p> 요소 등의 요소 들은

보통 value 프로퍼티가 존재하지 않거나 value 프로퍼티를 갖지 않는 것이 일반적입니다.
이렇게 value 프로퍼티가 없거나 의미가 없는 요소들이 몇 가지 있습니다. 

이러한 요소들은 주로 시맨틱한 마크업이나 스타일링을 위해 사용되며, 

사용자 입력 데이터를 다루기 위한 프로퍼티를 갖지 않는 특징이 있습니다.

 

6. 마무리

넣고싶은 기능들을 전부 못넣은것은 조금 아쉽고

배운것도 막상 사용할때는 완벽하게 써먹기가 쉬운건 아닌것 같았습니다.

 

그래도 별것 아니지만 직접 이건 이렇게 해보면 될것같은데 라는 생각으로

스스로 찾아가며 코드를 작성해보는게 참 즐거운 시간이었습니다.