8/26 TIL

들어가기에 앞서서

최근 블로깅 하는 횟수가 갈수록 줄어들고있다... 그래서 알고리즘, 기술블로깅 뿐만 아니라 오늘부터 TIL도 시작할까 한다..! 1일 1 TIL 시작한다!!

---

<목차>

1.css 박스를 구성하는요소
2.css Flex에 관하여

---

1. 박스를 구성하는 요소

<border(테두리)를 기준으로 padding(안쪽 여백)과 margin(바깥 여백)이 있다.>

(1) border (테두리)

• 테두리는 심미적인 용도 외에도, 개발 과정에서도 매우 의미 있게 사용되고 있다.
• 각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들면서 그 크기를 시각적으로 확인할 수 있도록 만든다.

p {
  border: 1px solid red;
}

<코드>p요소에 1px의 빨간색 실선을 추가한다.

• border 속성에 적용된 각각의 값은 테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color)이다.

(2) margin (바깥 여백)

• 각각의 값은 top, right, bottom, left로 시계방향으로 입력된다.

p {
  margin: 10px, 20px, 30px, 40px;
}

<코드>p요소의 상하좌우에 여백을 추가한다.

(3) padding (안쪽 여백)

• padding은 border를 기준으로 박스 내부의 여백을 지정합니다. 값의 순서에 따른 방향은 margin과 동일하게 top, right, bottom, left이다.

p {
  padding: 10px 20px 30px 40px;
}

<코드>p 요소의 padding 속성에 여백을 추가합니다.

---

2. css Flex에 관하여

• flex는 흔히 flexbox라고 부르기도 하는데, flex는 레이아웃 배치 전용 기능으로 고안되었다.

• 대표적으로 float, inline-block 등등을 이용한 기존에 사용되던 방식보다 편리한 기능이 많다.

<flex 컨테이너에 적용하는 속성들>

• display: flex
  • flex 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width 만큼만 차지하게 된다.
  • height가 자동적으로 조정되는 특징은 컬럼 레이아웃을 만들 때 아주 편리하다!
• inline-flex
  • 아이템의 배치와 관련보다는, 컨테이너가 주변 요소들과 어떻게 적용될지 결정하는 값이다.
  • inline-flex는 inline-block처럼 동작한다!

• flex-deirection
  • 아이템들이 배치되는 축의 방향을 결정해주는 속성이다.
• row
  • 아이템들이 행(가로) 방향으로 배치된다.
• row-reverse
  • 아이템들이 역순으로 가로 배치된다.
• column
  • 아이템들이 열(세로) 방향으로 배치된다.
• column-reverse
  • 아이템들이 역순으로 세로 배치 된다.
• flex-wrap
  • 컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정하는 속성이다.

• nowrap
  • 줄바꿈을 하지 않는다.
• wrap
  • 줄바꿈을 합니다. float이나 inline-block으로 배치한 요소들과 비슷하게 동작한다.
• wrap-reverse
  • 줄바꿈을 하는데, 아이템을 역순으로 배치한다.
• flex-flow
  • flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성이다.
    flex-direction, flex-wrap의 순으로 한 칸 떼고 써줘야 한다.
• 정렬
  • “justify”는 메인축 방향으로 정렬
  • “align”은 수직축(오뎅을 뜯어내는) 방향으로 정렬
• flex-start (기본값)
  • 아이템들을 시작점으로 정렬한다.
    flex-direction이 row(가로 배치)일 때는 왼쪽, column(세로 배치)일 때는 위이다.
• flex-end
  • 아이템들을 끝점으로 정렬합니다.
    flex-direction이 row(가로 배치)일 때는 오른쪽, column(세로 배치)일 때는 아래다.
• center
  • 아이템들을 가운데로 정렬합니다.
• space-between
  • 아이템들의 “사이(between)”에 균일한 간격을 만들어 줍니다.
• space-around
  • 아이템들의 “둘레(around)”에 균일한 간격을 만들어 줍니다.
• space-evenly
  • 아이템들의 사이와 양 끝에 균일한 간격을 만들어 준다.