워드프레스강좌 | 제17강 워드프레스 테마 만들기 8편 레이아웃 CSS 사이드바 포지셔닝
본문
※ 영상을 선명하게 보기 안내
- 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
- 팝업목록에서 "품질" 선택하세요.
- 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
워드프레스강좌님의 워드프레스강의 청각장애인을 위한 자막
안녕하세요 얻어 패스 강좌 17 번째 시간입니다 오늘은 테마 스타일
시트를 설계한 뒤에 실제 코딩 작업까지 해보도록 하겠습니다전시관에 사이드바를 만들긴 했는데 이제 이것을 우리가 원하는 위치에
포지셔닝을 해줘야 될 필요성을 느끼셨을 겁니다
우선 우리 테마의 전체적인 레이아웃을 만들어 보도록 하겠습니다
안타깝게도 포지션인 작업은 쎄 쎄 쎄 쎄 쎄 쎄 쎄 쎄 쎄 본 코드로 는
팩스 색깔 바꾸 듯이 간단하게 사이드바 프레임을 만들어 줄 수 있는
방법이 없습니다
사이드바를 좌우측에 만들기 위해서는 이제까지의 단편적으로 만들었던 css
코드를
전체적인 프레임을 가진 레이어 개념으로 바꿔줘야 됩니다
여기서부터 조금 어렵게 느껴질 수도 있는데 저도 쉽게 설명드리기 위해서
최대한 노력하도록 하겠습니다
일반적으로는 헤더 푸터 를 전체 컨테이너에 넣어 주는데 너무 복잡해지면
이해 가는데 부담이 될 것 같아서 제가 만들래 여는
헤더와 푸터 는 전체 레이어 컨테이너에 포함시키지 않았습니다
메인페이지 아 사이드바를 하나로 묶어주는 컨테이너를 새로 만들어지고 그
안에 컨텐츠 영역과
사이드바의 영역을 만들어 주도록 하겠습니다
그리고 컨텐츠 영역 우측 경계선을 만들어서 컨텐츠와 사이드바 2 업력을
쉽게 9분될 수 있도록 만들어 주겠습니다
그림을 보시면 좀 더 쉽게 이해가 되시리라 믿습니다
이제 스타일시트 파일을 열어서 css 클래스를 만들어 보도록 하겠습니다
헤더 푸터 사이드 바는 이미 만들어 놨으니까
컨테이너 메이 컨텐츠만 만들어 주면 됩니다
이렇다
지금까지 코딩한 내용을 그림으로 표현해 보면 보시는 것과 같은 구성입니다
땀으로 인텍스 점 php 파일을 열어서 div 태그로 이 클래스들을
디스플레이 시켜줄 레이어를 만들어 보도록 하겠습니다
레이어 구성도 에서 보신 구성에 대한 코딩이 완료되었습니다
최상단 레어 인 컨테이너 않은
컨테이너 박스를 만들었습니다
컨테이너 박스 는 컨테이너를 컨텐츠 영역과 사이드 바로 나 네 귀한
테이블입니다
블럭을 만드는 방법은 여러가지가 있겠지만 제 생각으로는 테이블을 이용해서
블럭을 나은 방법이 간단하면서도 깔끔합니다
보시다시피 코드가 아주 간단합니다
박사 컨텐츠 영역 인 메인 컨텐츠와 사이드바 2개 블록을 만들었습니다
그럼 이제 이 안으로 인덱스 mp hp 에서 작성한 내용을 이동해 보도록
하겠습니다
퍼스 lg 디스플레이 주 는 코드는 당연히 메인 컨텐츠로 이동 시켜 줘야
겠죠
그리고 싸이 더 많은 당연히 사이드 반으로 이동시킵니다
끝났습니다 아주 간단하죠 이렇게 미리 레이어를 머리속에 그려 두고 작업
하시면 아주 쉽게 끝낼 수 있습니다
사이트로 가서 결과를 확인해 보도록 하겠습니다
저희가 원하는 대로 결과가 넣은 것을 보실 수가 있습니다
그런데 사이드바 프레임이
두 개로 보입니다
제가 이곳에
사이트 바 클래스를 보여 주고
이곳에서 중복이 되어서 게임이 2개로 보여지고 있습니다
8 도와주시고
이제 최종적으로 저희가 원하는 결과가 출력되었습니다
그런데 헤드가 약간 튀어 나오네요
스타일시트 파일의 바디 html 태그의 패딩과 마진을 없애 주도록
하겠습니다
다시 돌아가서 출력해 보시면
깔끔하게 수정된 것을 보실 수가 있습니다
오늘은 스타일 시트를 수정해서 전체적인 내어서 를 잡아보았습니다
예약과 디자인은 상상력 만큼 다양하게 나올 수 있습니다
하지만 워드프레스 기본 구조는 보신 대로 이것이 전부입니다
이 프레임을 기반으로 헤더를 추구하던 사이드 발 추가된 푸터 를 억제 등
원하시는 대로 만들 수 있을 것이라 생각됩니다
워드프레스는 프로그래머가 아닌 분들도 레이아웃을 코딩 없이 드래그 앤
드랍으로 만들어 줄 수 있는 테마나 플러그인을
가지고 있습니다
좀 더 다양하게 페이지를 구성할 수 있는 것도 사실이지만
아무래도 결국 css 를 선택하는 경우가 많은 게 사실입니다
오늘 보신 것만 숙지하셔도 워드프레스 운영에 보기 훨씬 넓어질 수 있을
것이라 생각됩니다
시청해주셔서 감사합니다 다음 강좌에서 뵙겠습니다
댓글 0개
등록된 댓글이 없습니다.