[HTML/CSS] 컴알못의 도전기 10일차

 

 

 

 

가상 선택자

 

 

hover

가상 선택자 hover는 출력 즉시 결과가 보이는 것이 아닌, 마우스 커서를 올렸을 때 나타난다.

 

 

 

 

🤷‍♀️ 활용

 

로그인 페이지 만들기

 

css 에 입력한 코드 

button: hover { border : solid red 5px; } -> 버튼에 커서를 올리면 빨간 테두리로 영역이 표시된다.

 

 

 

 

focus 

input을 클릭하여 텍스트 입력할 때 커서가 뜨는 것, 마우스 클릭 없이 tab키로도 해당 영역이 선택됨

 

✨ button 또한 선택됨

input 대신 * 입력하면 모든 태그가 선택됨

 

자세하게 입력된 코드 부분이 먼저 출력되고 차례로 다른 부분이 출력됨

 

 

 

 

after, before

div 뒤쪽에 스타일 적용, 그러나 보통 div 뒤에는 빈칸임. 그래서 content 입력하고 스타일을 적용시킴.

 

 

 

display를 입력하면, 태그 넣지 않았는데 된 것처럼 적용됨.

 

 

 

 

 

 

 

Element 폭, 높이 설정

 

 

요소의 display

1. block (한 줄 전부 차지함) --- div

div를 추가하면 아래로 동일 규격의 출력물이 나온다.

 

폭 width, 높이 height 적용 가능

 

 

2. inline-block --- span

inline은 width, height 적용 불가, span 추가 작성 시 우측으로 붙어서 출력됨.

 

inline의 성질을 가지나 기존 inline과 다르게 width, height 적용 가능 -> inline-block

 

* div에도 적용 가능하나, 이는 div의 display를 inline-block으로 변경하였기에 가능한 것임.

 

픽셀 대신 퍼센트(반응형 스타일)도 가능

 

 

 

hover를 추가하면, 출력 시 div 기본은 폭이 100px이지만, 마우스 커서를 갖다 대는 경우 50%로 출력

 

 

 

3 분할 레이아웃

픽셀 대신 vh -> 화면 전체 크기에 대한 단위 

예) 100vh이면 화면 전체를 다 채움.

 

* 퍼센트와의 차이점? 기준이 되는 태그를 기준으로 퍼센트를 정하여 출력됨.

 

vh, vw --> viewport (웹 브라우저 기준으로 가로, 세로 지정함)

 

 

여기서 span 부분이 전부 채워지지 않는 이유는 div 기준으로 너비가 100%로 출력되기에,

완전히 채우고 싶다면 width:100% 대신 width:100vw로 바꿔준다.