[6주차] 4. Github Clone Coding 완성

Github 랜딩페이지 클론 코딩

Footer

1. 구조 파악, 메뉴 링크와 카피라이트

• footer 영역은 pricing 영역 끝부터 마지막 페이지 까지
• 화면 중앙 콘텐츠 몰림 : inner 존재
• 화면 클 시 왼쪽 메뉴(카피라이트), 로고, 오른쪽 메뉴(contact gitjhub~) 크게 수평으로 형성
• 화면 특정이상 작아질 시(반응형이 되었을 때) 로고 없고 contact github~, 카피라이트~ 순으로 수직으로 쌓임(그래서 일단 이렇게 html 구조 형성 후 css로 수평으로 형성)
• 같은 메뉴 스타일 형성할 것이기 때문에 site-links 라는 같은 class를 ul(왼쪽메뉴, 오른쪽 메뉴) 태그에 부여
• logo 클릭 시 메인 페이지로 이동
• 카피라이트 부분 제거하고는 모든 메뉴는 a태그로 wrapping

2. 메뉴 스타일, 순서가 다른 좌우 분할(Float)

메뉴 스타일

• footer .inner
  • 위아래 여백
  • 위부분에 선 존재
• footer .site-links
  • 브라우저 크기 클 때 메뉴들 카피라이트~, 로고, contact 순 수평화
• footer .site-links li
  • 메뉴들 오른쪽에 여백 추가
  • 글자 크기 12pc
  • 카피라이트 색 변경
• footer .site-links li a
  • a 태그 안에 들어 있는 메뉴들 색상 파스텔 계열의 파란색으로 변경
• footer .site-links li a:hover
  • 마우스 hover 시 밑줄 쳐지게 하기

순서가 다른 좌우 분할(Float)

• 공통속성으로 작성된 float clearfix에서 float--left(카피라이트~), float--right(contact github~)를 자식요소 클래스로 부여하고 clearfix를 부모요소(inner)에 부여하여 float 속성 적용

3. SVG 태그와 fill 속성, 중앙배치(position)

SVG 태그

• 로고 가운데 넣을 때 가운데 정렬하게 되면 층이 달라지게 되서 안됨 그래서 중앙으로 배치만 할 것이다.
• 가운데 로고 배치 : svg태그로 로고 삽입(logo_footer.svg)
• 확장자 svg 파일 더블 클릭시 svg태그 코드가 보임. 그 코드를 긁어서 사용

중앙배치(position)

• logo의 부모요소 inner는 공통속성으로 이미 position값을 relative로 갖고있음
• footer .logo
  • position 값을 부모요소 기준배치(부모요소에 relative 값 필수)
  • 가운데 정렬하는 것이 아니라 배치하는 개념(전체 영역을 다 사용하는 개념 top:0, bottom:0, left:0, right:0 + 가운데 정렬 margin: auto + 요소 크기 설정)

fill 속성

• 로고 마우스 hover시 색상 변경됨(코드로 삽입했기 때문에 색을 바꾸는 svg 파일을 찾아서 넣을 필요 없고 svg 태그 선택자를 통해 css로 색상 제어 가능)
• fill 속성 :svg 파일 색 채우기
• footer .logo:hover svg
  • fill 속성으로 contact github~ 메뉴와 동일한 색상으로 채우기

---

반응형

• 반응형으로 해서 뷰포트의 사이즈가 조절되더라도 각각의 콘텐츠들이 깨지지 않고 정상적으로 나올 수 있는 환경 구성
• github 예제를 모든 디바이스에서 지원 가능한 형태로 반응형 작업

1. 미디어 쿼리 @media

• 반응형 작업을 위해선 미디어 규칙을 정해놔야함
• 특정 뷰포트 크기 일 때 구조를 어떻게 바꿀 것인가를 설정하는 것이다.
• 다양한 미디어 유형이나 장치에 따라 , 서로 다른 스타일 규칙 적용
• 미디어 특성 : 일종의 조건문이라고 생각
• 미디어 타입이 미디어 특성일 때 css 코드 적용한다는 뜻
• 현재 뷰포트에 최적화된 구조를 만들게 도와주는 것

작성법

@media 미디어 타입 and (미디어특성) {
css코드
}

미디어 타입

• 미디어 타입은 생략 가능 이럴 시 and 굳이 작성 하지 않아도 됨 -> all로 처리됨
• all : 기본값(생략 가능)이며, 모든 미디어 타입에 적용
• screen : 컴퓨터 화면, 타블렛, 스마트폰 등 볼 수 있는 모니터 화면이 있는 디바이스
• print: 인쇄 전용(일반적으로 사용 x, 추가적인 기능으로 제공)

미디어 특성

• ;이 들어가지 않음(중요!)
• width : 뷰 포트 가로 너비
• max-width: 뷰포트 최대 가로 너비(이하), 가장 많이 사용
• min-width: 뷰포트 최소 가로 너비(이상), 가장 많이 사용
• height: 뷰포트 세로 너비
• max-height: 뷰포트 최대 세로 너비(이하)
• min-height : 뷰포트 최소 세로 너비(이상)
• orientation : 뷰포트 방향(portrait 가로보다 세로가 긴 형태, landscape 가로가 세로보다 긴 형태), 핸드폰을 옆으로 눕혔을 때 상태 등 조절,
• orientation 디바이스 마다 적용된 것은 개발자 도구의 toggle device tool bar로 확인 가능

 

---

2. 미디어 옵션

• 해당하는 사이트를 반응형을 적용할 것이고 반응형을 적용하려면 미디어 쿼리를 적용해야 하는데 미디어 쿼리에 특성부분에 너비를 지정하게 되는데 그 너비를 미디어 종류마다 나누게 된다.
• 데스크탑, tablet, smartphone을 어느 픽셀로 제공할 것인지 정의해야 한다
• 디바이스에 따른 단위 설정은 만들려 하는 사이트는 기획적인 단계 또는 디자인적인 단계에서부터 결정하는 것이 좋다
• 깃허브 예제 페이지의 경우 iphone(768), ipad(1024) 기준으로 설정
  종류 device px

  종류	device	px
  large devices	desktops	1024px 이상
  medium devices	tablets	1024px 이하
  small devices	tablets, phones 동시 지원	768px 이하

• 좀 더 명확한 기준을 삼기 위해서는 https://getbootstrap.com/docs/5.1/layout/grid/ 에서 grid option에 bootstrap에서 제공하는 기본적인 px 규칙이 나와 있는데 extra large는 일반적으로 desktop이고 mediumsmall의 경우는 일반적인 smartphone의 개념으로 생각하면 되고 이것은 픽스된 개념이 아니고 정의하기 나름이므로 정의하기 어려울 경우 이런식으로 제공되는 개념들을 참고해서 만들 수 있다.
• ~large의 경우는 tablet 버전이고 extra small~
• 최적화하기 위해서는 사이트를 잘 분석해서 최적화된 사이즈를 정하면 됨

---

3. 미디어 옵션 - Medium Device

토글 버튼

• 뷰포트가 작아지면서 1024px 보다 작아지는 상태가 되면 상단 메뉴가 다 사라지면서 오른 쪽에 토글 버튼이 생성되고 헤더의 세로너비가 줄어듦. 그 토글 버튼을 누르면 헤더 세로너비가 늘어나게 되면서 사라진 메뉴들이 수직으로 쌓여 있는 형태로 변경됨
• header .section .inner
  • .section .inner는 명시도 점수가 20점이고 미디어 쿼리 내에서 header 부분에만 속성을 다른 값으로 덮어쓰게 하려면 이것보다 명시도 점수가 높아야 덮어 쓸 수 있기 때문에 header .section .inner로 선택자를 부여한다.
  • 이 사이트가 가지고 있는 헤더 부분의 inner가 완전 왼쪽 끝부터 오른쪽 끝까지 붙어있는 형태이다. 그래서 inner 가 가지고 있는 가로 너비 초기화(.section .inner는 max-width가 980px인 상태이므로 미디어 쿼리 내에서 초기화 할 때 max-width:none로 초기화)
  • header 의 높이는 자동으로 늘어나게 해야 하기 때문에 세로 너비를 고정해놓으면 안됨.
  • 내부 여백 정리- 좌우 여백 추가
• header .menu-group, header .sign-group
  • 뷰포트 가로 너비 1024 이하 줄었을 경우 기본적인 메뉴들은 화면에 나타나면 안되므로 float 내용 초기화
• header .logo
  • 위 아래 내부 여백 추가
• header .toggle
  • 뭔가가 나타나려면 사라져 있어야 나타날 수 있다. 없는 상태에서 나타나는 것이므로 없는 상태를 기본적으로 만들어 줘야 함. main-menu와 sign-group이 사라지게 만들기(사라지게 할 요소에 클래스 toggle 부여)

---

Header 콘텐츠

• 토글 버튼을 눌렀을 때 메뉴가 나타나는 이벤트 작업은 js를 통해 작업

main menu

• header .menu-group
  • 수직으로 쌓이도록 display 속성 변경
  • 가로 영역 전체 너비 쓸 수 있게
• header .main-menu
  • display 속성 block으로 변경
  • 메뉴별 간격 추가
• header .main-menu li
  • 구분선 추가
• header .main-menu li a
  • 위아래 내부 여백 추가, 좌우 여백 초기화

sign group

• header .sign-group
  • display 속성을 수직으로 쌓이게 변경(flex에서 사용됐던 order 속성도 자연스레 취소됨)
  • 위아래 내부 여백 추가, 좌우 내부 여백x
• header .btn-group
  • display 속성을 수직으로 쌓이게 변경(flex에서 사용됐던 order 속성도 자연스레 취소됨)
• header .btn-group .btn
  • 버튼 안 글씨 가운데 정렬
• header .btn-group .btn .sign-in
  • 바깥쪽 오른 쪽 여백 초기화
  • 바깥 밑 여백 추가
• #search-form
  • 바깥쪽 오른쪽 여백 초기화
  • 바깥 위 여백 추가
• #search
  • 가로너비 100%, 세로너비 42px
  • 가운데 정렬
• header .sub-menu
• 바깥쪽 오른쪽 여백 초기화
  • 바깥 위 여백 추가
  • display는 flex니까 justify content로 가운데 정렬
• header .toggle.on
  • display 속성을 수직으로 쌓이게 변경

toggle 이미지 클릭시 클래스 toggle에 클래스 on 추가하는 js

• html에 js 연결시 body 태그 끝나기 직전에 script 태그로 작성하거나 head 태그 맨 밑에 작성하되 defer라는 속성 추가(html 문서가 전체를 다 읽으면 그때 js 가동)
• toggle : 보이고 사라지는 개념
• js 전역 더럽히지 않기 위해(범위 설정) 즉시 실행 함수 추가
• 요소 담고 있을 경우 변수이름 앞에 $기호 추가(안써도 됨)
• getElementById로 아이디 선택자 찾을 경우 아이디 앞에 #안넣고 찾아도 됨
• 이벤트 : 사용자가 어떠한 버튼을 마우스로 클릭할 시 이 클릭하는 행위를 이벤트라 한다.
• addEventListener : 이벤트 감지
• querySelectorAll과 getElementById로 찾은 것들을 저장한 변수는 유사배열로 node list이기 때문에 [].foreach.call(유사배열 변수, function(매개변수를 반복될 toggle요소로 지정)로 배열로 바꿔주고 함수를 실행하는 것을 반복. 수정하다 보면 toggle이라는 클래스의 요소의 개수가 유동적으로 변동될 수 있기 때문에 계속 반복한다.
• classList : 클래스 선택자를 제어해주는 속성
• toggle 클래스에 on클래스를 넣고 뺌(클릭시)을 통해서 사라졌다 나타나는 것을 표현
• toggle이라는 명령은 on이라는 클래스가 있으면 지우고 없으면 추가하는 역할이다.

---

리사이즈 이벤트

• window : 브라우저
• resize: 브라우저의 크기가 늘어나거나 줄어들 때(조절될 때)의 이벤트
• toggle 요소의 on class 제거해주는 함수를 js에 작성 후 실행
• 브라우저 화면이 줄어들어 있을 때만 toggle 버튼 나타나게 하고 toggle 버튼이 일시적으로 닫힌 상태로 구현
• 미디어 쿼리로 덮어쓰려고 할 땐 미디어 쿼리로 완전히 toggle-btn으로 생성하는 것보단 생성한 다음에 보이게만 설정하는 것이 좋기 때문에 display:block 빼고 나머지 값은 미디어 쿼리 내부가 아닌 바깥에 미리 정의해두는 것이 좋다
  • #toggle-btn
    • display:none
    • 배경 이미지 생성(toggle-btn.svg)
    • 부모요소(inner 부분에 positon: relative 값 부여(이미 section .inner 공통속성으로 존재)) 기준 배치
    • 커서포인트 손가락 모양으로 바꿔주기
    • #toggle-btn 안 콘텐츠를 대체 텍스트화
• 기본적으로 요소를 정의하는 내용을 미디어 쿼리로 추가하는 것은 그다지 좋은 방법이 아니다.

---

Visual 콘텐츠

• summary와 폼 양식이 가운데 정렬 되면서 수직 정렬 됨
• .section--visual
  • 배경이미지를 마스코트가 잘보이는(작아졌을 때 레이아웃에 특화되어 있는) 이미지(bg-small.jpg)로 변경
• .section--visual .inner
  • 수직화
  • 최대 가로 너비 초기화
• .section--visual .summary
  • 가운데 정렬
  • 바깥쪽 오른쪽 여백 초기화
  • 바깥 위쪽 여백 추가
• #sign-form
  • 정의되어 가로너비를 auto로 변경
  • max-width값 초기화 동시에 값 지정
  • margin으로 가운데 정렬

Feature 콘텐츠

• .section--feature .summary
  • 위아래 좌우 각각 다른 값으로 내부여백 주기
• .section--feature .tiles li
  • tiles가 한 줄에 두개의 column으로 변화
• .section--feature .tiles li:nth-child(2)
  • 두줄로 변화했을 때 두번째 위치한 아이템(두번째, 네번째 아이템)에는 오른쪽 선 필요 없음, 네번째 아이템에는 이미 적용안함 돼있어서 두번째에만 오른쪽 선 필요없는 것을 적용하면 됨
• .section--feature .tiles li img
  • 내부 여백 추가해서 아이콘 이미지 크기 축소

Where is 콘텐츠

• 지도 부분 좌우 여백 생김
• .section--where-is .inner
  • 최대 가로너비 초기화
  • 위아래좌우 내부 여백 값 다르게 추가

Pricing 콘텐츠

• .section--pricing .inner
  • 최대 가로 너비 값 초기화
  • 내부 여백 위아래 동일 좌우 동일 값 부여
• .section--pricing .card .cell2
  • 글씨 작아지게

Footer 콘텐츠

• footer .inner
  • 위아래 좌우 여백 맞춰주기
• footer .logo
  • 화면 중앙 로고 사라짐

미디어 쿼리 파일 관리

• main css에서 미디어 쿼리 내용을 지운 후 미디어 쿼리를 다른 파일로 관리할 수 있도록 추출(main_medium.css로 작성 @media는 없는 상태로)
• html에 미디어쿼리 내용 작성된 css를 main.css 선언한 태그 밑에 link태그로 작성하고 media=”미디어 타입 and (미디어 특성)”을 link 태그 속성으로 추가해서 작성

---

3. 미디어 옵션 - Small Device

• 브라우저 가로 너비 768 이하 device

공통속성(Common)

• .summary__title
  • main css의 글자 크기보다 작게
  • 우선 순위 때문에 small 공통 속성에 지정한 visual 글자 크기가 지정되지 못함 그래서 !important 플래그 추가
• .summary__description
  • main css의 글자 크기보다 작게

Feature

• .section--feature .tiles li
  • 한 줄에 한칸식(width: 100/1 %)
  • 아래 선만 존재하고 오른쪽 선 존재x

Where is

• #map
  • 가로 사이즈 초기화(가로가 100%인 상태에서 margin 값 줄 시 가로너비에 문제 생김(%는 부모요소에 영향을 받기 때문에) 그래서 auto로 초기화)
  • 지도만 좌우 바깥여백 없어지고 늘어나게 하기(음수 값을 통해)
  • 지도가 화면 끝에 붙어 있게 돼서 좌우 선 필요 없어짐Pricing
• .section--pricing .card
  • 수직 형태로 변화
• .section--pricing .card .cell2
  • 왼쪽 선 필요없어져서 초기화
  • 수직화 되면서 필요해진 위쪽 선 추가Footer
• footer .site-links
  • 메뉴 그룹 수직 형태로 변화
  • contact github 메뉴들과 카피라이트 메뉴들 양쪽 끝으로 찢는 float 제거
• footer .site-links:first-child
  • 첫번째 줄과 두번째 줄 사이 여백 추가(첫번째 줄에 바깥 밑 여백 추가 or 두번째 줄에 바깥 위 여백 추가)
• footer .site-links li
  • display:inline
    • footer .site-links 에서 가운데 정렬시 justify content 활용시 엄청 줄였을 땐 제대로 구현 안돼서 text align으로 적용시켜도 기존 display:flex 속성 때문에 가운데 정렬이 되지 않음 그렇다고 display: block으로 다시 지정하면 가운데 정렬은 되긴 되는데 내용그룹이 다 분해되서 수직화 됨 이를 방지하기 위해 사용
    • 특정한 형태가 있는 버튼이 아니라 텍스트로 이루어진 버튼이기에 이 속성을 사용시 각각의 버튼이 텍스트처럼 해석이 되고 정렬이 수평으로 된다.
    • 화면의 크기가 많이 줄더라도 정상적으로 줄바꿈 되면서 잘 출력됨

---

Tips

• , 로 다중 선택자 가능하다. 다중 선택자 사용시 가독성이 떨어지니까 줄바꿈해주기
• 미디어 쿼리로 덮어쓰기 할 때 명시도 점수 확인 필수!