1. features
ul의 li 3개를 수평으로 정렬해야함
li의 총 가로 길이는 300px
ul의 마진 탑은 80px
display flex를 해서 수직 정렬을 했음 여기서 질문!!
❓❓❓❓
#features ul {
margin: 80px 0;
display: flex;
}
#features ul li {
width: 300px;
justify-content: center;
text-align: center;
list-style: none;
}
ul 에게 flex를 주어서 수평 정렬이 되었는데
그럼 ul li 에게는 flex를 주어서 수평 정렬은 되지 않는 것인가?
ul li 에게 flex를 주었더니
왜 이런가 했더니 나는 ul 안에 있는 li 를 수평 정렬하고 싶으니 ul 에게 flex를 줄때 내가 원하는 수평 정렬이 된다고함.
결론 ⇒ li를 수평 정렬하고 싶을때는 ul에 flex를 주면 된다.
#features ul li.feature-1 {
background: url('../images/features-icon-1.png') no-repeat top center;
}<background 태그의 속성>
color
image - url(””)
repeat
⇒ 베경 이미지가 주어진 영역에 꽉 차지 않는 경우 이미지를 반복할 방식을 결정함
기본값 : 배경이미지를 가로와 세모 모든 방향으로 반복을 해줌
- repeat-x : 가로방향으로만
- repeat-y: 세로방향으로만
- no-repeat : 반복을 원하지 않을때 사용
position
size
attachment
⇒ 스크롤시 배경 이미지가 주어진 영역과 함께 따라갈지 그래도 있을지를 결정
- scroll: 배경이미지가 주어진 영여과 함께 스크롤
- fixed: 배경이미지가 주어진 영역이 스크롤 되더라도 고정
2. primary-content
설계
아이템들을 소제목 설명 영상 3개가 있음
수직정렬로 해야함
id = primary-content니까
#primary-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}우선 원하는 폼 모양으로 만들긴 함
우선 웹사이트에 있는 기본 마진이랑 사이즈 추가로 입력해봄
👿👿👿👿👿 내가 부족한 점
각 레이아웃의 마진과 패딩작업 또는 와이드나 하이 가 확실히
부족한것 같음
플렉스를 이용한 요소 정렬 같은건 이제 조금씩 감이 잡히고 있는 듯하다.
chan