워드프레스강좌 | 제31강 워드프레스 헤더만들기 A 테마만들기 21편
본문
※ 영상을 선명하게 보기 안내
- 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
- 팝업목록에서 "품질" 선택하세요.
- 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
워드프레스강좌님의 워드프레스강의 청각장애인을 위한 자막
안녕하세요 얻어 패스 강좌 서른한 번째 시간입니다
이번 지금부터는 사이트 헤더를 만들어 보도록 하겠습니다회사가 제일 상단에 있고 중요한 부분이다 보니 부터 보다 늦게 작업을
하게 되었습니다
중요한 부분이다 보니 부담이 되서 좀 밀어 동 감이 없잖아 있습니다
헤더 사이즈에 따라 다르지만 헤더는 사이트 디자인에 있어서 얼굴이라고 할
수 있습니다
요즘은 슬라이드 디자인 이 유행하면서 헤더 사이즈를 작게 만드는 것이
일반적입니다
하지만 저는 일단 보여드리기 위해서 크고 잘 보이는 헤드를 만들어
보겠습니다
먼저 헤드 점 php 파일에서 헤드 css 클래스를 헤더 언더바
컨테이너로 바꿔 주도록 하겠습니다 그리고 사이트도 약간 수정하도록
하겠습니다
이제 헤더 크기를 고정으로 150 픽셀로 필요 만들어 주도록 하겠습니다
이제 넓어진 하다 영역을 보실 수 있습니다
헤드 프레임을 자세히 보시면 우리가 만들어 준 1 패 츠 1 픽셀 자리
경계선을 확인하실 수가 있습니다
이전에도 에 백그라운드 이미지를 넣는 방법을 보여 드리도록 하겠습니다
지금 사이트 페이지 영역의 보이는 이미지는 html 이미지 태그로 넣은
것인데
헤더 에서는 스타일시트 파일에 이미지를 넣는 방법을 보여 드리도록
하겠습니다
저는 미리 만들어둔 이미지 파일을 이미지 폴더에 헤더 언더 봐
img.zizibe.net 2 씁니다
이미지와 더불어 이미지가 중복해서 보여 지는 현상을 없애기 위해서 놀이
비트 옵션을 사용하도록 하겠습니다
이제 사이트에서 확인해 보시면 헤다 이미지가 성공적으로 보이는 것을
확인하실 수가 있습니다
이제 배정 이미지가 완성 되었으니 까 배경이미지 위의 로고를 보여주도록
하겠습니다
로 걸을 디스플레이 해줄 부분은 바로 잘 우리가 만들어 준 헤더 컨테이너
클래스 아닙니다
따라서 이 컨테이너 클래스 안에 우리 사이트 홈으로 링크 되도록 에이텍
안에 로고 css id 를 지정해 주는 방식으로 보여드리도록 하겠습니다
또 그 다음에 줄바꿈을 하지 않기 위해서 인라인 블록 옵션을 사용하고
제가 만든 로고 이미지는 217회 58 사이즈 아이콘 이기 때문에
가로세로 사이즈를 217
5집 팔로 지정했습니다 여러분들께서 제자 칼로 그 사이즈에 그대로 설정해
주시면 됩니다
로고와 출력되는 것을 확인 하실 수 가 있습니다
31강 은 여기까지 마무리 하고 32강에서 바로 이어서 진행하도록
하겠습니다
댓글 0개
등록된 댓글이 없습니다.