1. input과 label은 짝꿍
<!--
label과 input을 묶으면 label을 눌러도
input에 커서가 뜬다!
-->
<label for="input아이디">123</label>
<input type="text" placeholder="알아볼수 있는 안내말" id="input아이디">
2. radio의 다중 선택을 금해보자
<!-- radio의 그룹정의 : name="값" -->
<!--
radio는 기본적으로 중복 선택이 가능하지만,
name으로 그룹화 시켜주면
해당 그룹안에 있는 선택지들은 중복 선택이 안된다.
-->
<input type="radio" id="female" name="gender">
<label for ="female">여자</label>
<input type="radio" id="male" name="gender">
<label for ="female">남자</label>
3. 가상클래스(:disabled)
<html>
<head>
<style>
button:hover {background-color: pink;}
</style>
</head>
<body>
<button>button</button>
</body>
</html>
// 호버 시 배경색이 핑크로 바뀐다.
#2
<html>
<head>
<style>
button:not(:disabled):hover {background-color: pink;}
</style>
</head>
<body>
<button disabled>button</button>
</body>
</html>
// button이 disabled상태일때는 hover 효과를 적용하지 않는다.
// button 태그에 disabled가 빠지면 hover가 정상작동.
4. Sass(Scss)
- 큰 스타일시트를 구조화해서 효율성을 높인다.
- Sass와 Scss는 Nesting구조(중첩구조)가 있다.
- 둘은 취향 차이다. 편한거 써도 된다.
❓ 왜 Sass(Scss)를 써야하는가?
- css 코드가 한 파일로 제작된다면 가독성 저하
- css의 어디서부터 어디까지가 어떤 스타일을 담당하고 있는지 파악 어려움
- css의 단순 수정에도 전체 코드를 일일히 확인 해야 함
- 프로젝트가 커질수록 CSS 작업 속도 느려짐
❗ Sass(Scss)의 장점은?
- 중복 코드 혹은 레거시 코드 생성하기 쉬움
- 변수 쓸 수 있다!
5. Sass @mixin
<h1>hi</h1>
$h1-size: 5em;
$h1-color: blue;
$h1-align: center;
h1 {
font-size: $h1-size;
color: $h1-color;
text-align: $h1-align;
}
// 변수로 값을 정의하면 수정하기도 편하고 쓰기도 편하다.<p>lorem500</p>
@mixin ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
p {
width: 300px;
@include ellipsis;
}
// @mixin 이름은 자주쓰는 것을 그룹화 해놓는 거다.
// 사용할때는 @include 이름; 을 하면 된다.
// 그룹화는 아무리 많아도 사용하지 않으면 코드의 길이에 영향을 주지 않는다.// Example #2
<div class="bg"></div>
// @mixin은 ()안에 변수값을 받을 수 있다.
// 변수 순서에 맞춰서 사용해야한다.
// 디폴트값을 넣고싶다면 (변수: 값) 을 쓰면 된다.
@mixin bg-img ($bg-url, $bg-position: center, $bg-size: contain, $bg-color: transparent) {
background-image: url($bg-url);
background-repeat: no-repeat;
background-position: $bg-position;
background-size: $bg-size;
background-color: $bg-color;
}
.bg {
margin: 0 auto;
width: 100px;
height: 100px;
@include bg-img('https://sass-lang.com/assets/img/logos/logo-b6e1ef6e.svg', center, contain, white);
// 이것처럼 순서대로 써라.
}
body {
background-color: #000;
}
// CSS 버전
.bg {
margin: 0 auto;
width: 100px;
height: 100px;
background-image: url("https://sass-lang.com/assets/img/logos/logo-b6e1ef6e.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-color: transparent;
}
body {
background-color: #000;
}
6. Sass @function
<h1>@function</h1>
// function 이름(변수)를 받아서 재정의 후 사용.
@function half-opacity($color, $opacity) {
$color: rgba($color, $opacity);
@return $color;
}
h1 {
font-size: 10em;
text-align: center;
color: half-opacity(red, 0.8);
}