h1{
* 폰트
font-family : 글꼴;
font-style : italic;
: normal;
: oblique;
font-size : xx-small;
: x-small;
: small;
: medium;
: large;
: x-large;
: xx-large;
: larger;
: samller;
: 12px;
: 150%;
font-weight : bolder; 진하기
: normal;
: bold;
: bolder;
: lighter;
: 100;
* 텍스트
color : #ffffff;
: rgb(255,255,255);
: rgba(255,255,255,0.5); 투명도 0-투명, 1-불투명
text-align : center;
: justify; 오른쪽 여백 없앰
text-decoration : none; 밑줄 설정
text-transform : uppercase; 대문자
: lowercase; 소문자
: capitalize; 첫글자만 대문자
text-indent: 50px; 첫 라인 들여쓰기
letter-spacing : -10px; 글자 간격
line-height : 10px; 라인 간격
word-spacing : 10px; 단어 간격
text-shadow: 5px 10px 5px gray; x좌표, y좌표, 투명도, 색
* display
display : none; 안보이게
: block; 줄바꿈
: inline; 같은 줄(width, height, margin-top,margin-bottom 무시)
: inline-block; 같은 줄(width, height, margin-top,margin-bottom 적용)
visibility : visible;
: hidden;
: collapse; 테이블 안보이게
* 투명도
opacity : 0.5; 투명도 0-투명, 1-불투명
* box model
width : 10px; content의 가로
height : 10px; content의 세로
max-width : 10px; 창이 작아지면 자동 조절
padding : 10 20 30 40; 상 우 하 좌
border : solid 5px #ffffff;
border-style : solid;
: none;
: dotted;
: dashed;
: solid;
: double;
: groove;
: ridge;
: inset;
: outset;
: hidden;
border-width : thin;
border-color : #ffffff;
border-radius : 10px 10px 10px 10px / 10px 10px 10px 10px;
(테두리 둥글게 top-letf-x, t-right-x, bottom-l-x, b-r-x / t-l-y, t-r-y, b-l-y, b-r-y)
border-image : ;
box-shadow : ;
border-collapse:collapse;
margin : 10 20 30 40; 상 우 하 좌
margin : auto; 가운데 정렬
box-sizing : content-box; width와 height가 content의 길이를 나타냄.(default값)
: border-box; width와 height가 border의 길이를 나타냄.
* background
background-color : #ffffff; 색
background-image : url('경로'),url('경로2'); 배경 이미지
background-repeat : repeat; 반복
: no-repeat;
: inherit;
: round;
: space;
: repeat-y;
: repeat-x;
: no-repeat;
background-attachment : fixed; 붙이는 방식
background-position : center; 위치
* potision
potision : static; (default) top, bottom, left, right에 무관.
: relative; normal position 기준. 부모에 적용.
: absolute; 가장 가까운 부모 기준. 자식에 적용.
: fixed; view port 기준
z-index : -1; 큰 값이 위로 올라온다.
overflow : visible; 내부 요소가 부모의 범위를 벗어날 경우
: hidden;
: scroll;
: auto; 필요할 때만 scroll 생성
* float
float : left; 자식 float 속성을 주면 부모는 overflow : hidden;을 준다.
: right;
clear : both;
* cursor
cursor : auto;
: text;
: crosshair;
: default;
: e-resize;
: help;
: move;
: n-resize;
: ne-resize;
: nw-resize;
: s-resize;
: se-resize;
: sw-resize;
: w-resize;
: pointer;
: wait;
: progress;
* ext
list-style-image: url('이미지 경로'); 리스트에 이미지 background
}
>
</head>
'FRONT END > CSS' 카테고리의 다른 글
[CSS] 선택자 selector (0) | 2020.11.28 |
---|---|
[CSS] css 적용방법 3가지 (0) | 2020.11.28 |