[6주차] 2. Github Clone Coding (~Visual section Summary 영역 구현)

Github 랜딩페이지 클론 코딩

Header

• header가 아닌 header 안 inner 클래스를 가진 요소에서 header 높이를 지정하는 이유는 header 자체에 높이를 주게 되면 header 안 inner는 높이를 갖지 못한다. 그래서 높이를 두번 지정하게 되는 번거로움을 겪을 수 있다. 하지만 header 안 inner에 높이를 주게 되면 header는 height:auto가 기본값으로 자동으로 동일한 높이를 가질 수 있어 한번만 높이를 입력해도 되기 때문이다.
• 화면 가운데 정렬로 굉장히 많이 쓰는 방법: margin: 0 auto; 로 header inner 영역(메뉴 들어있는 영역 화면 가운데 정렬, 이 속성을 쓸 때는 이 속성을 쓰는 요소에 기본적인 가로사이즈(max-width, width 등)가 지정되어 있어야만 가운데 정렬이 된다.
• header inner은 header라는 특정한 section 안에 있는 모든 콘텐츠들을 특정한 가로너비를 가지고 화면에 중앙정렬 용도로 사용되는 것이기 때문에 menu-group 선택자 작성시 menu-group의 부모요소로서 선택자를 매번 입력하는 것은 매우 불편하고 어렵고 연관성도 떨어져 보이기 때문에 header .menu-group으로 선택자를 정의해서 작성
• menu-group을 header 안 수직 정렬을 하기 위해서는 header높이와 동일한 높이를 먼저 가져야 하므로 확장해야 한다. 그래서 menu-group 선택자 안에서 height를 100%로 설정하게 되면 부모요소 inner의 영향을 받아서 inner 높이 78px의 100%만큼의 높이 가짐 그리고나서 align-item:center로 수직 가운데 정렬
• main-menu 자식 요소인 메뉴들끼리 간격을 주기 위해서 main-menu li 선택자 안에 margin-right 값을 주게 되면 메뉴들 간에 사이는 확보 되지만 메뉴 하나의 버튼을 클릭하려면 그 메뉴 글자 범위 안에서만 클릭 가능하다. 이렇게 되면 안그래도 작은데 더 클릭하기 힘들어지므로 불편한 ui가 된다. 그래서 클릭해서 동작하는 영역은 실질적으로 a 태그이므로 header .main-menu li a 선택자에 값을 줘야 한다.
• header .main-menu li a 선택자는 a 태그가 인라인 요소기 때문에 레이아웃이 가능하고 범위를 가질 수 있게 display: block 값을 준 후 padding값을 부여한다.

---

3. SVG 배경과 대체 텍스트

SVG 배경

• svg 파일 : 벡터 이미지 파일
• header .logo는 클릭되는 요소는 a태그를 감싸는 요소이다. 그래서 그림이 클릭이 되려면 그 a 태그 안에 위치해야 한다. 그래서 header .logo a 선택자로 정의 후 background : url(“경로”)로 css내 배경 이미지로 삽입한다.
• logo.on은 마우스 hover 시 색상 바뀌는 로고를 보여주기 위해 사용되는 svg 파일으로 a선택자에 :hover를 주고 background : url(“경로”)로 logo.on 이미지 경로를 다시 설정한다.

대체 텍스트

• css로 background image 삽입시 대체 텍스트 입력하는 가장 대표적인 방법
  : html img 태그가 아닌 css로 background 속성으로 배경이미지 삽입시 대체텍스트를 입력하는 alt를 입력할수 없으므로 태그 안 콘텐츠로 텍스트 작성 후 그것을 대체 텍스트로 사용해야 한다. 그텍스트가 화면에 안나오고 대체텍스트로 활용하려면 들여쓰기 역할을 하는 text-indent값으로 -9999px로 설정하여 오른쪽으로 엄청난 이동을 해서 화면에서는 사라졌지만 html 구조적으로는 남아있는 상태이기 때문에 대체 텍스트 역할을 할 수 있다.
• text-indent:-9999px에서 -9999px 값을 주는 이유는 명시적인 것으로 -9999이 아닌 다른 값으로 -102345 등의 값을 주었을 때는 -9999와 동일하게 화면에서 완벽하게 사라지지만 그값이 무엇을 의미하는지는 일반적으로 코드를 디버깅할 때는 확인이 되지 않는다. 그래서 명시적으로 한 것이다. -9999를 적으면 정확하게 텍스트를 사라지게 하는 개념(대체 텍스트 기법)으로 이 수치를 적었구나라 표시를 하는 부분이다,

---

4. header 오른쪽 콘텐츠 구조

• 서브메뉴 영역과 검색이 가능한 입력양식(search양식)과 가입하는 버튼 두개로 구성되어 있고 화면이 클 때는 이 순서대로 구성되어 있다.
• 화면 사이즈가 줄어들었을 때 줄 세개(토글) 버튼 누를 시 메인메뉴, 가입하는 버튼 두개, search 양식, 서브메뉴 순으로 정렬 되므로 버튼>search양식>서브메뉴 순으로 html 구조 만들어야 한다.(위에서부터 아래로 쌓이는 개념이 먼저 작성되어야 하므로)

버튼

• 클래스 btn-group으로 두개의 버튼 영역 생성
• 클릭해서 다른 페이지로 이동하는 버튼으로 생성해야 하므로 a 태그로 버튼 작성
• CSS 전역속성으로 미리 정의해놓은 btn(a 태그 class로 btn과 btn--primary 값 넣기)으로 버튼 생성
• 버튼 구분하기 위해 각 버튼의 a태그 class로 sign-in, sign-up 각각 지정

search 양식

• form으로 영역 생성
• input 태그로 검색 부분 생성
• CSS 전역속성으로 미리 정의해놓은 input--text(input 태그 class로 값 input--text 값 넣기)로 생성
• 검색이라는 것은 페이지 하나에서 특정한 고유한 검색을 하게 된다. 일반적으로 양식이라는 것은 서버로 제출할 데이터들을 정리하는 것이기 때문에 사용자에게 입력받는 것이여서 고유해야 한다. 그래서 form 태그에 id값을 추가해야 한다.
• input의 검색도 고유한 내용이므로 id값 추가
• form 태그를 통해서 데이터를 전송하려면 search라는 id를 갖고 있는 input태그로 특정한 텍스트 값을 입력 받겠지만 전송하는 버튼이 존재하지 않으므로 type=”submit”값을 가지는 input태그를 생성하여 submit 클릭시 서버로 데이터 전송하게 해준다.
• 완성본에는 submit 버튼이 없으므로 submit이라는 버튼이 서버로 데이터 전송용으로는 필요는 하지만 화면에 안보였으면 좋겠으므로 css를 통해서 화면에 안나오게 숨긴다.

---

5. 좌우 분할(float), 요소 정렬(flex)과 순서

• sign in 버튼과 sign up 버튼 사이 공간 제어
  • btn은 display:inline-flex로 설정했기 때문에 크게보면 인라인 요소이다. 인라인 요소는 줄바꿈하면 줄바꿈된 영역을 띄어쓰기로 인식되기 때문에 sign in과 sign up 사이에는 띄어쓰기가 하나 존재한다고 생각하면 된다.(하지만 그 띄어쓰기 여백 확인 불가능)
  • btn-group에 display:flex 값 넣을시 그 띄어쓰기 사라지고 명시적으로 수평으로 만들게됨 그래서 제어하기도 수월하게 됨
  • 각 버튼에 직접적으로 margin-right을 넣어 공간 제어
• submit 버튼 안보이게

#search + [type="submit"] {
/* submit 버튼 화면상에서 사라지게 */
display: none; }

• pricing, blog, support 수평으로 작업
• sign-group을 header 안 수직 정렬을 하기 위해서는 header높이와 동일한 높이를 먼저 가져야 하므로 확장해야 한다. 그래서 sign-group 선택자 안에서 height를 100%로 설정하게 되면 부모요소 inner의 영향을 받아서 inner 높이 78px의 100%만큼의 높이 가짐 그리고나서 align-item:center로 수직 가운데 정렬
• sub-menu의 각각의 메뉴의 클릭하는 범위가 텍스트보다 더 크게 하기위해서 main-menu의 a태그에 범위를 직접적으로 늘리는 코드와 마찬가지로 작성한다.

---

float

• header에 오른쪽으로 옮기기 위해서는 float 속성 사용
• header 왼쪽 콘텐츠는 float:left; 오른쪽 콘텐츠는 float:right; 부여한 다음 그 콘텐츠들을 감싸는 부모요소에는 clearfix를 부여해서 header의 각각 왼쪽 콘텐츠는 왼쪽에 오른쪽 콘텐츠는 오른쪽에 구분되어 위치할 수 있도록 한다.
  • 하지만 이런 내용들을 매번 정의해서 사용하면 불편하기에 공통 속성으로 정의한다.
  • clearfix, float--left, float--right 로 속성 생성 후 필요한 요소에 클래스로 각각 부여

    <div class="inner clearfix">,<div class="menu-group float--left">, <div class="sign-group float--right">​

• float 속성을 사용한 자식요소들은 부모요소들이 제대로 감쌀 수 없는 요소이기 때문에 그자식요소들을 감싸고 있던 부모요소들은 쪼그라든다.
  • 이를 방지하기 위해 clearfix라는 속성을 정의해놓고 그부모요소에 클래스로 적용

    .clearfix::after {
    content: "";
    clear: both;
    display: block;
    }

 

---

flex

• flex : 수직으로 되어 있는 요소들 수평 정렬
• sign-group 안 sign-group, btn-group, search-form, sub-menu 수평정렬
• sub-menu 안 li 태그 요소 수평 정렬

---

order

• 화면 작을 시 버튼>search양식>서브메뉴 순으로 html 구조 만들어 놨음
• 화면 클시 서브메뉴>search양식>버튼 순서이므로 css order값으로 부여해서 형성
  • order 값이 높을수록 순서는 뒤로 밀려난다.
  • header .btn-group은 order: 2, form은 order: 1, header .sub-menu은 order: 0(기본값으로 생략 가능)

---

Visual(header 아래 쪽 section)

1. 구조 파악

• visual section 역시 header에서 사용했던 콘텐츠를 중앙 정렬해주는 inner라는 개념을 동일하게 가지고 있다.
• inner의 바깥으로도 배경의 이미지가 시각적으로 확인됨(즉, 배경이미지를 inner에 넣으면 안됨)
• 배경이미지는 visual section 전체 배경으로 들어간다.
• 크게 정리하면 visualsection 만들어서 inner로 몰아주고 inner 안에 텍스트 영역과 form 영역으로 나눠서 수평으로 나눠낼 것이다.

inner

• inner 안에서 왼쪽에는 how people~로 시작하는 특정한 텍스트 영역이 보이고 오른쪽에는 회원가입 페이지 대신에 회원가입을 좀 더 간결하게 할 수 있는 특정한 양식(form 영역)이 보임
• inner의 위쪽과 아래쪽에 특정한 빈공간 보임
• form 영역의 가로사이즈는 특정한 사이즈로 고정할 것이다.
• 텍스트는 언제든지 늘어나거나 축소할 수 있는 개념으로 판단하고 텍스트 영역은 자유롭게 늘어날 수 있도록 좀 더 flexible 하게 작업할 것
• 텍스트 영역과 form 영역 사이 공간 존재

---

2. Summary

• section 태그 클래스로 section과 section--visual(visual은 흔한 이름이기 때문에 section 안 visual이라고 명시)>inner 클래스 div 태그> inner 안 텍스트 영역(class==”summary”)과 form 영역 정의
• 각각의 section 부분의 택스트 부분이 제목과 설명 부분이 반복해서 나오니 공통속성으로 정의
• 클래스 이름 summary__title(제목), summary__description(설명)이 반복적으로 나오니 css에서 공통 속성으로 정의

---

3. Section 배경, Summary의 공통 스타일

Section & inner 공통속성 정의

• section
  • 때에 따라서 특정한 콘텐츠를 inner 내부에만 만드는 것이 아니므로 이 경우 section 부분에서 position: absolute가 걸릴 수 있도록 section에 position: relative 추가(위치 기준이 되는 부분을 자기 자신으로 설정하는 값으로 레이아웃에는 일차적으로 아무런 영향을 주지 않는다.)

.section { 
position: relative; 
}

• inner
  • 화면 중앙 정렬 코드 반복적으로 나타나므로 공통속성으로 부여
  • padding과 border 들어갔을 때 요소가 커지지 않게 방지
  • inner 안에서 특정한 콘텐츠가 positon: absolute를 사용했을 때 inner에서 일차적으로 걸리게 하게 위해서 inner에 position: relative 추가

    .section .inner { 
      width: 980px; 
      margin: 0 auto; 
    
      /* padding과 border 들어갔을 때 요소가 커지지 않게 방지 */ 
      box-sizing: border-box; 
    
      /* inner 기준 배치 */ 
      position: relative; 
    }​

Summary 공통속성 정의

• 한 섹션만 글자 색상은 흰색이고 하나 빼고 모든 텍스트 섹션이 회색글자이며 제목이 크고 설명부분은 작으며 글자부분에 어두운 색상의 그림자부분이 들어있음
• summary title
  • 글자 크게: font-size는 38px
  • 글자 얇게: font-weight normal(400)보다 100 작게
  • 색상은 정의x
  • 행간은 1.25배
  • 바깥쪽 아래 여백 18px
• summary description
  • 글자 크게: font-size는 26px
  • 글자 얇게: font-weight normal(400)보다 100 작게
  • 색상은 비교적 밝은 회색
  • 행간은 1.5배
  • 바깥쪽 아래 여백 18px

Visual Section

• .section--visual
  • visual section 배경 이미지: bg.jpg
  • section--visual에 background-image 속성으로 이미지 삽입
  • 배경 이미지는 반복하지 않고(no-repeat), 위치는 왼쪽 하단(bottom left)이다.
  • section의 높이를 가지는 영역에서만 배경 이미지 나타남 그리고 배경이 축소되면 축소되는 대로 배경 이미지가 잘리는 문제점을 가지고 있음
  • 화면이 커져도 배경 이미지가 잘리지 않고 정상적으로 출력되게 만들어 주기: background-size: cover(배경 이미지가 들어가는 요소의 크기가 어떻게 되던지 간에 배경 이미지를 비율에 맞게 늘려서 전체가 무조건 다 덮이도록 만들어주는 값, 배경사이즈를 요소의 전체 영역으로 cover 해라)
• .section—visual .inner
  • visual--section안 inner는 header 안 inner와 max-width와 margin 값(화면 중앙정렬) 동일(공통속성으로 부여)
  • inner안 내부 위아래 여백 필요(padding으로 부여)
  • .section--visual .summary__title
  • 글자 색은 흰색
  • visual section 부분의 title은 다른 section의 글자 크기보다 큰 편(54px)
  • box-shadow는 일반적인 사각형 형태의 요소에 그림자를 주는 개념이므로 text-shadow(x축, y축, 블러, 색상,[두번째 그림자 값])를 준다. 이 text-shadow는 box-shadow 쓰는 방식과 완벽히 같진 않지만 매우 유사하다.
• .section--visual .summary__description
  • title과 속성값은 똑같되 font-size는 같지 않고 적용x
• 배경 이미지 어둡게
  • 배경이미지 앞 텍스트 바로 뒤쪽에 좀 더 어두운 배경을 만들어서 반투명하게 깔아줌
  • 전에 했던 것처럼 버튼을 조금 더 어둡게 덮어버리는 개념과 동일하다
  • visual section 정의한 css 속성에 before 가상요소 선택자 같이 써서 만들기(.section--visual::before)
  • 모든 방향(top, left, bottom, right)에 0을 값으로 주고 부모요소 기준으로 배치(position:absolute)할 시 width: 100%와 height:100%와 동일한 효과(전체 영역을 차지하는 효과)

---

구현 페이지

---

Tips

• VS 창분할 : 창분할 하고픈 파일 탭에 오른쪽 마우스 클릭 후 원하는 방향 선택 후 분할
• CSS에서 색상 지정시 색상이름으로 지정하면 브라우저마다 다르게 해석할 수 있으므로 추천하지 않음(16진수로 표현하는 것이 좋음 #(헥사코드는 반복될경우 세문자로 줄일 수 있음 #ffffff>#fff))
• 기본 값을 알면 굳이 입력하지 않아도 될 값을 알아서 좋다.
• Visual studio code 들여쓰기 : tab, 내어쓰기: shift+tab
• css 선택자 작성시 조상요소부터 하나하나 타고 내려가면서 후손요소까지 다 적게 되면 보기 어렵고 불편해지므로 연관성이 없는 부모요소는 생략하고 하위요소만 작성해도 괜찮다.
• 경로 ../는 해당하는 파일 디렉토리 밖으로 한번 나가라는 뜻
• id를 갖고있는 요소는 선택자로 정의시 부모요소와 같이 정의할 필요 없이 #id로 정의할 수 있다. 부모요소를 명시하는 것은 비효율적이다.(즉 id 선택자는 부모요소 생략 가능)
• 다음 형제 요소 선택자 기호: +
• 속성 선택자: [속성]
• 토글버튼 = 햄버거 버튼(가로 줄 세개)
• 보통 큼직한 개념에는 position: absolute가 걸릴 수 있도록 position: relative를 많이 추가하는 편이다.