position: sticky
ㄴ기본은 relative, 밑의 요소와 충돌하는 순간 fixed로 바뀐다.
ㄴ해당 컨테이너가 끝날 때 까지 동작하고 사라진다!
드래그하면 해당 부모 요소의 끝 길이까지 남아있다가 함께 사라진다!
회의실 대시보드 코드 리뷰
wrapper에 padding 필요할 땐 box-sizing: border-box 값 주기
.wrapper {
display: flex;
height: 100vh;
padding: 20px;
box-sizing: border-box;
border-radius: 28px;
}
ㄴ 전체 창 기준으로 패딩을 줄 때는 box-sizing: border-box; 를 해줘서 스크롤이 잡히지 않고 예쁘게 마무리 되도록 한다.
position:sticky 적용한 header 요소에 blur 값 주기
backdrop-filter: blur(20px);
position을 통한 상하단 중앙 정렬 하기
ir 클래스 (웹 접근성 관련)
.ir {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
스크린 리더기에서는 읽히면서 css에서는 감추기
hover 되었을 때 margin 이동
.slider-button {
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
background-color: red;
margin: auto -40px; /*잠시 숨겼다가(호버되었을 때 마진 돌아오도록)*/
width: 40px;
height: 30px;
text-indent: -9999px;
overflow: hidden;
transition: margin .4s;
}
.slider-main:hover .slider-button {
margin: auto 0; /*호버되었을 때 마진 돌아오도록*/
}
slider-button의 기본 마진은 양옆 -40px을 주고,
slider-main(부모)에 호버되었을 때 slider-button에 auto 0 마진을 주어 나타나는 효과를 제공한다.
form을 만들 때 유의할 점
1. 큰 덩어리 부터 만든다. <form></form>
2. form 안의 fieldset을 넣는다. <fieldset></fieldset>
2-1. fieldset의 제목은 <legend>여기가 제</legend>
3. label태그를 작성한다. (나중에 연결가능)
4. selectbox 태그 작성하기
select 태그 안에 option들을 작성한다.
<select>
<option value="">디자이너와의 티타임</option>
<option value="">원명님과 던파 한판</option>
<option value="">가희님과 신전 떡볶이 먹방</option>
<option value="">민캠프 수강하기</option>
<option value="">지성님과 헤드셋 테크 리뷰</option>
</select>
label 안에 div는 쓰지말자! *html 권장안
label의 for와 id를 맞춰주기
for -> id / name을 맞춰준다.
<div class="form-field">
<label for="option">어떤 용도로 이용할 예정이신가요? </label>
<div>
<select id="option">
<option>일반 회의</option>
<option>고객사 회의</option>
<option>임원 회의</option>
<option>티타임</option>
<option>휴식 공간</option>
</select>
</div>
</div>
radio 같은 옵션 타입에는 name을 맞춰주어야 단일선택이 가능해진다!!
<div class="form-field">
<label for="size">회의의 규모는 어떠한가요?</label>
<ul class="l_row">
<li class="l_col_4_12">
<input name="size" id="size" type="radio"><span class="radio">2~8인</span>
</li>
<li class="l_col_4_12">
<input name="size" type="radio"><span class="radio">9~20인</span>
</li>
<li class="l_col_4_12">
<input name="size" type="radio"><span class="radio">21~100인</span>
</li>
</ul>
</div>
fieldset, legend 초기화
fieldset,
legend {
all: unset; /*전부 unset을 한 뒤에는 display:block을 지정해줘야한다. */
}
textarea, select 초기화
input[type="text"],
input[type="password"],
textarea,
select{
all: unset;
}
input[type="text"],
input[type="password"],
textarea,
select{
all: unset;
display: block;
inline-size: 100%;
}
ㄴ display: block 한다고 모든 면이 가득차지는 않는다 이유는 inline-size 떄문!
ㄴ inline-size를 100%로 가득 채워줘야 한다!!!
textarea {
all: unset;
display: block;
inline-size: 100%;
box-shadow: inset 0 0 20px blue;
line-height: 1.4;
padding: 12px;
}
input[type="text"],
input[type="password"],
select {
all: unset;
display: block;
inline-size: 100%;
box-shadow: inset 0 0 20px blue;
height: 48px;
line-height: 48px;
padding: 0 12px;
box-sizing: border-box;
}
textarea에 line-height, padding 값을 준다.
select에는 height / line-height 를 세트로 준다. (가운데 정렬)
label은 inline 엘리먼트이다.
label {
display: block;
}
display: block; 값을 줘서 초기화 가능하다.
어트리뷰트 셀렉터
type, name, id 를 기준으로 잡을 수 있다.
input[type="text"],
input[type="password"]{
}
input <-> focus 가 중요하다!
둘은 짝꿍!
.input:focus-within {
border-color: #107B0E;
}
해당하는 요소에 클릭 시 boarder-color가 나타난다.
체크된 라디오 버튼에 css 주기
.radio input[type="radio"]:checked + .radio-card{ /*checked 된 애들에 대해서만 확인!!*/
background-color: gold;
}
일반 라디오 버튼 삭제하기
.radio input[type="radio"] {
position: absolute;
}
ㄴ 본래 기본 라디오버튼은 absolute로 줄삭제 한 뒤 visible로 없애버린다.
