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..
🔻그림자🔻 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. 입..
요소들을 선택하는 데 사용되는 가상 클래스들이다. 1. :first-child 해당 요소가 부모 요소의 첫 번째 자식 요소인 경우에 스타일을 적용한다. 2. :last-child 해당 요소가 부모 요소의 마지막 자식 요소인 경우에 스타일을 적용한다. 3. nth-child(n) 해당 요소가 부모 요소의 n번째 자식 요소인 경우에 스타일을 적용한다. n은 양의 정수이며, 1부터 시작한다. n에 수열이 적용 가능하다. 4. :nth-last-child(n) 해당 요소가 부모 요소의 뒤에서부터 n번째 자식 요소인 경우에 스타일을 적용한다. n은 양의 정수이며, 1부터 시작한다. n에 수열이 적용 가능하다. n으로 사용할 수 있는 항목 1. 숫자 : index(위치) 2. 수열 : 2n, 3n, ,, 2n+13..
🔻태그의 수평 정렬🔻 인라인 태그와 블럭 태그의 방법이 상이하다. 1. 내용물의 정렬 text-align 인라인 태그는 좌우 여백이 없어서 적용이 불가능하다. 블럭 태그 전용이다. 태그의 수평 정렬 인라인 태그 인라인 태그 블럭태그 블럭 태그 2. 태그 자체의 위치를 정렬 인라인 태그 부모님 블럭 태그 도움을 받는다.(ex. ) 블럭 태그 좌우 여백 공간이 없어서불가능하다. 마진을 조절하여 정렬한다. 인라인 태그 조절 태그의 수평 정렬 인라인 태그 인라인 태그 블럭태그 블럭 태그 블럭태그 조절
