[CSS] 과제: 레이아웃

https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension

레이아웃 이해의 핵심 사항 - Web 개발 학습하기 | MDN

 

목차

• 문제 및 풀이
• 코드
• 결과

문제 및 풀이

결과물

위에서 볼 수 있듯이 처음 두 이미지를 나타내는 코드를 주고 마지막 이미지와 같이 구현하는 것이다. 이때 해야할 일들을 풀어 내면 다음과 같다.

1. nav 일정한 간격으로 정렬
2. nav 스크롤 시 상단에 고정
3. 왼쪽 상단에 있는 풍선 옆에 텍스트 오도록 정렬
4. photography 단락 오른쪽으로 옮기기 두 개의 열 레이아웃으로!
5. 풍선 배열 

처음 nav 정렬은 플렉스 박스를 이용하여 구현하였다. display를 플렉스 박스로 바꾸고 일정한 간격으로 정렬되도록 space-between  값을 넣었다.

nav를 스크롤 시 상단에 고정하기 위해서 positioning을 활용하였다. position을 sticky로 바꾸고 top을 0으로 맞춰주니 스크롤 시 상단에 고정되었다.

풍선 옆에 텍스트가 오도록 정렬하기 위해서는 float를 활용하였다. 풍선이 있는 박스에 float를 left로 설정하고 옆의 텍스트와 적절하게 여백을 주기 위해서 margin-right를 20px으로 설정하였다.

단락을 가로로 정렬하기 위해서 그리드를 사용하였다. 비율로 배열할 수 있도록 grid-template-columns를 3fr 1fr로 설정하였다. 즉 3대 1의 비율로 가로로 정렬되었다. 이 때 중간의 여백 gap을 20px으로 설정해서 나머지와 통일성이 있도록 하였다.

마지막으로 풍선 이미지 5개를 여백을 1px로 맞추기 위해서 다시금 그리드를 사용하였다. 2열로 맞추고 나서 여백을 1px으로 정해주었다.

코드

html은 손대지 않아서 css 파일만 올립니다.

body {
  background-color: #fff;
  color: #333;
  margin: 0;
  font: 1.2em / 1.2 Arial, Helvetica, sans-serif;
}

img {
  max-width: 100%;
  display: block;
}

.logo {
  font-size: 200%;
  padding: 50px 20px;
  margin: 0 auto;
  max-width: 980px;
}

.grid {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 980px;
}

nav {
  background-color: #000;
  padding: 0.5em;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav a {
  color: #fff;
  text-decoration: none;
  padding: 0.5em 1em;
}

.photos {
  list-style: none;
  margin: 0;
  padding: 0;
}

.feature {
  width: 200px;
}

/* 여기서부터 작성했습니다. */

nav > ul {
  display: flex;
  justify-content: space-between;
}

nav {
  position: sticky;
  top: 0;
}

article img {
  float: left;
  margin-right: 20px;
}

.grid {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 20px;
}

aside ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
}

결과



 

 

목차를 조금 수정해보았어요. 더 수정해볼게요. 더 잘 만들 수 있을 거 같아요.

오류 있으면 말씀해 주세요. 감사합니다!!