-
CSS 치트키 3) CSS Layout개발입문/WEB 2018. 1. 1. 16:19
Layout 레이아웃무엇을 어떻게 논리적으로 구성할 것인지 고민중요한 것은 중요하게! 숨길 것은 적당히 숨기고! 등을 구성하는건 중요하다.마치 학창시절 깔끔한 필기노트를 보는 것과 같다. (성적과는 무관하지만....)- 어디에 위치시킬 것인지,- 블락과 텍스트를 어떻게 (상대적으로) 위치/정렬 할 것인지 레이아웃 대상: ElementBlock-level Elements : full width available , - , , , , , Inline Elements : , , Display 노출여부주로 자바스크립트 코드를 안보이게 한다. display:noneh1.hidden { display: none; }h1.hidden { visibility: hidden; } Width 콘텐츠 크기 고정/반응형이제는..
-
CSS 치트키 2) Icon, Link, List, Table개발입문/WEB 2018. 1. 1. 14:24
Default 규칙이 적용되어있을 뿐세부사항 디자인을 (거의) 모두 바꿀 수 있다. Icon Icon Reference: https://www.w3schools.com/icons/icons_reference.asp Link /* a tag Status a:link, a:visited, a:hover, a:active */a:link, a:visited { background-color: #f44336; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: red; } Listul { list-style: squ..
-
CSS 치트키 1) BOX MODEL개발입문/WEB 2017. 12. 31. 15:46
CSS 기본 3 부분에 대한 치트키입니다! 부가설명 빼고 문법만 딱 적어놓았습니다. :) - CSS Syntax - 박스모델과 레이아웃 - HTML 의 기본 텍스트/폰트 1. Selector- HTML element - ID: #id - Class: .class / element.center - Group: h1, h2, p 2. Style Sheet- External style sheet- External style sheet - Internal style sheet - Inline style✮ 적용 순서 (Cascading Order) Inline style (inside an HTML element) > External and internal style sheets (in the head secti..