Instagram 사이트를 클론 하면서 배운 '새로운' 부분 정리하기

버튼 아이콘(이미지) 만드는법 🤍

1. 먼저 필요한 공간에 버튼 html을 만들고 id값 혹은 class 값을 준다

<button id="heart-button"></button>

2. css 에는 background요소에 이미지 사진을 url("")형태로 넣어준다 (끝에 꼭 no-repeat넣는것 중요!! 그렇게 해야 이미지가 반복되서 타일형태로 보여지지 않는다!
3. 그렇게 하고 원하는 값 조정해주고 background-position : center border: none 하면 끝! (이렇게 쉬운걸 헤멤..)

 #heart-button {
    /* display:block; */
    background: url( "https://~~/heart.png" ) no-repeat;
    background-size: 22px;
    background-position: center;
    height:40px;
    width:40px;
    border: none;
    cursor: pointer;
}

box-shadow 기능

이미지에 두가지 색의 border 입히기

1. 아래 그림처럼 인스타에 스토리 버튼 효과를 주기위해 찾아보았음!
   

2. html의 이미지 tag를 만들어 준다

<img class="img-photo-of-others" src="https://qwer.ff.6">

3. css에 입히고자 하는 색을 첫번째 보더, 두번째 보더 나누어 적용해준다. 콤마를 기준으로 나뉨
   0 0 0 2px #fff, 여기서 2px이 첫번째 border의 굵기 두번째 요소가 색상이다.

    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #DC387C;

4. 전체 코드는 아래와 같을 것

.img-photo-of-others {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #DC387C;
 
}

::after 기능

• 해당 요소를 select해주고 특정 요소 이후에 추가하는 값을 지정해주는 기능
• 인스타그램 footer의 주석에서 요소요소 사이에 중간 점이 찍혀있는데 그기능을 구현하려고 ::after 기능을 사용하였다.
• 이렇게 .footer-contents 안의 ul 안의 li 안의 a (헉헉 많기도 많다 진짜..)요소가 끝나는 지점마다 아래의 내용을 넣어준다는 뜻
• 아래 '\00B7'는 유니코드로 중간 정렬 된 점 을 보여줌!

.footer-contents ul li a::after {
    content: '\00B7';
    margin: 0 .25em 0 .25em;
}

flex(중요해서 추가로 더 다룰 예정)