유틸리티, 정보/WEB TIP

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

romeo1052 2016. 4. 12. 23:26
반응형

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

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

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

 

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

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

 

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

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

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

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

 

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

 

 

 

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

공백태그    

스페이스가 여러개일경우 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 : 부모 요소의 속성값을 상속받는 이 속성값은 거의 대부분의 속성에 사용할수 있음

 

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

 


반응형