keyframes 를 이용하여 활용이 가능하다.

아래의 코드를 css에 적용시켜 주면 된다.

@keyframes blink-effect {

    50%{

        opacity:0;

    }

}

.blink {

    animation: blink-effect 1s step-end infinite;

    /* 다른 기능을 원한 다면 이부분의 주석을 해제.

    animation-name: blink-effect;

    animation-duration: 1s;

    animation-iteration-count:infinite;

    animation-timing-function:step-end;

    */

}

css 주석 /* 주석 내용 */

 1) float 을 이용한 정렬

 2) display:inline-block 을 이용한 정렬

 3) display:table 을 이용한 정렬

 4) display:flex 를 이용한 정렬 

 5) display:grid 를 이용한 정렬

부모는 display:table를 사용하고 자식에는 display:table-cell을 사용해준다.

이때는 따로 제약이 없므로 잘만 사용하면 편하게 쓸수 있는 css이다.

<style>

*{

    padding:0;

    margin:0;

}

.main{

    width:100%;

    height:800px;

    border:1px solid #000;

}

.head{

    width:100%;

    height:20%;

    box-sizing:border-box;

}

.top{

    width:100%;

    height:50%;

    background:#ea4335;

    box-sizing:border-box;

    text-align:center;

    line-height:50px;

}

.nav{

    width:100%;

    height:50%;

    background:#ff5e00;

    box-sizing:border-box;

}

.cont{

    width:100%;

    height:60%;

    box-sizing:border-box;

    display:table;

}

.side{

    width:30%;

    height:100%;

    background:#4285f4;

    display:table-cell;

    box-sizing:border-box;

    border:1px dotted #000;

}

.content{

    width:70%;

    height:100%;

    display:table-cell;

    box-sizing:border-box;

    border:1px dotted #000;

}

.sec1{

    width:100%;

    height:50%;

    background:#34a853;

    box-sizing:border-box;

}

.sec2{

    width:100%;

    height:50%;

    background:#fbbc05;

    box-sizing:border-box;

}

.foot{

    width:100%;

    height:20%;

    background:#8a8d92;

    box-sizing:border-box;

}

</style>

<div class="main">

    <div class="head">

        <div class="top">header : 장선수</div>

        <div class="nav">nav</div>

    </div>

    <div class="cont">

        <div class="side">side</div>

        <div class="content">

            <div class="sec1">section1</div>

            <div class="sec2">section2</div>

        </div>

    </div>

    <div class="foot">footer</div>

</div>

이 방법은 inline-block으로 바뀐 요소에 공백이 생기는 문제가 있다.

그래서 부모에서 font-size:0을 지정해줘야 공백이 사라진다.

<style type="text/css">

* {

    margin: 0;

    padding: 0;

}

.main {

    width: 500px;

    height: 500px;

    border: 1px solid #000;

    font-size:0px;

}

.head {

    border: 1px dotted #000;

    width: 100%;

    height: 100px;

    text-align: center;

    line-height: 100px;

    box-sizing: border-box

}

.content {

    width: 100%;

    height: 300px;

    box-sizing: border-box;

    font-size:0px;

}

.left {

    border: 1px dotted red;

    box-sizing: border-box;

    width: 100px;

    height: 300px;

    display: inline-block;

    text-align: center;

    line-height: 300px;

    font-size:12px;

}

.cont {

    position: relative;

    left: -1px;

    border: 1px dotted blue;

    box-sizing: border-box;

    width: 300px;

    height: 300px;

    display: inline-block;

    text-align: center;

    line-height: 300px;

    font-size:12px;

}

.right {

    border: 1px dotted green;

    box-sizing: border-box;

    width: 100px;

    height: 300px;

    display: inline-block;

    text-align: center;

    line-height: 300px;

    font-size:12px;

}

.foot {

    border: 1px dotted #000;

    width: 100%;

    height: 100px;

    line-height: 100px;

    text-align: center;

    box-sizing: border-box;

}

</style>

<div class="main">

    <div class="head">header</div>

    <div class="content">

        <div class="left">left</div>

        <div class="cont">content</div>

        <div class="right">right</div>

    </div>

    <div class="foot">footer</div>

</div>

float를 사용하는 경우 float를 해제 해줘야 한다.

첫번째로 float를 사용하는 방법

float:left(왼쪽정렬), float:right(오른쪽정렬)

<div class="clear">

 <div class="left"></div>

 <div class="left"></div>

 <div class="left"></div>

</div>

float를 사용하는 경우 float를 해제 해줘야 한다.

그래서 css에 다음과 같은 방법을 사용하면 좋다.

.clear:after{ content:""; clear:both; display:block;}

.left{float:left;box-sizing:border-box}

  - solid, dotted, dashed, double, groove, ridge, inset, outset

 - 컨텐츠 기준으로 바뀜

div{ margin:10px;width:150px;}

#small{border:10px solid #000;}

#large{border:30px solid #000;}

<div id="small">small</div>

<div id="large">large</div>

위와 같이 사용할 경우 small과 large가 크기가 달라진다. 

이를 A와 B를 같은 크기로 수정하기 위한게 box-sizing:border-box; 를 사용한다.

마진과 마진이 만났을 때 큰 마진이 작은 마진을 먹어버리는 현상

.a{margin:100px;}

.b{margin:50px;}

일때 .b 클래스의 margin-top:50px은 .a의 margin-bottom:100px에 의해 상쇄된다.

 - 경계를 분할하거나 영역을 나눌 때 사용하는 태그

#test .test a{  // 100+10+1

    color:red;

}

#test div a{ //100+1+1

    color:red;

}

이므로 위에 있는 것이 최종 적용된다.

 - 사용자의 반응으로 생성되는 특정한 상태를 선택

선택자형태                 설  명

:active           마우스로 클릭할 때 선택

:hover           마우스를 올린 태그를 선택

 - 요소 또는 텍스트의 크기를 지정하는 단위

 px - 화소 하나의 크기에 대응되는 단위(고정값)

 em - 부모요소 크기에 따른 배수단위

rem - html 태그의 요소 크기의 몇배인지 지정하는 단위

작성된 문서의 표현을 기술하기 위해 쓰이는 스타일시트 언어입니다. 

CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되어야 하는지 기술합니다.

CSS는 오픈 웹의 핵심 언어 중 하나이며 W3C 명세에 따라 브라우저끼리 표준을 맞춥니다. 

레벨 단위로 개발한 CSS1은 더 이상 사용하지 않고, 다음 레벨인 CSS2.1은 권고안이며, 

레벨보다 작은 단위인 모듈로 나뉜 CSS3은 표준화 과정을 밟고 있습니다.