[React] 강의 2주차 (4) - CSS 속성 (border, box-sizing, display, overflow, opacitiy)

[국비지원교육]  [패스트캠퍼스] React 강의 2주차 (4) - CSS 속성

 

- 테두리선(border)

- 모서리 둥글게 (border-radius)

- 크기 계산(box-sizing)

- 넘침 제어(overflow)

- 출력 특성(display)

- 투명도

- 글꼴

---

1. 테두리선 (border)

: 요소의 테두리 선을 지정하는 단축 속성

: 선-두께(border-width), 선-종류(border-style), 선-색상(border-color)

 

(index.html)
<div class="cont">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>


(main.css)
.cont {
  width: 100px;
  height: 100px;
  background-color: orange;
}
.item {
  width: 20px;
  height: 20px;
  background-color: pink;
  border: 3px solid red;
}

.cont .item:nth-child(1) {
  border-width:5px 10px;
}

.cont .item:nth-child(2){
  border-color: #ccc;
}

.cont .item:nth-child(3){
  border-style: dashed;
}

---

 

2. 모서리 둥글게 (border-radius)

0 : 둥글게 없음

단위 : px, em, vw 등

 

(index.html)

<div class="cont">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

(main.css)
.cont {
  width: 100px;
  height: 100px;
  background-color: orange;
}
.item {
  width: 20px;
  height: 20px;
  background-color: pink;
  border: 3px solid red;
  margin: 5px;
}

.cont .item:nth-child(1) {
  border-radius: 5px;
}
.cont .item:nth-child(2){
  border-radius: 50%;
}
.cont .item:nth-child(3){
  border-radius: 1vw;
}

 

---

3. box-sizing

: 요소의 크기 계산 기준을 지정

- content-box : 요소의 내용(content)으로 크기 계산

- border-box : 요소의 내용 + padding + border로 크기 계산

 

(index.html)
<div class="cont">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

(main.css)
.cont {
  width: 300px;
  height: 300px;
  background-color: orange;
}
.item {
  width: 50px;
  height: 50px;
  background-color: pink;
  border: 3px solid red;
  margin: 5px;
}

.cont .item:nth-child(1) {
  border: 4px solid red;
  padding: 20px;
}
.cont .item:nth-child(2){
  width: 100px;
  padding: 10px;
  box-sizing: content-box;
}
.cont .item:nth-child(3){
  width: 100px;
  padding: 10px;
  box-sizing: border-box;
}

---

 

4.  넘침제어(overflow)

: 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성

- visible : 넘친 내용을 그대로 보여줌

- hidden: 넘친 내용을 잘라냄

- scroll : 넘침내용을 잘라내서, 스크롤로 표현

- auto : 넘쳤을 경우 스크롤로 표현

 

 

(index.html)
<div class="parent">
  <div class="child"></div>
</div>
<div class="parent parent2">
  <div class="child"></div>
</div>
<div class="parent parent3">
  <div class="child"></div>
</div>

(main.css)
.parent {
  width: 200px;
  height: 150px;
  background-color: orange;
  margin: 20px;
  overflow: hidden;
}
.child {
  width: 300px;
  height: 100px;
  background-color: pink;
}

.parent.parent2 {
  overflow: visible;
}

.parent.parent3 {
  overflow: auto;
}

 

 

---

5.  출력 특성(display)

: 요소의 화면 출력(보여짐) 특성

- block : 상자(레이아웃) 요소

- inline : 글자 요소

- inline-block : 글자 + 상자 요소

- flex : 플렉스 박스(1차원 레이아웃)

- grid : 그리드 (2차원 레이아웃)

- none : 보여짐 특성 없음, 화면에서 사라짐

- 기타  : table, table-row, table-cell 등

 

(index.html)
<span>adlog</span>
<span class="block">adlog</span>
<span class="inline">adlog</span>
<span class="none">adlog</span>

(main.css)
body {
  margin: 20px;
}
span {
  width: 120px;
  height: 30px;
  background-color: royalblue;
  color: white;
}
.block {display: block;}
.inline {display: inline;}
.none {display: none;}

 

---

6.  opacity

: 요소의 투명도

- 1 : 불투명

- 0~1 : 0부터 1사이의 소주점 숫자

 

---

7.  글꼴

 

font: font-style font-variant font-weight font-size/line-height font-family

(index.html)
<span>adlog</span>
<span class="font">adlog</span>
<span class="font2">adlog</span>


(main.css)
body {
  margin: 20px;
}
span {
  width: 120px;
  height: 30px;
  background-color: royalblue;
  color: white;
  font-size: 4vw; //폰트사이즈
}
.font {
  font-weight: bold; // 굵기
  line-height: 0.12;
  font-family: "궁서";
}
.font {
  font-weight: 300; 
  font-style: italic; //기울기
}

 

 

 

---