● counter-reset 속성 - 카운터를 초기화하기 위한 속성 - counter-reset : [카운터명] [정수] ● counter-increment 속성 - 카운터를 증가시키기 위한 속성 - counter-increment : [카운터명] [정수] - 정수값은 카운터의 증가 배율임 ● counter( ) 속성 - 카운터를 사용하기 위한 속성 - 함숫값에는 카운터명, 카운터 스타일, 문자열이 들어올 수 있으며 쉼표로 구분
Front-End Study/CSS 사전
※ abc 순으로 정렬 ● background 속성 - 아래의 속성들을 한번에 설정함 ● background-color 속성 - 배경 색 지정 - background-color: | | - rgb 값 : 빛의 삼원색으로 빨간, 녹색, 파란색을 이용해서 색을 표시하는 방식 (각 값 당 255까지 가능) ※ rgba는 투명도 까지 가능한 값 - 색상이름 : red, blue 처럼 색상 이름으로 표기 - 16진수 : 16진수로 #000000 처럼 표기 가능 (ex : 파란색(#0000ff)) ※ background-color 값은 상속되지 않음 ● background-clip 속성 (참고 : 박스 모델) - 배경 적용 범위 조절 - background-clip: border-box | padding-box |..
※ abc 순으로 정렬 ● list-style 속성 - 아래의 속성들을 한번에 설정함 ● list-style-image 속성 - 불릿 대신 이미지 삽입 - list-style-image : none | url(이미지 파일 경로) - none : 설정 안함 (기본값) - url(이미지 파일 경로) : 불릿 대신 사용할 이미지 파일의 경로 지정 ● list-style-position 속성 - 목록에 들여 쓰는 효과 - list-style-position: inside | outside - inside : 불릿 or 숫자를 안쪽으로 들여 씀 - outside : 불릿 or 숫자를 밖으로 내어 씀 (기본값) ● list-style-type 속성 - 목록의 불릿과 번호 스타일 지정 - list-style-type..
※ abc 순으로 정렬 ● direction 속성 - 글자 쓰기 방향 지정 - direction : ltr | rtl - ltr : 왼쪽에서 오른쪽 (left-to-right)으로 텍스트 표시 (기본값) - rtl : 오른쪽에서 왼쪽 (right-to-left)으로 텍스트 표시 ● line-height 속성 - 줄 간격 조절 - line-height: normal | | | | inherit - normal : 설정하지 않음 (기본값) - , , : 글자 크기를 기준으로 간격 크기 지정 ● text-align 속성 - 텍스트를 정렬 - text-align: left | right | center | justify | initial | inherit - left : 왼쪽 정렬 - right : 오른쪽 정렬..
※ abc 순으로 정렬 ● color 속성 - 글자 색 지정 - color: (rgb or rgba) | (색상이름) | (16진수) - rgb 값 : 빛의 삼원색으로 빨간, 녹색, 파란색을 이용해서 색을 표시하는 방식 (각 값 당 255까지 가능) ※ rgba는 투명도 까지 가능한 값 - 색상이름 : red, blue 처럼 색상 이름으로 표기 - 16진수 : 16진수로 #000000 처럼 표기 가능 (ex : 파란색(#0000ff)) ● letter-spacing 속성 - 글자 간격 조절 - letter-spacing: normal | length - normal : 기본 값 (문자에 공백이 들어가지 않음) - length : px, %, em, rem 등으로 간격 설정 ● text-decoration..
● flex-direction 속성 - 아이템의 배치 방향을 결정 - flex-direction: row | row-reserve | column | column-reverse | initial | inherit - row : 가로로 정렬 (기본값) - row-reserve : 가로로 오른쪽에서 정렬 - column : 세로로 정렬 - column-reverse : 세로로 밑에서부터 정렬 - initial : 기본값으로 설정 - inherit : 부모 요소로부터 상속받음 ● flex-wrap 속성 - 아이템이 컨테이너의 공간을 넘칠 경우, 아이템의 줄바꿈을 어떻게 할 것이지 결정하는 속성 - flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit - n..
● float 속성 - 정렬하기 위해 사용되는 속성 - float: none | left | right | initial | inherit - none : 띄우지 않음 (기본값) - left : 왼쪽에 띄움 - right : 오른쪽에 띄움 - initial : 기본값으로 설정함 - inherit : 부모 요소로부터 상속함
● opacity 속성 - 요소의 불투명도를 설정함 - 최소 0에서 최대 1까지 가능 - 0 : 투명도100% - 1 : 투명도0%
● transition 속성 - 웹 요소의 스타일 속성이 바뀜 - transition-property : 트랜지션 대상 설정 - transition-duration : 트랜지션 진행 시간 설정 - transition-timing-function : 트랜지션 속도 설정 - transition-delay : 트랜지션 지연 시간 설정 - transtion : 위 4가지의 속성을 한꺼번에 설정
● position 속성 - 요소의 위치 형식을 지정 - position: absolute | fixed | relative | static | inherit - absolute : 절대 위치 좌표 설정 - fixed : 브라우저 창 기준으로 죄표를 고정 - relative : 문서의 흐름 상 있던 위치를 기준으로 좌표를 지정 - static : 문서의 흐름 상 위치 (기본 값) - inherit : 부모 태그의 속성 값을 상속받음
● margin 속성 - 요소 주변 여백 설정 - margin-top: | | auto - margin-right: | | auto - margin-bottom: | | auto - margin-left: | | auto - margin: - margin: - 크기 : 너비 or 높이 값을 ps 나 cm 같은 수치로 지정 - 백분율 : 너비 or 높이 값을 %로 지정 - auto : display 속성에서 지정한 값에 맞게 자동으로 지정 ● padding 속성 - 콘텐츠 영역과 테두리 사이 여백 설정 - padding-top: | | auto - padding-right: | | auto - padding-bottom: | | auto - padding-left: | | auto - padding: - ..
● display 속성 - 어떻게 보여줄 지 결정 - display: block | inline | inline-block | none; - block : 블록 박스 - inline : 인라인 박스 - inline-block : block과 inline의 중간 형태 - none : 아무것도 보이지 않음
※ abc 순으로 정렬 ● font-size - 글자 크기 조절 - font-size: medium | xx-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit - medium : 기본 글자 크기 - xx-small, x-small, small, x-large, xx-large, : medium의 상대적인 크기 - smaller, larger : 부요 요소의 글자 크기에 대한 상대적인 크기 - length : px, %, em, rem 등으로 크기 설정 - initial : 기본 값으로 설정 - inherit : 부모 요소의 속성 값을 상속 받음 ● font-weight - 글자의 두께 조절 -..
