오열매의 코딩 공간

브라우저에는 기본적인 CSS 요소가 있다. 위 사진처럼, body 태그에는 테두리에 8px 이 기본적으로 설정되어 있다. 이 외에도 다수 있는데, 이러한 것들에 영향을 받지 않고 온전히 나의 코드로만 사이트를 꾸미기 위해서는 기본 설정들을 초기화 하는 코드가 필요하다. 이를 Reset.css 라고 한다. /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code..

요소들을 움직이고 변형시키고 애니메이션을 만드는 방법에 대해 정리한다. Transition과 Transformation은 State 와 엮어서, 특정 상태에서만 나타나게 하는 방식으로 쓰인다. 예를 들면, 마우스를 올려 놨을 때 한 바퀴 돌아간다든지 등이 있다. Animaition은 State와 관계 없이 지정한 시간 또는 계속해서 Transition과 Transformation을 적용시키는 방식이다. 1) Transition /* transition: */ transition: margin-left 4s ease-in-out 1s; property name에는 background-color, margin, border 등의 다양한 특성들이 들어갈 수 있다. 변화시키고 싶은 모든 대상들을 넣으면 된다. ..

방대한 양의 코드를 사용하다보면, 반복되는 코드들이 있다. 예를 들면, 위 예시처럼 background-color 라는 property에서 wheat, tomato 등으로 이름이 정해진 경우에는 상관 없지만, rgb(252, 201, 65) 처럼 다른 표현을 이용하여 색을 나타낸다면? 코드도 지저분해지고 귀찮아진다. 이럴 때 var()를 활용한다. :root{ } 에 사용할 변수를 정의하고(변수명 앞에 -- 를 붙여야 한다.), 이 변수명을 var( ) 안에 넣어 활용하면 된다. 참고) https://developer.mozilla.org/ko/docs/Web/CSS/var https://nomadcoders.co/kokoa-clone/lectures/1741

Selector(선택자)란, 말 그대로 선택을 해주는 요소를 뜻한다. 특정 요소들을 선택하여 스타일을 적용할 수 있다. Selector 종류에 대해 간단하게 정리한다. 들어가기 전에, CSS 문장을 선언하는 규칙인 Rule Set을 살펴보고 들어간다. 1) Basic selectors - Universal selector >>> 사용법: * { } / 대상: 모든 태그 * { border: 1px solid black; } - Type selector >>> 사용법: 태그명 { } / 대상: 지정한 태그명에 해당하는 모든 태그 div { width: 100px; height: 100px; background-color: wheat; } - Class selector >>> 사용법: .클래스명 { } / ..