Udemy section 7 (19일) - 오버플로우, 카드, 그리드

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!

   ㄴ 맨앞행과 맨앞열의 틈을 정함! / 그리드 안에서 전체너비에 영향을 주지않고 내부적으로 반응한다.

  gap: 100px 200px;  행간, 열

 

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 ; 

 ㄴ 개별소에 적용