이번엔 스킨의 사이드바를 1단부터 2단까지 늘려보도록 해봅시다´ ▽`)つ
1일 1포스팅을 하려고 했는데, 의외로 힘들군요OTL
# 2단 3단 스킨?
2단은 기본적인 스킨의 형태로, 본문옆에 사이드바가 있는 경우입니다
지금 보시는 제 블로그가 2단 스킨의 대표적인 예입니다
3단 스킨은 사이드바가 2개라는 말이죠
본문을 중심으로 좌우에 하나씩 있는 경우도 있고, 좌 우 한쪽에 2개가 모두 있는게 있습니다
# 만들어 볼까요
만드는것 자체는 아주 간단합니다
먼저 CSS가 적용되는 HTML이 필요하므로, 지난번 글인 기본적인 CSS 를 읽어주세요
먼저, 3단 스킨을 만들어보겠습니다. 2단이나 3단중 하나만 이해하면, 나머지는 술술 풀어나갈 수 있을터니 3단만 뚝딱, 하겠습니다(...)
HTML작업은 이것만 하면 끝~ 입니다. 이제 남은건 CSS뿐인데, 그것도 간단하죠' 3')
핵심은 예전 글인 사이드바를 왼쪽으로 에 나와있는건 비밀입니다(...)
그냥 CSS로 박차고 나가면 간단하지만, 하나만 집고 넘어갑니다
ID를 설정하는건, 간단하게 말해 명령어의 이름을 짓고 명령을 하기 위해서 입니다
그것은 CLASS와 같지만 ID는 하위의 CLASS를 둘 수 있으므로, 중복되는 이름의 CLASS가 있다고해도 ID가 다르다면 따로 사용할 수 있습니다
크흠, 그런데 위의 아이디 이름은 상당히 일반적인 이름이죠. 아니, 너무 뻔한 이름입니다
ID나 CLASS의 이름은 꼭 저처럼 하지 않고, 원하는대로 지으실 수 있습니다만
척보면 딱! 하고 알 수 있도록 이름을 짓는것이 가독성에 좋습니다
예를 들어 해더의 ID를 side로 지었다고 가정해봅시다. 이 소스를 처음 본 사람은, 이게 분명 사이드바라고 생각할겁니다. 이런 문제점을 없애기 위해, 가급적 위와같이 뻔한 이름을 사용하는걸 추천합니다
자, 그럼 CSS로 넘어가 봅시다
중요한 부분은 표시해뒀습니다.
컨텐츠와 사이드바1과 사이드바3은 같은 줄에 위치해야하기 때문에 이처럼 부유지정(float)을 해주면 됩니다. 부유지정은 단순히 위치를 지정하는게 아니라 '다음 문단이 어디에 위치하느냐' 를 정하는 설정입니다
(지적 : 꼬세님)
이 방법을 응용하여 4단, 5단, 6단까지 만들 수 있습니다만, 쓰는 사람이 있을까요- 3-;;
위의 소스에서 사이드바2부분만 제거해주면 2단 스킨이 만들어집니다
1일 1포스팅을 하려고 했는데, 의외로 힘들군요OTL
# 2단 3단 스킨?
2단은 기본적인 스킨의 형태로, 본문옆에 사이드바가 있는 경우입니다
지금 보시는 제 블로그가 2단 스킨의 대표적인 예입니다
대표적인 2단 스킨들
3단 스킨은 사이드바가 2개라는 말이죠
본문을 중심으로 좌우에 하나씩 있는 경우도 있고, 좌 우 한쪽에 2개가 모두 있는게 있습니다
대표적인 3단 스킨들
# 만들어 볼까요
만드는것 자체는 아주 간단합니다
먼저 CSS가 적용되는 HTML이 필요하므로, 지난번 글인 기본적인 CSS 를 읽어주세요
먼저, 3단 스킨을 만들어보겠습니다. 2단이나 3단중 하나만 이해하면, 나머지는 술술 풀어나갈 수 있을터니 3단만 뚝딱, 하겠습니다(...)
코드 : 간단한 3단 스킨의 HTML 소스
<div id="container">
<div id="header">해더</div>
<div id="content">컨텐츠</div>
<div id="sidebar1">사이드바1</div>
<div id="sidebar2">사이드바2</div>
<div id="footer">푸터</div>
</div>
<div id="header">해더</div>
<div id="content">컨텐츠</div>
<div id="sidebar1">사이드바1</div>
<div id="sidebar2">사이드바2</div>
<div id="footer">푸터</div>
</div>
HTML작업은 이것만 하면 끝~ 입니다. 이제 남은건 CSS뿐인데, 그것도 간단하죠' 3')
핵심은 예전 글인 사이드바를 왼쪽으로 에 나와있는건 비밀입니다(...)
그냥 CSS로 박차고 나가면 간단하지만, 하나만 집고 넘어갑니다
ID를 설정하는건, 간단하게 말해 명령어의 이름을 짓고 명령을 하기 위해서 입니다
그것은 CLASS와 같지만 ID는 하위의 CLASS를 둘 수 있으므로, 중복되는 이름의 CLASS가 있다고해도 ID가 다르다면 따로 사용할 수 있습니다
크흠, 그런데 위의 아이디 이름은 상당히 일반적인 이름이죠. 아니, 너무 뻔한 이름입니다
ID나 CLASS의 이름은 꼭 저처럼 하지 않고, 원하는대로 지으실 수 있습니다만
척보면 딱! 하고 알 수 있도록 이름을 짓는것이 가독성에 좋습니다
예를 들어 해더의 ID를 side로 지었다고 가정해봅시다. 이 소스를 처음 본 사람은, 이게 분명 사이드바라고 생각할겁니다. 이런 문제점을 없애기 위해, 가급적 위와같이 뻔한 이름을 사용하는걸 추천합니다
자, 그럼 CSS로 넘어가 봅시다
코드 : 간단한 3단 스킨의 CSS 소스
#container { width:800px; margin:10px auto; }
#header { }
#content { width:500px; float:left; margin-right:10px; background-color:#FBE5F1; }
#sidebar1 { width:140px; float:left; background-color:#A8D4FF; }
#sidebar2 { width:140px; float:right; background-color:#CCFF00; }
#footer { clear:both; }
#header { }
#content { width:500px; float:left; margin-right:10px; background-color:#FBE5F1; }
#sidebar1 { width:140px; float:left; background-color:#A8D4FF; }
#sidebar2 { width:140px; float:right; background-color:#CCFF00; }
#footer { clear:both; }
중요한 부분은 표시해뒀습니다.
컨텐츠와 사이드바1과 사이드바3은 같은 줄에 위치해야하기 때문에 이처럼 부유지정(float)을 해주면 됩니다. 부유지정은 단순히 위치를 지정하는게 아니라 '다음 문단이 어디에 위치하느냐' 를 정하는 설정입니다
(지적 : 꼬세님)
잘 적용된 화면(클릭)
이 방법을 응용하여 4단, 5단, 6단까지 만들 수 있습니다만, 쓰는 사람이 있을까요- 3-;;
위의 소스에서 사이드바2부분만 제거해주면 2단 스킨이 만들어집니다
트랙백 주소 : http://alwaysgoon.tistory.com/trackback/781
참고로 float는 위치지정이 아니라 다음에 오는단의 부유지정이 정확한 표현인것 같습니다.^^
감사합니다. 수정하겠습니다:D
위치지정이 잘못된게 아니죠.맞는 말씀입니다만 제가 처음 css를 접했을때 가장 혼란스러웠던 부분이였기에 덧붙여서 쓴거랍니다^^ 가끔 올때마다 태클만 거는건 아닌지..ㅋㅋㅋ죄송요~~
관련 문서에도 '위치지정'이 아니라 다음 문단이 어느 방향에 있는가- 라고 되어있더군요. 같은것 같기도 하고 다른것 같기도하고..;
네..정확히 다음문단이 부유되는 위치라고 표현되어있답니다. 같은것 같지만 다르기에 태클아닌태클은 ^^
CSS 문서에서 위치지정 은 absoulte , relative 를 표기할때 사용한답니다. 그럼^^
어 댓글을 달았는데 지워졌네요 -_-;
3단으로 스킨을 만들때.. 지금 예제에서는
사이드바가 오른쪽 2개가 겹쳐져 있는데
하나를 컨텐츠 영역 좌측으로 옮기려면 어떻게 해야 하나요?
안녕하세요?
사이드바가 2개일 경우 역시 본문과 마찬가지로 float의 방향을 정해주면 이동할 수 있습니다
물론, float을 적용할 사이드바의 ID(또는 CLASS)가 뭔지 알아야겠죠?
블로그 스킨 수정 화면에서 CSS란의 초반 부분에 레이아웃 관련 설정이 있으니, 한번 유심히 살펴보시기 바랍니다. 티스토리에서 제공하는 스킨은 대부분 알아보기 쉬우므로, side 같은 단어로 찾아보는것도 좋습니다
잘 안되서 다시 질문을 ㅠ.ㅠ
3단스킨 구성을 하고
사이드바1 / 컨텐츠영역 / 사이드바2
이렇게 배치를 하려고 float 수정을 아무리 해봐도 안되네요 ㅠ.ㅠ
컨텐츠영역 / 사이드바1 / 사이드바2
사이드바1 / 사이드바2 / 컨텐츠영역
이렇게만 변화가 되네요..
float에 라이트와 레프트를 어떻게 해줘야 가능할까요..?
비로그인 상태에서 작성하셔서, 블로그에 들릴 수 없기 때문에 무슨 스킨을 사용하는지는 잘 모르겠습니다만...
위의 꼬세님의 댓글을 보면 아시다시피, float은 방향 지정이 아닌, 다음에 오는 문단의 위치 지정입니다
즉
HTML의 소스에서
<div id="c">컨텐츠</div>
<div id="s1">사이드바1</div>
<div id="s2">사이드바2</div>
이렇게 되어있는 상태이며 CSS는
로 되어있다고 가정 하겠습니다
이 상태에서, 컨텐츠(본문)이 왼쪽에 배치되고 사이드는 1번 2번 순서대로 왼쪽부터 배치됩니다
s1만 왼쪽으로 이동하기 위해서 float값을 left로 바꾸는것뿐만이 아니라, HTML에서 div까지 옮겨줘야합니다
즉, 위의 예시 소스에서 s1을 왼쪽으로 옮기고 싶다면, 다음처럼 변경해야합니다
[HTML]
<div id="s1">사이드바1</div>
<div id="c">컨텐츠</div>
<div id="s2">사이드바2</div>
[CSS]
#c { float:right; }
#s1 { float:left; }
#s2 { float:right; }
로그인 하셔서 댓글을 작성하시거나, 블로그 스킨을 알려주시면 더 확실하게 알 수 있을듯합니다:D