워드프레스 쇼핑몰, 웹사이트

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
웹사이트

회원관리 사이트

회원관리 프러그인을 이용한 학회 홈페이지.

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
쇼핑몰

해외 쇼핑몰

해외 대상 쇼핑몰. 다양한 플러그인 사용됨.

사이트 이미지
쇼핑몰

강아지 용품 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

포트폴리오 보기

커스텀 디자인

여러 종류의 플러그인을 이용해 페이지와 콘텐츠를 커스텀 디자인

Brizy Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Elementor Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Advanced Custom Field Pro

사용자 정의 필드

커스텀 콘텐츠 작업에 필요한 플러그인

Pods

사용자 정의 콘텐츠 타입

기본 콘텐츠 타입외에 다양한 형태의 콘텐츠 생성.

블로그

이전 글에서 레이아웃의 종류로 고정폭과 유동폭에 대해서 알아보았습니다. 대부분의 블로그나 웹사이트에서는 고정폭 레이아웃을 사용합니다. 요즘은 모니터화면이 와이드로 나오기 때문에 유동폭 레이아웃을 사용하면 컨텐트가 화면에 꽉 차게 나오므로 글을 읽기가 힘들죠. 특수한 경우, 예를 들면 포털 사이트에서 검색어를 입력하고 엔터키를 치면 들어가는 페이지의 경우는 유동폭 레이아웃을 사용합니다. 컨텐트가 좌우로 꽉차게 나오죠. 하지만 화면을 줄이다보면 일정 범위까지는 컨텐트 영역이 좌우로 줄어들지만 그 범위를 넘어서면 고정폭으로 전환되어 더이상 줄어들지 않습니다.

이번 글에서는 고정폭 2단(Two Columns)과 3단 레이아웃에 대해서 설정하는 방법을 알아봅니다. 2단 레이아웃은 컬럼이 두개만 있기때문에 CSS에서 간단하게 배치할 수 있는데 3단의 경우는 여러가지 방법을 사용할 수 있습니다.

1. 고정폭 2단 레이아웃




첨부파일의 압축을 풀고 html파일을 클릭하면 웹브라우저 화면에 위와같이 나옵니다. CSS에서 컨텐트와 사이드바를 float:left; 속성을 적용한 결과입니다.


두개의 파일을 텍스트에디터에 열면 위와같이 나옵니다. 위 코드에서 시작하여 앞으로 유동폭 레이아웃까지 진행됩니다. html부분을 보면 크게 4부분으로 나옵니다. CSS에서는 고정폭이므로 width가 정해지고 중앙에 배치하기 위해서 margin:0 auto; 를 적용했습니다. CSS에서 패딩과 마진, 테두리의 값은 블럭요소의 폭에 포함되므로 width가 딱 떨어지는 수치가 아닙니다. header에서 패딩 10픽셀 양쪽 적용, 테두리 1픽셀 양쪽 적용되므로 이 수치는 22픽셀이고 778픽셀을 더하면 800픽셀이 됩니다. 컨텐트나 사이드바, footer도 마찬가지입니다. 


html 페이지는 검색엔진이 순서대로 검색을 하기 때문에 중요한 내용이 있는 컨텐트 영역이 먼저 나오는게 좋습니다.그런데 어떤 사정에 의해서 사이드바가 먼저 나와야할 경우 1과 2처럼 배치되는데 CSS에서 3과 4처럼 둘다 float:left;로 되어있다면 사이드바가 좌측에 배치됩니다. html에서 사이드바가 먼저 나오더라도 레이아웃에서는 우측으로 보내고 싶다면  CSS에서 사이드바의 속성을 float:right;로 하면 됩니다. 두개의 컬럼이 있는 레이아웃은 어렵지 않게 원하는대로 배치할 수 있습니다.

2. 고정폭 3단 레이아웃




압축파일을 풀고 텍스트에디터에 열면 사이드바가 하나 추가되었고 CSS에서도 이에 대한 설정이 되어있습니다. html파일을 웹브라우저에 열면 CSS에서 모두 float:left;로 되어있기 때문에 순서대로 배치됩니다. 3단 레이아웃에서 많이 사용하는 방법인 사이드바를 양쪽에 배치하려면 4의 사이드바 a를 5의 위치로 이동함 하면 됩니다. 하지만 검색엔진 최적화를 위해서는 컨텐트 영역을 항상 상위에 올려놓는 것이 좋습니다. 그래서 html은 그대로 두고 CSS만으로 레이아웃을 변경하려고 합니다.


html에서 wrapper라는 id의 이름으로 div태그를 만들어 컨텐트와 사이드바 a를 감싸고 CSS에서 이 wrapper에 대해서 float:left;를 적용하고 컨텐트는 float:right;를 사이드바 a는 float:left;를 적용합니다. 사이드바 b는 float:left;를 적용하거나 float:right;를 적용해도 같습니다. 또하나의 방법은 절대위치를 사용하는 방법입니다.


html에서 컨텐트와 두개의 사이드바를 wrapper로 감싸고 CSS에서는 wrapper를 상대위치로 설정합니다. 사이드바는 둘다 절대위치로 설정하고 사이드바 a는 left:0px;로하면 부모요소인 wrapper를 기준으로 좌측끝에 위치하고 사이드바 b는 right:0px;로 하면 우측끝에 위치하게 됩니다. 컨텐트영역은 float:left;로 설정하고 사이드바의 공간을 비워줘야하기 때문에 앙쪽 마진을 사이드바의 공간만큼 설정하면 다음과 같이 나옵니다.


사이드바의 위치를 서로 바꾸려면 다음과 같이 합니다.

 
사이드바 a는 right로 사이드바 b는 left로 속성을 서로 교체해주면 간단하게 위치가 바뀝니다.

 
loyalty , ,

댓글 (9)

댓글 목록

까움이 access_time

안녕하세요. HTML공부하던 중, 좋은 글을 보게 되서 글 남깁니다.^^
앞으로도 자주 뵐께요! 좋은 이웃 됬으면 합니다!
건강하세요!~

베누시안 access_time

안녕하세요. 반갑습니다. 좋게 평가해주시니 감사합니다. 댓글 감사드려요.~

이츠하크 access_time

꾸준히 보고 있습니다. 베누시안님 감사하고요.
한가지 질문이 있는데요. 워드프레스 무료 제공 스킨을 쓰려고 하면 티스토리에서는 쓸 수 가 없던데 그 이유가 뭔가요? 그리고 그 스킨을 티스토리에 맞게 고치려면 어떻게 해야하나요?
아직 그 단계가 아닌데 질문을 드려서 머쩍은데요. 궁금해서 그럽니다.^^

베누시안 access_time

안녕하세요. 설은 잘 지내셨죠? 새해 복 많이 받으세요.

블로그에서 스킨을 너무도 쉽게 바꿀 수 있기 때문에 다른 블로그 프로그램의 스킨을 적용하기 쉽다고 생각될 수도 있습니다. 하지만 스킨은 일반적으로 웹사이트 자체를 의미합니다. 그래서 하나의 웹사이트를 만드는 것과 같다고 볼 수 있죠. 다양한 스킨이 있어서 원하는 스킨을 바꾸는 것은 쉽지만 그것은 해당 프로그램에만 최적화되어 적용할 수 있는 것이라서 다른 블로그 프로그램에는 전혀 적용이 안됩니다.

왜 그러냐하면 블로그나 웹사이트는 두 부분으로 나누어집니다. 하나는 html코드이고 다른 하나는 CSS코드죠. 스킨은 CSS로 만들어집니다. 티스토리 블로그의 모든 스킨의 html는 다 비슷합니다. html의 어떤 요소에 대해서 배경색을 정할때 예를 들어 id="article"이라는 선택자에 대해서 CSS에서 선언을 하게 됩니다. 그러면 티스토리의 블로그 html에는 모두 id="article"이라는 선택자가 있기때문에 다른 스킨의 CSS에서 선언하더라도 html에 적용이 되죠. 만일 워드프레스의 구조가 티스토리 처럼 id="article"이라는 요소가 있다면 같은 색상이 적용되겠죠. 그런데 티스토리의 article에 해당하는 부분은 본문영역입니다. 워드프레스에는 article이라는 선택자가 없다면 적용이 안되겠죠. 이처럼 두개의 프로그램이 원초적으로 다른 구조이기 때문에 스킨이 적용될 수 없습니다.

만일 워드프레스의 스킨이 마음에 들어서 이를 티스토리에 적용하고자 한다면 스킨을 다시 만드는 것과 같은 작업을 해야합니다. 물론 이미 만들어져 있는 이미지가 있기 때문에 쉽기는 하겠죠. 하지만 모든 CSS를 고쳐야하기 때문에 새로 만드는 것과 거의 비슷한 작업을 하게 됩니다.

최명규 access_time

서버단 언어만 알고 있는 저에게 레이아웃을 짤려고 하니 너무 머리 아프고 힘들었는데 여기 포스팅을 보고 재대로 배웠네요..^^

베누시안 access_time

안녕하세요. 반갑습니다. 도움이 되셨다니 다행입니다. 좋게 평가해주셔서 감사합니다~~

access_time

비밀댓글입니다

베누시안 access_time

안녕하세요. 39페이지에 보면 파일 내려받는 방법에 대해 나옵니다. 전체 파일은 40페이지에 나옵니다. 책에는 링크만 있어서 일일히 브라우저 주소창에 입력해야 하지만 첨부파일을 사용하면 텍스트로 모든 링크 주소가 첨부돼있으니 복사해서 브라우저 주소창에 붙여넣으면 편리합니다. 첨부파일은 서문에 보면 주소가 나오니 참고하세요. 53페이지의 bootstrap-master222는 제가 내려받는 파일의 이름을 변경한 것이니 임의의 폴더입니다. 직접 내려받으면 bootstrap-master.zip으로 돼있으니 압축을 풀면 bootstrap-master 폴더에 압축이 풀립니다. 폴더로 들어가서 필요한 파일을 복사 이동하면 됩니다.

여보비치 access_time

관리자의 승인을 기다리고 있는 댓글입니다