반응형
안녕하세요. 훈츠입니다. 금일은 CSS 에 문법에 관해 포스팅 합니다.
CSS 유용한 팁과, 필요한 기술들을 소개 드리도록 하겠습니다.
CSS 레이아웃 및 기타 유용 기술
- VAR 변수값 지정 법 : 일일히 값을 입력 하는것보다 유용한 방법 입니다.
- FLEX 간단 소개 : 레이아웃 잡을때 유용한 FLEX 입니다.
- 간단한 애니메이션 효과 : Cursor , Transition, Transform
- 리스트 스타일 없애기 : list-style , padding- left : 0
- 축에 스크롤 주기 : overflow-y : scroll
VAR 변수 지정 법
일일히 값을 입력하는것 보다 아래와 같이 변수명에 속성값을 입력후 해당하는 CSS 에 VAR 함수를 이용하면 됩니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
//Hoons Blog---https://rain2002kr.tistory.com------------------------------------------------------------------코드///
:root {
/* color */
--color-black: #3f454d;
--color-white: #ffffff;
--color-blue: #3b88c3;
--color-yellow: #fbbe28;
--color-pink: #fd7f84;
--color-light-grey: #dfdfdf;
/* size */
--base-margin: 8px;
--size-button: 60px;
--size-border: 10px;
--size-thumnail: 50px;
--font-size: 18px;
/* animation */
--animation-duration: 300ms;
}
.item__description {
margin-left: var(--base-margin);
}
|
cs |
FLEX 간단 소개 및 사용법
레이아웃 잡을때, FLEX 이용 하기. FLEX 관련 하여서 아래 포스팅을 참조 바랍니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
//Hoons Blog---https://rain2002kr.tistory.com------------------------------------------------------------------코드///
.container {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: lightgray;
}
|
cs |
flex-direction : 방향 설정
justify-content : 가로 축 설정
align-items : 세로축 설정
애니메이션 효과
아이템에 포인터를 가져다 놓았을때, 손가락 모양 보이기. cursor : pointer
아이템 확대 하기. hover { transform : scale(1.1)
확대 할때 시간 지정 및 모양 설정 하기 transition : transform
|
1
2
3
4
5
6
7
8
9
10
11
|
//Hoons Blog---https://rain2002kr.tistory.com------------------------------------------------------------------코드///
.logo {
cursor: pointer;
transition: transform var(--animation-duration) ease;
}
.logo:hover {
transform: scale(1.2);
}
|
cs |
리스트 스타일 없애고 축에 스크롤 만드는 방법
기본 reset 으로 날려 버릴수도 있지만 하나하나 reset 할때 사용하는 방법 입니다.
축에 스크롤 값 주고 싶을때는 overflow 속성값을 이용합니다.
|
1
2
3
4
5
6
7
8
9
10
11
|
//Hoons Blog---https://rain2002kr.tistory.com------------------------------------------------------------------코드///
.items {
width: 60%;
height: 60%;
list-style: none;
padding-left: 0; /* 리스트는 기본적으로 left padding이 들어감 */
overflow-y: scroll; /* 축에 스크롤 주는법 */
}
|
cs |
반응형
'컴퓨터 언어 > CSS' 카테고리의 다른 글
| #CSS #기본문법 1 #색상 설정 (0) | 2020.10.31 |
|---|---|
| #CSS #FLEX #레이아웃 만드는 방법 (0) | 2020.10.12 |