Profile 만들기

🌼 최종본

🌼 TIL

1. font 설정

웹 전체 폰트는 * {font-family: '글꼴이름'} / 일부 폰트 설정은 선택자{ font-family: '글꼴이름'}

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');

* {
    font-family: 'Montserrat';
}

.header h1{
    font-family: Permanent Marker;

2. 이미지 스프라이트(sprite)

    /* 이미지 스프라이트 기법 => 웹 성능 */
 .icon{
    background-image: url(images/icons.png);
    text-indent: -9999px; /* IR기법 */
    background-size: 180px 120px;
    }

3. block-level element와 margin

block-element태그인 <section>, <main>, <p>, <h1>, <div>등
css기본 특징: 블럭 태그끼리 만나는 부분은 margin이 상쇄되어 한번만 적용됨

📌 해결방법

부모 태그에 overflow:hidden 적용