본문 바로가기
Svelte/CSS

CSS - element 요소 정리

by 올엠 2022. 4. 3.
반응형

CSS를 작성할 때 기본적으로 알아두면 좋은 element에 대해서 정리해 본다.

(현재 업데이트중...)

Ctrl + F 키로 검색을 하면 보다 편하게 찾을 수 있다.

요소 설명
background-color 배경 색
border 테두리 스타일
color 글씨 색상
padding 세로 가로 크기
text-align 글씨 정렬 (가로 기준)
text-decoration 글씨 표현 방식(기본값 링크시 밑줄)
display 가로 세로등 element 표현 방식
font-size 글씨 사이즈
border-radius 모서리 라운딩
:hover 마우스가 위치할때 변화
transition-duration :hover시 전환되는 속도(기본값 0)
box-shadow 배경 그림자 설정
float 그룹의 정렬 위치, display보다 우선함
line-height 라인 간격
margin 바깥 여벽 (상, 우, 하, 좌)
max-width 최대 크기
   

 

margin

  • 한 개의 값: 네 면의 여백
  • 두 개의 값: 첫 번째 위와 아래, 두 번째 왼쪽과 오른쪽 여백
  • 세 개의 값: 첫 번째 , 두 번째 왼쪽과 오른쪽, 세 번째 아래 여백
  • 네 개의 값: 상, 우, 하, 좌 여백 (시계방향)

입력값:  <length>, <percentage> 또는 auto

<length> 값은 픽셀 단위인 픽셀 단위를 의미하는 숫자

<percentage> 화면 전체를 100% 기준으로 여백을 생성

auto  브라우저가 좌우/상하 여백을 적절히 유지하는데 이를 통해 가운데 맞추는 기능을 가진다.

 

margin: 0 auto;             /* 상하: 0 */
                            /* 수평 중앙정렬 */
                          
margin: 10 3% 2;            /* 상: 10px */
                            /* 좌우: 3% */
                            /* 하: 2px */

background-color

해당 요소의 배경 색상을 정의한다.

색상을 키워드로 지정하거나, 16진수로 혹은 투명도 설정 편의성으로 RGB를 많이 사용된다.

/* 키워드 값 */
background-color: white;
background-color: red;

/* 16진수 값 */
background-color: #4CAF50;

/* RGB 값 */
background-color: rgb(255, 255, 128);
background-color: rgba(117, 190, 218, 0.5);  /* 50% 불투명도 */

background-color - CSS: Cascading Style Sheets | MDN (mozilla.org)

 

 

 

 

몇가지 참고용 좋은 스타일들

 

Animation Button

Tryit Editor v3.7 (w3schools.com)

 

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser

www.w3schools.com

 

반응형

'Svelte > CSS' 카테고리의 다른 글

CSS - Select 비활성화, 기본값 설정  (0) 2022.05.08
CSS - grid 기본 이해, 2차원 배열하기  (0) 2022.04.26
CSS - element 요소 정리  (0) 2022.04.03
CSS 마침표 "."의 의미  (0) 2022.04.02
Sass(SCSS)란, 사용법  (0) 2022.03.29
MVC - .Net razor how to selection dynamic CSS  (0) 2020.10.28

댓글0