최적의 레이아웃을 위한 CSS 박스 모델 및 마진 마스터하기 - 웹 디자인 튜토리얼

소개

프리미엄 펫 케어 서비스를 제공하는 웹사이트 "Pet's House"의 번잡한 디지털 환경에서, 재능 있는 웹 개발자인 주인공 Jordan 은 웹사이트의 레이아웃과 디자인을 개선하는 임무를 맡았습니다.
장면은 도시의 스카이라인이 내려다보이는 아늑한 사무실에서 시작되며, Jordan 은 CSS Box Model 과 Margins 원칙을 세심하게 적용하여 사용자 경험을 최적화하기로 결심합니다.

이 랩에서는 CSS Box Model 및 Margins 와 같은 속성을 사용하여 레이아웃을 개선할 것입니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 86.42%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css/BasicConceptsGroup -.-> css/properties("Properties") css/BasicConceptsGroup -.-> css/values("Values") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/box_model("Box Model") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/borders("Borders") subgraph Lab Skills css/properties -.-> lab-289075{{"CSS 박스 모델과 마진"}} css/values -.-> lab-289075{{"CSS 박스 모델과 마진"}} css/colors -.-> lab-289075{{"CSS 박스 모델과 마진"}} css/box_model -.-> lab-289075{{"CSS 박스 모델과 마진"}} css/margin_and_padding -.-> lab-289075{{"CSS 박스 모델과 마진"}} css/borders -.-> lab-289075{{"CSS 박스 모델과 마진"}} end

Box Model 이해하기

요소들이 우리가 디자인한 위치에 나타나도록 하려면 어떻게 해야 할까요?

이 단계에서는 웹 페이지의 레이아웃을 관리하는 기본적인 개념인 CSS Box Model 에 대해 자세히 알아보겠습니다. 페이지의 각 요소는 마진 (margins), 테두리 (borders), 패딩 (padding), 그리고 실제 콘텐츠로 구성된 상자 (box) 로 간주됩니다. 이 모델을 통해 개발자는 요소의 간격과 크기를 정확하게 제어할 수 있습니다.

아래 그림과 같이 <li> 요소를 선택한 후 F12 키를 눌러 개발자 도구를 열면, Computed 섹션에서 해당 요소의 box model 을 확인할 수 있습니다.

다음으로, box model 의 세 가지 중요한 속성을 소개하겠습니다.

border (테두리)
padding (패딩)
margin (마진)

✨ 솔루션 확인 및 연습

Border (테두리)

border 단축 CSS 속성은 요소의 테두리를 설정합니다. border-width, border-style, 그리고 border-color의 값을 설정합니다.

사용 형식은 다음과 같습니다.

border: width style color;

예를 들어, <p> 요소에 테두리를 추가하려면 다음 CSS 를 사용할 수 있습니다.

펫 페이지에서 폼 내의 버튼에 테두리가 필요하다면, style.css 파일에 다음 내용을 추가하여 스타일을 지정할 수 있습니다.

form .btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
  font-weight: 700;
  letter-spacing: 2px;
  border: 2px solid #eaeaea;
}

또한, border-radius 속성을 사용하여 버튼에 둥근 모서리 효과를 줄 수 있습니다. 다음은 이를 추가하는 방법입니다.

form .txt-box {
  width: 100%;
  border-radius: 2px;
  border: 2px transparent;
  color: #3d3939;
}
form .btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
  font-weight: 700;
  letter-spacing: 2px;
  border: 2px solid #eaeaea;
  border-radius: 4px;
}

"About Us" 섹션에서 원형 이미지 효과를 표시하려면, 실제로 border-radius 속성을 사용할 수 있습니다. 다음은 이를 적용하는 방법입니다.

.circle {
  width: 950px;
  height: 650px;
}
.circle img {
  border-radius: 100%;
  width: 70%;
  height: 100%;
}

✨ 솔루션 확인 및 연습

Padding (패딩)

padding CSS 단축 속성은 요소의 네 면 모두에 패딩 영역을 한 번에 설정합니다.

사용 형식은 다음과 같습니다.

padding: top right bottom left;

padding-top: top padding value;
padding-left: left padding value;
padding-right: right padding value;
padding-bottom: bottom padding value;

예를 들어, <p> 요소에 패딩을 추가하려면 다음 CSS 를 사용할 수 있습니다.

style.css 파일에 다음을 추가합니다.

h1 {
  padding-bottom: 30px;
  padding-left: 0.5em;
  text-align: center;
  font-size: 4em;
}
h2 {
  font-size: 2.8vw;
  padding-bottom: 15px;
  text-transform: uppercase;
}
header {
  background-color: rgb(233, 174, 87);
  width: 100%;
  max-height: max-content;
  min-height: 1em;
  padding-top: 1%;
  padding-bottom: 1%;
  text-transform: uppercase;
}
.navigation li a {
  text-decoration: none;
  color: black;
  padding: 10px;
}
.container {
  padding: 0px;
  padding-top: 1em;
  width: 100%;
}
section {
  width: 100%;
  padding: 10% 0;
}
.cover-sect {
  padding: 5% 0;
}
.title-text {
  width: 40%;
  text-align: center;
  color: black;
  padding: 0 20px;
}
.service figcaption {
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
}
.contact-section p {
  padding-right: 2em;
  padding-left: 3em;
}

.form-box {
  padding-top: 1em;
}

form .form-content {
  padding: 0.8em 0;
}

form .txt-box {
  width: 100%;
  padding: 0.7em 0;
  border-radius: 2px;
  border: 2px transparent;
  color: #3d3939;
}
form .btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
  font-weight: 700;
  letter-spacing: inherit;
  border: 2px solid #eaeaea;
  border-radius: 4px;
  padding: 0.7em;
}

✨ 솔루션 확인 및 연습

Margin (마진)

margin CSS 단축 속성은 요소의 네 면 모두에 마진 영역을 설정합니다.

사용 형식은 다음과 같습니다.

margin: top right bottom left;

margin-top: top margin value;
margin-left: left margin value;
margin-right: right margin value;
margin-bottom: bottom margin value;

예를 들어, <p> 요소에 마진을 추가하려면 다음 CSS 를 사용할 수 있습니다.

style.css 파일에 다음을 추가합니다.

* {
  margin: auto;
}
.logo-section {
  width: 10%;
  margin-left: initial;
}
.logo {
  margin-left: 0.8em;
  max-width: 60%;
}
section div {
  width: 50%;
  margin: 0 auto;
}
.cover-sect {
  margin-top: 0px;
  padding: 5% 0;
}
.title-text {
  width: 40%;
  text-align: center;
  color: black;
  margin: auto;
  padding: 0 20px;
}
.circle img {
  border-radius: 100%;
  width: 70%;
  height: 100%;
  margin-left: 15%;
}
.services {
  width: 90%;
  margin: 20px auto;
}
form .txt-box {
  margin-top: 0.3em;
  width: 100%;
  padding: 0.7em 0;
  border-radius: 2px;
  border: 2px transparent;
  color: #3d3939;
}
footer div {
  margin-right: 2em;
}

footer span {
  text-align: center;
  margin-left: 2em;
}

footer .company-info {
  margin-left: 20em;
}

footer .contact-us {
  margin-left: 25em;
}

✨ 솔루션 확인 및 연습

Box Shadow (박스 그림자)

애완동물 페이지에서, 폼의 제출 버튼에 그림자 효과를 추가하려면 box-shadow 속성을 사용할 수 있습니다.

box-shadow 속성은 하나 이상의 박스 그림자를 추가하여, 박스에 그림자가 있는 것처럼 시각적인 효과를 생성하는 데 사용됩니다.

구문 형식은 다음과 같습니다.

box-shadow: h-shadow v-shadow blur spread color inset;

각 값의 의미는 다음과 같습니다.

값	설명
h-shadow	필수. 그림자의 수평 위치, 음수 값 허용.
v-shadow	필수. 그림자의 수직 위치, 음수 값 허용.
blur	선택 사항. 흐림 거리.
spread	선택 사항. 그림자의 크기.
color	선택 사항. 그림자의 색상.
inset	선택 사항. 그림자를 외부 그림자에서 내부 그림자로 변경합니다.

style.css 파일에 다음을 추가합니다.

form .btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
  font-weight: 700;
  letter-spacing: inherit;
  border: 2px solid #eaeaea;
  box-shadow: 0px 0px 10px 1px #29393e;
  border-radius: 4px;
  padding: 0.7em;
}

참고: 많은 CSS 속성을 다루었지만, 페이지 레이아웃이 여전히 정돈되지 않은 것처럼 보일 수 있습니다. 걱정하지 마세요. 나중에 여러 페이지 레이아웃 기술을 소개할 예정입니다. 이러한 기술은 Flexbox, Grid 및 기타 CSS 레이아웃 모델을 포함하여 페이지를 보다 효과적으로 구성하고 구조화하는 데 도움이 됩니다. 이러한 모델은 반응형, 유연하고 잘 정리된 레이아웃을 디자인하기 위한 강력한 도구를 제공합니다.

✨ 솔루션 확인 및 연습

요약

이번 랩에서는 Jordan 과 함께 CSS Box Model (박스 모델) 과 Margins (마진) 의 복잡성을 탐구하며 "Pet's House" 웹사이트의 레이아웃과 디자인을 향상시켰습니다. 마진, 테두리, 패딩, 콘텐츠와 같은 박스 모델의 구성 요소를 이해하는 것부터 시작하여, 이러한 원칙을 적용하여 사이트의 구조와 사용자 인터페이스를 개선했습니다. 마진을 조작하여 요소 간의 간격을 효과적으로 제어하는 방법을 배웠습니다. 패딩 조정을 통해 요소 내의 콘텐츠가 명확하고 매력적으로 표시되도록 했습니다. 이 랩은 CSS 기술을 연마했을 뿐만 아니라, 매력적이고 사용자 친화적인 웹 경험을 만들기 위한 세심한 레이아웃 디자인의 중요성을 강조했습니다.