김버그6 [CSS] 김버그의 HTML&CSS는 재밌다 | CSS RESET 본격적인 작업 전에, 작업을 수월하게 할 수 있도록 Setting / 생산성을 높이는 작업 ・ 디자인 시안을 보고 사용해야 하는 폰트의 종류와 개수를 파악해서 link:css ・ Bootstrap이 제공하는 Grid System link (한 번도 안 써본 사람은 있어도, 한 번 쓰고 안 쓰는 사람이 없다고 언급) * { box-sizing: border-box; margin: 0; } body { font-family: "DM Sans", sans-serif; } /* Reset CSS */ a { color: inherit; text-decoration: none; } button, input, textarea { font-family: "DM Sans", sans-serif; font-size: 1.. 2021. 5. 1. [HTML] 김버그의 HTML&CSS는 재밌다 | Bootstrap Grid system https://getbootstrap.com/ Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com Bootstrap에서 반응형 Grid system을 제공하고 있다. 위 사이트로 들어가서 'Get Started'을 버튼을 누르고 CSS:link를 가져와서 적용. * Bootstrap의 Grid system을 사용하기 위해서 꼭 지켜줘야 하는 룰 col 부모, 자식간의 관계를 지켜줘야 한다. 그리고 class="col-N" | N에는 1~12 사이의 정수를 넣어준다. 보통 하나의 row에는 최대 12개의 col이 들어갈 수 있다. 2021. 5. 1. [CSS] 김버그의 HTML&CSS는 재밌다 | Screen Only 스크린리더기를 사용하는 이용자를 위해 HTML 정보로는 필요하나 시각적으로 보이지 않게끔 하기 위해서 CSS로 작업한다. .sr-only { display: absolute; z-index: -100; width: 1px; height: 1px; overflow: hidden; opacity: 0; } display: none; 으로 하면 HTML이 정보로써의 가치가 없다고 여기기 때문에 아예 읽히지 않고 또한 width나 height의 값을 0으로 주면, 안에 있는 컨텐츠 자체를 없다고 여긴다. (+) 최근에는 'sr-only'라는 표현보다 'visuallyHidden'이라고 쓰이더라. 2021. 4. 29. [CSS] 김버그의 HTML&CSS는 재밌다 | Background [Background] .background { background-color: #0066ff; /* hex rgb rgba */ background-image: url (); /* 이미지경로 넣기 */ background-repeat: no-refeat; background-size: cover; /* contain | cover | custom */ background-position: center center; /* x y */ } 2021. 4. 29. [CSS] 김버그의 HTML&CSS는 재밌다 | Typography [Typography] .text { font-size : 16px; /* px em rem */ line-height: 1.5; letter-spacing: -0.01em; /* px em */ font-family: "Poppins". sans-serif; font-weight: 400; /* regular: 400; bold: 700; */ color: #0061ff; /* hex rgb rgba */ text-align: left; /*left center right */ text-indent: 10px; text-transform: none; /* none capitalize uppercase lowercase */ text-decoration: none; /* none underline lin.. 2021. 4. 28. 이전 1 2 다음
