[6주차] 1. Github Clone Coding(~왼쪽 메뉴 콘텐츠 구조까지)

Github 랜딩페이지 클론 코딩

• 반응형, 동영상 삽입, 수평 예제, 지도api 방법 배움
• 반응형: 사이즈가 줄 때마다 어떻게 변환되는지
• 수평이 어떻게 줄바꿈 되는지
• 모바일에서도 잘 나오게
• github 예제 완성본 코드 : https://github.com/HeropCode/Github-Responsive

---

head 태그 구성

1. viewport, IE 랜더링

정보 구성

• 작성자 
• <meta name="author" content="YOONS">
• 외부적으로 보이진 않고 브라우저 내부 상 확인하는 정보 :

  <meta name= "description" content="GitHub clone coding / GitHub is where people build software. More than 31 million people use GitHub to discover, fork, and contribute to over 100 million projects.">

viewport

: 화면 상에 우리가 작성한 레이아웃이 나오는 전체 영역

• 반응형 웹사이트를 만들기 위해서는 viewport 세팅(meta name="viewport" content =”뷰포트에 세팅할 내용”)해줘야한다.
• 뷰포트 세팅
• content= “” 안에 세팅할 내용 작성
• 추가적인 것은 ,로 구분
• 뷰포트 가로너비 세팅 : width=device-width(사용하는 디바이스의 가로너비를 그대로 사용 하겠다.
• initial-scale : 다양한 디바이스의 초기화면 배율(최초의 scale) , 확대되어있거나 축소되어 있는 걸 원하지 않을 땐 값을 1로 설정
• user-scalable : 일반적인 사용자가 디바이스 화면을 손가락을 확대하거나 축소할 수 있는 개념 설정, 값을 no로 설정할 경우 이 개념을 사용하지 않겠다는 것(사용자가 디바이스를 확대하거나 축소할 때 레이아웃에 발생할 수 있는 문제점을 방지할 수 있다.)
• maximum-scale과 minimum-scale은 user-scale= no일 경우 최대 확대할 수 있는 값과 최대 축소할 수 있는 값을 아예 고정시킴으로 해서 확대축소 개념을 원천봉쇄하는 작업이다.
• maximum-scale: 값이 1일 경우 확대 불가능
• minimum-scale: 값이 1일 경우 축소 불가능

IE 랜더링

<meta http-equiv="X-UA-Compatible" content="IE=edge">

• Internet Explorer에서 랜더링되는 방식들이 존재하는데 그 방식이 최신의 방식으로 랜더링하게 해주세요 해주는 권장되는 방식
• content에 그 최신의 방식 넣음
• IE 8버전 이상에서 항상 최신의 표준의 모드로 랜더링 되도록 설정해주는 코드
• 변경해서 쓸 경우는 별로 없다.

---

2. 오픈 그래프와 트위터 카드

• meta 태그의 property 속성 사용
• 카카오톡 등에서 오픈그래프와 트위터 카드 둘 중 무엇을 쓸 지 모르므로 둘다 설정해놓는 것이 좋다.
• 외부에 특정한 페이지가 공유될 때 외부에서 판단할 수 있는 정보들이 오픈그래프와 트위터 카드에 정의된 내용으로 긁어와서 확인을 한다.
• 검색엔진 등 다양한 소셜네트워크에 나오는 기본적인 내용들도 오픈그래프와 트위터카드에 작성된 내용을 바탕으로 해서 이러한 정보들을 확인한다.

Open graph

• open graph에 관한 주소 : http://ogp.me/
• 외부에 제공할 특정한 정보를 정의할 수 있다.
• 페이스북에서 많이 활용하는 개념
• property 값으로 og:type는 오픈그래프(일종의 정보)의 type을 의미, content 값으로는 type의 종류를 작성한다.
• og는 Open Graph의 약어로 사이트 외부에 제공할 정보를 정의 가능 , 외부에 있는 다양한 사이트들은 og라 되어 있는(open graph로 정의되어 있는) 특정한 content 속성이 아닌 정보들을 가지고 가서 이사이트는 어떤 사이트고 대표 이미지, 제목(og:title), 설명(og:description) 등을 제공

Twitter Card

• twitter card에 관한 주소 : https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started.html
• 트위터 등에서 활용하는 개념
• property 값으로 twitter: 으로 작성
• twitter:title는 제목 정의
• twitter:card은 og:type과 비슷하다. 트위터 외부 정보를 트위터 카드 형태로 제공하겠다. 이때 content 값이 summery일 경우 summery 개요의 트위터 카드 이다.

---

3. favicon(파비콘)

• favicon은 사이트를 대표하는 아이콘으로 생각하면 된다.
• favorite icon의 약서
• link 태그를 사용하는 데 rel 값은 icon이고 href로 경로를 가져오면 된다.
• 스마트폰에서도 동일하게 적용하기 위해서는 link 태그를 추가하고 rel 값으로 apple-touch-icon을 주고 href로 동일한 favicon 이미지 경로 삽입(애플. 안드로이드 둘다 사용 가능)
• favicon 이미지는 되도록 favicon.확장자 이름을 변경하지 않아야 브라우저에서 더 찾기 쉬워진다.
• IE에서 적용시

  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> 

  • 굳이 이코드를 작성하지 않아도 루트 경로(html 주변)에 ico 파일이 존재한다면 그것을 적용하고 못찾게 된다면 위와 같이 작성해놓은 코드들 따라 이미지 경로를 추적하게 된다. 그래서 루트 경로(html 주변)에다가 ico 파일을 배치해놓는다면 굳이 매번 작성하지 않고 생략해도 된다.
  • favicon 파일을 png보다는 ico 확장자를 쓰는 것을 추천한다.

---

4. Google Fonts

• https://fonts.google.com/ 사이트 접속 후>사용할 폰트 선정>폰트 두께(여러 개 가능) 선정>embed에 있는 link 태그 부분 복사>그폰트를 쓸 html에 붙여넣기>embed에 있는 css 코드 복사해서 사용할 html에 연결되어 있는 css에 쓸 부분에 붙여넣기
• 사이트에서 사용할 폰트 정의
• 그 폰트를 호출한다고 해서 바로 적용되는 것은 아니기에 CSS 작업도 해줘야 함
• 사용할 폰트의 경로를 가지고 와서 css에서 font-family로 적용해서 정의해야 함
• 기본적으로 시스템 내 설치된 폰트가 아닌 경량화 되어 있는 웹 폰트를 사용해야 한다.
• Google Fonts는 웹 폰트가 잘 정리되어 있다.
• github에 잘어울리는 roboto 폰트 사용

---

5. 브라우저 스타일 초기화(Reset)

• reset.css cdn으로 검색
• https://cdnjs.com/libraries/meyer-reset
• 브라우저가 가지는 기본적인 스타일을 초기화 해주는 reset.css 개념 적용
• 각각의 브라우저는 내재하고 있는 기본적인 스타일을 가지고 있기 때문에 초기화를 해줘야 한다.
• reset.css 내용이 적용되어 있는 css 파일 다운로드 후 사용하는 방법과 인터넷에 있는 reset.css 경로 이용해서 사용하는 방법이 있다.
• link 태그로 적용
• 현 html에 적용되어 있는 css 파일을 reset.css 내용으로 덮어쓰지 않게 하려면 그 연결되어 있는 css 파일보다 reset.css 같은 플러그인이나 라이브러리 등 미리 작성되어 있는 코드들은 먼저 호출되어야 한다. (초기화 후 작성될 수 있게)
• 압축된 버전 사용하고 싶을 시 reset.min.css 이용(단, 압축되어 읽기 불편하기 때문에 실제 reset.css 서비스 이용할 때만 사용해야 함. 현재 우리예제에서는 css 코드도 함께 보면서 할 것 이기 때문에 이 파일 사용)
• 웹 경로를 통해서 사용시 매번 reset.css를 준비해서 쓸 필요가 없는 개념이라 편리함
• 호출 순서가 명확해야 한다.

---

공통

1. 최상위 요소, BEM

최상위 요소

• body 태그는 전체적인 구조 범위를 나타내는 태그여서 스타일을 많이 가지고 있는 것은 좋지 않다.(body 태그 처럼 사용할 div 요소 container을 만들어주는 것이 좋다)
• body 태그 처럼 사용할 div 요소 container 생성 후 그것은 최상위 요소로서 활용하여 다른 하위 선택자에서 속성이 적용이 안될시 대비할 수 있는 속성을 작성해놓는다.

BEM(CSS 작명 규칙)

• 절대적인 것이 아니기에 꼭 지키지 않아도 되지만 해당하는 팀에서 혹은 작성하려는 예제에서 다루는 것이기 때문에 어떤 내용인지 이해해야 함
• 작명규칙 중 대표적으로 사용되는 것이 BEM(Blog Element Modifier)이다
• BEM은 사실 정확하게는 작명규칙을 지칭하는 용어는 아니지만 CSS 작명규칙을 의미한다.
• 특정한 요소에다가 class, id 등 기타 이름을 부여하는데 그 이름들을 어떻게 설정하고 관리할 것인가는 굉장히 난이도가 있는 개념이다.
• 기본적인 작명규칙들은 통일돼서 사용됨
• 일반적으로 많이 쓰는 규칙
• .body__container로 왜 최상위 요소를 _를 두개를 써서 만들었을까(복잡해질 수 있는 부분에는 _를 두번 써서 ~의 일부분인 ~이다 라는 개념으로 사용)
• 상태를 의미하는 수식어 붙을 경우(btn-danger 등) -기호를 두번 사용한다. 구조적인 일부분과 그 해당하는 요소의 현재 상태 정의(~의 상태)
• 하나의 통짜 이름을 표현할 때는 – 기호 한번만 사용(일반적인 작명)

---

2. 전역스타일

• input 요소나 버튼 들은 스타일들이 많이 작성된다.
• 예를 들어 세개의 버튼이 있는데 그 세개의 버튼을 만들기 위해서 많은 양의 스타일들을 작성해야 한다면 불편할 것이다. 반복적으로 사용되는 스타일들은 미리 정의를 해놓고 그 정의된 스타일들을 가져와서 아주 일부분만 변경해서 사용해서 쓰는 공통적으로 쓰는 전역적으로 쓰는 전체 영역에서 사용하는 스타일들을 몇가지 정의하면 좋다 그 중 한가

버튼

• 일반적으로 class는 btn이라는 약어로 값을 사용한다.
• 마우스가 버튼 위에 올라가면 마우스가 버튼 위에 올라가 있다는 것을 버튼을 통해 표현해 주고 싶을 때 css 선택자로 :hover를 사용
• 다양한 버튼(btn-success, btn—danger, btn—warning 등)의 마우스 hover 효과를 커버하기 위해 btn 클래스 말고도 띄어쓰기로 btn—success 등의 버튼 이름을 또다른 클래스로 같이 지정한다. css에서 전체적으로 들어가는 효과는 btn 클래스 요소에 정의하고 각각의 버튼의 다른 효과들은 .btn.bt--이름 {} 안에 작성한다.
• 다양한 이름의 버튼이라는 동일한 스타일을 가지고 있는 요소들을 계속해서 만들 수 있다. (전체 영역을 css로 미리 정의하고 정의된 내용을 html에 class로 추가해 적용해서 사용)

---

3. 입력 양식

• 입력 양식도 반복되서 사용
• input 태그는 type이 바뀌면 굉장히 다양한 스타일을 가지게 됨
• css 선택자로 input 태그 자체를 하는 것을 조심해야한다.
• input 요소에 포커싱 됐을 때 테두리 색 변하는 것은 border 속성으로 지정하는 것이 아니라 outline 속성을 통해서 지정한다.(border보다 outline을 안쓰는 이유는 제어하기 까다롭기 때문이다.)
• box-shadow: x축 y축 블러 그림자색; 맨앞에 inset 키워드 붙이게 되면 박스 안쪽에 그림자가 생기게 됨
• input 요소에 포커스 되어있다를 표현하기 위해 input요소에 focus라는 가상 클래스 추가함
• css에는 블러라는 개념이 없다. 그래서 포커스 되지 않은 상태를 블러라고 한다.
• 앞서 요소에 box shadow를 통해 내부 그림자를 주고서 요소에 focus 가상클래스 준 곳에 boxshadow를 통해 외부 그림자를 부여하면 앞서 만든 내부 그림자 요소가 외부 그림자로 덮어씌워지면서 없어지게 된다. 그러한 것을 방지하기 위해서는 앞서 만든 내부 그림자 값을 외부 그림자 값 앞에다가 복사해서 붙여 넣고 쉼표로 구분해서 넣으면 다중으로 그림자를 넣을 수 있게 된다.

Vendor Prefix(브라우저 업체별 접두사)

• 브라우저 업체별 접두사 : 우리가 사용하는 다양한 웹 브라우저들이 있고 이 웹 브라우저는 표준이 아닌 브라우저 내에서 실험적으로 사용할 만한 기능들을 제공하게 되는데 만약에 업체별 접두사 없이 제공하게 되면 마치 표준처럼 제공될 수 있기 때문에 이것을 통해서 현재 브라우서에서 실험적으로 시행되는 것입니다를 안내하기 위해 업체별 접두사를 사용한다.
• 브라우저 업체별 접두사를 붙이게되면 실험적인 기능을 브라우저에서 사용할 수 있다.
• placeholder : input 요소 힌트 제공, input 요소안에 무언가 썼을 땐 사라지고 쓰지 않을 땐 힌트가 나타나게 하는 것
• placeholder 색상을 바꿔주는 기술은 표준적으로는 없다. input-placeholder는 표준에 있지 않음 하지만 Vendor Prefix를 통해서 해당하는 브라우저에서 동작할 수 있게 할 수 있다.
• chrome 브라우저는 webkit이라는 브라우저 사용 ex) webkit-input-placeholder
• Internet explorer, internet edge 브라우저는 ms(microsoft) 브라우저를 사용 ex) ms-input-placeholder
• fire fox 브라우저는 moz(mozilla) 브라우저 사용 ex) moz-input-placeholder
• opera 브라우저는 o 브라우저 사용(input 브라우저 제공 안함)

 

---

Header

1. 구조 파악

• header 태그 사용해서 영역 정의
• header이라는 섹션
• 한 줄 한 줄의 영역을 보통 section이라 칭한다.(섹션들을 공통적인 속성을 갖게하고 싶으면 section이라는 클래스 부여)
• 만드려는 페이지 화면 중앙에 메뉴 몰려있음
• 한 section 의 영역 안에서 특정 콘텐츠를 감싸서 그 콘텐츠를 화면의 중앙으로 몰아주는 역할의 요소를 container, wrapper, inner로 이름을 정의한다.(container와 inner를 많이 사용)
• 왼쪽 메뉴 오른쪽 메뉴 구분해서 구현

---

2. 왼쪽 콘텐츠

• 로고 하나 있고 메뉴가 두번째로 있고 수평의 구조를 가진다. 전체 메뉴 안에서 각각의 메뉴가 존재하고 그 메뉴 하나 하나에는 각각의 콘텐츠 존재한다, 그 콘텐츠가 메뉴를 구성한다.
• 헤더 섹션 안에는 헤더 안에 들어있는 모든 컨텐츠를 헤더라는 영역 안에서 중앙으로 몰아줄 요소가 필요. 그것이 일반적으로 container, wrapper, inner 라는 이름을 갖는다.
• menu-group 안에 들어가는 것은 logo 와 메인 메뉴 덩어리 이다. 메인메뉴 덩어리(ul)는 항목 정렬해주는 ul과 li 태그 사용해 작성하는 것이 좋다. li 태그를 통해 메인메뉴를 구성하는 메뉴를 구성하되 li 태그 안에 a 태그를 작성해 페이지간 이동하는 버튼으로 구현해야 한다.
• 로고는 메인페이지로 이동시켜주는 페이지 이동 버튼으로 만들 것(a 태그 활용)

---

Tip

• 경로 앞에 ./가 있거나 생략되어 있을 경우 상대 경로고 주변에서 찾는 개념이다.
• css 파일이 많아질 경우 관리하기 어려우므로 css 폴더 생성 후 그 폴더 안에 css 문서를 넣어서 사용한다.
• cdn은 content delivery network의 약자로 자주 사용할만한 내용들이 웹에 다 들어있는 데 전세계에 분산되어 있는 정보들을 중간에 찾아와서 사용자와 가장 가까운 곳에서 연결해서 전송해주는 개념이다.
• background 속성에 튀어나오는 것처럼 방향이 있는 그라데이션 추가하는 값은 linear-gradient(방향, 색상1, 색상2)으로 색상1에서 색상2로 변화
• position 값 없는데 추가하는 경우에는 relative 값으로 추가
• common : 공통 내용
• 큼직큼직한 영역에 주석을 달아주면 코드를 쭉 읽다가도 어디서부터 시작이고 끝인지 구분이 된다 그래서 일기 수월함. 하지만 너무 많이 남기는 것은 별로 좋지 않다.
• a 태그를 설정하되 아직 어디로 갈지 경로 값을 가지고 있지 않다면 href 부분에 임시적으로 # 키워드를 작성할 수 있다.