Portfolio 01. Header

01. 헤더(Header) 설정

샘플 페이지

지환아, 샘플을 보면서 하자. 이 사람들이 샘플로 만들어놓은 걸 열어놓고, 같이 만들면 돼.
샘플 확인

[사이트 제목]

1. ‘그림1’의 1번은 ‘사이트 제목 – 태그라인‘ 구조로 되어있다.

2. ‘그림2’의 2번 ‘설정’ 메뉴에서 3번 ‘일반’을 클릭한 뒤,

3. ‘그림3’의 4번 ‘사이트 제목’에 ‘JiHwanBang’을 입력한다.

4. 그런 뒤, 5번 ‘태그라인’에 ‘Fine Art, Kingston Univ. UK’를 입력한다.

5. 그런 뒤, 밑으로 내려가서 6번 ‘변경사항 저장‘을 클릭한다.

6. ‘그림4’ 처럼 홈페이지 상단 영역을 ‘헤더(Header)’라고 하는데,

7. ‘그림4’의 1번 ‘로고’에 마우스 포인터를 갖다 대면, 2번처럼 팝업되면서 나타나는 게 ‘설명문(alt)’이라 하는데 위에서 설정한 ‘사이트 제목‘이다.

[로고]

8. 그러면, ‘로고‘부터 바꿔보자. 

9. ‘그림5’의 3번 ‘사용자 정의하기‘를 클릭하면,

10. ‘그림6’번이 보이는데,

11. 여기에서 4번 ‘사이트 아이덴티티‘를 클릭한다.

12. 그러면, ‘그림7’의 5번 ‘Logo?’ 아래에서 ‘헤더’ 영역을 샘플 페이지처럼 어둡게 하려면, ‘Dark Logo’ 즉, 6번 ‘Select image’ 버튼을 클릭한다.

13. 그러면, ‘그림8’의 7번 ‘이미지 선택‘이라는 창이 팝업되는데,

14. 여기에서 8번 ‘파일 업로드‘ 탭을 클릭해서 네가 만든 로고를 업로드한다.

15. 이때, 기존에 이 사람들은 로고의 크기를 높이 100 px로 만들었으니까, 너도 같은 높이로 만들어서 올린다.

[사이트 아이콘]

16. 이번에는 브라우저 좌측 상단에 ‘그림8’의 9번 처럼 아이콘이 보이는 데 이것을 ‘사이트 아이콘‘이라 부른다. 

17. 계속해서 ‘그림7’의 10번 ‘사이트 아이콘 선택‘ 버튼을 클릭하면, 

18. 마찬가지로 ‘그림8’과 같이 ‘이미지 선택‘ 창이 뜬다. ‘파일 업로드’를 선택해서 업로드 한다. 

19. 이때, 아이콘 사이즈는 512 x 512 px로 png로 만들어야 한다. 

20. 작업이 끝났으면, ‘그림6’의 11번 ‘발행‘ 버튼을 클릭해서 발행한다.

About The Author

회원님이 좋아하실 내용 You might be interested in

평가 글을 남겨주세요

error: Content is protected !! 이 내용은 저작권법에 따라 무단복제 및 배포 허용이 불가합니다.