본문 바로가기

CSS10

[CSS] Vanilla Extract 사용방법 💡 시작하며 현재 사이드 프로젝트를 진행하고 있는데, 프론트엔드 CSS 아키텍처를 선택할 때 Vanilla-Extract를 사용하기로 해서 사용 방법을 공부하고 정리해두려고 한다. 👍🏻 Vanilla Extract 장점 우선 Vanilla Extract는 아래와 같은 장점이 있다. 빌드타임에 ts 파일을 css 파일로 만든다. (CSS Modules-in-TyepScript) type-safe하게 theme을 다룰 수 있다. 프론트엔드 프레임워크에 구애받지 않는다. Tailwind처럼 Atomic CSS를 구성할 수 있다. Sttitches 처럼 variant 기반 스타일링을 구성할 수 있다. ⚙️ Vanilla Extract 사용 방법 0️⃣ 설치 vanilla-extract를 설치한다. npm ins.. 2023. 7. 31.
[CSS] Flexbox의 여러 활용법 정리 Flexbox란? 뷰포트의 요소의 크기가 불명확하거나 동적으로 변할 때에도 유연하고 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃으로, 별도의 분기 처리를 줄일 수 있고, CSS만으로 다양한 레이아웃을 구현할 수 있다. Flexbox의 구성 Flex container(부모 요소)와 Flex item(자식 요소)로 구성된다. Flex container(부모 요소) 속성: flex-direction, flex-wrap, justify-content, align-items, align-content Flex item(자식 요소) 속성: flex, flex-grow, flex-shrink, flex-basis, order .flex-container { display.. 2021. 8. 31.
[CSS] 크로스 브라우징 시 필요한 css 접두어 webkit, moz, ms, o 의 의미 크로스 브라우징을 위해 필요한 CSS 접두어 정리 -webkit-: 구글, 사파리 -moz-: 파이어폭스 -ms-: 익스플로러 -o-: 오페라 2021. 7. 23.
[CSS] 한 걸음 더 CSS: 코딩가나다 오버플로우(overflow) index8.html blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah style8.css body{ background-color: #ddd; } .box{ background-color: white; /*float된 left,right는 위에 떠있기 때문에 box는 float된 요소의.. 2019. 12. 17.
[CSS] 한 걸음 더 CSS: 코딩가나다 상속(Inheritance) style7.css /*상속이 되는 color, 상속이 안 되는 border 웹 초창기때부터 a태그의 글씨색은 기본 보라색으로(읽음표시) 노출됨 색을 바꾸려면 지정된 색으로 만들어줌. */ a{ text-decoration: none; /* 밑줄 없애기 */ color: inherit;/* 부모로부터 상속! 주의점: 인터넷 익스플로러 6,7버전에선 호환 안됨*/ } button{ font: inherit; } .box h1{ color: firebrick; } .box h1:before{ content: ' '; display: inline-block; background-color: currentColor;/*주의점: 인터넷 익스플로러 6,7,8버전에선 호환 안됨*/ width: 20px; height.. 2019. 12. 17.
[CSS] 한 걸음 더 CSS: 코딩가나다 버티컬 얼라인(세로 정렬, vertical-align) 예제1. index6.html style6.css body{ background-color: #999; } .wrapper{ background-color: blanchedalmond; width: 960px; height: 400px; line-height: 400px; /*한 줄 height를 전체 height로 잡아주면 vertical-align 세로 middle 성공!*/ text-align: center; /*여기서 text-align으로 좌우 center로도 만들어주기*/ margin: 0 auto; } .box{ display: inline-block; /*inline 속성을 포함해야 vertical-align의 middle이 의미 있어짐*/ background-color: green; wi.. 2019. 12. 16.
[CSS] 한 걸음 더 CSS: 코딩가나다 마진 병합(Margin Collapsing) index5.html Kim Lee Park Section #1 Section #2 Kim Lee Park's Profile style5.css .header h1{ background-color: #999; color: white; } .section { background-color: white; border: 1px solid #999; margin: 20px; padding: 20px; } .footer{ background-color: #eee; text-align: center; padding: 10px; color: #999; } 마진 병합 현상 인접해있는 block 요소끼리만 일어난다. 상하단으로만 일어난다. 문제가 될 수 있는 상황 예시 a b .parents{ background-col.. 2019. 12. 16.
[CSS] 한 걸음 더 CSS: 코딩가나다 라인하이트(줄 간격, line-height) index4.html Let's code! Coding is fantastic. I love it. style4.css .cover{ background-image: url(code.jpg); background-size: cover; background-color: #336699; height: 50vh; } .contents h1 { text-align: center; line-height: normal; /*폰트 종류에 따라 다르다.*/ color: white; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-size: 80px; margin-top: -1em; /*font-size에 따라 맞춰 달라지게 하려면.. 2019. 12. 16.
[CSS] 한 걸음 더 CSS: 코딩가나다 디스플레이(Display Property) index.html 햄버거 (영어: hamburger, burger 또는 beefburger, 문화어: 고기겹빵, 다진 고기와 빵, 함버거)는 샌드위치의 일종인 음식이다. 양념, 빵가루 등에 고기를 갈아 넣고 버무린 뒤 구워낸 햄버그 스테이크(패티)와 채소, 양념 등을 두 장 이상의 동그랗거나 길쭉한 빵 사이에 넣어 만들며, 보통 손으로 쥐면서 들고 먹는다. 가정에서 직접 만들어 먹기도 하지만, 일반적으로 패스트푸드 식당에서 판매된다. 수많은 패스트푸드 식당들은 햄버거, 감자 튀김, 콜라를 하나로 묶어서 세트로 판매하기도 한다. style3.css ... /*인라인 블럭 처리를 해서 글자 디자인 처리*/ strong.bold{ background-color: black; color: white; marg.. 2019. 12. 16.
[CSS] 한 걸음 더 CSS: 코딩가나다 가운데 정렬: Centering in CSS index.html Hamburger 햄버거(영어: hamburger, burger 또는 beefburger, 문화어: 고기겹빵, 다진 고기와 빵, 함버거)는 샌드위치의 일종인 음식이다. 양념, 빵가루 등에 고기를 갈아 넣고 버무린 뒤 구워낸 햄버그 스테이크(패티)와 채소, 양념 등을 두 장 이상의 동그랗거나 길쭉한 빵 사이에 넣어 만들며, 보통 손으로 쥐면서 들고 먹는다. 가정에서 직접 만들어 먹기도 하지만, 일반적으로 패스트푸드 식당에서 판매된다. 수많은 패스트푸드 식당들은 햄버거, 감자 튀김, 콜라를 하나로 묶어서 세트로 판매하기도 한다. style.css body{ background-color:#ddd; } .box{ background-color: white; width: 480px; /*bo.. 2019. 12. 16.

티스토리툴바