🔻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
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..
🔻그림자🔻 1. text-shadow: x y blur color 2. box-shadow: x y blur color x, y 태양과의 거리라고 생각하면된다. 값이 클 수록 그림자와의 거리가 멀어진다. 상자1 상자2 상자3 개발자 도구를 열어 조정가능하다
🔻여백 지우기🔻 콘텐츠 상자1 상자2 상자3 또 다른 내용 1. display와 font-size 사용 2. float 활용
🔻CSS 선택자🔻 1. 가상 클래스 요소의 특정 상태나 동작을 선택하는데 사용한다. 가상클래스는 한 개의 콜론(:)으로 시작하여, 그 뒤에 가상클래스의 이름이 온다. https://steady-record.tistory.com/entry/CSS-%EA%B0%80%EC%83%81%ED%81%B4%EB%9E%98%EC%8A%A4 [CSS] 요소 선택 : 가상클래스 요소들을 선택하는 데 사용되는 가상 클래스들이다. 1. :first-child 해당 요소가 부모 요소의 첫 번째 자식 요소인 경우에 스타일을 적용한다. 2. :last-child 해당 요소가 부모 요소의 마지막 자식 요 steady-record.tistory.com 2. 가상요소 선택자에 추가되어 특정한 상태나 위치의 요소를 선택할 때 사용된다. ..
🔻속성 선택자🔻 특정한 속성을 가진 요소들을 선택하기 위해 사용된다. 1. 선택자[속성명] 2. 선택자[속성명=값] 3. 선택자[속성명^=값] 4. 선택자[속성명$=값] 5. 선택자[속성명*=값] [공통 HTML] 네이버 예스24 다음 11번가 쿠팡 1. 선택자[속성명] target 속성 설정된 요소만 스타일 적용된다. 2. 선택자[속성명=값] target= "_blank"인 요소만 스타일 적용된다. 3. 선택자[속성명^=값] href가 http://로 시작하는 요소만 스타일 적용된다. 4. 선택자[속성명$=값] href가 .com으로 끝나는 요소만 스타일 적용된다. 5. 선택자[속성명*=값] href에서 co가 들어간 요소만 스타일 적용된다. 🔻디자인에 적용하기🔻 1. 필수 입력 필드 강조하기 2. 입..
