반응형 IT/CSS21 SCSS(SASS) vs CSS SCSS 📌 CSS의 한계 선택자(Selector)를 만드는 관점에서 볼 때 불필요한 부모 요소 선택자를 매번 적어야 한다. 규모가 커지는 프로젝트의 경우에도 일원화된 자동화가 어렵고 수동으로 모든 것들을 수정 변경해야 한다. 📌 SCSS(SASS)의 장, 단점 선택자의 중첩(Nesting)을 통해 반복되는 부모 요소 사용을 현저하게 줄일 수 있다. 변수(Variable)를 사용해서 CSS 속성과 값을 일원화된 관리가 가능하다. 프로그래밍 언어에서 사용하는 조건문, 반복문을 사용해서 동적인 CSS 관리가 가능하다. SCSS(SASS)는 CSS로 컴파일(Complie) 거쳐야 하는 번거로움이 있다. 하지만 거의 유일한 단점인 컴파일을 거쳐야 하는 문제점을 extension으로 쉽게 해결할 수 있다. 클래스.. 2022. 4. 23. Tailwind CSS Tailwind CSS 다양한 CSS 명명법이 있다는 것을 알지 못하고 있다 최근에, BEM 명명에 대해 알고 난 뒤 다른 CSS 스타일은 어떤 것들이 있는지 궁금해졌다. HTML, CSS, Vanilla JavaScript를 통해 다양한 시도를 해보던 중, 확실히 명확한 클래스명을 짓는다는 것이 조금 부담스럽기도 하였다. 그렇기 때문에 다른 CSS 라이브러리나, 스타일들에 관심이 생겼고 조금 더 용이하게 CSS 작업을 할 수 있는 것이 무엇인지 찾아보던 중, 예전에 이름만 들어보고, 요즘은 매우 핫한 Tailwind CSS를 사용해보고자 하였다. 사용함에 있어 Tailwind CSS에 대해 어떻게 사용하는지, 어떤 장점과 단점이 있는지 궁금해서 인터넷을 통해 관련된 내용들을 찾아보았다. 📌 Tailwi.. 2022. 4. 18. [CSS] BEM (Block Element Modifier) BEM 의미 BEM은 Block, Element, Modifier로 구성된 클래스 이름을 짓는 CSS 방법론이다. BEM 방법론은 id에서 사용하지 않으며, 오직 class명에만 활용할 수 있다. "어떻게 보이는가"가 아니라 "어떤 목적인가"에 따라 이름을 짓는다. Block Element Modifier 재사용 가능한 독립적인 블록 블록을 구성하는 종속적인 하위 요소 블록 또는 요소의 변형 (모양, 상태, 동작) BEM을 사용하는 이유 BEM 명명 규칙은 세 가지 뚜렷한 이점을 제공 BEM은 목적 또는 기능을 전달 BEM은 구성 요소의 구조를 전달 BEM은 선택자 특이성을 항상 낮은 수준으로 유지 BEM 특징 의미론적 클래스 선택자 작명 규칙 약어 사용 피하기 다른 형식의 선택자 사용을 제한 --, _.. 2022. 2. 22. CSS: Grid - 2 자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다. ⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️ ADVANCED CSS GRID Introduction 이 과정에서는 CSS Grid layout의 기능을 사용하기 위한 다음과 같은 추가 property에 대해 알아본다. grid-template-areas justify-items justify-content justify-self align-items align-content align-self grid-auto-rows grid-auto-columns grid-auto-flow 또한 explicit 및 i.. 2021. 6. 9. CSS: Grid 자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다. ⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️ GRID ESSENTIALS Introduction to Grids CSS를 사용하면 웹 페이지에 요소를 적절하게 배치할 수 있다. . 표시하려는 컨텐츠에 따라 여러 가지 다른 기법이 잘 작동할 수 있다. Box model과 Display and Positioning은 레이아웃의 몇 가지 가능한 방법을 설명한다. 이 과정에서는 CSS Grid라는 강력한 도구를 소개한다. 그리드를 사용하여 전체 웹 페이지를 레이아웃할 수 있다. Flexbox는 대부분 1차원 레이.. 2021. 6. 6. Responsive Design: Grids and Debugging 자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다. ⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️ GRIDS AND SPACING Grid Type 다양한 유형의 그리드가 존재하며 모든 유형의 시각적 디자인에서 사용된다. 인쇄기의 제작과 함께, 책 제작자들은 페이지의 텍스트에 구조를 가져오기 위해 원고식 그리드(manuscript-style grid) 또는 block grid를 개발하였다. 뉴스 디자인 내에서 column grid는 출판사들이 페이지를 여러 가지 내용을 강조하기 위해 섹션으로 분할할 수 있게 했다. column grid:웹 디자이너가 사용할 .. 2021. 6. 5. Documentation and Research 자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다. ⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️ DOCUMENTATION AND RESERACH Documentation 잘 개발된 모든 언어 또는 프레임워크에는 모든 기능을 찾아볼 수 있는 공간이 존재하며, 이 정보 라이브러리를 language's documentation이라 한다. CSS에 대한 documentation은 Mozilla Developer Network에서 찾을 수 있다. (Mozilla Developer Network(MDN)는 CSS 외에도 HTML, 자바스크립트, 그리고 웹 개발에 필요.. 2021. 6. 5. Layout with Flexbox 자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다. ⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️ FLEXBOX What is Flexbox? CSS는 웹 페이지에 요소를 배치하는 데 사용할 수 있는 많은 도구와 속성을 제공한다. 플렉스 박스 레이아웃(flex box layout)에는 두 가지 중요한 구성 요소, flex container & flex items이 있다. flex container는 flex items이 포함된 페이지의 요소이다. flex container의 모든 직접 하위 요소는 flex item이다. 요소를 flex container로 지.. 2021. 5. 22. Responsive Design - II 자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다. ⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️ MEDIA QUERIES Responsive Web Design 화면 크기는 장치마다 크게 다를 수 있으므로 웹 사이트에서 모든 크기의 화면에 가장 잘 맞게 콘텐츠를 크기 조정 및 재구성하는 것이 중요하다. 웹 사이트가 자신이 보는 화면의 크기에 반응할 때 이를 Responsive website라고 한다. 웹 사이트는 수천 개의 다양한 화면 크기로 표시될 수 있기 때문에 화면 크기 변화에 대응할 수 있어야 하고 사용자가 액세스할 수 있도록 콘텐츠를 조정할 수 있.. 2021. 5. 16. 이전 1 2 3 다음 728x90 반응형
