알아두어야 할 CSS
justify-content :flex-start; [이미지 목록 영역의 목록들을 간격을 두고 배치하기 위해서 설정]
flex-direction:column [박스를 세로로 배치하는 값 column]
display:flex [배너 영역의 첫 번째 자식 박스를 플렉서블 박스로 작동하게 마들기 위해 설정]
align-items:center [박스를 중앙으로 설정]
flex-wrap:wrap [박스를 여러줄로 배치하기 위한 flex-wrap]
word-break
normal : 기본값. 단어 단위로 끊어서 줄바꿈
break-all : 특수문자를 제외하고 강제로 줄바꿈
break-word : 특수문자를 포함하고 강제 줄바꿈
nowrap : 줄바꿈 하지 않음
word-wrap : 자동 줄바꿈
break-word : 강제 줄바꿈
text-overflow
clip : 엘리먼트의 영역에 맞춰서 글자를 자른다.
ellipsis : 영역에서 넘어 가는 끝부분에 자동으로 '...'을 삽인한다.
CLASSIFICATION
cursor : 커서의 모양을 설정 (마우스 포인터)
float : 상위 요소안에서 좌.우로 이동할 것인가를 설정 (고정 처리)
clear : 상위 요소안에서 좌.우로 이동하지 않고 줄바꿈 설정
zoom : 객체의 크기를 확대/축소
POSITION
height : 영역의 높이를 설정
width : 영역의 너비를 설정
top : 상단 테두리에서 떨어진 간격 설정
bottom : 하단 테두리에서 떨어진 간격 설정
left : 상단 테두리을 기준으로 왼쪽 간격을 설정
right : 상단 테두리을 기준으로 오른쪽 간격을 설정
clip : 4각형 Block Box를 지정하는 수치만큼 가려서 안 보이도록 설정
overflow : 화면 크기에 따른 박서 설정 (스크롤 , 히든)
position : 화면에 표시할 위치를 설정
visibility : 화면에 표시 여부를 설정
LIST
list-style : 목록의 형식,위치,그림의 속성을 설정
list-style-image : 목록의 표시를 그림으로 설정
list-style-position : 목록 항목의 위치를 설정
BACKGROUND
background-attachment : 배경그림을 고정 또는 스크롤 설정
background-color : 배경색 설정
background-image : 배경그림 설정
background-position : 배경그림 위치 설정
background-repeat : 배경그림 반복 여부 설정
TEXT
color : 글자 색 설정
direction : 글자를 표시하는 방향 설정
letter-spacing : 글자 사이의 간격 설정
text-align : 글자의 정렬 설정
text-decoration : 글자의 꾸밈 및 형식 설정
text-indent : 문단의 첫 줄 들여쓰기 설정
text-transform : 대.소문자 변환 여부 설정
line-height : 줄 간격 설정(줄 과 줄사이의 높이)
text-underline-position : 밑줄이 그어지는 위치 지정
word-spacing : 단어 사이의 간격 설정
ime-mode : 입력모드 (한/영) 설정
FONT
font : 글꼴에 속성을 설정
font-family : 글꼴 이름을 설정
font-size : 글자 크기를 설정
font-style : 글자의 형태를 설정
font-variant : 글자의 대/소문자 설정
font-weight : 글자의 두께 설정
Display
block : 블록박스로 만든다.
inline : 인라인 박스로 만든다.
none : 박스를 숨긴다.
inherit : 상위 요소의 display속성을 상속받는다.
inline-block : 블록박스로 만들어지지만, 인라인 박스처럼 배치된다.
list-item : li요소와 같은 블록박스와 목록항목의 인라인박스로 만든다.
run-in : 런인박스로 만든다.
'IT > CSS' 카테고리의 다른 글
| 반응형 웹 css 플렉서블 박스 (0) | 2016.03.29 |
|---|---|
| 반응형 웹디자인 viewport 미디어쿼리 (0) | 2016.03.29 |
