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

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

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

사이트 이미지
웹사이트

회원관리 사이트

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

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

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

사이트 이미지
쇼핑몰

해외 쇼핑몰

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

사이트 이미지
쇼핑몰

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

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

포트폴리오 보기

커스텀 디자인

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

Brizy Pro

페이지 빌더

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

Elementor Pro

페이지 빌더

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

Advanced Custom Field Pro

사용자 정의 필드

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

Pods

사용자 정의 콘텐츠 타입

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

블로그

CSS에서 마진과 패딩은 <div>태그 만큼이나 많이 사용하는 스타일시트 속성입니다. 이들의 주된 역할은 <div>태그와 같은 블럭요소를 이용한 레이아웃에서 블럭의 경계선에 해당하는 border(테두리)와 컨텐트의 간격을 설정하거나 인근의 블럭요소와 의 간격을 설정해서 보기 좋은 레이아웃을 만드는데 있습니다. 블럭요소의 내부에 있는 컨텐트와 border와의 간격을 패딩이라고 하고 블럭요소간의 간격을 마진이라고 합니다.

우선 이들의 세부적인 내용을 알아보기 전에 이전 글에서 작업한 것을 보면 배경색도 이상하고 블럭요소간에 구분하기 위해서 설정한 테두리 색깔도 보기 좋지 않으므로 다 제거하고 CSS3에서 새롭게 나온 속성인 그림자(Shadow)효과와 박스의 모서리를 둥글게 할 수 있는 효과인 border-radius에 대해 알아보고 설정해 보겠습니다. 이 두가지 속성은 모든 브라우저에 적용되는 기능이어서 기초부분에서 소개해도 될것 같습니다. CSS3의 모든 속성이 대부분의 브라우저는 적용이 되지만 인터넷 익스플로러는 적용이 안되는 경우가 있어서 이를 적용되게끔 수정하는 핵(Hack)은 기초에서 다루기 어렵기 때문입니다.

 
이전글에서 진행한 것중에 테두리와 배경의 색상관련한 내용은 다 제거합니다.

모서리 둥글게하기, 그림자효과 주기


 
그다음에 배경색을 넣어줍니다. 화면전체의 배경에 해당하는 body태그의 배경색은 #f2f2f2를 입력하고 나머지 헤더, 컨텐트, 사이드바, 푸터의 배경색은 흰색인 #fff를 입력합니다. 그리고나서 이 네가지 요소에 대하여 border-radius:15px; 을 입력해줍니다. 저장을 하고 웹브라우저에서 보면 body의 배경색은 옅은 회색이 되고 나머지 요소들의 색은 흰색이 되면서 각 요소의 모서리는 둥글게 됩니다. border-radius는 모서리의 반지름이 15픽셀만큼 둥글게 하는 효과입니다.

그다음에 바디태그를 제외한 4가지 요소에 대하여 box-shadow속성과 값을 입력합니다. box-shadow 속성의 처음나오는 값은 X방향으로, 두번째 값은 Y방향으로 그림자를 만드는 수치입니다. 여기서는 0으로 했으므로 어떤 방향으로 그림자가 만들어지지 않습니다. 하지만 세번째 값인 블러값으로 인해서 모든 방향에 그림자가 만들어집니다. 네번째 값은 스프레드인데 이것도 0으로 합니다. 색상은 중간회색인 #888888을 입력합니다. 저장을 하고 웹에서 보면 다음과 같이 나옵니다.

 
테두리에 그림자가 생기고 모서리가 둥글게 됐습니다. CSS3가 아니면 포토샵으로 이미지를 만들어서 작업해야하는 효과입니다. 그런데 여기서 또 원하지 않은 공간이 나오게 됩니다. 1의 공간은 안녕하세요라는 h1태그가 만들어내는 고유의 공간이고 2는 ul태그가 만들어내는 고유의 공간입니다. 이런 공간들은 블럭요소들이 가지고 있는 고유의 특성이라서 처음 스타일시트 작성할때 초기화(Reset)을 해주고 시작하는 것이 좋습니다. 즉 스타일시트에서 최상위에 * { margin:0; }을 입력해주면 저러한 공간은 없어집니다. 그런데 3은 ul태그가 있는데도 공간이 없습니다. 이것은 이전 글에서 float라는 속성을 이용해서 사이드바를 컨텐트 우측으로 보내는 작업을 했는데 float라는 속성이 들어가면 위 두개의 요소는 빈 공간에 뜨게 됩니다. 다음의 사진을 보면 알게됩니다.


wrapper태그에 대해서 border를 5픽셀 설정한 상황입니다. 원래의 의도대로라면 1의 테두리는 2까지 내려와서 컨텐트와 사이드바를 감싸야하는데 그냥 상단에 머물러 있습니다. 이것이 float로 인한 부작용입니다. 그래서 3의 푸터와 4의 래퍼는 5의 공간만큼 벌어져 있는 것이나 마찬가지라서 두 요소를 떨어트리기 위해 3의 푸터에 margin-top:10px; 을 설정해도 그대로 나오게 됩니다. 5의 공간이상의 수치를 줘야 비로소 벌어집니다. 이를 고치려면 스타일시트에서 #wrapper에 display: inline-block; 라는 속성과 값을 부여하면 됩니다.


모든요소에 마진, 패딩, 보더의 기본값을 초기화했으며 wrapper에  display: inline-block; 라는 속성을 적용했더니 다음과 같이 나옵니다.


이제부터 마진과 패딩을 이용하여 원하는 여유공간을 넣고 멋지게 레이아웃을 할 준비가 됐습니다.

마진(Margin)과 패딩(Padding) 테두리(border)의 관계



div {
      width:100px;
      margin:20px;
      padding:20px;
      border:5px solid blue;
 }

위 스타일시트의 코드는 위 그림으로 나타납니다. 어떤 컨텐트의 width가 100픽셀인데 여기에 패딩을 20픽셀 주게 되면 이 컨텐트는 140픽셀로 넓이가 늘어나고, border를 5픽셀 주면 총 넓이는 150픽셀로 늘어납니다. 다른 요소와의 간격인 margin을 20픽셀 주면 총 190픽셀로 늘어납니다. 1은 다른 요소가 위치하는 자리입니다. 위 코드를 스타일시트에 입력하고 div태그를 만들어 클래스 선택자를 적용하면 다음과 같이 나옵니다.


미니 웹사이트에서 실제로 적용하면서 이해하면 쉽습니다.


현재 웹페이지는 컨텐트영역에 글자가 꽉차게 나와서 패딩이 필요한 상태입니다. 스타일시트에서 컨텐트부분에 padding:20px;을 입력합니다. 그러면 앙쪽으로 20픽셀씩 늘어나므로 컨텐트의 원래 폭인 660픽셀을 더하면 700픽셀이 됩니다. 이것을 저장해서 웹에서 보면 사이드바가 아래로 내려갑니다. 그래서 사이드바의 width를 260픽셀로 줄여주면 사이드바는 원래의 위치로 돌아오고 폭은 줄어듭니다. 그러면 이번에는 sidebar에  padding:20px; 을 입력합니다. 이번에도 저장해서 보면 아래로 내려갑니다. 그래서 사이드바의 width를 220픽셀로 줄여주면 다시 원상태로 돌아옵니다.


컨텐트영역과 사이드바영역의 글자가 모든 면에서 20픽셀의 패딩이 만들어지면서 여유가 생겼습니다. 이번에는 마진을 입력해서 두개의 요소에 공간을 주도록합니다.


컨텐트 부분의 스타일시트에 마진을 입력합니다. 오른쪽 부분만 주면 되므로 margin-right라는 속성을 사용합니다. 사이드바에서 너무 줄였으니 이번에는 컨텐트에서 width를 줄입니다.


1처럼 두개의 요소가 벌어지면서 숨통이 트입니다. 그러면 래퍼가 헤더와 푸터사이에 있으므로 래퍼의 상단마진(margin-top)과 하단마진(margin-bottom)을 주면 공간이 생길것입니다. 


스타일시트의 래퍼에 상하 마진을 20픽셀씩 주니 위아래에 공간이 생겼습니다. 위의 코드는 margin:20px 0; 으로 해도 같은 결과가 나옵니다. 다음 글에서는 마진과 패딩, border를 설정하는 방법을 알아보고 위 미니 웹사이트의 나머지 부분의 마진과 패딩을 정리해 보겠습니다. 마진과 패딩에 대해서 이해가 되신다면 혼자서 해보셔도 됩니다. 


loyalty , ,

댓글 (17)

댓글 목록

CANTATA access_time

블로그 스킨을 만드는 과정과 같이 보이는 웹사이트 만들기네요^

베누시안 access_time

안녕하세요, 반갑습니다. 네 블로그 스킨 만드는 것과 같습니다. 댓글 감사드려요.

이츠하크 access_time

아주 헛갈리는 요소죠. 마진과 패딩...둥근 모서리기능은 정말 좋네요. 처음 알았습니다.
할수록 끌리네요. 처음부터 다시 복습해야죠. 토요일, 일요일 아주 좋습니다. 고맙습니다.^^

베누시안 access_time

안녕하세요. 마진과 패딩은 비슷한 기능을 하다보니 헷갈리기도 하고 어느 한쪽을 생각하고 수치를 주면 다르게 나와서 혼란스럽죠. 댓글 감사드려요.

샘이깊은물 access_time

안녕하세요.
이츠하크 선생님께서 극찬을 해 놓으셔서 들렀는데,
정말 그러실만 한 블로그입니다.
제겐 너무나도 요긴한 블로그.
앞으로 공부 많이 하겠습니다.^^

베누시안 access_time

안녕하세요, 반갑습니다. 이츠하크님이 CSS에 대해서 관심이 아주 많으셔서 그랬나 봅니다. 좋은 평가해주셔서 감사합니다. 댓글 감사드려요.

그린바이러스 access_time

잘 배우고 갑니다 ^^
따라하고 있었는데 막히는 부분이 있어 고민하던 찰나에
익스플로러6버전을 사용중이라는 것을 문득 깨달아서 눈구경만 하고 갑니다 ^^;

베누시안 access_time

안녕하세요. 반갑습니다. ie6이 CSS에서 안좋은 웹브라우저인데 빨리 알아채셔서 다행입니다. 댓글 감사드려요~~

olivegreen access_time

^^ 정말 좋은 정보를...
지금 비싼돈 주고 배우고 있는데..
여기서 이해하기가 더 쉬운~!!
감솨감솨~!^^

hannah kim access_time

안녕하세요
공부에 정말 큰 도움이 되고 있습니다.
이렇게까지 자세한 강좌 너무 감사해요~^^*

근데 질문이 있는데요
제가 하면 테두리가 표현이 안되요..
님께서 올리신 알집파일을 열어서 실행시켜봤는데
베누시안님이 만드신 파일도 제 컴에선 모서리래디우스값 적용된 모습이 표현이 안되네요
어찌 하면 좋을까요??

베누시안 access_time

안녕하세요. 모서리 둥글게 하거나 그림자효과는 인터넷 익스플로러 8이하버전은 적용이 안됩니다. 9버전이나 다른 웹브라우저, 구글 크롬, 파이어폭스를 이용해 보세요.

hannah kim access_time

자세한 설명에 댓글까지 잘 해주셔서 너무 감사합니다.
크롬으로 열었더니 단번에 해결이네요 ㅎ
아..제가 너무 몰라요..ㅜㅜ
베누시안님블로그보면서 많이 배웁니다.^^*

jk access_time

이렇게 자세하고 도움되는 강좌를 써주셔서 정말 너무너무 감사드립니다. 십여년전 인터넷 초기에 테이블 티알 티디로 홈페이지 만드는 실력으로 살아오던 제가 ! 드디어 눈을 뜨는것 같습니다. !! 고맙습니다.

베누시안 access_time

안녕하세요. 반갑습니다. 좋게 평가해 주셔서 감사드리고요. 이전 질문에 답변을 드리자면 사실 어도비 뮤즈는 웹디자인하기에는 무리가 있습니다. 데이터베이스를 연결하기 않는 단순한 페이지 만들기에는 좋겠지만 요즘의 웹페이지가 그런게 있을 수 없죠. 그래서 처음엔 좋은거 같아서 튜토리얼을 만들었지만 관심에서 멀어졌답니다. 특별한 기능이 없는 이상 별로 효과는 없을듯 합니다.

jk access_time

아 그렇군요 !! 뮤즈가 하드코딩할 줄 모르는 저에게 어쩜 기회가 되겠다 싶었어요 근데 이젠 css로 열심히 공부해서 도전해야 겠어요. 그래도 뮤즈 막힌 부분이 조금 궁금하긴 하네요 별로 실수는 안한 것 같은데 ^^ 혹시 나중에 시간 되시면 알려주세요~

따뜻한친구 access_time

정말 멋집니다. 따라해봤지만 ie라 안되는군요. 아쉽기도 하고. 포토샵으로 이미지를 만들지않고서도 가능하다는게 신기합니다. border-radius는 ie에서는 안되는가 봅니다. 어찌되었건 신기하고 멋집니다.

베누시안 access_time

IE는 9버전만 지원합니다. CSS는 포토샵을 사용하지 않아도 여러가지 시각적인 효과를 나타낼 수 있습니다. 이 블로그의 스킨도 포토샵을 전혀 사용하지 않았습니다. 웹디자인을 하시려면 구글 크롬을 사용하는 것이 좋습니다.