🔔 추가해봅시다!

📂 root

📂 grid

📂 blend-mobe, filter, backdrop-filter

• 블록태그와 인라인태그에 대한 설명 | | 2 | ul태그를 활용하여 메뉴작성 | | | 3 | img태그, alt값 작성 | - img 태그 사용하여 이미지 연결(img폴더)
• 사이즈 변경에 대한 설명
• 이미지 아래쪽에 발생되는 작은 여백 없애기
• alt값 작성이유 | | 4 | 스타일 : margin, padding | - 내부여백, 외부여백 설명
• 검사창(개발자도구창)을 이용하여 여백 확인 | | 5 | 폰트스타일 변경방법 | - 눈누 사이트에서 폰트 연결방법 설명
• 구글폰트 사이트에서 폰트 연결방법 설명
• 웹폰트 변환 | | 6 | 스타일 : display:inline-block, display:flex | - 가로 나열, 두개 차이점에 대해 설명 | | 7 | 스타일 : border | - 테두리 속기법으로만 설명
• 테두리 스타일에 대한 설명 | | 8 | 스타일 : box-shadow, text-shadow | - 박스 그림자, 텍스트 그림자 설명
• 텍스트 테두리는 텍스트 그림자를 이용하여 진행함. | | 9 | position:relative, position:absolute | - img태그 위로 텍스트 배치하는 방법 | | 10 | background | - 스타일에서 이미지 넣는 방법
• 배경이미지 고정
• 속기법으로 이미지, 컬러 적용 | | 11 | position | - position:relative, absolute, fixed, static sticty 는 나중에 진행 | | 12 | 가상요소 ::before, ::after | - 가상요소 사용
• 텍스트 밑에 줄긋는 스타일
• 이미지위에 배경컬러 적용 스타일 | | 13 | aos | - 스크롤 라이브러리 사용 | | 14 | 지도 | - 구글지도, 카카오지도 연결 | | 15 | display:flex | - flex 스타일 (이후에 gap에 대한 설명도 추가하기) | | 16 | transition | - 속도, 시간설정, 지연시간 등 설명 | | 17 | transform | - 변형에 대한 스타일 이동, 회전, 크기조절, 기울기 | | 18 | a 태그 | - 링크, title, target 설명
• 내부링크 이동 | | 19 | 동영상, 유튜브 연결 | - 동영상 mp4, 유튜브 연결 | | 20 | 텍스트 관련 스타일 | - 텍스트 관련 스타일 설명 | | 21 | svg | - 확장자명 svg
• svg코드 이용하여 진행 ⇒ fill
• 피그마로 svg 제작 | | 22 | form요소 중에서 input text 설명 | - 검색창 만들기 | | 23 | calc() 함수 | - calc 함수 이용하여 산칙연산식 작성 | | 24 | 헤더 내비게이션 2차메뉴 작성 및 스타일 | | | 25 | form태그 | - 회원가입, 로그인페이지 제작
• 검색창 만들기
• button, input type=”button” 차이
• submit, reset 버튼 | | 26 | table태그 | - 테이블태그 설명 | | 27 | 애니메이션(keyframe) | - 흘러가는 텍스트
• 목업에서 이미지 움직임 | | 28 | 반응형 설명 | - 미디어 쿼리
• 중단점
• 모바일 크기 | | 29 | rem설명 | - 계산식 10px, 62.5%의 차이
• rem 활용법 | | 30 | 반응형 계산식 | - 계산식 설명 (콘텐츠 크기 / 컨테이너 크기) * 100% | | 31 | 반응형 레이아웃 변화, 헤더스타일 변화 | | | 32 | filter, backdrop:filter, 블렌드모드 | - 그래픽스타일 설명 | | 33 | overflow | overflow: scroll; overflow: hidden; overflow: auto; overflow: clip; overflow: visible; | | 34 | scrollbar 스타일 변경 | https://velog.io/@chaey/CSS-scrollbar-꾸미기

https://developer.mozilla.org/ko/docs/Web/CSS/::-webkit-scrollbar

스크롤바는 webkit 브라우저(크롬, 사파리, 오페라 등등)에 한해서 가상요소를 사용해 스타일을 적용할 수 있다! but! Mdn에서는 비표준이므로 실제 프로덕션에서 사용하지 말라는 경고문이 있다. | | 35 | visibility | visible hidden | | 36 | button태그 | type=”button”과의 차이 button태그 링크연결방법 <!-- 현재창에서 링크 이동 --> <button type="button" onclick="location.href='링크주소';"> 버튼내용 </button> <!-- 새 창으로 링크 이동 --> <button type="button" onclick="window.open('링크주소');"> 버튼내용 </button> | | 37 | css resize | https://homzzang.com/b/css-264 | | 38 | 다중 칼럼 레이아웃 column | 1. columns 2. column-count 3. column-gap 4. column-width 5. column-span 6. column-fill 7. column-rule 8. column-rule-style 9. column-rule-width 10. column-rule-color |

 <div class="title">
    <p>행복한<br />라이프</p>
    <h3>일상을<br />더 즐겁게!</h3>
</div><!-- .title end -->

<div class="item">
    <figure>
        <img src="https://picsum.photos/id/320/500/400" alt="" />
    </figure>
    <div class="text">
        <strong>이색취미</strong>
        <h4>레트로 향수 가득한 네온사인<br />
            만들어 볼까? </h4>
    </div><!-- .text end -->
</div><!-- .item end -->

.cont01 .inner .flex .list .item {
    width: 408px;
}

.cont01 .inner .flex .list .item figure {
    width: 100%;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
}

.cont01 .inner .flex .list .item figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cont01 .inner .flex .list .item .text {
    margin-top: 20px;
    color: #fff;
}

.cont01 .inner .flex .list .item .text strong {
    font-size: 14px;
}

.cont01 .inner .flex .list .item .text h4 {
    font-size: 25px;
    margin-top: 20px;
    line-height: 1.3;
}