.png)
오늘은 팀원과 자신의 코드를 공유했는데 그때 새로 안 것들을 공부했습니다. 😎
1. flexbox와 grid
PC, 태블릿, 핸드폰 등 많은 기기가 있는데, 이 때 기기 마다 사이즈를 다 다르게 지정할 수 없으니까 사용한다. 특히, 요소의 사이즈가 불명확하거나 동적으로 변화할 때 유용하게 사용한다.
| 속성 | 배치기법 | 중심 |
|---|---|---|
| flexbox | 1차원적 배치 기법 | content 중심 |
| grid | 2차원적 배치 기법 | layout 중심 |
2. CSS overflow 속성
요소내의 컨텐츠가 너무 커서 요소내에 모두 보여주기 힘들때 어떻게 보여줄지 지정하는 방법
| 값 | 설명 |
|---|---|
| visible | 상자 속에 글을 보여줌(글이 많을 경우 상자 밖으로 벗어나서 보임) |
| hidden | 상자 속에 글을 보여줌(글이 많을 경우 상자 밖으로 벗어나는 글은 보이지 않음) |
| scroll | 스크롤바가 추가(가로, 세로 둘 다 가능) |
| auto | 컨텐츠 량에 따라 스크롤바를 추가할지 자동으로 결정 |
<style>
div.container {
overflow: scroll;
border:1px solid black;
width: 100px;
height: 100px;
}
</style>
<div class="container">
<p>스크롤바 만들기</p>
</div>
3. z-index
position 속성으로 정렬을 했을때, 배치한 객채가 겹칠때가 있다. 이때 z-index는 객체의 수직 위치를 정의하여 순서대로 나열할 때 사용합니다.
<style>
div {
width: 100px;
height: 100px;
position: absolute; /* position 속성 사용 */
}
div.x {
background-color: yellow;
top: 20px;
left: 200px;
z-index: 3; /* 먼저 작성하면 1이지만 역순을 줬음 */
}
div.y {
background-color: green;
top: 50px;
left: 260px;
z-index: 2;
}
div.z {
background-color: red;
top: 80px;
left: 230px;
z-index: 1;
}
</style>
4. 그라데이션
- linear-gradient( 각도 또는 방향, 시작 색, 종료 색);
선형 그러데이션은 색상이 수직, 수평, 대각선 방향 등 일정하게 변화한다.
to top, to left, to right, to bottom 속성값이 있다.
<style>
div{
width: 200px;
height: 200px;
border: 1px solid;
background: linear-gradient(to top, black, white);
}
</style>
- radial-gradient(모양 크기 at 위치, 시작 색, 종료 색);
원(또는 타원)의 중심을 기준으로 동심원을 그리며 바깥 방향으로 색상이 변화한다.
circle, ellipse 속성값이 있다.
<style>
div{
width: 200px;
height: 200px;
border: 1px solid;
background: radial-gradient(circle, rgb(255, 255, 255), rgb(52, 52, 160), rgb(206, 238, 130));
}
</style>
5. transform
transform은 엘리먼트의 크기, 위치, 모양을 변경하는 속성입니다.
scale, rotate, translate, skew 속성값이 있습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS-ex</title>
<style>
.ex {
width: 300px;
height: 300px;
margin: 100px auto;
background-color: black;
transition: all ease 1s;
}
.ex:hover { /*hover를 꼭 줘야함 */
transform: rotate( 50deg ); /* 회전하는 속성값 */
}
</style>
</head>
<body>
<div class="ex"></div>
</body>
</html>
다음과 같이 상자가 돌아가게됩니다.
꾸준하게 🐌