생활코딩 CSS 공부기록 2편

 

1. 생활코딩 CSS  강의복습하기

CSS 수강완료후 웹사이트는 반응형까지 완성했다.  조금 신경쓰이는 부분을 배운것을 토대로 바꿔보자

다음예제에 크게 영향을 끼치지 않을 정도로만 변경해보는것으로 !

• 스타벅스 로고 img 가운데 정렬하기
• 음료  h2  태그 style 폴더에 추가하고 왼쪽에 여백주기
• 리스트 현재 보여지는 페이지 컬러 변경해주기 ( 기존에는 전체상품보기페이지만 적용되어 있었음)

 

 

1-1 이미지 img  (스타벅스 로고) 가운데 정렬하기

 

html img 가운데 정렬은 <style >을 이용해 정렬을 해보았다.

 <img src="./img/스타벅스로고.svg"  style = "width:50px;  display:block; margin:auto;">

 

 

 

가운데정렬을 잘 됬지만 윗부분이 너무 비좁아보여 여백을 주고 싶었다.

padding-top  값을 20 px 넣어서 여백을 주는방법을 사용했다.  다행히 잘된다 ㅎㅎ

<img src="./img/스타벅스로고.svg"  style = "width:50px;  display:block; margin:auto; padding-top:20px ;">

 

 

 

1-2   <h2> 음료   style 폴더에 추가하고 왼쪽에 여백주기

 

음료만 너무 왼쪽에 딱 붙어 있어서 신경이 쓰인다.

배웠던 css 폴더를 이용해보기로한다.  아래에 메뉴리스트와 맞춰서 깔끔하게 정리가 되었다.

 

 

1-3  <li> 메뉴 현재 보여지는 페이지 컬러 변경해주기

강의에서 전체 상품보기페이지를 클릭하면 현재 보고있는 페이지 컬러를 그린컬러로 차이를 두는 것을 배웠다.

 

다른페이지도 적용시켜주어 보고있는 페이지를 구분하여 볼 수 있도록 하였다. 

 

 

2.  CSS 복습 변경 전 > 변경 후

변경전보다 더 정리가 된 느낌이 든다  ( 미세하지만 ㅎㅎ )

번경 전 (좌) 변경 후 (우)

 

 

 

 

3. 반응형 확인

반응형도 잘 되는 지 확인했다. 나름 정리가 됬다. 허허

 

 

4.  깃허브 소스

04_css_remind 폴더에 최종소스 있음

https://github.com/wildtokkii/my-first-web.git

GitHub - wildtokkii/my-first-web

 

 

5. 마무리

복습할때 중간에 다른길로 샐 뻔한 적이 너무 많았다 ㅠㅠ.

욕심내지 말고 빠르게 자바스크립트로 넘어가야겠다.!! 가즈아!!

 

 

 

 

 

생활코딩 CSS 공부기록 1편

생활코딩 CSS 공부기록 1편

 

 

---

생활코딩 HTML 공부기록 1편 

생활코딩 HTML 공부기록 1편

생활코딩 HTML 공부기록 2편 

생활코딩 HTML 공부기록 2편