CSS/SCSS - BASICS

이번에는 훨씬더 직관적이고 더 쉽게 GRID를 만들어보도록 하자. 바로 GRID-TEMPLATE 라는 PROPERTY 를 사용해서 말이다. 그리고 GRID의 각 행과 열에 이름을 붙여 세부적으로 MODIFY 할 수 도 있다. 또한 특정 행과 열이 어디부터 어디까지 이어

sassy(스타일리쉬한) css 라고도 한다. 마치 프로그래밍하듯이 변수도 설정하고 함수와 조건문을 이용해 css 를 구성하는걸 뜻한다. 그럼 compiler가 scss 문법을 css 문법으로 번역하고(이런 과정을 compile 이라고 한다) 그걸 html이 알아들어

짱구볼 너무 커엽다... 요번엔 요 볼따구 처럼 쭉쭉 늘어났다 줄어들었다 하는 웹페이지를 만들어 보자!바로 auto-fill과 auto-fit이라는 property를 사용하면 된다!auto-fill과 auto-fit은 사실 거의 비슷하지만 약간의 차이가 있다. colu

MIXIN를 이번에 배워보자. MIXIN는 함수와 모양과 기능이 비슷하다. 그리고 IF/ELSE 와 같은 조건문도 넣을 수 있다. 역시나 html 을 먼저 만들어주자. 홀수번째 google 은 파란색 짝수번째에 있는 google은 빨간색으로 설정해주려 한다.그리고 \_

이번엔 화면에 크기에 따라 효과가 적용되는 mixin을 만들어볼려고 한다. responsive mixin은 @content 함수를 통해 함수 내용을 styles.scss에서 설정할 수 있다. 그럼 먼저 html 을 만들어주자. 화면 크기에 따라 HELLO의 색깔이 바뀔

not 선택자는 \*(univeral selector, 모든것을 선택)와 반대되는 성격을 가진다고 할 수도 있겠다. 일종의 예외를 정의하는 selector 이다. 예시를 살펴보자.css를 보면 client 클래스에 border가 적용되어있다. 그런데 border-top

dad jokes 를 만들다 알게된 꿀팁이다!!jokeContainer만 가운데 정렬하고 싶을때는 align-self를 이용하자!해당 구역만 세부적으로 정렬할때 쓰이는 property이다! 유용하게 사용될것 같으니 기억하자!font Awesome에서 animation도

react color 플젝 하다가 알아낸 사실이다.(min-width (mix-width 그리고 css 코드도 JS와 마찬가지로 위의 코드는 아래코드에 덮어씌여진다.따라서 max-width일 경우 큰것부터 작은것 순으로 적어야 창 사이즈 크기에 따라 순차적으로 적용이

항상 쓸때마다 헷갈려서 확실하게 정리해두려고 한다. 나는 무언가를 배울때마다 그 단어의 의미를 이해하려고 노력한다.relative는 내 주변에 있는 다른 요소와 지금 나의 위치를 파악하고 지금 내가 존재하는 곳에서 움직인다.반면 absolute는 다른 요소를 무시한다.