[코딩 초보 개발일지] 상세_00. css 배우기_속성 종류(230416)

들어가기에 앞서...
css 속성 종류는 게시글에 계속 업데이트될 때마다
추가하여 작성할 예정이다. 꾸준히 업데이트할 예정이니
css 속성 종류에 관해서는 수시 확인 필! 
(글 제목옆에 업데이트 날짜를 기입할 예정)
 

<css 속성 종류> _속성 종류와 간단한 설명 나열
 

• width(넓이) : % | px
• height(높이) : % | px
• background-color(배경색) : 직접입력 | 헥스코드
• margin(바깥여백) : 위 | 오 | 아 | 왼 -시계방향 순
• padding(안쪽여백) : 위 | 오 | 아 | 왼 -시계방향 순
• color(글자색) : 직접입력 | 헥스코드
• font-size(글자크기) 
• text-transform(글자변형) : uppercase
• text-align(문단정렬) : left | right | center | justify | initial | inherit
• line-height(줄간격) : 
• font-weight(글자 진하기) : normal | bold | bolder | lighter | number | initial | inherit
• font-family(글꼴) : 
• letter-spacing(자간) : 
• border(테두리) : 굵기 | 선모양 | 색
• border-radius(둥근테두리) : left-top | right-top | right-bottom | left-bottom  -시계방향 순
• cursor(커서모양) : 
• overflow(콘텐츠가 넘칠 때 어떻게 처리할지에 관한 속성) : 
• box-sizing(박스의 크기를 정하는 속성) : content-box / border-box / initial | inherit
• opacity(투명도) : 0~1 , 투명~반투명
• filter(효과입히기) : blur(번짐) | brightness(밝기) | contrast(명도) | grayscale(흑백톤) | hue-rotate(색상) | invert(반전) | saturate(채도) | sepia(갈색톤)
• letter-spacing(자간)
• background: linear-gradient(그라디언트 색상) : 각도, 색상값으로 입력
• box-shadow(박스 그림자) : x축 위치, y축 위치, 번짐정도(blur), 투명도
• text-shadow(텍스트 그림자) : x축 위치, y축 위치, blur, 투명도
• transform(변형) : scale | translate | rotate | skew

728x90

 
 
 

<css 속성 입력 Tip>

약어로도 쓸 수 있다.
 
w100 = width : 100px;
h100 = height : 100px;
fz100 = font-size : 100px;
fwb = font-weight: bold;