텍스트스타일
color
텍스트 색상을 변경하는 속성
선택자{color : 색상명영문 | #16진수rgb | rgb(r,g,b) | rgba(r,g,b,a) }
.c1{
color: blue;
}
.c2{
color : #00ff;
/*
파란색
r : 00
g : 00
b : ff
#0000ff -> 00f (같은수가 반복될 경우에는 하나로 줄일 수 있음 그러나 해당안되는 경우가 더 많음)
*/
}
.c3{
color : rgb(0,0,255);
}
.c4{
color : rgba(0, 0, 255, 0.7)
/*a는 투명도값*/
}text-decoration
텍스트에 줄을 긋거나 없앨때 사용
선택자{text-decoration : none | underline | overline | line-through}
underline : 밑에 줄긋기
overline : 위에 줄긋기
line-through : 찍찍 줄긋기이거
text-transform
영문 텍스트의 대/소문자 변환
선택자{text-transform : none | capitalize | uppercase | lowercase}
capitalize : 맨 앞글자만 대문자로
uppercase : 소문자를 대문자로
lowercase : 대문자를 소문자로
text-shadow
택스트에 그림자효과
선택자 {text-shadow : none | 가로거리 세로거리 변짐정도}
.ts1{
color: orangered;
text-shadow: 10px 10px 10px orange, 7x 7x 7px coral;
}white-space
공백을 처리하는 속성
선택자{white-space : normal | nowrap | pre | pre-line | pre-wrap}
letter-spacing / word-spacing
글자간격, 단어간격을 처리하는 속성
선택자{letter=spacing:간격;word-spacing 단여간격}
text-align
문자 정렬 기준
선택자{tetxt-align text-align | left | right | center | justify}
text-indent
문장 들여쓰기
선택지{text-ident:들여쓸 간격}
line-height
문장끼리 줄간격
선택자{line-height:줄간격;}
text-overflow
영역을 벗어나는 텍스트를처리할 속성
선택자{text-overflow:clip|ellipsis}
리스트 스타일
list-style type
목록 기호의 스타일을 상징
- ul : 선택자{list-style-type : dics | circle | square | none}
squre : 네모모양 ■
circle : ○
none : 목록 기호 없음- ol : 선탁자{list-style-type : decimal | decimal-leading-zero
| lower-roman | upper-roman | lower-alpha | upper-alpha}
의미를 그대로 사용 가능할 듯? 별거 없다는 뜻
list-style-image
기호 대신 이미지를 사용
선택지{list-style-image : url(이미지파일경로)}
.ul4{
list-style-image: url(image/kakao.jpg);
}list-style-position
목록기호 들여쓰기 여부
선택자{list-style-position : inside | outside}
outside : 기본적으로 outside상태이며 목록의 바깥으로 들여쓰기한다.
inside : 인쪽으로한다.
list-style
위의 모든 목록 스타일을 한번에 지정하는 속성
선택자{list-style : type position image}
.ul7{
llst-style: square inside url(image/kakao.jpg);
}레이아웃 스타일
width/height
내용이 차지하고있는 영역의 크기를 조절하는 속성
선택자{width:숫자(단위); height:숫자(단위)}
.div1{
/*블록요소 넓이를 지정하지않으면 부모 넓이의 100% // width 지정*/
width: 500px;
height: 100px;
background-color: blanchedalmond;
}
.div2{
width: 50%;
height: 100%;
background-color: aquamarine;
}
등등display
요소의 화면 배치 방법을 변경하는 속성
선택자{display : none | block | inline | inline-block | flex}
block : 블록형으로 배치하도록 변경
inline : 인라인형으로 배치하도록 변경
inline-block : 인라인형이지만 블록형과같이 크기를 변경할 수 있고, 블록형이랑 다르게 옆에 다른 요소들이 들어올 수 있음
flex : 모르겠음...
테두리 스타일
- border-style : 테두리 스타일 지정
선택자{border-[방향]-style : none | hidden | dashed | dotted
| double | groove | inset | outset | ridge | solid }- border-width : 테두리 두께
선택자{border-[방향]-width : thin | mediun | thick | px}- border-color : 테두리 색상
선택자{border-[방향]-color : 색상값}- border : 테두리 스타일, 두께, 색상을 한번에 설정
선택자{border-[방향] : width style color}- border-radius : 박스 모서리를 둥글게하는 속성
선택자{border=[방향]-radius : 숫자}- box-shadow : box에 그림자효과를 주는 속성
선택자{box=shadow : 수평거리 수직거리 흐림정도 번짐정도 생상}
여기까지!!
오늘은 평소보다도 훨씬 대충썼다고 생각한다...
본인도 느끼고있다...
반성은 하지만 오늘은 포스팅이 하기 귀찮은데 너무 억지로 한 느낌이 강하다ㅜㅜ
