스타트업트랙 프론트엔드 개발과정 3 - (4)

CSS 기본 스타일 (2)

상자 관련 스타일

1) width, height : 높이와 너비

• index.html

<div class="outer">
    <div class="inner"></div>
  </div>

• style.css

/* 기본 세팅 */
body {
  padding: 0;
  margin: 0;
}
.outer { 
  width: 80%;
  height: 640px;
  background-color: yellowgreen;
}
.inner { background-color: green; }

.inner {
  width: 400px;
  height: 300px;
}
.inner {
  width: 50%;
  height: 50%;
}
.inner {
  width: 50vw;
  height: 50vh;
}
.inner {
  width: 50vmin;
  height: 50vmin;
}
.inner {
  width: calc(100% - 100px);
  height: calc(50vh + 200px);
}

2) margin : 바깥쪽 여백

• index.html

<div class="outer">
    <div class="inner">inner div</div>
    <div class="inner">inner div</div>
    <div class="inner">inner div</div>
  </div>

• style.css

/* 기본 세팅 */
body {
  padding: 0;
  margin: 0;
}
.outer { 
  background-color: yellowgreen;
}
.inner { 
  color: white;
  background-color: green; 
}

.inner {
  margin: 24px;
}
.inner {
  margin-top: 24px;
  margin-right: 48px;
  margin-bottom: 0;
  margin-left: 12px;
}
.inner {
  margin: 24px 48px 0 12px;
}
.inner {
  margin: 12px 48px;
}
.inner {
  width: 300px;
  margin: 12px auto;
}

3) padding : 안쪽 여백

.outer {
  padding: 24px;
}
.outer {
  padding-top: 24px;
  padding-right: 48px;
  padding-bottom: 0;
  padding-left: 12px;
}
.outer {
  padding: 24px 48px 0 12px;
}
.outer {
  padding: 12px 48px;
}

4) border : 테두리 선

border: (선 굵기) (선 스타일) (선 색)

• solid: 직선
• dashed: 점이 긴 점선
• dotted: 점선

• index.html

<div>테두리가 있는 div</div>

• style.css

/* 기본 세팅 */
div {
  margin: 24px;
  padding: 24px;
}
--------------------------------------
div {
  border: 1px solid black;
}
div {
  border-top: 1px solid black;
  border-right: 3px dashed green;
  border-bottom: 9px dotted #ff6347;
  border-left: 0;
}

5) border-radius : 둥근 모서리

• index.html

<div>둥근 모서리</div>

• style.css

/* 기본 세팅 */
div {
  width: 400px;
  height: 400px;
  line-height: 400px;
  text-align: center;
  color: white;
  background-color: orange;
  border: 2px solid darkorange;
}
----------------------------------
div {
  border-radius: 8px;
}
div {
  border-radius: 50%;
} // 원임
div {
  border-radius: 24px 0 25% 50%;
}

6) background : 배경

• style.css

/* 기본 세팅 */
div {
  width: 480px;
  height: 360px;
  border: 1px solid black;
}
--------------------------------
div { 
  background-color: green; 
}
div { 
  background-color: rgba(255, 255, 0, 0.5); 
}
div {
  background-image: url("./nature.jpg");
}
div {
  background-image: url("./nature.jpg");
  background-size: 480px 360px;
}
div {
  background-image: url("./nature.jpg");
  background-size: 50% 50%;
  background-repeat: no-repeat;
  background-position: 50px 50%;
}
div {
  /* 비율 유지, 상자에 빈 곳이 없도록 꽉 채움 */
  background-image: url("./nature.jpg");
  background-size: cover;
}
div {
  /* 비율 유지, 상자를 벗어나지 않도록 꽉 채움 */
  background-image: url("./nature.jpg");
  background-size: contain;
}

7) box-shadow : 그림자

box-shadow: (x축 위치) (y축 위치) ( [옵션] 번짐) (색상)

/* 기본 세팅 */
body { background-color: lightgray; }
div {
  background-color: white;
  width: 320px;
  height: 120px;
  border-radius: 16px;
}
---------------------------------------------
div {
  box-shadow: 1px 1px black;
}
div {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
}
div {
  box-shadow: 
  0 0 4px red,
  2px 2px 8px orange,
  4px 2px 12px yellow;
}