🔻animation🔻 웹 페이지에서 요소들에게 애니메이션 효과를 부여할 때 사용한다. css 객체 움직임을 조작할 때는 아래 두가지 방법이 있다. 1. transition : 단순한 움직임 2. animation + transtion : 세밀하게 통제 가능하다. 🔶속성 animation-name: @keyframes 규칙에서 정의한 애니메이션을 연결한다. animation-duration 애니메이션의 한 주기를 완료하는 데 걸리는 시간을 지정한다. 초(s) 또는 밀리초(ms) 단위로 값을 설정할 수 있다. animation-timing-function 애니메이션의 진행 속도를 조절하는 함수를 지정한다. 예를 들어, ease, linear, ease-in, ease-out, ease-in-out 등이 있다..
🔻Transition, 전환🔻 객체의 속성(상태)값이 변화되는 과정을 시간 순서대로 보여주는 속성 수치형 속성에만 적용 가능하다.(숫자 또는 색상) 주로 마우스 호버 등과 같은 이벤트에 반응하여 요소의 스타일을 부드럽게 전환할 때 사용된다. 1. 속성 (property) 어떤 CSS 속성에 대한 전환을 적용할 것인지를 지정한다. 예를 들어 color, background-color, width 등을 지정할 수 있다. 2. 지속 시간 (duration) 전환의 지속 시간을 지정한다. 초(s)나 밀리초(ms) 단위로 설정할 수 있다. 3. 타이밍 함수 (timing-function) 전환의 진행 과정을 조절하는 함수를 지정한다. ease, linear, ease-in, ease-out, ease-in-out..
시맨틱 태그 1. : 전체 컨테이너 2. : 머릿말 부분 3. : 본문(콘텐츠) 4. : 반복되는 콘텐츠(항목들) 5. : 보조 콘텐츠 6. : 바닥글 부분 메뉴 메뉴
🔻Transform🔻 위치, 배율, 회전, 왜곡한다. 주로 애니메이션 효과를 만들거나 요소의 상태를 동적으로 변경하기 위해 사용된다. 변환 함수를 사용하여 요소를 조작한다. 주로 1~3번을 많이 사용한다. 1. translate(x, y) : 위치 변형(이동) 2. scale(x, y) : 배율 변형(확대/축소) 3. rotate(angle) : 회전 변형 4. skew(x, y) : 왜곡(비틀기) 5. matrix(a, b, c, d, e, f) : 사용자 정의형(1~4번) / a, b, c, d, e, f는 행렬의 값을 나타내며, 각각의 값은 요소를 변환하는 데 사용된다. 1. translate 요소를 지정된 x와 y 좌표만큼 이동시킨다. x와 y는 픽셀(px)이나 백분율(%) 등의 단위로 지정할 수..
인라인 태그들은 화면 조절될 때 크기를 못맞추면 자동 개행이 된다. #main-menu { border: 1px solid black; font-size: 0; } 크기를 지정해주면 자동개행되지 않는다. #main-menu { border: 1px solid black; font-size: 0; width: 630px; }
p { /* 단 수 */ column-count: 3; /* 단과 단사이의 간격 */ column-gap: 100px; /* 단 내의 양쪽정렬 */ text-align: justify; /* 구분선 */ column-rule: 1px dashed grey; } header section
background-size contain : 축을 맞춰 이미지 위 아래가 빈 공간이 생긴다 cover 단축을 맞춰 잘리는 부분이 생긴다. html { background-image: url(../../asset/images/gimbal.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; /* 화면을 확대/축소 해도 배경이미지는 그대로 있다. */ background-attachment: fixed; }
outline border는 객체크기의 영향을 미친다. 상자1: border 상자2: outline 인디케이터 보편적으로 border를 많이 사용하지만, 특수한 경우 outline를 사용한다.
https://fontawesome.com/ Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com 아이콘 사용하기 아래 코드를 복사한다.(코드를 클릭하면 자동으로 복사가 된다.) html 코드 내에 붙여 넣는다. 주의사항! 이미지가 아닌 (딩벳)폰트이다. 사이즈를 늘려도 화질이 깨지지 않는다. 컬러를 변경할 수 있다.
🔻border-radius🔻 요소의 테두리를 둥글게 만들어주는 역할을 한다. 이를 사용하여 사각형 요소의 모서리를 부드럽게 만들거나, 원형 요소를 만들 수 있다. border-radius는 네 개의 값 또는 하나의 값으로 사용된다 하나의 값: 모든 네 모서리에 동일한 값이 적용된다. 두 개의 값: 첫 번째 값은 왼쪽 위와 오른쪽 아래의 모서리에, 두 번째 값은 오른쪽 위와 왼쪽 아래의 모서리에 적용됩니다. 세 개의 값: 첫 번째 값은 왼쪽 위 모서리에, 두 번째 값은 왼쪽 아래와 오른쪽 위의 모서리에, 세 번째 값은 오른쪽 아래 모서리에 적용됩니다. 네 개의 값: 각각 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래의 모서리에 각각의 값이 적용됩니다. Lorem, ipsum dolor sit amet c..
