WEB/CSS
[CSS] outline
outline border는 객체크기의 영향을 미친다. 상자1: border 상자2: outline 인디케이터 보편적으로 border를 많이 사용하지만, 특수한 경우 outline를 사용한다.
WEB/CSS
WEB/CSS
font awesome
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 코드 내에 붙여 넣는다. 주의사항! 이미지가 아닌 (딩벳)폰트이다. 사이즈를 늘려도 화질이 깨지지 않는다. 컬러를 변경할 수 있다.
WEB/CSS
[CSS] 요소의 테두리 둥글기 : border-radius
🔻border-radius🔻 요소의 테두리를 둥글게 만들어주는 역할을 한다. 이를 사용하여 사각형 요소의 모서리를 부드럽게 만들거나, 원형 요소를 만들 수 있다. border-radius는 네 개의 값 또는 하나의 값으로 사용된다 하나의 값: 모든 네 모서리에 동일한 값이 적용된다. 두 개의 값: 첫 번째 값은 왼쪽 위와 오른쪽 아래의 모서리에, 두 번째 값은 오른쪽 위와 왼쪽 아래의 모서리에 적용됩니다. 세 개의 값: 첫 번째 값은 왼쪽 위 모서리에, 두 번째 값은 왼쪽 아래와 오른쪽 위의 모서리에, 세 번째 값은 오른쪽 아래 모서리에 적용됩니다. 네 개의 값: 각각 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래의 모서리에 각각의 값이 적용됩니다. Lorem, ipsum dolor sit amet c..
WEB/CSS
[CSS] 텍스트 그림자, 상자 그림자 : text/box-shadow
🔻그림자🔻 1. text-shadow: x y blur color 2. box-shadow: x y blur color x, y 태양과의 거리라고 생각하면된다. 값이 클 수록 그림자와의 거리가 멀어진다. 상자1 상자2 상자3 개발자 도구를 열어 조정가능하다
WEB/CSS
[CSS] display, float 사용하여 여백 지우기
🔻여백 지우기🔻 콘텐츠 상자1 상자2 상자3 또 다른 내용 1. display와 font-size 사용 2. float 활용
WEB/CSS
[CSS] 요소의 앞/뒤에 추가 내용 생성 : 전후선택자
🔻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. 가상요소 선택자에 추가되어 특정한 상태나 위치의 요소를 선택할 때 사용된다. ..
WEB/CSS
[CSS] 특정한 속성을 가진 요소들을 선택 : 속성 선택자
🔻속성 선택자🔻 특정한 속성을 가진 요소들을 선택하기 위해 사용된다. 1. 선택자[속성명] 2. 선택자[속성명=값] 3. 선택자[속성명^=값] 4. 선택자[속성명$=값] 5. 선택자[속성명*=값] [공통 HTML] 네이버 예스24 다음 11번가 쿠팡 1. 선택자[속성명] target 속성 설정된 요소만 스타일 적용된다. 2. 선택자[속성명=값] target= "_blank"인 요소만 스타일 적용된다. 3. 선택자[속성명^=값] href가 http://로 시작하는 요소만 스타일 적용된다. 4. 선택자[속성명$=값] href가 .com으로 끝나는 요소만 스타일 적용된다. 5. 선택자[속성명*=값] href에서 co가 들어간 요소만 스타일 적용된다. 🔻디자인에 적용하기🔻 1. 필수 입력 필드 강조하기 2. 입..
WEB/CSS
[CSS] 요소 선택 : 가상클래스
요소들을 선택하는 데 사용되는 가상 클래스들이다. 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..
WEB/CSS
[CSS] 태그의 수평 정렬
🔻태그의 수평 정렬🔻 인라인 태그와 블럭 태그의 방법이 상이하다. 1. 내용물의 정렬 text-align 인라인 태그는 좌우 여백이 없어서 적용이 불가능하다. 블럭 태그 전용이다. 태그의 수평 정렬 인라인 태그 인라인 태그 블럭태그 블럭 태그 2. 태그 자체의 위치를 정렬 인라인 태그 부모님 블럭 태그 도움을 받는다.(ex. ) 블럭 태그 좌우 여백 공간이 없어서불가능하다. 마진을 조절하여 정렬한다. 인라인 태그 조절 태그의 수평 정렬 인라인 태그 인라인 태그 블럭태그 블럭 태그 블럭태그 조절
WEB/CSS
[CSS] 요소의 위치 : position, z-index
🔻position🔻 1. padding : 부모가 자식의 위치를 지정한다. 2. margin : 스스로 위치 지정한다. 3. position : CSS1 ~ CSS3에서 자주 사용 4. transform : CSS4에서 자주 사용 좌표값을 사용하여 위치를 지정한다. x(left), y(top) 좌표를 지정하는 방식이 여러개이며, 원점(기준점)이 다양하다. 🔻속성🔻 1. static position: static 요소의 기본값이며, 일반적인 문서 흐름에 따라 배치된다. x,y 사용 불가능하다. FlowLayout 2. absolute position: absolute 절대 좌표 top, bottom, left, right 등의 속성을 사용하여 요소의 위치를 조정할 수 있다. 문서의 좌측 상단을 원점으로 한..
