Ch 10. 스타벅스 예제

🎯이번 챕터는

드디어 스타벅스 예제에 돌입했다.

평소 하던대로 진행하다가 이번예제는 강의를 들으며 정리하기 어렵다고 판단

하던대까지만 정리를 올리고 내가 만든 완성 사이트의 주소를 올릴예정이다.

---

⭕01. 시작하기 - 프로젝트 시작, 스타일 초기화, 파비콘

📌강의 정리

• 스타벅스예제를 만들어보자.
• 깃허브주소를 가면 스타벅스 랜딩 페이지를 만든다고 하는데 demo를 클릭하면 데모페이지가 나오게 된다.
• 여러가지 이미지를 사용해야하는데 이미지라는 폴더와 파비곤아이콘과 파비콘피엔지들을 받아야한다.
• 깃허브 다운로드 zip로 받으면 된다.
• 받은것의 이미지 3개를 복사하여 우리의 프로젝트 폴더에 넣으면 된다.
• vscode로 프로젝트 폴더를 열자.
• index.html을 만들고 ! tab으로 기본을 만들고 en을 ko로 하자.
• 타이틀은 스타벅스 커피 코리아로 만들어주자.
• 이렇게 하고 라이브서버로 열면 하얀화면이지만 탭부분에 스타벅스코리아와 로고가 뜬다.
• 그 이유는 프로젝트의 루트경로에 favicon.ico라는 파일이 있으면 그 웹의 로고로 쓰기 때문이다.
• favicon.ico가 너무해상도가 떨어진다 느끼면 html에서 link로 icon을 절대경로 루트에 favicon.png로 바꿔주면된다.
• 또한 해야할것으로 reset.css cdn을 해야한다.
• deliver에서 min을 복사해서 파비콘 밑에다가 link로 초기화 시켜준다.
• 이제 css폴더를 만들어주자.
• 이 안에 main.css파일을 넣어준다.
• 이것 또한 마찬가지로 link로 main.css를 연결시켜준다.
• 틈틈이 빈태그를 슬래쉬/ 로 끝나게 해주면 좋다.
• 바디 부분에 hello world 하고 main.css에서 빨갛게 바꿔주면 변한다.
• 이제 프로젝트 시작의 준비가 다 되었다.

 

📌느낀점

드디어 스타벅스프로젝트를 시작한다.

이 프로젝트를 잘 익혀서 나만의 프로젝트를 만들어 더 다재다능한 개발자가 되어야겠다.

---

⭕02. 시작하기 - 오픈그래프와 트위터 카드

📌강의 정리

• 완성된 프로젝트의 깃헙으로 가서 오픈그래프라는 내용을 봐보자.
• 웹페이지가 소셜미디어로 공유될 때 우선적으로 활용되는 정보를 지정하는것이다.
• 카톡이나 슬랙같은 sns에 링크로 보낼때 같이 전달되는 정보를 뜻한다.
• og는 오픈그래프라는 뜻의 약어이다.
• 오픈그래프의 속성은 기본정보들만 쓰면 좋다.
• type은 페이지의 유형
• site_name은 사이트의 이름
• 타이틀은 페이지의 제목, 데스크립션은 설명
• meta태그는 다양한 정보들을 다양한 상황에서 활용할 수 있다.
• 트위터 카드는 트위터로 공유될때 우선적으로 활용하는 정보이다.
• 트위터카드는 서머리와 플레이어가 있고 사이트는 속한 사이트의 이름이다. 타이틀은 제목이다.
• 어떤 사이트는 트위터카드를 공유하기에 트위터카드도 만들면 좋다.
• head태그의 타이틀과 파비콘의 중간에 적어주면 좋다.
• 이미지 경로가 쓰여있는데 그것은 우리가 기존에 받은 이미지 파일에 적혀있기에 바꿀필요없다.
• SEO는 검색엔진최적화로 구글이나 네이버 등에 자신의 웹 사이트/페이지 를 노출할 수 있도록 정보를 최적화 하는 작업이다.

 

📌느낀점

많은 길을 가기전에 간단한 것들을 미리 정리하고 가는 느낌이다.

오픈그래프와 트위터카드 모두 개념이나 사용법이 어렵지 않았다.

---

⭕03. 시작하기 - Google Fonts

📌강의 정리

• body가 빨간색인데 폰트사이즈를 100px로 바꾸면
• 실제로 브라우저에서 크게 변한다.
• 근데 크롬에서와 사파리에서의 폰트가 서로 다르다.
• 크롬은 고딕체계열 사파리는 바탕체계열이다.
• 우리의 프로젝트에 어떤 폰트를 쓰겠다라는것을 정해 주어야한다.
• 우리 프로젝트에 나눔고딕을 쓰려면 구글 폰트로가서 nanum을 써준다. 들어가면 3개가 나온다.
• 나눔고딕은 400,700,800의 두꺼움을 제공한다.
• 폰트는 용량이 무겁기 때문에 적재적소로 써야한다.
• 우리는 400의 두꺼움을 쓸것이다.
• 폰트패밀리를 추가하는데 400,700을 넣어주고 링크태그와 import방식 두개가 있다. 링크는 병렬 임폴트는 직렬이고 보통은 링크를 쓴다.
• 우리의 폰트는 css보다 먼저 적용되야 하므로 css링크 이전에 복사된 링크태그를 붙여넣기 해준다.
• 이후 아까의 페이지에서 css rules에서 이 문장을 복사해서 main.css를 붙여넣기 해주면 바디태그에 나눔고딕이 적용되었다.
• 구그크롬은 적용되었는지 확인이 잘 안된다. 개발자도구의 컴퓨티드에서 폰트패밀리를 확인해보면 잘 적용됨을 알 수 있다.
• 또한 사파리에서 확인해도 잘 적용됐음을 확인할 수 있다.
• 폰트는 저작권과 밀접한 관계가 있으므로 유료폰트를 안쓸수 있도록 사용해야한다.

 

📌느낀점

폰트 관련 내용이었다.

이미 알고 있는 구글 폰토였지만 다시 한번

사용법과 확인법을 배워보니 더 잘 알겠다는 생각이 들었다.

---

⭕04. 시작하기 - Google Material Icons

📌강의 정리

• 우측상단을 보면 돋보기 모양이 있음을 알 수 있다.
• 이미지들을 만들면 되지 않냐 라고 생각할 수 있다.
• 하지만 사이트들을 만들다 보면 모든게 다 만들수는 없다.
• 그래서 이런 아이콘같은 경우는 구글에서 제공하는 매터리얼 아이콘을 통해 쉽게 코드로 쓸 수 있다.
• 여러가지 화살표들과 돋보기들을 아이콘으로 사용하면 좋다.
• 구글 검색창에 구글 매터리얼 아이콘을 치면 io사이트가 뜬다.
• 화면의 왼쪽상단의 로고부분을 클릭하여 메인화면으로 이동하여 겟스타티드로 시작하자.
• 퀵스타트가 CDN으로 적혀있다.
• 링크태그, 스크립트태그가 있는데 조금 더 내리면 링크태그만 있는 것이 있다.
• icon?과 매터리얼+Icons이 적혀있는 링크태그를 쓰면 된다.
• 우리의 프로젝트에서 main.css바로 위에 아까의 코드를 붙여넣자.
• 이제 필터부분에서 arrow를 써주면 여러 아이콘이 있는데 관련 아이콘들이 뜨며 login이라는 아이콘을 클릭해보자.
• 그러면 왼쪽에 창이 하나 뜨며 span태그를 이용해서 login을 써보자.
• material-icons를 통해 로그인 아이콘이 잘 출력됐는지 확인해보자.
• 크기는 24px를 기준으로 키우거나 줄이면 된다.

 

📌느낀점

나는 다른 곳에서 쓰고있던 아이콘을 구글에서 쓰는법을 배웠다.

역시 구글이 사용자 친화적으로 잘 제공해주는 것 같다.

편리하게 잘 사용할 수 있을 것 같다.

---

⭕05. 헤더와 드롭다운 메뉴 - 로고

📌강의 정리

• 스타벅스예제의 헤더 부분을 만들어보자.
• 로고와 서브메뉴들이있고 메인메뉴들이 그 밑에 있다.
• 헤더의 내용들이 확대를 많이하면 짤리고 축소하면 중앙으로 오는 것을 볼 수 있다.
• 바디태그내에 헤더태그를 만들어주자.
• 우리는 보통 div태그에 헤더라는 클래스를 주어 의미를 만들어주지만
• 헤더같은경우는 html에서 제공해주는 태그이다.
• 필요한 태그들은 그때그때 배워보자.
• HEADER를 주석으로 구분해준다.
• HTML코드가 길어지기 때문이다.
• div 클래스를 inner로 만들어준다.
• 그 안에 a태그로 루트를 해주고 이미지는 우리의 이미지폴더에 스타벅스로고를 해준다.
• alt에는 STARBUCKS로 해준다.
• a태그의 /앞에는 도메인이 생략되어졌다고 생각할 수 있다.
• 배포할때도 도메인은 생략할 수 있다.
• /는 우리의 메인페이지로 이동하겠다는 뜻이다.
• main.css 로 가서 글자 색상을 따로 지정해주자.
• 검정색이 기본인데 기본을 어두운 회색을 추가해주자.
• #333333인데 연속되면 축소할 수 있으므로 #333으로 해주자.
• 폰트 사이즈는 16px를 해준다.
• 폰트 웨이트는 400두께를 기본으로 해주자.
• 폰트패밀리는 나눔고딕을 써준다. (앞에서 해준것)
• 라인 헤이트는 기본적으로 1.4를 해준다.
• header라는 태그 선택자를 하되 주석으로 header가 적히는 것을 적어준다.
• header 와 헤더 이너, 헤더 로고를 css에서 해주고
• 이후 배경으로 로얄블루와 오렌지를 해준다.
• 이러면 이너만 나오는데 여기서 이너의 위드스는 1100px로 해준다.
• 이너에 margin: 0 auto를 해준다.
• 이러면 이너부분이 가운데 정렬이 됨을 알 수 있다.
• 이렇게 하면 스타벅스 사이트에서 본것과 같다.
• 우리는 우리가 한 것을 1100px안에 정리하겠다고 선언한것이다.
• 이미지의 크기는 높이가 75px이다.
• 헤더는 75보다 조금 높다.
• 우리는 img태그를 썼는데 img태그는 인라인요소이다.
• 가로세로요소가 없다. 글자요소만을 본다.
• 글자요소는 baseline이 있는데 y나 j같은 것은 베이스라인 밑으로 나오게 되어야하므로 밑에 특정 공간이 있어야 하게 된다.
• 이런 현상들은 HTML이 처음에서의 현상들이고 우리에게는 까다롭게 느껴질 수 있다.
• 우리는 이런 현상을 우리에게 맞게 수정해야한다.
• 그렇다면 img를 태그선택자로 선택해주고 display: block;로 해준다.
• 즉 이미지는 상자로 취급하겠다는 뜻이다.
• body선택자 img선택자는 우리의 프로젝트에 공통으로 영향을 미치기 때문에 헤더처럼 주석으로 COMMON을 적어준다.
• 깔끔하게 적는 습관을 갖는것이 중요하다.
• 로고에 포지션은 앱솔로트, 탑바텀마진값을 준다.
• 포지션은 앱솔루트로 바꾸면 이제 로고가 헤더 밖으로 나간다.
• 구조적인 부모요소에 포지션이 보이지 않기 때문에 로고가 밖으로 나가게된것이다.
• 포지션을 통해 수직가운데에 위치하는 방법을 알아보자.
• 포지션을 쓸때는 구조적인 부모에 렐러티브를 주어야한다.
• 이후 아이템에 auto와 0을 주면 수직 가운데에 배치하게 된다.
• 마진에서의 auto는 자동으로계산하는데 여백을 계산하는데 요소의 높이값을 브라우저에게 알려주어야 한다.
• 이제 left,right값을 0으로 주면 수직가운데와 수평가운데를 줄 수 있다.
• 로고가 원하는 위치에 있기는 하지만 명확하게 하려면 left: 0으로 명확하게 할 수 있다.

 

📌느낀점

코딩이 쉬울지도 모른다는 생각이 살짝 들었다...

배치의 개념은 알겠고 구조상의 부모를 기준으로 하기위해 부모에 렐러티브를 포지션값으로 주는것도 알겠는데

그래도 배치는 어려운것같다.

이미지를 한번에 다 박스요소로 하는걸보면 인라인은 정말 글자에만 쓰이는 것 같다.

---

⭕06. 헤더와 드롭다운 메뉴 - 서브 메뉴

📌강의 정리

• 헤더의 상단에 있는 서브메뉴를 만들어보자.
• 4개의 메뉴가 수평으로 있고 그들은 구분선으로 구분되어있다.
• 페이지를 만들건 아니지만 페이지 주소만 있으면 이동할 수 있게끔은 해야한다.
• 돋보기를 클릭하면 검색할 수 있게 해줘야한다.
• 검색창의 테두리선은 연두색이었다가 포커스가 헤제되면 돋보기가 다시 나온다.
• 확대해서 보면 구분선이 잘보인다.
• sub-menu라는 클래스를 갖는 div태그를 만들어주고 ul태그로 sub-menu그리고 li요소로 search를 갖는다.
• 구글 아이콘에서 서치를 찾아 나오는 코드로 복사하여 넣어준다.
• 아이콘은 꼭 span으로 할 필요는 없다.
• li태그중 하나는 Sign in으로 내용을 해주고 a태그로 /signin 을 적어주어 준비가 되어있지 않으니 저렇게 적어준다.
• a태그에 #으로 해시를 넣어줄수있고 아니면 javascript:void(0) 를 해주어 정말 아무 변화없는 코드를 넣어 줄 수 있다.
• 이와 같은 방법을 복사하여 전체적으로 4개를 만들어준다.
• 우리가 로고에 absolute를 해주어 겹쳐서 나오게 된다.
• 만약 로고가 거슬리면 display: none;을 해주면 안보이게 된다.
• 이제 css로 와서 header .sub-menu를 선택자로 해준다.
• 또한 header .sub-menu ul.menu를 해주어 상위 선택자들을 명시해주어 스타일 중복을 막아준다.
• ul과 menu는 매우 흔하므로 세밀하게 조절해야한다.
• header .sub-menu ul.menu li 와 li a를 해서 리스트들을 꾸밀 준비를 끝내준다.
• scss를 배우면 중복을 처리할 수 있지만 우선 css만 해본다.
• HTML의 구조적인 부분을 먼저 옮겨놓은 후에 시작하는 건 좋은 방법이다.
• a태그영역에 white로 배경을 준다.
• font-size는 12px를 준다.
• padding: 11px 16px를 준다.
• 이때 인라인이라 내부여백이 없기때문에 디스플레이 블럭을 해준다.
• 그렇지만 블럭요소이므로 가로로 늘어나려하기 때문에 기본 배경이 안보인다.
• 우리는 모든 a태그는 밑줄을 없애기를 원하므로 위로 가서 a태그만 선택한 후에 텍스테코를 논으로 한다.
• 이제 마우스가 올려지면 어떻게 처리하겠다는 a:hover로 해본다. 이때 컬러만 검정으로바꾸면 마우스를 댈때 바뀐다.
• ul.menu에서 display를 flex를 하면 가로로 전시된다.
• li::before로 가상요소선택자를 해준다.
• content: “”를 우선 추가해준다.
• 이제 여기에 추가를 해주기 전에 디플블럭으로 블럭요소해주고 1px, 12px 백그라운드 검정으로 구분선을 만들어준다.
• margin: auto를 준다. 이제 구분선이 자동으로 잘 들어가게 된다.
• 각각에 사이사이에 구분선을 하나씩 추가하고 맨앞에만 없애준다.
• 우리는 ul.menu에 폰트패밀리를 Arial을 해주고 안되면 sans-serif로 하게 된다.

 

📌느낀점

뭐가 지나갔다.. 생각보다 꽤나 어렵다.

분명 각각은 쉬운 내용들인데 섞이니 복잡해진다.

차근차근 기능들을 쌓아햐 한다.

---

⭕07. 헤더와 드롭다운 메뉴 - 검색

📌강의 정리

• 서치라는 클래스를 가지고 있는 선택자를 빨강으로 만들어주고 높이를 34px로 해주고 input요소에 보더박스로 해주고 5px로 꼭지점을 깍아주기로 한다.
• outline이라는 속성을 none으로 없애준다.
• 배경은 흰색 글자는 color로 회색을 준다777.
• 이제 input:focus가 되면 변하게 하기 위해 190px 그리고 border-color를 바꿔준다.
• 트랜지션을 주어서 자연스럽게 변하게 바꿔준다.
• position: absolute는 매터리얼 아이콘에 넣어준다.
• 렐러티브로 값을 추가해준다.
• margin을 auto로 넣어준다.
• 매터리얼 아이콘의 높이를 24px로 준다.
• 아이콘이 제일 오른쪽에 가있는것은 sub-menu클래스선택자에서 flex를 해준다.
• 클릭했을때 돋보기 모양이 없어지도록 해야한다.
• 또한 우리는 input을 클릭해야만 검색창이 늘어나므로 이를 수정해주어야 한다.
• js로 이를 해결할 수 있다.
• 이제 html에서 script를 통해 JS파일을 연결해줄 수 있다.
• JS에서 searchEl은 도큐먼트 쿼리셀렉터로 서치클래스를 찾아주고 searchInputEl은 searchEl쿼리셀렉터로 input을 찾아준다.
• document객체는 html 그 자체이다라고 생각해도 좋다.
• searchEl.addEventListner(’click’,function())을 통해 클릭했을때 어떤게 될지 적어준다.
• searchInputEl.focus(); 를 통해 돋보기를 눌렀을때 바로 input이 포커스가 되게 만들 수 있다.
• 서치인풋El을 애드이벤트리스너로 포커스와 두번째 함수를 넣어주자.
• 핸들러가 두번째함수이다. 이때 add() searchInputEl.setAtribute(’placeholder’, ‘통합검색’); 을 통해 제거하는 코드를 만들어줘야 한다.
• 블러되면 어떻게 될지를 코드를 추가할때 위의 코드를 복사해서 조금만 수정해주는 방법을 쓰자.
• blur에서 어떻게 변할지를 JS에서 바꿔줄 수 있다.
• opacity값을 0으로 주면, 그리고 트랜지션을 .4초로 해주면 돋보기가 자연스럽게 사라지게 된다.

 

📌느낀점

이번에는 JS를 다루기 시작했다.

어떤기능을 어떻게 사용하게 될지를 알아봤는데 JS가 정말 중요하구나라는것을 알았다.

이번 예제를 완전히 소화하면 실력이 정말 엄청 오를 것 같다.