css 공부 노트

inline 속성과 block속성

 - inline 속성 : 안에 있는 값만큼만 공간을 차지, inline속성을 height값을 가지지 않는다

 - block 속성 : 한줄을 만큼의 공간을 차지

display: inline 

 - 해당하는 엘리멘트를 inline 속성으로 바꿈

display: block;

 - 해당하는 엘리멘트를 block 속성으로 바꿈

display: inline-block

 - 해당하는 엘리멘트를 inline속성과 block 속성을 가지게함

 - 높이값도 가지고 안의 내용만큼만 공간차지

background url

background: url(../img/header_bg.jpg) center top repeat-x;

div에 원하는 이미지를 넣을 수 있다. 

center 속성은 이미지의 가운데 부분을 고정

top 속성은 상단에 고정

repeat-x는 x축으로만 이미지를 반복

inherit

height: inherit;

부모의 값을 상속한다

IR 기법

.header .header-icon a{ width: 60px; height: 60px; display: inline-block; background: url(../img/icon.png)}

.header .header-icon a.icon1 { background-position: 0 0; }

.header .header-icon a.icon2 { background-position: 0 -60px; }

.header .header-icon a.icon3 { background-position: 0 -120px; }

.header .header-icon a.icon4 { background-position: 0 -180px; }

이미지 IR 기법

하나의 여러 아이콘이 모여있는 이미지 파일을 위치를 조정함으로써 사용하는 기법

스크롤 생성 css

overflow-y: scroll;

height vh

현재 브라우저 창을 기준으로 백분률 높이를 잡음

현재 창을 기준으로 위치를 잡음

position: fixed

역삼각형 만들기

border-top: 5px solid #color;

border-left: 5px solid transparent;

border-right: 5px solid transparent;

border-top : 삼각형의 높이를 결정한다

border-left : 삼각형의 변 각도를 결정한다

border-rigth: 삼각형의 변 각도를 결정한다

 * transparent 속성은 배경을 투명하게 해준다. 이 속성을 넣음으로써 삼각형이 완성된다

transition 애니메이션 효과

transition: box-shadow 0.25s ease-in-out;

box-shadow : transition을 적용할 css의 속성 / 이부분에 all이 들어가면 모든 속성이 적용

0.25s : 적용되는 시간

ease-in-out : 빠르게 변화 후 느리게 마무리

box-sizing

content-box와 border-box 두가지 값이 있다.

content-box는 상위 박스 안의 내용의 크기를 그대로 하며 padding margin border의 값이 주변으로 둘러져 늘어난다

border-box는 상위 박스 안을 벗어나지 않게 padding mardin border의 값까지 포함하여 크기가 정해진다

참고 : https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing

미디어 쿼리 css속성 초기화

미디어 쿼리를 통해 기존에 있는 css의 속성을 없애야 할 때가 있다. 아래의 속성들을 입력하게 되면 초기화가 된다.

position: static;

height: auto;

float: none;

clearfix

하위 요소가 float일 경우에 float의 영역을 잡아주기 위한 작업

 *float은 떠있는 상태이기 때문에 height가 잡히지 않는다.

다른 방법으로는 부모 요소에 overflow: hidden 속성을 부여해도 된다.

/* clearfix */

.clearfix{

  *ZOOM: 1;

}

.clearfix::before, .clearfix::after{

display: block;

content:  '';

line-height: 0;

}

.clearfix::after{

  clear: both;

}

ifram을 이용한 video 반응형

padding을 이용해 영역을 잡고, 그 영역 만큼 하위의 iframe을 보여주는 방식

<div class="video">

    <iframe

       src="https://www.youtube.com/embed/4GqnbAltxMU"

       frameborder="0"

       allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"

allowfullscreen

></iframe>

</div>

.video{ position: relative; width: 100%; padding-bottom: 56.25%;}

.video iframe{ position: absolute; width: 100%; height: 100%;}

태그의 기본 스타일 제거

reset.css를 통해 제거 할 수도 있지만 all이라는 속성을 통해서도 기본 스타일을 제거 할 수 있다

all: unset;