오열매의 코딩 공간

브라우저에는 기본적인 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..

Sass란 Syntactically Awesome Style Sheets의 약자이다. CSS pre-processor(전처리기)로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성 및 가독성을 높여주어 유지보수를 쉽게 해준다. scss는 sass의 3버전에서 등장한 언어이다. 퍼블리셔에게 익숙한 css와 비슷한 구문을 가지고 있으며, css와 완전히 호환되도록 새로운 구문을 도입한 css의 상위 호환 스타일시트이다. sass기능을 지원하되, css와 거의 같은 문법으로 사용된다는 점에서, 퍼블리셔들에게 각광받는 언어이다. 설치 과정) 1. git 설치: https://git-scm.com/ Git git-scm.com 2. NodeJS LTS 설치: https://nodejs.org/en/ N..

요소들을 움직이고 변형시키고 애니메이션을 만드는 방법에 대해 정리한다. 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 >>> 사용법: .클래스명 { } / ..

태그들 중에는 input, a, img 태그 등과 같이 태그 자체에 기능이 있는 경우도 있지만, 기능은 딱히 없지만 이름으로 내용을 구분하기에 용이하게 해주는 태그들이 있다. 이를 Semantic(의미의, 의미론적인) Tag라고 한다. 기능은 div 태그와 동일하다. div는 단순 block element에 불과하다. 박스라고 보면 된다. 원래는 이러한 박스에 모든 내용들을 넣었었다. 하지만 웹사이트의 규모가 커지면서, 그 내용물을 구분하기가 힘들어졌다. 이 부근엔 어떤 내용이 있는지 짐작해야만 했다. Semantic Tag를 이용하면, 이 태그 안에는 어떠한 내용들이 있겠구나 하는 것을 유추할 수 있다. 또한, 검색엔진 최적화와 웹 접근성 등에도 유리하다. 주요 Semantic Tag 종류) 1. : ..

태그의 종류는 매우 많다. 모두 외우는 것이 아닌, 어떻게 사용하는지만 알면 된다. 위 사진은 Advanced Web Ranking 이라는 사이트에서 통계낸 '사이트에서 가장 많이 사용하는 html 태그 순위' 이다. 일단 분류를 하자면, html, head, body, title, meta, div, a, script, link, img, span, p, li, ul, style, br, h2, input, h1, form, h3, nav, footer, header, iframe, button, strong, i 등이 있다. 재분류를 하기에 앞서, 가장 많이 사용하는 html 태그는 사용률 100% 인 것으로 봐도 알 수 있듯이 웹 사이트를 만드는 데 필수적이다. 사이트를 구성한느 필수 태그라고 보면..