whatisthis?

Visibility visible | hidden (default) display: none의 경우에는 차지하는 공간마저 없애지만, visibility: hidden을 하면 공간은 그대로 남지만 content만 안보이게함. >> opacity: 0과 유사하게 됨. display:none 영역 사라짐 이벤트(ex.클릭) 작동 안함 tab focus 안됨 visibility:hidden 영역 있음 이벤트(ex.클릭) 작동 안함 tab focus 안됨 뒤에 있는 요소 클릭 가능 opacity:0 >> 존재함! 이벤트고 뭐고 다 됨! 단지 투명할 뿐. 영역 있음 이벤트(ex.클릭) 작동 함 tab focus 됨 뒤에 있는 요소 클릭 불가능 REF > visibility - CSS: Cascading Style ..

Transform /* 키워드 값 */ transform: none; /* 함수 값 */ transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); transform: rotate(0.5turn); transform: rotate3d(1, 2.0, 3.0, 10deg); transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); transform: translate(12px, 50%); transform: transl..

Overflow width * height를 갖는 요소 안에 content가 요소의 영역을 벗어났을 경우 사용함. visible | auto | scroll | hidden - default : visible overflow-x, overflow-y 로 나눠서 설정 가능. scroll 콘텐츠를 실제로 잘라냈는지 여부를 따지지 않고 항상 스크롤바를 노출 auto 콘텐츠가 넘칠 때만 스크롤바를 노출 hidden 콘텐츠를 안쪽 여백 상자에 맞추기 위해 잘라냄. 스크롤바를 제공하지 않고, 스크롤할 방법(드래그, 마우스 휠 등)도 지원하지 않음. p { width: 12em; height: 6em; overflow: scroll; } - width, height 설정해준 후, overflow 해주기 .box { ..

Opacity = 투명도 0 : 완전 투명 1 : 완전 불투명 opacity: 0.9 opacity: 90% A in the range 0.0 to 1.0, inclusive, or a in the range 0% to 100%, inclusive, representing the opacity of the channel (that is, the value of its alpha channel). Any value outside the interval, though valid, is clamped to the nearest limit in the range. - 색상의 rgba에서 a(알파값)에 해당함. REF > opacity - CSS: Cascading Style Sheets | MDN The opa..

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..