[새싹 프론트엔드] CSS 속성 정리

🌱 CSS 다양한 단위

 

🖥 크기 단위

단위	설명
em	비율
rem	비율
%	퍼센트
px	픽셀 수
cm	센티미터
mm	밀리미터
in	인치
pt	포인터

✔️ CSS3에서 가장 많이 사용하는 단위

✔️ font-size, width, height 속성 등에 적용

 

 

💡 더 자세하게 알아보기!

em

• 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율값을 지정 (부모의 2배)
• 부모 요소에 따라서 크기가 변경되어야 하는 경우에 사용

rem

• r = root
• 문서 시작 부분(root)에서 지정한 크기를 기준(1rem)으로 한 후 비율값을 지정 (1rem=16px)
• 웹 페이지 내에서 항상 고정된 크기를 가져야 하는 경우에 사용

요약해보면? 

1배 = 1em = 100%

1.5배 = 1.5em = 150%

2배 = 2em = 200%

 

🖥 색상 단위

형태	설명
rgb(red, green, blue)	RGB 색상 단위
rgba(red, green, blue, alpha)	RGBA 색상 단위
#000000	HEX 코드 단위

✔️ RGB 색상 단위 : 빨간색, 초록색, 파란색을 조합해 색상을 표현. 0부터 255사이의 숫자를 입력하면 됨 

✔️ RGBA 색상 단위 : RGB 색상 단위에 알파값을 추가한 형태. 0.0부터 1.0사이의 숫자를 입력함 (0.0완전투명, 1.0완전불투명)

✔️ HEX코드 단위 : RGB색상 단위를 짧게 입력하는 방법. 각 색상 요소에 00에서 FF 사이의 값을 입력함

 

 

🖥 URL 단위

✔️ url('경로') : 이미지나 글꼴 파일을 불러올 때 사용함

 

💡경로 요약!!! 얘만 잘외워도 쉬움

./ 현재폴더

../이전폴더 

 

 

 

🌱 CSS 글자 속성

🖥 font-family 속성

✔️ 개발자 컴퓨터에는 글꼴이 설치되어 있지만, 사용자 컴퓨터에는 글꼴이 없는 경우를 대비해야함!

⁉️ 해결방법 ? 

1. font-family 속성을 여러개 입력하기!

2. font-family 속성의 마지막에 Serif(명조)체, Sans-serif(고딕)체, Mono space(고정폭 글꼴)을 입력해두기

.font_arial { 
	font-family: ‘없는 글꼴’, sans-serif; 
	} 

.font_roman { 
	font-family: ‘없는 글꼴’, serif; 
	}

 

 

🖥 font-style 속성

✔️ 글자의 기울기를 조절하는 속성.

       italic, normal 등의 값으로 지정

 

🖥 font-weight 속성

✔️ 글자의 두께를 조정하는 속성.

       100~900사이의 숫자로 굵기를 지정.

       정확한 수치가 필요 없는 경우 normal, bold 등으로 지정

 

🖥 text-align 속성

✔️ 말그래도 텍스트에 정렬주는것~!

 

🖥 font 속성

✔️ font-style, font-weight, font-size, font-family를 순서대로 지정하는 단축 속성임

       font:font-style, font-weight, font-size, font-family

**font-size, font-family를 제외하고 생략가능 두개는 필수요소!!

 

🖥 text-decoration 속성

✔️ 주로 하이퍼링크의 밑줄을 제거할 때 사용. 

       밑줄만 제거되며, 글자의 색상은 color 속성을 사용해 별도로 지정해야 함.

키워드	설명
none	글자의 밑줄 제거
overline	글자의 윗줄 생성
line-through	글자의 중간줄 생성

 

🖥 text-indent 속성

✔️ 글자 들여쓰기 가능!. 

 .a { text-indent : 1em; } /* 한 글자 들여쓰기 */
 .b { text-indent : 2em; } /* 두 글자 들여쓰기 */
 .c { text-indent : 3em; } /* 세 글자 들여쓰기 */

 

🖥 text-shadow 속성

✔️ 글자에 그림자 효과를 적용 (그림자효과 중첩가능!)

속성	설명
h-shadow, v-shadow	원본 텍스트와 그림자 텍스트 사이의 수평, 수직 거리(필수)
blur-radius	흐릿한 그림자를 만드는 효과로 흐릿하게 번지는 길이
color	그림자 색
none	그림자 효과 없음

 

 

 

 

 

🌱 CSS 배경 속성

🖥 배경 속성

속성	설명
background-color	배경 색상 지정
background-image	배경 이미지 지정
background-size	배경 이미지의 크기 지정
background-repeat	배경 이미지의 반복 형태 지정
background-attachment	배경 이미지의 부착 형태 지정
background-position	배경 이미지의 위치 지정
background	한 번에 모든 배경 속성 입력

 

 

🖥 background-repeat 속성

✔️ 이미지 반복 관련된 설정

키워드	설명
repeat	이미지 반복
no-repeat	이미지 반복 안함
repeat-x	X축 방향으로 이미지가 반복
xrepeat-y	Y축 방향으로 이미지가 반복

 

🖥 background-attachment 속성

✔️ 배경 이미지를 화면에 고정하는 속성

키워드	설명
fixed	배경 이미지를 화면에 고정
scroll	스크롤 시, 배경 이미지는 스크롤 되지 않음

 

 

🖥 background-position 속성

✔️ 배경 이미지의 위치를 지정하는 속성

키워드	설명
bottom	배경 이미지를 아래쪽에 배치
center	배경 이미지를 중앙에 배치
left	배경 이미지를 왼쪽에 배치
right	배경 이미지를 오른쪽에 배치
top	배경 이미지를 위쪽에 배치
X축	X축 위치 지정
X축 Y축	X축 위치, Y축 위치 지정

 

 

🖥 background 속성

✔️ 배경을 꾸미는 여러 값을 한 번에 지정하는 단축

✔️ color, image, position/size, repeat 순으로 값 지정

div {
	background : skyblue url(“apple.jpg") center/100px repeat-y; 
    }

 

 

 

 

 

🌱 CSS 박스 속성

🖥 박스 모델

✔️ 웹 페이지의 레이아웃을 구성할 때 가장 중요 

제일 안에 파란부분이 내용 content!  

 

속성	설명
content	텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분
width	내용 영역의 너비를 지정
height	내용 영역의 높이를 지정
padding	내용과 테두리 사이의 간격, 눈에 보이지 않음
border	내용과 패딩 주변을 감싸는 테두리
margin	테두리와 이웃하는 요소 사이의 간격, 눈에 보이지 않음

 

 

✔️ HTML 태그는 사각형 박스 형태

- 박스 크기, 배경색, 여백, 옆 박스와의 거리 등을 제어 가능함

 

 

🖥 테두리 속성

속성	설명
border-width	테두리의 두께를 지정
border-style	테두리의 스타일을 지정
border-color	테두리의 색상을 지정
border-radius	테두리가 둥근 사각형이나 원을 생성
border	테두리를 꾸미는 여러 값을 한 번에 지정하는 단축 속성

 

 

🖥 display 속성

키워드	설명
none	태그를 화면에서 숨기기
block	태그를 블록 형식으로 지정
inline	태그를 인라인 형식으로 지정
inline-block	태그를 인라인-블록 형식으로 지정

 

block	inline	inline-block
항상 새 라인에서 시작	새 라인에서 시작 못함	새 라인에서 시작 못함
옆에 다른 요소 배치 불가능	옆에 다른 요소 배치 가능	옆에 다른 요소 배치 가능
width, height로 크기 조절 가능	width, height로 크기 조절 불가능	width, height로 크기 조절 가능
padding, border, margin 조절 가능	padding, border, margin 조절 불가능	padding, border, margin 조절 가능

✔️ inline-block 같은 경우에는 나름? block과 inline의 장점을 갖고있음

 

🖥 visibility 속성

✔️ HTML 태그를 출력할 것인지 숨길 것인지 지정 

키워드	설명
visible	태그가 보임
hidden	태그에 출력 공간을 할당하고, 보이지만 않음

💡 diplay:none과 visibility:hidden의 차이점은?

✔️ visibility:hidden 같은 경우에는 공간을 차지,할당한다는점!!!!! 

 

 

 

 

🌱 box-shadow 속성

🖥 box-shadow 속성

✔️ 박스 전체에 그림자 효과를 적용 (얘도 중첩 가능!!)

키워드	설명
h-shadow, v-shadow	원본 박스와 그림자 박스 사이의 수평, 수직 거리(필수)
blur-radius	흐릿한 그림자를 만드는 효과로 흐릿하게 번지는 길이
spread-radius	그림자 길이(디폴트0)
color	그림자 색

 

 

 

 

일주일전에 공부했던거 복습하는데 열심히 공부하고 복습해야겠다고 생각했다 홧팅

 

 

 

 

 

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 2주차 블로그 포스팅