whatisthis?

Box-shadow box-shadow를 이용해서 다양한 느낌을 낼 수 있음. 예를들면, 요즘 유행하는 neumorphism, Skeuomorphism 등 🔻 ** neumorphism ** Skeuomorphism h-offset (x) v-offset (y) blur (흐린정도) spread (그림자 사이즈) color (색상) 순으로 (순서 바뀌면 절대 안됨) 작성해줘야함. /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); - 보통 spread-radius는 0으로 해준다. (그림자 자체가 커짐) 예제 - 버튼에 마우스 올렸을때 (hover) box-..

CSS Animation animation vs transition - 둘은 엄연히 다른 속성임. transition : 속성의 '전환' animation : 각 property를 쪼개서 사용함. (transition은 속기형으로 적었지만) /* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */ animation - CSS: Cascading Style Sheets | MDN animation CSS 속성은 다수의 스타일을 전환하는 애니메이션을 적용합니다. animation-name (en-US), animation-duration, animation-tim..

CSS Transition transition - CSS: Cascading Style Sheets | MDN transition CSS 속성은 transition-property (en-US), transition-duration (en-US), transition-timing-function (en-US) 과 transition-delay를 위한 단축 속성입니다. 이 속성으로 엘리먼트의 두 가지 상태 사이에 변화를 줄 수 developer.mozilla.org 엘리먼트의 두 가지 상태 사이에 변화를 줄 수 있음. property - 어떤 속성을 적용할지? duration - 변화가 얼마동안 일어날지? - 단위 : ms / s .selector { transition: background-color 2..

1/ background-color 배경색을 넣음 hex | rgb | rgba 2/ background-image 배경으로 이미지를 넣음 - url() 함수를 사용해야함. - url(이미지 경로) or url(이미지 주소) .selector { background-image: url(./assets/image.png); } 3/ backgroud-repeat 배경 이미지 반복 여부 repeat | no-repeat 대부분은 no-repeat 으로 함. ( default 값은 repeat임) 4/ background-size 배경 사이즈 (크기) contain | cover | custom contain 포함됨 (요소 안에 모든 면이 다 들어가게) - 빈공간 생겨도 cover 빈공간 없이 꽉 차도록 (사..

웹 폰트(Web Font) 적용 방법 1 / 가져다가 쓴다. - 구글 폰트 Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 다양한 웹폰트들이 제공되고 있다. 그냥 하라는대로 head에 link 붙여넣고 css에 font-family 붙여넣으면 끝! 방법 2 / 사용자에게 직접 제공한다. 우선, github에서 폰트 파일을 전부 다운받는다. https://github.com/innks/NanumSquareRound GitHub - innks/NanumSquareRound: 나눔스퀘어라운드 웹폰트입니다. NanumSquareRound webfont. 나눔스퀘어라운드 웹폰트입니다..

CSS - Typography Typography 설정 타이포그래피 - 활자의 서체나 글자 배치 등의 구성 및 표현. = 텍스트를 예쁘게 디자인. 정보(information)의 가독성을 위해서. 📌 font-size = 글자 크기 px 절대 단위 em 상대 단위 실제로 mywebproject.tistory.com 자주 사용하는 속성들 🔺 덜 사용하는 속성들🔻 📌 text-align left | right | center = 왼쪽 정렬 / 오른쪽 정렬 / 가운데 정렬 📌 text-indent 들여 쓰기 (문단 시작시) 예> text-indent: 100px; ** 음수(마이너스)값도 사용 가능 (왼쪽으로 밀려남) 📌 text-transform 알파벳 베이스의 문자들만. none Default. Yeon j..

Typography 설정 타이포그래피 - 활자의 서체나 글자 배치 등의 구성 및 표현. = 텍스트를 예쁘게 디자인. 정보(information)의 가독성을 위해서. 📌 font-size = 글자 크기 px 절대 단위 em 상대 단위 실제로 적용된 폰트 사이즈 (부모의 font-size) 의 N배 rem html 태그 기준 N배 보통은 px을 많이 사용함. 📌 line-height = 줄 간격 마찬가지로 px, em, rem 단위 사용. 여기서는 em을 많이 사용함. (해당 폰트사이즈의 N배만큼) (그냥 1.5라고 적는것이 관례. 1.5em 이라고 쓰지 X) line-height가 얼마가 되든간에 font-size에 해당하는 부분은 정 중앙에 위치하게 된다! 📌 letter-spacing = 자간 간격 p..

미디어쿼리 (Media Query) - 반응형 웹(Responsive Web) 을 만들기 위해 반드시 알아야함. 🔻 반응형 웹을 위한 충족조건 HTML viewport meta CSS media query ▪ [HTML] viewport meta 모바일에서와 pc에서의 viewport가 다르다. meta태그로 width=device-width (너비를 디바이스 너비로 설정함) 을 선언해야 반응형 웹이 정상적으로 작동 가능. ▪ [CSS] media query @media screen and (min-width: 768px) { /* 변경사항 * / } atRule을 사용해야함. (at media) 최소 가로가 768px 일때 /* 변경사항 */ 이 적용되게 해줌. >> 즉, 768 이상일때 적용됨. ❗ ..

CSS At-rules - 자주 사용하는것만 정리. - 나머지 at-rules는 아래 인덱스 참조! 1 . @charset @charset CSS at-규칙은 스타일 시트에 쓰이는 문자 인코딩을 지정한다. 스타일 시트의 첫 번째 요소여야 하며 어떤 문자가 선행되지 않아야 한다. >> 즉, 맨 처음에 나와야함. @charset "utf-8"; 2. @font-face @font-face 를 사용하여 웹페이지의 텍스트에 온라인폰트(online fonts)를 적용할 수 있다. @font-face 를 사용하여 웹페이지 제작자가 원하는 폰트를 사용할 수 있게함으로써, 컴퓨터에 설치된 폰트만을 사용해야했던 제약이 없어지게되었다. @font-face at-rule 은 CSS의 top-level에서 뿐 아니라, CSS..

FlexBox css. FlexBox (display: flex) - (上) FlexBox 💡 key points dispaly: flex 선언 가로정렬? 세로정렬? (flex-direction) 무조건 한줄안에 다 정렬? (flex-wrap) 아이템 정렬(align-items, justify-contents) 1 / 플렉스박스 사용 선언 - 정렬하고자 하.. mywebproject.tistory.com 💡 key points dispaly: flex 선언 가로정렬? 세로정렬? (flex-direction) 무조건 한줄안에 다 정렬? (flex-wrap) 아이템 정렬(align-items, justify-contents) flex를 하면 두개의 축이 자동으로 생김. (눈에 보이지는 x) flex-dire..