기록하는 노트

- 플렉스의 장점 기존의 float, inline-block으로 수평정렬을 하는 방법보다 쉽고 간편하다 inline-block 각각의 아이템들이 글자화되어서 띄어쓰기가 적용된다. 이런 문제를 해결하기 위해서 폰트사이즈를 0;으로 초기화하면 정상적으로 수평화가 된다. 만약 아이템들에 숫자를 적용한다하면 아이템 안에 있는 숫자들도 폰트사이즈가 0이되면서 표시가 안된다. 그래서 아이템부분에 font-size를 특정사이즈로 원상복귀해야한다. float 요소가 수평으로 쌓이긴 하는데 컨테이너가 각가의 요소를 담지 못하는 문제가 발생한다. 문제를 해결하기위해 컨테이너 전에 클리어픽스를 적용해야한다. flex 컨테이너 부분에 디스플레이 flex를 적용하면 바로 원하는 그림이 나온다. flex는 기본적으로 contai..

-animation 요소에 애니메이션을 설정/제어 값 의미 기본값 animation-name @keyframes 규칙의 이름을 지정 none animation-duration 애니메이션의 지속 시간 설정 0s animation-timing-function 타이밍 함수 지정 ease animation-delay 애니메이션의 대기 시간 설정 0s animation-iteration-count 애니메이션의 반복 횟수 설정 1 animation-direction 애니메이션의 반복 방향 설정 normal animation-fill-mode 애니메이션의 전후 상태(위치) 설정 none animation-play-state 애니메이션의 재생과 정지 설정 running 사용법 animation: 애니메이션 이름 지속시..

- transition CSS 속성의 시작과 끝을 지정(전환 효과)하여 중간 값을 애니메이션 transition-property 전환 효과를 사용할 속성 이름 기본값: all transition-duration 전환 효과의 지속시간 설정 기본값: 0s transition-timing-function 타이밍 함수 지정 기본값: ease transition-delay 전환 효과의 대기시간 설정 기본값: 0s 단축 transition: duration delay; - transition-timing-function ease 빠르게-느리게 linear 일정하게 ease-in 느리게-빠르게 ease-out 빠르게 느리게 ease-in-out 느리게-빠르게-느리게 cubic-bezier(n,n,n,n) 자신만의 값..

- background 요소의 배경을 설정 background-color 배경 색상 // 기본값: transparent background-image 하나 이상의 배경 이미지 // 기본값: none background-repeat 배경 이미지의 반복 // 기본값: repeat background-position 배경 이미지의 위치 // 기본값: 0 0 background-attachment 배경 이미지의 스크롤 여부 // 기본값: scroll 사용법 background: 색상 이미지경로 반복 위치 스크롤특성; .box1 { background: red url("../img/image.png") no-repeat left top scroll; } /* 색상 이미지경로 반복 위치 스크롤*/ .box2 { b..

- float 요소를 좌우 방향으로 띄움(수평 정렬) 값 none 요소 띄움 없음 // 기본 값: none left 왼쪽으로 띄움 right 오른쪽으로 띄움(우측부터 쌓임) - float 해제 1. 형제 요소의 다음 다음 형제요소에 적용 float의 흐름을 해제하려면 clear: left // clear: right // clear: both;를 사용하면 된다. left가 있던 right가 있던 둘다 적용하려면 clear: both;를 사용하면 된다. 2. 부모 요소에서 해제 float 속성이 추가된 요소의 부모요소에 미리 지정된 clearfix클래스 추가하여 해제 float이 있는 형제요소에 float이 없는 형제요소가 없으면 적용이 안된다. 주의 - display 수정 float 속성이 추가된 요소는..

- font 글자 관련 속성 지정 font-style 글자 기울기 지정 // 기본값: normal font-weight 글자 두께 지정 // 기본값: normal font-size 글자 크기 지정 // 기본값: normal line-height 줄 높이(줄 간격) 지정 // 기본값: normal font-family 글꼴 지정 // 운영체제에 따라 달라짐 사용법 font: 기울기 두께 크기 / 줄높이 글꼴; .box { font: italic bold 20px / 1.5 "Arial", sans-serif; } 단축 속성을 사용하려면 font-size(크기)와 font-family(글꼴)는 필수 입력 - font-style normal 스타일 없음 // 기본값: normal italic 이텔릭체 obli..

- width, height 값: auto // 브라우저가 너비를 계산 // width 값을 따로 지정하지 않아도 디폴트 값이 auto이다. 단위: px, em, % 등 (인라인 요소는 기본값으로 auto이지만 가로, 세로 값을 가질 수 없다. 즉 width 값을 주어도 출력이 되는 것이 없다.) - max-width 요소의 최대 가로 너비를 지정 값: auto // 기본값: none - min-width 요소의 최소 가로 너비를 지정 값: auto // 기본값: 0 - max-height 요소의 최대 세로 너비를 지정 값: auto // 기본값: none - min-height 요소의 최소 세로 너비를 지정 값: auto // 기본값: 0 - margin 요소의 외부여백을 지정 음수 값 사용 가능 방향..

-px 해상도에 따른 상대단위, 고정을 하여 사용. -% 부모요소에 영향을 받는 사이즈 단위. -em 부모요소로부터 상속받음. 자기자신의 폰트사이즈에 영향을 받음. -rem 중간단계의 조상요소는 건너뛰고 최상위의 조상요소의 영향을 받음. -vw 흰색화면 전체가 뷰포트 뷰포트의 가로의 너비 비율로 사용 50vw 50%만 사용 100vw가 최대 -vh 뷰포트의 세로의 너비 -vmin 뷰포트의 최소 너비 -vmax 뷰포트의 최대 너비 #패스트캠퍼스

1. !important 모든 선언을 무시하고 가장 우선 점수: 무한대 2. 인라인 선언방식 점수: 1000점 3. 아이디 선택자 점수: 100점 4. 클래스 선택자 점수: 10점 * :hover처럼 가상클래스는 10점 // ::before 처럼 가상 요소는 태그 선택자의 점수 1점 5. 태그 선택자 점수: 1점 6. 전체 선택자 점수: 0점 7. 상속 점수: 계산하지 않음 전체 < 태그 < 클래스 < 아이디 #패스트캠퍼스

상속(Inheritance) 부모요소에 적용된 값이 자식(하위) 요소들에게 적용된다. -상속되는 속성들 - font - font-size - font-weight - font-style - line-height - font-family - color - text-align - text-indent - text-decoration - letter-spacing - opacity ---- etc..... 강제상속 상속이 적용되지 않는 속성도 inherit 라는 값을 사용하여 부모에서 자식으로 강제 상속이 가능하다. .parent { position: absolute; /* 상속되지 않는 속성과 값 */ } .child { position: inherit; /* 강제 상속 받아 position: absolut..