이제 남은 footer의 스타일을 잡아준다.
푸터는 로고랑 주소가 그대로 입력되고, 아이콘 3개를 추가하여 간단하게 10분이내로 끝낼 수 있다.
구조짤때 미리 입력해둔 html을 보고 스타일을 입힌다.
footer의 height는 100px으로 시험지에 명시되어 있기때문에 꼭 지정해준다.
그 이외는 내 마음대로 css를 꾸민다.
문득 드는생각인데
CSS에 자율성을 준다는것은 아무렇게나 해도 점수를 딸 수있다는 말은 아닌듯하다.
독창성 가독성 등을 고려하라고 애매하게 쓰여있지만,
시험 채점 기준이 명확하게 공개되어 있지 않고 채점과정 이의제기도 불가능한 상황에서는
최대한 성의를 보여야 조금이라도 채점관들의 가산점이라도 얻을 수 있지않을까 싶다.
서로다른 아이콘을 넣어주기 위해 클래스를 추가해준다.
sns 스프라이트 이미지는 아래 글에 업로드 해두었다.
2019/03/14 - [ 컴알못/자격증] - JUST 쇼핑몰 문제풀이 2. 포토샵 웹용 이미지 만들기 (2019 웹디자인 기능사 실기 공개문제)
JUST 쇼핑몰 문제풀이 2. 포토샵 웹용 이미지 만들기 (2019 웹디자인 기능사 실기 공개문제)
공개문제를 풀려고하는데 문제지만 딸랑 있고 이미지를 제공해주지 않는다..^^; 그냥 빈 이미지로 하려다가 한문제라도 제대로 풀어보자 싶어서 지시사항을 따라서 만들어본다. 실제 시험장에서도 제공되는 이미지..
tbbrother.tistory.com
3개의 아이콘을 모두 넣은 이미지 하나만을 사용해
background-position을 다르게 해서 입력해준다.
하나하나 다 따로 지정해주는것 보다 제한된 시간을 굉장히 절약할 수 있다.
이렇게 HTML, CSS가 완성되었다. 다음은 JS !
'STUDY > 자격증' 카테고리의 다른 글
| 열역학 기본 공식 (0) | 2020.02.22 |
|---|---|
| 열역학 기본 용어 정리 (0) | 2020.02.22 |
| JUST 쇼핑몰 문제풀이 6. JS, 제이쿼리 - 메뉴, 슬라이더 효과 (웹디자인 기능사 실기 공개문제) (2) | 2019.05.07 |
| JUST 쇼핑몰 문제풀이 4. 슬라이더/ 탭메뉴/ 배너/ 바로가기 (2019 웹디자인 기능사 실기 공개문제) (0) | 2019.03.28 |
| JUST 쇼핑몰 문제풀이 3. Header (2019 웹디자인 기능사 실기 공개문제) (0) | 2019.03.19 |
| JUST 쇼핑몰 문제풀이 2. 포토샵 웹용 이미지 만들기 (2019 웹디자인 기능사 실기 공개문제) (3) | 2019.03.14 |