[W3School] CSS 정리

Code/Web 2018.11.07 11:56

CSS 정리


* Selector

- id

#id1

- class

.class1


* 중복된 정의가 있을 경우 나중 것이 적용된다



* Outline, Margin, Border, Padding, Cotent 정의

https://www.w3schools.com/css/css_boxmodel.asp


<style>

p {

outline: 1px solid red;

    outline-offset: 15px;

    margin: 30px;

    border: 1px solid black;

padding: 10px;

background:yellow;    

}

</style>



* 글자

- 반응형 글자 크기 : vw

<h1 style="font-size:10vw">Hello World</h1> 

https://www.w3schools.com/css/css_font.asp



//==============

< 아이콘 >

https://www.w3schools.com/css/css_icons.asp

https://www.w3schools.com/icons/default.asp


* font awesome 사용법

<link rel="stylesheet" href="fontawesome/css/all.min.css">


- 크기와 색 변경

<i class="fa fa-cloud" style="font-size:24px;"></i>


//==========

* Goole 아이콘 , 웹폰트


Google Material Design icons 

https://material.io/tools/icons/?style=baseline

- 아이콘 애니메이션

https://material.io/design/iconography/animated-icons.html



Google Web Fonts

https://developers.google.com/fonts/



//=================

* Bootstrap Icons



* 둥근 버튼 만들기

border-radius: 12px;



* 개체 없애기

display:none //차지하던 공간까지 제거

visibility:hidden //공간은 유지

- 보이려면 none -> block 으로 설정



* 개체에 스크롤바 넣기 - Overflow

CSS Layout - Overflow

https://www.w3schools.com/css/css_overflow.asp

- input 에는 스크롤바 넣을수 없음



* 다단 문서 만들기 - Float

https://www.w3schools.com/css/css_float.asp



* Combinators

https://www.w3schools.com/css/css_combinators.asp

div p : 모든 자식 개체

div > p : 1단계 아래의 자식 개체만

div + p : 바로 다음에 오는 개체

div ~ p : 다음에 오는 모든 개체


* CSS Pseudo-classes

https://www.w3schools.com/css/css_pseudo_classes.asp

툴팁


* CSS Navigation Bar

https://www.w3schools.com/css/css_navbar.asp

메뉴, 풀다운 메뉴



* CSS Attribute Selectors

[title~="flower"] { //title 속성값에 flower 가 포함된 것들

    border: 5px solid yellow;

}


[class$="test"] { //class 값중 test 가 포함된 것들

    background: yellow;

}



* CSS Counters

자동 번호 매기기

글정리시 도움


* CSS Website Layout

Header, Contents, Footer


Contents를 다단 가능

https://www.w3schools.com/css/tryit.asp?filename=trycss_website_layout_grid



//============================

* CSS Multiple Columns (다단)

https://www.w3schools.com/css/css3_multiple_columns.asp


.newspaper {

    column-count: 3;

    column-gap: 40px;

    column-rule: 1px solid lightblue;

}



* CSS Variables - 변수 사용

var()

https://www.w3schools.com/css/css3_variables.asp


:root {

    --main-bg-color: coral;

}


#div1 {

    background-color: var(--main-bg-color);

}


#div2 {

    background-color: var(--main-bg-color);

}



* CSS Flexbox

반응형 웹디자인

- 사진 갤러리 예제

https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_image_gallery


- 사이트 예제

https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_website2



* CSS Media Queries

- 매체(기기)에 따라 선택적으로 표시(반응형)

@media screen and (min-width: 480px) {

    #leftsidebar {width: 200px; float: left;}

    #main {margin-left: 216px;}

}



* Responsive Web Design - Templates

- 반응형 웹 디자인 샘플

https://www.w3schools.com/css/css_rwd_templates.asp



* CSS Grid System

https://www.w3schools.com/css/css_grid_item.asp


'Code > Web' 카테고리의 다른 글

[W3School] Bootstrap 정리  (0) 2018.11.08
SQL 정리 (JOIN, 연산자)  (0) 2018.11.08
[W3School] CSS 정리  (0) 2018.11.07
[W3School] HTML5 정리  (0) 2018.11.07
Wget 설치 방법  (0) 2018.10.10
도커(docker) 간단 설명  (0) 2018.10.03
Posted by 코덴스
TAG , ,

댓글을 달아 주세요