CSS - element 요소 정리

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