Coding Feature.

반응형 디자인이란? 화면의 크기에 따라 디자인이 바뀌는 기능. 미디어 쿼리의 도움으로 구현이 가능. ​ 태그 내 @media(min-width:800px)​{ div{ display:none; } } 화면 너비가 800px 보다 크다면 div 내 컨텐츠를 감춘다. max-width:800px -> 800px보다 작다면.. ​ ​ 여러 문서에서 태그의 중복 사용으로 수정이 힘들다면. style 태그 내용을 .css 파일로 저장한다. style 태그가 사용될 각 문서들의 헤드 태그에 을 작성한다. ​ 그러면 각 문서는 .css파일을 다운받고 그 내용을 자신의 문서에 그대로 사용하게 된다.

- 단순히 디자인을 위해 사용되는 태그. 묶을때 편리. block level - div와 비슷, 단 inline level ​ #grid{ display:grid; grid-template-columns: 150px 1fr; } 왼쪽 오른쪽으로 그리드를 나누고 왼쪽을 150px 너비, 오른쪽을 나머지로 설정. ​ xfr yfr -> x:y 비율로 나눈다. ​ caniuse.com HTML, CSS 지원되는 곳 알려주는 매우 유용한 사이트. ​ #grid ol{ .. } grid가 id로 있는 태그가 부모인 자식 태그를 가리킨다. ​ #grid #article { .. }도 가능하기는 하다.

​ h1과 같은 태그는 화면 전체를 사용, block element. a와 같은 태그는 자신의 크기만큼을 사용, inline element. ​ h1에 display:inline를 추가하면 자신의 크기만큼만 사용하도록 만들 수 있다. a에 display:block을 추가하면 화면 전체를 사용하도록 만들 수 있다. ​ display:none은 태그 내용을 감춘다. ​ h1, a{ ... } 여기에서 ','를 사용해서 선택자 여러 개를 동시에 사용할 수 있다. 또한 h1{ border-width:5px; border-color:red; border-style: solid; } 대신 h1{ border:5px solid red; } 로 단축이 가능하다. ​ 컨텐츠와 박스 사이의 여백 padding: 20px;..

선택자는 효과와 함께 CSS에서 중요한 개념 중 하나. ​ 1. 태그의 class를 saw라고 지정 (html) 클래스, 또는 Grouping ​ 2. head의 style 내 .saw{ color:gray; } 이때 '.'은 다음에 오는 이름은 class임을 가리킨다. (선택자) ​ 3.라고 작성 시 이 태그는 saw, active 클래스 모두에게 속한다는 것을 의미. (띄어쓰기로 구분) head의 style 내 .saw{ color:gray; } .active{ color:red; } 라고 작성시 빨간색으로 바뀐다. (절차지향적) ​ 결국 클래스는 하나의 태그에 여러 개 지정이 가능, 띄어쓰기로 구분, 여러 개의 선택자로 제어가 가능. ​ 위 예시는 좋은 예시가 아니다. .saw가 먼저냐, .acti..