가상 클래스
a 가상 클래스
a의 가상 클래스는 잘 안사용함
btn클래스에 먼저 공통 요소를 작성하고
나머지 상태에 맞게 색상 변경해주는 클래스 css 작성하자
트랜지션은 hover가 아닌 곳에 사용하자
transform
트랜스폼은 inline에는 적용되지 않는다.
inline block이나 block에 적용된다.
a태그와 가상클래스를 이용하여 버튼 디자인하기
(호버시)
(그냥)
먼저 화살표는 i태그를 준다.
i 태그는 인라인 블록이다 그래서 hover 안됐을 때에는
오른쪽으로 밀려 보인다
그래서 padding-right를 준다.
i태그는 기본적으로 opacity 0을 주어 안보이게 한다.
그리고 i태그는 인라인 블록이기 때문에 transform을 사용할 수 있고
처음 위치를 설정한다.
그리고 .download클래스가 hover 상태이고 이때 자손이 i태그인 경우 변경될 클래스를 써준다.
active 클래스는 사용자가 클릭했을 때 살짝 스케일이 변경으로 클릭 이벤트를 보여주고자할때 사용한다.
hover로 드랍다운 만들기
먼저
display content를 안보이게 할것이므로 display none을 준다.
dropdown 클래스가 hover가 되었을 때 자손 요소 dropdown-content 요소를 block으로 바꿔라
a태그 hover했을 때 스타일 변경해야 하므로 바꿔준다.
이 때 dropdown과 자식간 상속해주기 위해서 inherit을 사용하자
자손에 px로 하면 부모가 변경되면 바꾸기 힘들다
이미지도 인라인 블록이다.
그래서 약간의 마진이 생긴다.
그래서 display block이나 fontsize 0을 해줘도 된다.
여기서 display none는 트랜지션을 줄 수 없다.
opacity를 하게 되면 안보이지만 존재한다.
그래서 안보이지만 마우스 올려도 hover가 된다.
기본적으로 bgc는 투명색이다. 하얀색을 줘야 한다.
nth-child란?
순서를 체크하는 가상 클래스
n은 무작위 th 순서, child 자식
만약 p태그가 앞에 있으면
nth-child는 잘 안먹힌다.
홀수
짝수
이거는 테이블 디자인할때 굉장히 많이 사용한다.
테이블 디자인
테이블 크기를 700, 테이블 공간 딱 붙히기, 테이블 간격 같게
th는 테이블 헤더이기 때문에 기본적으로 bold가 되어 있고 배경색만 바꾸자
테이블에 caption이 있는데 기본적으로 block이다.
그래서 margin을 사용하자
하지만 세로 보더 이상하다
먼저 보더 다없애고
tr에 주고 마지막 tr은 보더 주지말자
하지만
첫번째 보더도 남아 있다.
여기서 스트라이프 효과 주고 싶다
테이블 효과에 nth-child 많이 사용한다.
마우스가 올라갔을 때 hover주는 것도 괜찮다
nth-child, last child, first-child는 무조건 같은 계층에서 찾는다.
nth-child 문제는 중간에 다른 태그가 들어가면 제대로 동작하지 않는다.
이때 nth-of-type을 쓰면 이런문제 해결할 수 있다.
가상요소 before,after 가상 클래스
-
HTML 엘리먼트는 부모요소, :before, :after는 자식 요소
-
가상클래스 before, after는 인라인 요소
-
크기값을 주기 위해서는 블록요소 또는 인라인 요소로 변경
-
가상클래스를 사용하기 위해서 content 속성이 있어야 한다.
- 모든 엘리먼트는 before, after 가질 수 있다. (input 제외)
list-style 커스텀 하기
before, after는 인라인 요소이지만 마진 값을 줄 수 있다.
list-style 커피로
before 컨텐츠에 커피 아이콘 유니코드를 작성한다.
그러면 살짝 밑에 가있는데
transform translate로 움직인다.
이 때 인라인 요소는 transform을 사용하지 못한다.
그래서 인라인 블록을 사용하자.
여기서 판매순위에 따라 after에 HIT를 주려고 한다.
nth child로 할 수 있지만, 정적일 때 가능이다.
대부분 순위는 변경되므로 CSS로 하지말자
className을 추가하자
데이터베이스에서 불러올 때 순위별로 클래스에 hit을 해주면 된다.
마찬가지로 soldout도 해주자
버튼 호버시 효과주기
부모 요소에 relative 자식 요소에 absolute 주기
실제 텍스트를 주지 않고 영역만 표시하더라도 content에는 빈값을 꼭 넣어주어야 한다.
그리고 absolute를 하게 되면 부모를 찾게되고
이 때 btn에 relative를 주지 않게 되면 body 기준이 된다.
그래서 부모에 잡아주자
그리고 absolute를 주게 되면 자동적으로 인라인 블록이 되기에 크기를 가질 수 있게 된다.
btn이 호버가 되었고 이때 before 가상클래스의 크기를 100해주면 된다.
안보이게 되는데 이때 z-index를 내려준다.
before after로 백그라운드 이미지로 주기
아코디온 효과 주기
물론 i태그 사용해서 float해서 배치할 수 있다.
하지만 HTML에 지저분 해진다.
그래서 before를 사용해서 2번처럼 하자
클릭 했을 때 active가 추가된다고 하자
그러면 붙어쓰기를 해서 .faq-title이면서 .active 클래스인 요소의 after 가상 요소를 회전 시킨다.
이 때 45deg만 하게 되면 기존 값 덮어씌우므로
기존 값도 같이 써준다.
그리고 일일이 px로 조정하지 말고 50% transform translate속성을 사용하자
이미지에 오버레이 사용하기
이미지가 있는데 gradent 오버레이 사용하기
이 때 div 추가하기 보단
before를 사용하자
before 속성에 asbolute주니
h1이 숨었다.
그 이유는 absolute가 우선적으로 보이기 때문이다.
그 이유는 z-index가 같을 때 static 속성보다 absolute 속성이 높기 때문이다.
h1대신 absolute가 보인다.
그러면 h1 우선순위를 높이면 된다.
이 떄 h1에 z-index를 주던가 relative를 주면 absolute보다 먼저 나온다.
그 이유는 relative는 absolute와 같게 된다.
이때 먼저 나온 before 그 뒤 h1이 쌓이게 된다.
만약 after로 하게 되면 h1, after 우선순위는 같다. 하지만 after는 h1보다 뒤에 나오므로 relative 줘봤자 안된다.
이럴 땐 z-index를 주자
z-index 순으로 쌓이다가
같을 때에는 static block, float, inline
absolute, relative 순으로 쌓인다.
HTML 속성
html 속성에는 자체 속성이 존재한다.
a태그 경우 href, target, 등이 있다.
하지만 사용자 속성을 추가할 수 있다.
이때 data를 앞에두고
data-text="test" 로 하면된다.
뱃지 스타일
여기서 12가 뱃지이다.
before로 만들자
이 때 12라는 숫자는 변동된다.
이 때 CSS는 개발코드를 넣을 수 없다.
html 내부에서 변하는 데이터를 프로그래머가 심을 수 있도록 해야한다.
그래서
data-count라는 속성을 읽어서 보여주게 된다.
여기서 inline-block을 하게 되면 width를 임의로 설정안해도 된다.
inline-block은 크기를 가지면서 content-width만큼 너비를 가지기 때문이다.
attr은 자기 자신 요소의 속성을 읽을 수 있는 CSS 속성이다.
이 때 data-count는 변경되는 요소이고
이거를 attr이 읽어서 content값으로 보여준다.
SWAP Hover Button
현재 이렇게 되어있는데
overflow hidden으로 안보이는 거다.
이것도 before로 만들어보자
아래있는 건 before
위에 있는건 after이다.
그리고 content는 attr로 가져오고
absolute로 위치를 맞춘다.
넘버링 하는 counter함수
ol은 자동적으로 1, 2, 3 ... 주기 때문에 디자인을 바꿀 수 없다.
그래서 ul을 사용해야 한다.
ul은 넘버링이 안된다.
이 때 넘버링 함수를 사용하면 된다.
넘버링사용하는 방법은 위와 같다.
애니메이션 UI
이렇게 간단하게 HTML 작성하는 것이 좋다
H1 태그 before에 왼쪽 중괄호
h1 태그 after에 오른쪽 중괄호를 넣을 것이다.
그리고 span 태그의 block을 줘서 개행할 것이고
em 태그에 컬러 바꿔줄 것이고
span태그 before에 애니메이션 효과 줄것이다.
기본적인 레이아웃 끝났다.
그 다음 중괄호를 먼저 처리하자
이제 하트 하자
span 태그 before 가상 요소를 사용하자
여기선 absolute 줄 필요 없다.
그 이유는 바로 옆에 오기 때문이다
자동적으로 inline 속성이다.
이제 애니메이션 주자
작은 상태
큰 상태
작 상태
이렇게 하면 애니메이션 된다.
input은 before after 가질 수 없다.
반면 label button은 가질 수 있다.
input 타입은 굉장히 많다. checkbox, radio 등
input 태그 가상 클래스
input에다가 이미지 넣기
input은 before after 넣을 수 없다.
input태그에 백그라운드 이미지를 넣자
no-repeat하면 하나만 나오고
center 하면 중앙이 된다.
그리고 left하면 오른쪽으로 붙고 5px 떨어지게 한다.
이 때 padding-left를 줘서 이미지 간격을 떨어트린다.
input 태그에 placeholder 가상클래스 사용가능
placeholder는 반드시 클론 두개 써야 함
input 태그 focus
input 태그에 클릭해서 입력 상태일 때 가상클래스 사용
focus 될 때 보더 바뀐다.
focus 된 요소의 placeholder를 사라지게
포커스 되면 placeholder 사라짐
input type checkbox, radio 체크 될 때
네모난 체크박스 말고 라벨까지 클릭했을 때 체크까지 되게 하기
label 안에 checkbox와 텍스트쓰기
label for와 input id와 같게 하기
checkbox 디자인하기
input checkbox 태그 바로 옆에 있는 em을 선택하기 위해 +를 사용한다.
이미지 만들고 left, right 움직이면 된다.
label 태그 안에 input em, span 태그를 두게 되면
input태그가 display none이 되더라도 em, span태그가 label태그와 연결된 input태그를 클릭하게 된다.
그래서 checkbox를 사용할 수 있다.
label이 input에게 클릭을 전달하는 역할이다.
input 가상클래스 valid, invalid
input type마다 유효성 옵션을 넣어주었다.
이 때 valid invalid가상클래스로 CSS적으로 만족하는지 확인할 수 있다.
input 가상클래스 enabled, disabled
disabled 속성을 가진 input에 CSS 추가가능하다
input 가상클래스 readonly 도 가상클래스로 할 수 있다.
not 가상 클래스
active라는 클래스 선택자를 제외한 p태그를 적용
언제 사용하냐
주로 form 요소에서 input 타입은 checkbox, radiobox 다양하게 있는데 이런거 제외할 때 사용한다.
is 가상 클래스
왼쪽을 오른쪽으로 바꿀 수 있다.
header h1
section h1
footer h1으로 된다.
is 안에 있는 것들을 for문으로 도는 느낌이다.
