Udemy section 7 (18일) - 마진겹침현상, 선형그라디언트, 푸터만들기, 카드콘텐츠, position: static; , 카드룩

 

1. 마진 겹침현상은 인접요소에서만 일어나지않고 부모 자식간에도 나타난다!

   ㄴ 화면에 하얀 빈공간..? 해결! (자식요소에 padding을 더해서 해결!)

 

 

2. 배경에 선형 그라디언트(그라데이션) 추가하기! (자동으로)

CSS 기능(function)으로 해결가능해! ^_^

    background: linear-gradient(45deg, rgb(227, 255, 253), rgb(202, 243, 240) );

    background: linear-gradient(각도, 적용할 색상, 적용할색상)   

    ㄴ 각도를 0으로 하면 시작하는 색깔이 아래로감!

    ㄴ 색깔변화는 미세하게 주는게 좋대요! 

 

3. 푸터!

a태그에 텍스트가 아닌 img로 추가하기 !

          <a href="https://www.instagram.com"><img src="/images/icons/insta.png" alt="instagram logo"></a>

 

 

4. 푸터 스타일링 시작하기! :)

푸터는 shared.css로 작업하자 모든페이지에서 보여져야하기 때문에 !

 

 

5. 푸터 아이콘이 너무 클때

footer li {

    width: 80px;

    height: 80px;

}

footer img {

    width: 100%;

    height: 100%;

}

 

부모요소인 li에 픽셀을 정해주고, img를 %값을 적용

 

 

footer {

    background: linear-gradient(70deg, rgb(24, 24, 24), rgb(25, 29, 29));

}

footer ul {

    display: flex;

    justify-content: center;

    padding: 40px;

}

footer li {

    width: 80px;

    height: 80px;

    margin: 0 50px;

}

footer img {

    width: 100%;

    height: 100%;

}

 

 

 

**** TIP : 요소 사이에 좌우 간격을 띄워야할때는 margin을 이용하고, 위아래는 padding을 선호함!

 

 

6. 랜딩페이지 완성했으니까 웬사이트의 두번째 페이지를 완성해보자!

 

 

첫번째 페이지의 인텍스와 푸터를 가지고오자!

위에 보여지는 홈페이지는 카드룩이라고함! (요즘 많이 씀)

 

 

7. 카드콘텐츠 만들기   -> 이렇게 구조를 먼저 짜고 시작

 

이미지 + 컨테이너 두개 

 

임시텍스트를 넣고싶은데 lorem을 작성하면 자동으로 dummy text를 가지고올수있음!

 

 

8. 포지션 정적 (position: static)사용하기!

이미크기가 너무 커서 이미지를 축소해야함!

고정된 너비와 높이를 설정해서 고정된 크기로 바꿔주자!