내가 쓰고 기억하려는 CSS

원하는 위치에 배치하기

position

 

position: static;  기본값으로 상->하로 요소를 배치한다.

position: relative; 원래 배치되어야 할 위치에서 지정한 값만큼 떨어진곳에 요소를 배치한다. 

position: absolute; 가장 가까운 상위 요소의 위치를 기준으로 지정한 값만큼 떨어진 곳에 요소를 배치한다. 

position: fixed; 웹 브라우저 화면 전체를 기준으로 배치한다. 스크롤을 하더라도 위치가 고정된다. 

float

float속성은 특정 요소가 다른 요소의 좌/우에 배치되도록 지정할 수 있다. 

 

주의할점! : position이 absolute나 fixed로 지정되어 있다면 해당 요소는 완전히 독립적인 위치를 갖는 것이므로 더 이상 문서 내에서 제어하지 않는 것으로 판단되어 float속성은 none으로 지정된다.

 

left : 요소를 좌측 끝에 위치 

right : 요소를 우측 끝에 위치 

none  : 아무것도 지정안함 

 

float: left;

 

이미지에 걸린 CSS 제거하기 

# CSS property all 알아보기

CSS 프로퍼티인 all은 부모로부터 전달받거나 현재 자신이 가지고 있는 모든 CSS 속성을 제거할 수 있도록 도와줍니다. 선택 가능한 값으로 아래와 같이 세 가지가 있습니다.

 

initial : 초기값으로 설정됨

inherit : 부모 상속된 스타일만 적용됨

unset : 초기 및 부모 스타일 속성 모두를 제거함

 

현재 쓰고 있는 인용구 : 미넴

디자인 출처 

Clean and simple blockquote style

#tt-body-page blockquote[data-ke-style='style1']{

text-align:left!important;

font-size: 0.9em!important;

font-style:italic;

width:60%!important;

color: #000!important;

padding:1.2em 30px 1.2em 75px;

border-left:6px solid #9388ff!important;

line-height:1.6!important;

position: relative!important;

background:#faf6ff!important;

}

#tt-body-page blockquote[data-ke-style='style1']::before{

font-family:Arial;

content: "\201C";

color:#6e66cb;

font-size:6.0em;

position: absolute;

left: 10px;

top:-10px;

}

 

인용문 예시 

 

/*인용글 blockquote*/

#tt-body-page blockquote[data-ke-style='style3']{

border: 3px solid #FF565E55 ;

background: #FFF6F6;

text-align: left;

padding: 21px 25px 20px 25px;

color: #000;

line-height: 1.75;

}