오늘도 기록it

전환 효과 [transition] 요소의 전환 효과를 지정하는 단축 속성 transition-property transition-duration transition-timing-function tansition-delay 속성명 지속시간 타이밍 함수 대기시간; transition-property 전환 효과를 사용할 속성 이름을 지정 all 모든 속성에 적용 속성이름 전환 효과를 사용할 속성 이름 명시 transition-duration 전환 효과의 지속시간을 지정 0s 전환 효과 없음 시간 지속시간을 지정 transition-timing-function 전환 효과의 타이밍 함수를 지정 ease 느리게 빠르게 느리게 linear 일정하게 ease-in 느리게- 빠르게 ease-out 빠르게-느리게 ease..

container 속성 [display] flex container의 화면 출력 특성 flex 블록 요소와 같이 flex container 정의 inline-flex 인라인 요소와 같이 flex container 정의 [flex-direction] 수평[ row 행 축 (좌->우) row-reverse 행 축 (우->좌) ] 수직[ column 열 축 (위 -> 아래) column-reverse 열 축 (아래->위) ] [flex-wrap] flex itms 묶음(줄 바꿈) 여부 nowrap 묶음 없음 wrap 여러 줄로 묶음 wrap-reverse wrap의 반대 방향으로 묶음 [justify-content] 주 축의 정렬 방법 flex-start flex items를 시작점으로 정렬 flex-end ..

[position] 요소의 위치 지정 기준 - top, bottom, left, right, z-index static 기준 없음 relative 요소 자신을 기준 absolute 위치 상 부모 요소를 기준 fixed 뷰포트를 기준 sticky 스크롤 영역 기준 요소 쌓임 순서 (stack order) 중요! 어떤 요소가 사용자와 더 가깝게 있는지 결정 [어떤 요소가 위에 있는지 판단] 1. 요소에 position 속성의 값이 있는 경우 위에 쌓임. (기본 static 제외) 2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임. 3. 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일 수록 위에 쌓임. z-index 요소의 쌓임 정도를 지정 -2번요소 auto 부모 ..

[background-color] 요소의 배경 색상 transparent 투명함 색상 지정 가능한 색상 [background-image] 요소의 배경 이미지 삽입 none 이미지 없음 url("경로") 이미지 경로 [background-repeat] 요소의 배경 이미지 반복 repeat 이미지를 수직, 수평 반복 repeat-x 이미지를 수평 반복 repeat-y 이미지를 수직 반복 no-repeat 반복 없음 [background-position] 요소의 배경 이미지 위치 0% 0%~100% 방향 top, bottom, left, right, center 방향 단위 px,em,rem, 등 단위로 지정 background-position: 100px 30px; (x축으로 100px y축으로 30px 만큼..

글씨체 font-style normal 기울기 없음 italic 이텔릭체 (기울어진 글자) oblique 기울어진 글자 font-weight noraml, 400 기본두께 bold, 700 두껍게 bolder 상위 요소보다 더 두껍게 lighter 상위요소보다 더 얇게 100~900 100단위의 숫자 9개 normal과 bold 이외 두께 font-size 글자의 크기 16px 기본 크기, 단위 px,em,rem 등 단위로 지정 line-height 한 줄의 높이, 행간과 유사 normal 브라우저의 기본 정의 사용 숫자 요소의 글꼴 크기의 배수로 지정 단위 px,em,rem 등의 단위로 지정 ex) font-size :16px; -> line-height : 32px; [ line-height:2;(권..

[border] - 요소의 테두리 선을 지정하는 단축 속성 border-width : 선- 두께 border-style : 선-종류 border-color : 선-색상; 기본값 medium, none, black; [border-width] border-width -> medium, thin, thick 단위 px, em, % 등 border-width 1개 -> [top, right, bottom, left] 2개 -> [top,bottom] [left,right] 3개 -> [top] [left,right] [bottom] 4개 -> [top] [right] [bottom] [left] 시계방향 [border-style] none 선없음 solid 실선 dotted 점선 dashed 파선 double..

px 픽셀 % 상대적 백분율 em 요소의 글꼴 크기 1em -> 10px rem 루트(최상위 요소) 요소(html) 의 글꼴 크기 vw 뷰포트 가로 너비의 백분율 vh 뷰포트 세로 너비의 백분율

같은 요소가 여러 선언의 대상이 된 경우 어떤 css 속성을 우선 적용할지 결정하는 방법 1. 점수가 높은 선언이 우선 2. 점수가 같으면, 가장 마지막에 해석된 선언이 우선 인라인 선언 1000점 css 파일 div { } 1점 div { !important;}99999999점 #color { } 100점 id태그 .color { } 10점 class 태그 *{ } 0점 전체 선택자 body 상속 점수 x 결과 !important > 인라인 style > id태그 > class태그> div 태그 > * .list li .item { } ->21점 .list li:hover { } -> 21점 hover->클래스 선택자 .box::before{ } -> 11점 ::before{ } 가상의 요소->태그 #..

기본 선택자 *{ } [전체 선택자] * 모든 요소를 선택 ul{ } [태그 선택자] 태그 이름이 ul인 요소 선택 .abc{ } [클래스 선택자] HTML class 속성의 값이 abc인 요소 선택 #abc{ } [아이디 선택자] HTML id 속성의 값이 abc인 요소 선택 복합 선택자 span.abc{ } [일치 선택자] 선택자 span와 abc를 동시에 만족하는 요소 선택 ul > .abc{ } [자식 선택자] 선택자 ul의 자식 요소 abc를 선택 div .abc { } [하위 선택자] 선택자 div의 하위 요소인 abc 선택 띄어쓰기가 선택자의 기호! .abc + li { } [인접 형제 선택자] 선택자 abc의 다음 형제 요소 li중 하나를 선택 .abc ~ li { } [일반 형제 선택자]..

내장방식 의 내용으로 스타일을 작성하는 방식 헤드요소에 작성 인라인 방식 요소의 style 속성에 직접 스타일을 작성하는 방식 (유지보수시 악영향) 링크 방식 링크 태그를 이용해 외부 css문서를 가져와서 연결하는 방식 import 방식 css의 @import 규칙으로 css 문서 안에서 또 다른 css문서를 가져와 연결하는 방식 [직렬연결 방식] @import url("경로");