whatisthis?

BootStrap (부트스트랩) - 반응형 grid-system 때문에 유명! 👍 - CSS Framework. Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com Quick start 누르고 CSS 라 적힌 부분의 코드를 copy한다. >> html 파일의 head 에 붙여넣음. ❗ 참고 우리는 지금 grid system만 사용하므로 그냥 저 link부분만 가져와도 되고, 만약 컴포넌트나 다양한 기능들을 사용하려면 script태그도 가져와야 한다. 그냥 아무것도 설정 안해도 bootstrap이 기본 제공하는 reset style에 의해 깔끔하게 나온다! grid-system 기본 구조 container 안..

Grid System - 디자이너가 웹 디자인을 할 때 그리드 시스템을 이용해서 디자인을 한다. container column gutter 여기서 하늘색 전체에 해당하는 것이 container, hotpink색 칸 하나에 해당하는 것이 column이다. 주로 그리드는 12칸짜리를 많이 사용한다. column을 통해 요소의 width를 설정한다. (예> 3칸짜리, 6칸짜리 등 column을 기준으로 잡음) gutter은 요소간의 여백을 주는 것. = 간격을 위한 여백을 줌. 💡 이러한 grid-system을 반응형으로 해준 framework ===== Bootstrap! ref https://edu.goorm.io/learn/lecture/20583

1. 기복적으로, 나중에 오는 선언이 덮어씀 2. 선택자 우선순위 선택자 우선순위 요소 선택자 정말 어쩔수 없을때만 사용할 것. 안좋은거임. 1 / 인라인 스타일 적용 hello > 어떠한 스타일보다 가장 강력히 적용됨. 2/ !important 선언 - 인라인 스타일보다 더 강력함. - 무슨일이 있어도 이걸 적용하라는 뜻. - 사용 자제하는것이 좋음. * { color: red !important; } ref lecture. https://edu.goorm.io/learn/lecture/20583

CSS - Selector 1 / 요소, 클래스, ID 선택자 2 / 자식, 자손, 형제 선택자 3 / 구조적 가상 클래스 선택자 4 / 동적 가상 클래스 선택자 1 / 요소, 클래스, ID 선택자 Type Selector - HTML 태그 이름으로 선택자 작성 span { color : #0066ff; font-size: 16px; font-weight: 500; } Class Selector - HTML의 class속성의 속성값을 사용 .stop-button { color : #0066ff; border: none; } class는 중복 선언 가능하므로 같은 클래스에 동일한 스타일을 한꺼번에 작성 가능하다. 반대로, 한 요소에 여러 클래스를 가질 수도 있다. 만약, class1이면서 class2면서 ..

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 practice 🔻 내가 작성한 코드 * { box-sizing: border-box; margin: 0; } body { font-family: "Mulish", sans-serif; } .loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 100px; } .loading-title { color: #151b26; font-size: 18px; line-height: 1.33333333; margin-bottom: 20px; animation-name: loading-effect; animation-duration: 1000ms; a..