유용하고 자주쓰이는 스타일시트(css) 속성 정리

나는 전문가가 아니라서 어쩌다 한번씩 홈페이지를 수정하려면 막상 단어나 구문이 생각이 안나서 매번 검색을 하거나 다른 스타일시트를

열고 찾아보는 과정을 여지껏 반복했는데 이참에 생각난김에 한군데에 정리해놓고 써야지.

왜 진작 이렇게 하지 않았을까.

 

그런데 웃기는게 막상 할일을 다 끝내놓고 정리를 하려다보니까

머릿속에 다 입력이 되버린것같다.

 

*아래 쓰여진 부분 이외에도 더 자세한 속성값들이 있으나 나는 딱히 그렇게까지 자세하게 알지 않아도 되는 사람이므로 패스.

 궁금하신분들은 구글님께 문의하시고

*일반 사용자들은 이정도만 이해해도 충분할것으로 생각함

* 간단하게 설명은 굳이 해두었지만 개인적으로 편하게 쓰려고 정리해두는거라 타인이 보기엔 불편할수 있음.

 

-------------------------------------------------------------------------------------------------------------------------------------

 

 

 

이상하게 절대로 안외워지고 외웠다해도 나중에 쓰려고보면 이상하게 또 생각안나는 주옥같은

공백태그    

스페이스가 여러개일경우 1개로 인식하므로 간단하게 여백을 설정하기위해 필요한 경우가 생기는데. 지금은 또 외워진것같지만 나중에 또 어쩔라나..


폰트
font-size:0px;   폰트사이즈
color:#FFF;   폰트컬러
line-height:0px;  줄간격
letter-spacing:0px;  자간격 음수값가능
word-spacing:0px;  단어간격 음수값가능
text-align:right  텍스트 정렬  left,center,right 

font-variant: normal | small-caps | initial | inherit
•normal : 소문자를 작은 대문자로 바꾸지 않습니다.
•small-caps : 소문자를 작은 대문자로 바꿉니다.
•initial : 기본값으로 설정합니다.


배경이미지
background:url(../img/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
           -moz-background-size: cover;
               -o-background-size: cover;
                   background-size: cover;

• repeat  빈칸을 이미지로 반복
• no-repeat   반복하지않음
• repeat-x  가로로만 반복
• repeat-y  세로롬만 반복
center center - 화면의 어느부분에 이미지를 고정할지 ex) left bottom  좌하에 안착

• scroll : 배경이 요소에 고정되어 문서와 함께 스크롤된다. 이 값이 기본값이다.
• fixed : 뷰 포트에 따라 고정된다.
• local  : 요소의 콘텐츠 위치를 상속받아 콘텐츠와 함께 스크롤된다.
• cover : 이미지가 브라우저보다 작을경우 브라우저의 크기에 맞게 이미지를 늘림
• contain : content 영역 안쪽에 width와 height 둘다 가능한한 가장 큰 사이즈로 배경 이미지 크기를 조정한다.


오브젝트 그림자
           box-shadow: 0px 2px 10px 0px rgba( 255,255,255, 0.1);   /* 익스 */
    -moz-box-shadow: 0px 2px 10px 0px rgba( 255,255,255, 0.1);   /* 모질라 */
 -webkit-box-shadow: 0px 2px 10px 0px rgba( 255,255,255, 0.1);   /* 사파리 */
가로, 세로, 그림자의크기, 흐림, RGB값, 투명도


텍스트 그림자
text-shadow:0px 0px 0 rgba(255, 255, 255, 0.50);
가로, 세로, 흐림, R, G, B, A


투명화
opacity:1;  - 배경과 텍스트 모두 투명
filter:alpha(opacity=70);  크로스브라우징을 위해 이렇게 쓰라는데 난 오파시티는 안쓰므로 잘 모름
background-color: rgba( 0, 0, 0, 0.5);  - 텍스트는 유지하고 배경만 투명

그림자의 css에 변화를 주는 값의 설명
• offset-x : 수평 그림자의 offset 값으로 반드시 필요하다.
• offset-y : 수직 그림자의 offset 값으로 반드시 필요하다.
• blur : 그림자 가장자리를 부드럽게 처리하는 정도를 나타나매 선택적 값이다. 0이면 가장 날카롭게 처리한다.
• spread : 그림자의 크기를 나타내며 선택적 값이다.
• color : CSS 컬러 값을 지정하는 선택적 값이다.
• inset : 안쪽 그림자를 정의하는 선택적 키워드이다.


transition 속성

마우스 포커스시에 변환되는 효과를 시간에따라 부드럽게 변환
transition:all .5s;
transition:border-color .1s,box-shadow .1s,background .1s,color .1s,opacity .1s  이런식으로 개별지정가능

         -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Safari */
               transform: rotate(-90deg); /* 반시계 방향 */

transform-origin: 20% 40%;
transform-origin 속성은 전환이 발생하는 기준점을 x와 y 매개변수로 명시하여 중심이 아닌 다른 지점을 지정할 수 있는 속성입니다

transform 의 속성값은 다음 세가지로 변화시킬수있다. 회전하며 확대한다든지 하는 중첩도 가능 
• Rotate(회전)
• Scale(스케일)
• Skew(기울이기)

위치지정
position: fixed;      고정값
            absolute;   절대위치
            relative;   상대위치

z-index:1;  레이어값 - 숫자가 높을수록 위에있음. - 음수값 사용가능

top:0px;  left:0px; right: 0px;  bottom: 0px;  위치를 픽셀값으로 지정 top:0px;  상단에서 몇px아래에 위치시킬것인가를 의미 음수도 가능

 
정렬
vertical-align:middle;  오브젝트 세로 정렬 - 옵션 normal,middle,bottom
padding:0px 0px 0px 0px;    내부여백
margin:0px 0px 0px 0px;     외부여백
• 순서대로 시계방향으로 돌리며 상 우 하 좌를 지정
• 옵션값을 두개만 지정하면 상하, 좌우로 
• 옵션값을 하나만 지정하면 상하좌우전부
float:left;   컨텐츠 좌 중앙 우 정렬
clear:both;   float 상속을 막음


박스 테두리 
border:0px solid #FFF;  선
                dotted       점선
                dashed       긴 점선(절취선)

border-top:0px  이렇게 일부만 지정할수 있음

border-radius:0px;    모서리를 둥글게
border-radius:0px 0px 0px 0px  상우하좌 둥금을 각각 지정가능

background:#FFF 박스컬러


transparent 투명한 컬러값을 구버전 브라우저에대한 배려로 크로스 브라우징 하려면 이 값을 넣는다. 


문단 설정
white-space: nowrap;
• normal : 기본값으로 글자 줄이 자동으로 바뀐다. 콘텐츠가 요소의 너비를 초과할 경우 다음 줄로 바뀐다.
• nowrap : 줄 바꿈이 실행되지 않는다. 콘텐츠가 다음 줄로 바뀌지 않는다.
• pre : 줄 바꿈과 기타 공백이 유지된다. 이 가능한 값은 !DOCTYPE 선언에서 표준 준수 모드를 지정할 경우에 지원된다. !DOCTYPE 선언에서 표준 준수 모드를 지정하지 않으면 이 값을 검색할 수는 있지만 렌더링에 양향을 주지 않으며 normal 값처럼 동작한다.
• pre-line : 줄 바꿈 시퀀스가 유지된다.
• pre-wrap : 줄 바꿈 시퀀스가 축소된다.
 
word-wrap: break-word; 
• normal : 기본값으로 콘텐츠가 컨테이너 경계를 초과한다.
• break-word : 콘텐츠가 다음 줄로 넘어가고 필요한 경우 단어 줄 바꿈이 발생한다.

word-break: break-all;
• normal : 평소 규칙대로 단어를 분리한다.
• break-all : 단어가 문자별로 분리되어 단어의 중간에도 줄 바꿈이 된다.
• keep-all : 문자별로 분리되는 것을 금지한다.



•inherit : 부모 요소의 속성값을 상속받는 이 속성값은 거의 대부분의 속성에 사용할수 있음

 

적어놓으려던게 더 있던것같은데 생각이 안나니 이정도로...