CSS 이해하기 : 드림코딩 by 엘리

히치키치·2021년 6월 28일

1. Selector 이해하기

universal : *
type : tag
ID : #id
class : .class
state : :
Attribute : []

selector.css

/*
selector{
    property:value;
}
*/

* {
    color:green;
}

li{
    /*list item select*/
    color :blue;
}

#special{
    /*hashtag selector*/
    color:pink;
}

.red{
    /*div 상에 영역을 지정해줘야 거기에 background 적용됨*/
    width:100px;
    height:100px;
    background: chocolate;

    padding:20px; /*content 안 spacing*/
    /*
    padding:20px; uniform 하게 적용됨
    padding:10px 10px; (top,bottom), (right, left) 적용됨
    padding:10px 5px 10px 5px; top right bottom left 적용됨
    */
    /* 각각 따로 따로 지정할 수 있음 
    padding-top: 100px; 
    padding-left: 80px;
    */

    margin:5px; /*content 밖 spacing*/

    border: 2px dashed red;
    /* 한 줄로 작성가능
    border-style: solid;
    border-color:pink;
    background: yellow;
    */

}

button:hover{
    /*button 위에 마우스가 올라간 경우 색상 변경*/
    color: red;
    background: beige;
}

a[href="https://www.naver.com/"]{
    /*a 태그 중에 href 레퍼런스가 있고 그 레퍼런스가 naver인 경우 색상 변경*/
    color:purple;
}

selector.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, intial-scale=1.0">
        <link rel="stylesheet" href="C:\Users\ayeon\OneDrive\바탕 화면\장아연\CSS\selector.css">
        <title>CSS DEMO</title>
    </head>
    <body>
        <ol>
            <li id="special"> First</li>
            <li> Second</li>
        </ol>
        <button> Button 1</button>
        <button> Button 2</button>
        <div class="red"></div>
        <div class="blue"></div>

        <a href="https://www.naver.com/">Naver</a>
        <a href="https://www.google.co.kr/">Google</a>
        <a>Empty</a>
    </body>
</html>

2. Layout 이해하기

display

inline:
inline-block:
block:
layout.html

div,span{
    width:80px;
    height:80px;
    margin:20px;
    background: pink;
}
/*inline은 div,span{}에서 정의한 크기를 무시하고 안에 들어있는 text등의 길이 맞춰 표현됨*/
div{
    background: red;
    display: inline-block;
    /*display의 default가 block이기 때문에 세로로 배열됨
    line-block으로 변경시 가로로 배열됨
    */
}

span{
    background: blue;
    /*display의 default가 inline-block이기 때문에 가로로 배열됨
    block으로 변경시 세로로 배열됨
    */
    display: block;
}

layout.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, intial-scale=1.0">
        <title>JS BIN</title>
        <link rel="stylesheet" href="C:\Users\ayeon\OneDrive\바탕 화면\장아연\CSS\layout.css">
    </head>
    <body>
        <!--Block level-->
        <div></div>
        <div></div>
        <div></div>

        <!--Inline level-->
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </body>
</html>

position

layout_position.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, intial-scale=1.0">
        <title>JS BIN</title>
        <link rel="stylesheet" href="C:\Users\ayeon\OneDrive\바탕 화면\장아연\CSS\layout_position.css">
    </head>
    <body>
        <article class="container">
            <div></div>
            <div class=box>I'm box</div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </article>
    </body>
</html>

layout_position.css

div{
    width:50px;
    height:50px;
    margin-bottom:20px;
    background: red;
}
.container{
    background: beige;
    left:20px;
    right:20px;
    position: relative;

}

.box{
    background: blue;
    left:20px;
    right:20px;
    position: sticky;
    /*relative : 원래 static 때 있어야 한 자리에서 left, right만큼 이동*/
    /*absolute : 해당 item이 담겨 있는 상자 기준으로 left, right만큼 이동*/
    /*fixed : 완전히 상자 벗어나 window 기준으로 left, right만큼 이동*/
    /*sticky : 원래 있어야하는 자리에 있는데 스크롤에 내려도 그자리에 있음*/
}

3. flexbox 이해하기

container

Color Tool : UI 색깔 선택/참고
https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=64B5F6
100% vs 100vh
div container>div.item.item${$}*10 작성 후 tab 눌러서 한번에 생성
MDN : 속성 / 브라우저 지원 확인
https://developer.mozilla.org/ko/docs/Web/CSS/Reference
A Complete Guide to Flexbox : 속성 / 메소드 그림 설명
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

flexbox_container.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" conetent="width=device-width, intial-scale=1.0">
        <link rel="stylesheet" href="C:\Users\ayeon\OneDrive\바탕 화면\장아연\CSS\flexbox_container.css">
        <title> JS Bin</title>
    </head>
    <body>
        <div class="container">
            <div class="item item1">1</div>
            <div class="item item2">2</div>
            <div class="item item3">3</div>
            <div class="item item4">4</div>
            <div class="item item5">5</div>
            <div class="item item6">6</div>
            <div class="item item7">7</div>
            <div class="item item8">8</div>
            <div class="item item9">9</div>
            <div class="item item10">10</div>
        </div>
        </container>
        
    </body>
</html>

flexbox_container.css

.container{
    background: beige;
    height:100vh;
    display:flex;
    flex-direction: row;
    flex-wrap:nowrap;
    /*flex-flow : column nowrap;*/
    justify-content: space-between; /*main axis*/
    align-items: baseline;
    align-content: center;
}
.item{
    width:60px;
    height:60px;
    border: 3px solid black;
}

.item1 {
    background: #ef9a9a;
}
.item2 {
    background: #f48fb1;
}
.item3 {
    background: #ce93d8;
}
.item4{
    background: #b39ddb;
}
.item5{
    background: #90caf9;
}
.item6{
    background: #a5d6a7;
}
.item7{
    background: #e6ee9c;
}
.item8{
    background: #9ccc65;
}
.item9{
    background: #b2dfdb;
}
.item10{
    background: #64b5f6;
}

item

order
flex-grow
flex-shrink
flex
align-self

flexbox_item.css

.container{
    padding-top: 100px;
    background: beige;
    height:100vh;
    display: flex;
}

.item{
    width : 40px;
    height : 40px;
    border : 1px solid black;
}
.item1{
    background:#ef9a9a ;
    order:2;
    flex: 2 2 auto;/*grow shrink basis*/
    align-self: center ;
}
.item2{
    background: #90caf9 ;
    order:1;
    flex-grow: 1;
    flex-shrink: 2;
}
.item3{
    background:#a5d6a7 ;
    order:3;
    flex-grow: 0;
    flex-shrink: 1;
}

flexbox_item.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" conetent="width=device-width, intial-scale=1.0">
        <link rel="stylesheet" href="C:\Users\ayeon\OneDrive\바탕 화면\장아연\CSS\flexbox_item.css">
        <title> JS Bin</title>
    </head>
    <body>
        <div class="container">
            <div class="item item1">1</div>
            <div class="item item2">2</div>
            <div class="item item3">3</div>
            
        </div>
        </container>
        
    </body>
</html>

4. 반응형 정리

fluid layout 구현

flex grid, flex box, %, vw, vh 이용
Media Queries : layout 재배치 구현 (mobile, tablet, Desktop)
screen ,all,print,speech
not,only,,(comma)
https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Media_queries

@media screen and (min-width:800px){
//적어도 screen이 800이상 일 때만 컨테이너가 50% 차지하게 해
	.container{
    	width:50%;
    }
}

5. 반응형 유닛 정리

css: selector,property,values
absolute length units : 주로 px (폰트 사이즈는 pt)
relative length units : %, em, rem, vw, vh, vmin, vmax
em : default=16px, relative to parent element
parent : 8em (16px 8 =128px) : 800%
child : 0.5em (128px 0.5 = 64px) : 50%
rem : relative to root element
parent : 8rem (16px 8 = 128px)
child : 0.5rem (16px 0.5 = 8px)
vw : viewport width
100vw : viewport 너비의 100%를 씀
vh : viewport width
100vh : viewport 높이의 100%를 씀
vmin : 브라우저의 높이와 너비 중에 작은 것의 일정 비율 사용
50vmin : 브라우저의 높이와 너비 중에 작은 것의 50% 사용
vmax : 브라우저의 높이와 너비 중에 큰 것의 일정 비율 사용
50vmax : 브라우저의 높이와 너비 중에 큰 것의 50% 사용

6. 반응형 유닛 예제

기준

parent : %,em
browser : v*, rem
box : %, vh, vw
font-size : em, rem

change pixel to em

http://pxtoem.com/

responsive.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive ❤️</title>
    <link rel="stylesheet" href="C:\Users\ayeon\OneDrive\바탕 화면\장아연\CSS\responsive.css" />
  </head>
  <body>
    <h1 class="logo">Dream Coding</h1>
    <div class="container">
      <section class="component">
        <header class="title">Master Front-end ✨</header>
        <p class="contents">
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sapiente
          veniam, nulla porro distinctio aliquid, quos quidem odio consectetur
          aperiam, delectus cum. Deserunt facilis excepturi similique natus
          minus deleniti rem sit?
        </p>
      </section>
      <section class="component">
        <header class="title">Career Growth 🚀</header>
        <p class="contents">
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sapiente
          veniam, nulla porro distinctio aliquid, quos quidem odio consectetur
          aperiam, delectus cum. Deserunt facilis excepturi similique natus
          minus deleniti rem sit?
        </p>
      </section>
    </div>
  </body>
</html>

responsive.css

h1 {
    font-size: 1.75rem;
    color: burlywood;
    margin: auto;
    text-align: center;
  }
  
  .container {
    display: flex;
    padding: 2em;
  }
  
  .component {
    border: 1px solid brown;
    margin: 1em;
  }
  
  .title {
    font-size: 1.5rem;
    padding: 1em;
    background-color: brown;
  }
  
  .contents {
    font-size: 1.125rem;
    padding: 1em;
  }
  
  @media screen and (max-width: 48rem) {
    .container {
      flex-direction: column;
    }
  }