[W3School] CSS 정리

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