CSS 속성

https://jerrycodezzz.tistory.com/44

CSS Flexbox 속성들

 

---

1. Flexbox (display: flex)

Flexbox는 가로, 세로로 요소들을 쉽게 배치할 수 있게 해주는 레이아웃 도구입니다.

.parent {
  display: flex;           /* Flexbox를 적용할 부모 요소 */
  justify-content: center;  /* 가로축에서 자식 요소를 중앙에 배치 */
  align-items: center;      /* 세로축에서 자식 요소를 중앙에 배치 */
}

.child {
  flex: 1;                  /* 자식 요소의 크기를 유연하게 설정 */
}

 

• display: flex: Flexbox 레이아웃을 적용합니다.
• justify-content: 가로 방향에서 자식 요소의 배치(왼쪽 정렬, 가운데 정렬, 오른쪽 정렬).
  • flex-start: 왼쪽 정렬
  • center: 가운데 정렬
  • flex-end: 오른쪽 정렬
  • space-between: 자식 요소들 간의 여백을 고르게 분배
• align-items: 세로 방향에서 자식 요소의 배치.
  • flex-start: 위쪽 정렬
  • center: 세로축 중앙 정렬
  • flex-end: 아래쪽 정렬
• flex: 자식 요소의 크기를 유연하게 설정. 숫자가 클수록 더 많은 공간을 차지.

---

2. Grid (display: grid)

CSS Grid는 2차원 레이아웃을 관리하는 데 매우 유용한 도구입니다.

.container {
  display: grid;            /* Grid 레이아웃 적용 */
  grid-template-columns: 1fr 2fr;  /* 두 열, 첫 번째는 1, 두 번째는 2배 크기 */
  grid-gap: 10px;           /* 그리드 요소 간의 간격 */
}

.item {
  grid-column: span 2;      /* 그리드 아이템이 두 열을 차지 */
}

 

• grid-template-columns: 열을 정의. fr은 "fraction"으로, 비율에 따라 열의 크기를 조절합니다.
• grid-template-rows: 행을 정의.
• grid-gap: 그리드 간격 설정.
• grid-column, grid-row: 자식 요소가 차지할 열과 행을 지정.

---

3. Margin & Padding

레이아웃에서 여백을 설정할 때 자주 사용합니다.

.element {
  margin: 10px;          /* 요소 바깥쪽 여백 */
  padding: 20px;         /* 요소 안쪽 여백 */
}

 

 

---

4. Box Model

모든 요소는 박스 모델을 따릅니다. 요소의 크기를 설정할 때 **width, height, border, margin, padding**을 고려해야 합니다.

.element {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  padding: 20px;
  margin: 10px;
}

---

5. Positioning (포지셔닝)

요소의 위치를 지정할 때 사용합니다.

.absolute-element {
  position: absolute;
  top: 10px;        /* 위에서 10px 떨어진 위치 */
  left: 20px;       /* 왼쪽에서 20px 떨어진 위치 */
}
.relative-element {
  position: relative;
  top: 5px;         /* 현재 위치에서 5px 아래로 */
}

---

6. Text 관련 속성

.text {
  text-align: center;    /* 텍스트 중앙 정렬 */
  font-size: 16px;       /* 폰트 크기 */
  font-weight: bold;     /* 폰트 굵기 */
  color: #333;           /* 텍스트 색상 */
}

 

• text-align: 텍스트 정렬. left, right, center 등을 사용할 수 있습니다.
• font-size: 폰트 크기.
• font-weight: 폰트 굵기. bold나 숫자로 설정할 수 있습니다.
• color: 텍스트 색상.

---

7. Background (배경)

.background {
  background-color: #f0f0f0;          /* 배경 색상 */
  background-image: url('image.jpg');  /* 배경 이미지 */
  background-size: cover;              /* 배경 이미지를 화면에 맞게 */
}

 

 

• background-color: 배경색 설정.
• background-image: 배경 이미지를 설정.
• background-size: 배경 이미지 크기 조정.

---

8. Display 관련 속성

.display {
  display: none;        /* 요소를 화면에 표시하지 않음 */
  display: block;       /* 블록 요소로 표시 */
  display: inline;      /* 인라인 요소로 표시 */
}