로니의 개발 이야기

1️⃣ CSS의 한계? CSS를 통해서 홈페이지를 꾸미던 중 한 가지 문제가 발생하였는데, 바로 CSS의 양이 한도 끝도 없이 많아지는 것이었다. 이 문제를 해결하기 위해서 열심히 찾아보던 중 CSS 전처리기(Pre-Processor)에 대해서 접하게 되었다. 💡 CSS 전처리기(Pre-Processor)란? CSS 문서 작성에 도움을 주는 도구로, 작업을 하며 발생하는 다양한 문제들을 programmatically 한 방식으로 해결해주는 도구이다. 2️⃣ CSS 전처리기 종류? CSS 전처리기에는 다양한 모듈이 존재하는데 가장 많이 사용되는 전처리기에는 Sass, Less, Stylus 3가지가 있다. 3️⃣ CSS 전처리기 사용을 하면 뭐가 좋을까? Sass를 사용하기에 앞서, 이 전처리기를 사용하게..

1. CSS3 Grid의 등장 CSS Grid는 2차원의 레이아웃을 제공한다. CSS Grid는 예전부터 핵(Hack)으로 불렸던 다양한 레이아웃 대체 방식들을 해결 하기 위해 만들어진 CSS 모듈이다. CSS Grid를 사용하게 되면서 격자 구조의 레이아웃을 쉽게 구현할 수 있게 되었다. 또한 이 레이아웃 안에 배치하는 item들을 좀 더 쉽게 이동시킬 수 있는 자유로움이 생겼다. 2. CSS3 Grid의 사용 Grid Properties Grid는 2개의 개념으로 나뉘게 된다. 첫 번째는 Container, 두 번째는 Items이다. 이 두 가지에 적용하는 속성이 구분되어 있다는 것을 잘 알고 있어야 한다. Grid Containers properties 속성 의미 display 그리드 컨테이너(Co..

1. CSS3 Flexible Box의 등장 대부분의 웹 사이트는 전체 레이아웃이 수직 구성으로 ‘위-아래’로 스크롤하여 사용하게 된다. 레이아웃을 구성할 때 가장 많이 사용되는 요소들은 보통 블록(block) 개념으로 표시되고, 이는 수직으로 쌓이기 때문에 상대적으로 쉽게 구성할 수 있다. 하지만 수평 구조를 만들 때는 어떨까? 수평 구조를 만드는 속성이 명확하지 않았기 때문에 보통은 float 혹은 inline-block 등을 통해서 구성하곤 했다. 이 문제를 해결할 수 있는 명확한 속성의 등장이 바로 Flex(Flexible Box)이다. 우리는 이 Flex를 통해서 수평 구조를 자유롭게 구성할 수 있게된다. 2. CSS3 Flexible Box의 사용 Flex는 2개의 개념으로 나뉘게 된다. 첫 ..

CSS : html이 정보전달에 집중할 수 있게, 디자인을 담당하는 언어이다. 1. css 문법 : css 문법을 적용하는 방법에는 두 가지가 있다. 1) style 태그를 통해서 하는 방법 2) 선택자를 이용하는 방법 선택자는 tag 선택자, class 선택자, id 선택자 3가지가 존재한다. (1) tag selector : a, p, div 등 html 에 사용되는 태그에 css 효과를 적용할 수 있다. 위의 예시와 같이 {} 중괄호 안의 부분을 declaration(선언)이라고 부르고, 그 안에서 적용되는 속성들을 property, 그 속성들의 구체적인 값을 value 라고 부른다. 또한, 이러한 description을 구분해 주기 위해 ;(세미콜론) 이 구분자로서 사용된다. (2) class s..