CSS7 [HTML/CSS] CSS Architecture udemy : Advanced CSS and Sass: Flexbox, Grid, Animations and More! / Jonas Schmedtmann HTML을 마크업을 하며 당연히 CSS를 생각 해야하는데 이 CSS를 설계할 때 어떻게 하면 더 효율적으로 할 수 있는가에 대해 THINK - BUILD - ARICHITECT 1. THINK (Component -Driven Design) - Modular building blocks - Re-usable - Independent CSS를 생각할 때 블럭 단위로 구상할 것, 같은 속성을 가지고 있는 것들은 재사용할 것, 그리고 독립적이어야 할 것. 2. BUILD (with meaningful class names) BEM : Block Elemen.. 2021. 7. 9. [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. 이전 1 2 다음
