3주차 회고
저번주에 이어서 자바스크립트에 대해 배우고 있다. DOM의 속성, classlist, event, jQuery, media쿼리 등을 배웠으며, 간단한 실습 과제도 수행했다.
1. jQuery
: 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 라이브러리
=> jQuery는 빠르고 작으며 기능이 풍부한 자바스크립트 라이브러리라고 한다. 이를 통해 문서 조작, 이벤트 처리 등을 훨씬 간단하게 만들어줄 수 있다.
1. jQuery 메서드
- $(선택자).val() : 값을 가져올 수 있다.
- $(선택자).val("설정할 값") : '선택자' 요소에 "설정할 값"을 value 값으로 줄 수 있다.
- $(선택자).css("속성", "속성값") : '선택자' 요소에 css를 적용할 수 있다.
- $(선택자).attr("설정할 값") : '선택자' 요소의 "속성" 을 적용할 "속성값" 으로 변경할 수 있다.
- $(선택자).text("글자") : '선택자' 의 text 내용을 변경할 수 있다.
- $(선택자).html(html) : html 내용을 변경한다.
이외에도 jQuery코드를 통해 요소 추가, 삭제, 탐색, 클래스 조작과 같은 기능도 실행할 수 있다.
2. eventListener
: 이벤트가 발생했을 때 처리하는 함수
- 로딩 이벤트 -> .ready() : 모든 엘리먼트가 로딩을 마치면 실행된다.
- 마우스 이벤트 -> click(), mouseover(), hover(), scroll()
- 키보드 이벤트 -> keydown(), keyup()
jQuery를 이용해 사각형 색, 태그 색을 클릭 시마다 바뀌게 하는 실습을 해볼 수 있었다.
먼저 사각형은 colors 배열에 색을 정의한 클래스 명을 넣어주고, jQuery를 이용해 div의 클래스명을 클릭할 떄마다 배열 순서대로 바뀌도록 함수를 설정했다. 또한 배열의 마지막 요소까지 간 후에는 다시 처음으로 돌아가 반복 실행될 수 있도록 i를 0으로 초기화시키는 if문도 같이 넣어주었다.
다음으로 span 태그를 누를 때마다 색이 바뀌도록 랜덤으로 색을 설정하는 함수를 정의한 후 jQuery를 사용해 클릭 이벤트로 정의했던 함수를 실행해주었다.
2. 반응형 웹
: 동일한 페이지를 보여주지만 디바이스 크기에 따라 레이아웃을 변경하는 웹
- 미디어 쿼리 (@media)
: 미디어 쿼리는 서로 다른 미디어 타입에 따라 css를 별도로 지정할 수 있게 해주는 기술이다.
: 미디어 쿼리는 break point를 필요로 한다.
=> break point : media query가 적용될 지점. break point마다 layout을 변경
아래의 코드는 최소 크기인 768px보다 화면의 크기가 작아지면 화면 색을 변경한다는 의미이다.
=> 또한, 미디어 쿼리에는 변경되는 내용만 적어야 한다.
- portrait & landscape
=> portrait : 모바일에서 가로 모드일 때 적용 / landscape : 모바일에서 세로 모드일 때 적용
- display:grid
: 부모 요소에 display:grid 속성을 주면 자식 요소들이 정렬된다.
: grid-template-columns => grid 크기를 지정하는 속성. column으로 배치
==> ex. 1fr 1fr 1fr = 균일하게 1:1:1 비율인 3개의 column을 만들겠다는 의미이다.
: grid-template-rows => grid 크기를 지정하는 속성. row로 배치
미디어 쿼리를 배운 후에 실습이 진행됐다.
첫번째로, 미디어 쿼리를 사용해 화면의 크기에 따라 사각형의 위치를 변경시켜 봤다.
실습을 마치고 아쉬웠던 점은 화면의 크기가 커졌을 때의 사각형 간격이 너무 넓어진다는 부분이었다.
=> grid-template을 사용해서 그런지는 아직 모르겠지만 더 고민을 해보고 수정도 시도해보려고 한다...!
미디어 쿼리로 중단점을 설정해주고, display:grid와 grid-template 속성을 사용해 사각형의 위치를 구현했다.
두번째 실습으로 header의 레이아웃을 화면의 크기에 따라 변경해주었다.
헤더의 구조를 잡기 위해 이전에 배웠던 내용인 display:flex, position, transform 등의 속성을 다시 사용해봤다.
웹 사이트 화면이 커지면 한줄의 헤더로 만들고, 화면이 작아지면 모바일 화면처럼 헤더를 여러줄로 나누는 실습이었다.
먼저, 화면이 클 때는 display:flex 속성과 justify-content속성을 주로 사용했다.
수평 정렬과 묶음을 일정한 간격으로 배치하기에 효과적일 것으로 판단했기 때문이다.
다음으로 작은 화면일 때는 display:grid, position 속성을 사용했다.
jQuery를 배우면서 스크립트 코드가 간결해져 실습을 할 때 훨씬 쉽게 코드를 작성할 수 있었다.
아직 속성이나 함수이름이 헷갈리거나 생각이 안나는 경우도 많아 찾아보기도 하지만 계속해서 사용하다보면 자연스럽게 코드를 작성할 수 있을 거라고 생각한다.
특히 사각형 색상을 바꾸는 jQuery 실습을 할 때, jQuery로 색상을 변경한 후 1번에서 끝나지 않고 반복되도록 구현하기 위해 함수 설정에 대해 고민을 했다.
처음에는 for문을 사용하기도 했지만, jQuery가 정상적으로 작동하지 않고 1번에서 5번 색상으로 건너뛰어지는 등 오류가 생겼다.
따라서 jQuery는 원래대로 두고, 마지막에 도달했을 때 i만 초기화를 해주자는 생각이 들었고, 초기화는 if문을 통해 간단히 정의할 수 있었다.
알고리즘에 대해 고민해볼 수 있어서 좋았고, 처음에 생각했던 for문의 코드보다 더 간단한 코드를 작성할 수 있었던 것 같아 뿌듯했다.
반응형 웹은 배우면서 프론트엔드 개발을 할 때 사용할 일이 많겠다고 느꼈다.
그래서 이전에 배운 display:flex, position 등의 개념도 함께 적용해보려고 시도했다.
header의 모양을 변경하는 실습을 하며 반응형 웹의 차이점과 목적을 잘 느낄 수 있었다.
크기에 따라 레이아웃을 변경함으로써 사용자가 웹사이트를 이용하는 데 더 편리하게 느낄 수 있다.
확실히 프론트엔드는 화면의 구성이 중요하다고 생각하고, 이에 대한 고민을 하며 구조를 형성할 수 있는 경험을 많이 하면 좋겠다.