1. 카드 만들기
body {
background: linear-gradient(30deg, rgb(77, 77, 77), rgb(58, 58, 58));
}
header {
position: static;
}
main ul{
width: 800px;
margin: 0 auto;
}
main li {
display: flex;
background-color: white;
}
main li img {
width: 300px;
height: 280px;
}
.item-content {
padding: 24px;
}
2. 아래를 보면 text 영역에만 border-radius가 적용되고, 이미지 영역에는 적용되지 않은상태인데
이건 특정 속성으로 해결할수있음! -> overflow : hidden (컨테이너 자체에 적용됨, 컨테이너 자식에서 적용 되지 않는다)
ㄴ 오버플로우는 속성의 넘친 부분을 컨트롤 할수 있게 해준다 !
overflow: visible; (default value = 변화가 없음)
overflow: hidden ; -> 컨테이너에 적용하고 컨테이너 전체에 속성이 적용된다 :)
3. object-fit: cover; -> 이미지를 사용가능한 공간에 맞춰줄거야!
4. 카드 하단의 정리하기!
1) 먼저 justify-content: space-between; 으로 설정해주자!
ㄴ 우리가가진 모든 플렉스박스에 공간을 줌
2) wapper! h2와 p를 하나의 div로 묶어줌!
3) a:hover에 border-radius 적용 x. a요소에 적용(스타일링 깨트리지않기위해 ^^)
4) body에 회색글씨 적용하기!
body {
background: linear-gradient(30deg, rgb(77, 77, 77), rgb(58, 58, 58));
color: rgb(68, 68, 68);
}
header {
position: static;
}
main ul{
width: 800px;
margin: 0 auto;
}
main li {
display: flex;
background-color: white;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
border-radius: 6px;
overflow: hidden ;
}
main li img {
width: 300px;
height: 280px;
object-fit: cover;
}
.item-content {
padding: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.actions {
text-align: right;
}
.actions a {
text-decoration: none;
padding: 6px;
color: rgb(22, 211, 228);
border-radius: 5px;
}
.actions a:hover {
background-color: rgb(235, 253, 255);
}
5. 그리드기능 - 아래 이 카드들을 나란히 배치하려면 어떻게 하는게 좋을까?
main ul {
width: 1500px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
ㄴ display: flex와 flex-wrap: wrap 기능으로 통제는 할수있지만 행과 열의 관계까지 완벽하게 통제할수는 없어!
이럴때 필요한게 바로 그리드 기능!!
아래 캡처의 예시를 알아보자!
그리드는 플렉스의 핵심이론을 따라감 !
단 ! 설정하고자 하는 각 행과 열의 크기를 모두 설정해줘야해!
ul {
background-color: rgb(250, 146, 63);
list-style: none;
width: 800px;
margin: 10px auto;
padding: 10px;
display: grid;
grid-template-columns: 400px 400px; 열1 400 px 열2 400px
}
6. fraction -> 그리드를 쓸때는 px을 사용하기 않고 fr을 사용! (사용하는 전체공간 내에서 설정할수 있게 해줌
grid-template-columns: 2fr 1fr;
grid-template-columns : 2fr 1fr;
6. 그리드 안에서 요소들(행,열) 공간지정 gap!
ㄴ 맨앞행과 맨앞열의 틈을 정함! / 그리드 안에서 전체너비에 영향을 주지않고 내부적으로 반응한다.
7. 그리드 개별요소 설정하는 방법
ㄴ 적용하고자 하는 요소에 직접 지정한다!
li:first-of-type {
background-color: yellow;
}
---> 부모요소인 ul의 li에서 첫번째에 개별요소를 적용시켜줘!
li:nth-of-type(3) {
color: aqua;
}
---> 부모요소인 ul의 li에서 n번째에 개별요소를 적용할게
8. grid-column: 1 / 3 ; grid-column: 1 / span 2 ;
li:nth-of-type(3) {
color: aqua;
하지만 card3만 전체 행만큼의 너비를 가지게 하려면 어떻게 해야할까? 이때는 nth-type선택자를 사용한다.
li:nth-of-type(3){
background-color: blue;
grid-column: 1 / 3;
grid-column: 1 / 3 ;
ㄴ 위치 1열에서 시작해서 3열에서 끝나라! (grid를 켜서 숫자를 확인!)
*** 개발자도구에서 grid를 켜놓고 무조건 확인하기!
grid-column: 1 / span 2 ; 열(column) 기준!!
ㄴ span은 중요한열은 몇개인가? 이요소가 몇개의 열을 차지하는지?를 말해줘!
이번시간에 아래의 내용의 그리드 기능에 대해 배웠어!
disply : grid
grid-template-columns: 2fr 1fr;
grid-column: 1 / 3 ;
ㄴ 개별소에 적용
