[웹프로그래밍기초🎀] 5주차 개발일지

-------

개발 블로그를 티스토리로 옮기며 기존의 네이버 블로그에 작성한 내용을 옮겼습니다.

https://blog.naver.com/0yeonjae2/222298787887

-------

이론 복습하기

1. position : relative & position : absolute & position : fixed

relative : 기본값 / 겹치지 않게 위치시킴

absolute : 상위요소 내에서 위치를 잡음

fixed : 고정됨(주로 헤더에서 사용)

 

2. align-items와 justify-content를 이용한 정렬

 

display : flex;

align-items : center;

justify-contents: center;

▲가운데 정렬 / 배열하고자 하는 것의 상위 요소에 적용한다

이 때 display가 없다면 align-items와 justify-contents는 적용되지 않는다. 위와 같은 방식을 사용할 때 반드시 display를 사용해야 한다.

 

left: 50%;

margin-left : (너비/2); (==margin-left : calc( 너비/2 ))

▲가운데 정렬

이 때 calc는 calculation의 줄임말이다. calc(너비/2)에는 너비의 값을 넣기만 하면 된다. 즉 나누기를 사용자가 할 필요가 없다. 하지만 calc를 사용하지 않을 때는 사용자가 값을 계산해 넣어야 한다.

 

추가적으로 width를 통해 화면 내에서 요소가 몇 %를 차지하는 지를 설정할 수 있다.

 

3. margin & padding

margin는 적용하는 요소와 외부요소 간의 간격을 의미한다.

padding은 적용하는 요소와 내부 요소 간의 간격을 의미한다.

 

padding은 padding : 70px 90px ; 와 같이 사용하기도 하는데, 이 때 앞의 숫자는 위아래, 뒤의 숫자는 좌우 간의 간격을 의미한다.

---

실습하기

이번 주는 저번 주에 해 놓은 바탕에서 세부사항을 조금씩 수정하는 방식으로 클론 코딩했다.

 

1.파비콘 만들기

왼쪽이 내가 만든 것이고, 오른쪽이 원래 사이트이다

파비콘 만드는 방법은 생각보다 어렵지 않다. 다만 파비콘이 될 만한 사진을 찾는 것이 어렵다..

처음에는 그냥 지니 로고가 있는 아무 사진이나 쓰면 되겠다고 생각해서 사이트에서 변환해서 사용했었다.

그런데 아래 사진처럼 투명하게 나오지 않고 사각형인 채로 나와서 투명하게 만드는 방법을 찾아봤다.

그림판 3D를 통해서 배경을 없애고 다시 투명한 배경에 로고만 있는 파비콘을 만들어서 넣어줬다.

 

2. 헤더 정리해 주기

저번 주의 헤더는 아래 사진처럼 정렬도 안 되어있고 미관상 좋지 않았다.

4월 2일부터 4월 5일까지 조금씩 정리했다.

처음 시도한 것에 비하면 많이 예뻐졌다. 이용권 구매 옆에 있는 박스는 지니 사이트에서 다운로드해서 잘라서 사용했다. 돋보기도 똑같은 방식으로 하려고 했는데 사진이 많이 깨져서 그냥 GOOGLE MATERIAL DESIGN에서 찾아서 넣었다. GOOGLE MATERIAL DESIGN에는 엄청 많은 아이콘들이 있어서 편하게 쓸 수 있다. 색을 지정할 수 없다고 생각했는데 css에서 지정할 수 있었다!!

 

hober는 위와 같이 마우스를 가져다 대면 무언가가 새로 생기는 것이다. 처음엔 hober가 뭔지 잘 몰라서 저러한 것을 어떻게 구현해야 할지 고민을 했었는데 생각보다 쉽게 구현이 가능하다. 화면 상 생기는 변화라서 JS를 사용해야 하지 않을까 싶었는데 css로 가능해서 신기했다.

header .header-third ul.main li.menu .sub_menu  {
    position: absolute;
    box-sizing: border-box;
    display: none;
}
header .header-third ul.main li.menu:hover .sub_menu {
    margin-left: auto;
    display: block;
    padding: 5px 0px 4px;
    color: #27282d;
    white-space: nowrap;
    padding: 5px 0 4px;
    border: 1px solid #a6afb6;
    border-top: 3px solid #0096FF;
    border-radius: 0 0 4px 4px;
    background-color: #fff;
    font-size: 12px;
    box-sizing: border-box;
    width: 13%;
}

 

:hover가 없는 위쪽의 코드가 마우스를 가져다 대기 전이고 :hover가 있는 아래쪽 코드가 바로 위의 사진에서 나타나는 상태를 구현한 것이다.

 

 

화살표를 누르기 전

화살표를 누른 후

원래 목표는 위의 표처럼 주어져 있는 레이아웃 위에 표들이 뜨는 것이었는데, js에서는 어떻게 표현해야 할지 잘 몰라서 일단 저렇게까지만 해 두었다. (+22.01.31. js 대신 css로 구현 가능)

구상한 것을 구현하기까지 정말 많은 시간이 걸린다는 것을 느꼈다. 이번 주는 다른 주에 비해 많이 시도했는데 실제로 성공한 횟수는 엄청 적었다. 지니 사이트와 내가 만든 것을 비교할 때 많이 다른 것이 느껴져 중간에 약간 지치기도 했는데 이번 주 목표였던 헤더를 한 번 정리한 것에 의의를 두기로 했다.

 

 

---

첫 번째 과제 <addEventListner> 살펴보기!

addEventListner는 이벤트를 만들고자 할 때 js에서 사용하는 기능이다.

이번 주에 로그인/회원가입 칸 옆의 화살표에 대해서 click란 이벤트를 사용했다.

아래 코드와 같은 방식으로 addEventListner를 사용하면 된다.

const menuopenEl = document.getElementById('btn--open')
const menucloseEl = document.getElementById('btn--close')
const menuEl = document.getElementById('login--list')


menuopenEl.addEventListener("click", function() {
    menuopenEl.style.display = 'none'
    menucloseEl.style.display = 'block'
    menuEl.style.display = 'block'
})

menucloseEl.addEventListener("click", function() {
    menuopenEl.style.display = 'block'
    menucloseEl.style.display = 'none'
    menuEl.style.display = 'none'
})

 

찾아보니 클릭 이벤트, 마우스 이벤트, 스크롤 이벤트, 터치 이벤트, resize(화면의 크기 변화) 이벤트 등등 다양한 종류의 이벤트가 있다고 한다. 그래서 간단히 정리해보기로 했다

https://velog.io/@daybreak/Javascript-Event%EC%A2%85%EB%A5%98

 

[Javascript] ⭐️Event⭐️

이 글을 참고해서 정리했다. 

이벤트명	내용
keydown	키보드를 눌렀을 때 발생
keyup	키보드를 누르고 떼는 순간 발생
keypress	키보드를 눌러 어떤 텍스트가 작성되는 순간 발생
click	마우스 버튼을 클릭하고 버튼에서 손을 뗐을 때 발생
dbclick	마우스 버튼을 2번 연속으로 더블클릭했을 때 발생
mouseover	마우스 포인터가 요소 위에 올라갔을 때 발생
mouseout	마우스 포인터가 요소 밖으로 벗어났을 때 발생
mousemove	마우스 포인터가 움직일 때 발생
submit	전송 버튼을 누르거나 텍스트 필드에서 엔터키를 눌렀을 때 발생
reset	폼을 초기화해야 할 때 발생
change	폼 필드에서 변화가 생겼을 때 발생
focus	웹브라우저가 특정 요소에 집중할 때(ex. 해당 요소 클릭) 발생
blur	focus의 반대(ex. 탭을 누르거나 필드 밖을 클릭) 상황일 때 발생
load	문서 및 추가 자원(이미지)들을 불러왔을 때 발생
resize	창의 최대화 버튼을 눌렀거나 창의 크기를 조절할 때 발생
scroll	스크롤 바, 마우스 휠, 키보드(↑↓←→) 사용 시 발생
unload	해당 페이지를 벗어났을 때 발생

 

---

두 번째 과제 codepen에 자주 사용하는 내용 정리하기!

평소에 실습을 할 때 VSCODE를 여러 개 열어서 실습하곤 했었는데, 이제는 codepen에 정리해서 헷갈리거나 모르는 게 생기면 참고하기로 했다! 이번주는 3주차에 배운 html 태그들을 정리했다.

매주 복습한다는 생각으로 한 주 차씩 정리할 예정이다.