Cascading Style Sheets

지난 시간에 이어서 CSS에 대한 얘기를 해보려고 한다.

CSS는 웹을 디자인 해주는 '디자인 언어'로 사용자에게 시각적인 즐거움을 줄 수 있게 하는 도구다.

웹을 디자인할 때, 요소들의 색, 모양들도 중요하지만 제일 중요한 것은 웹의 '레이아웃' 이라고 생각한다.

디자인에 대해 배우기에 앞서, 웹 요소들을 배치하기 위한 레이아웃 모델에 대해서 배워보자.

---

Flexbox(Flexible Box)

✏️ 개념

• Flex는 1차원 레이아웃 시스템으로 요소들을 가로 또는 세로 한 방향으로만 정렬함
• 주로 행 또는 열 단위의 정렬에 적합

📝 구성

• display: flex; (주로 사용)
• inline-flex;

🔑 주요 속성

• flex: 자식 요소 크기 비율 설정
• flex-direction: 주축 방향 설정 (row(기본값), column 등)
• justify-content: 주축 정렬 (center, space-between 등)
• align-items: 교차축 정렬 (center, stretch 등)
• flex-wrap: 요소 줄바꿈 여부 (기본적으로 nowrap 상태)

▶️ 예시

.container {					  //'container'라는 클래스를 가진 요소에 디자인
  display: flex;				  //flexbox 컨테이너로 설정
  flex-direction: row; 			  //주축 방향을 가로로 설정
  justify-content: space-between; //주축(가로) 방향으로 양끝 정렬 후 균등 간격 주기
  align-items: center;            //교차축(세로) 방향 중앙 정렬 
  flex-wrap: wrap;				  //요소들의 총 넓이가 부모 넓이 보다 클 때, 다음 줄에 이어서 정렬
}

---

Grid

✏️ 개념

• Grid는 2차원 레이아웃 시스템으로 요소들을 행과 열 모두로 정렬 가능
• 복잡한 레이아웃 구성에 적합

📝 구성

• display: grid; (주로 사용)
• inline-grid;

🔑 주요 속성

• grid-template-columns, grid-template-rows: 열과 행 정의
• grid-column, grid-row: 자식 요소의 위치 지정
• gap: 행과 열 사이 간격 설정

▶️ 예시

.container {						//'container'라는 클래스를 가진 요소에 디자인
  display: grid;					//grid 컨테이너로 설정
  grid-template-columns: 1fr 2fr;	//두 개의 열을 정의하고, 첫번째 열보다 두번쨰 열을 2배 더 넓게 설정
  grid-template-rows: auto auto;	//각각의 행 높이는 요소의 높이에 맞게 자동 조정
  gap: 10px;						//행과 열 사이의 간격 설정
}

---

마무리..

내용이 많지는 않지만 감을 잡기에는 괜찮다고 생각합니다. 몇편까지 할지는 모르겠지만... CSS는 양이 많은지라 ㅎㅎ... 다들 괜찮으셨다면 좋아요 팔로우 부탁드립니다^^~