[ css3 ] 상속, 단위, 웹폰트, 컬러,둥근 사각형, 그림자 , float , 배경

상속, 단위, 웹폰트, 컬러,둥근 사각형, 그림자 , float , 배경

 

1. 상속

2. 단위

3. webfonts

4. color

5. 둥근 사각형

6. 그림자

7. float 

8. 배경

 

# 상속

부모가 가진 css 속성이 자식에게 영향을 미치는 것 

 

** 상속되지 않는 것 

위치, 여백, 크기, 배경, 패딩, 마진등

 

상속 관련 프러퍼티

font-famly, font-size, font-style, font-variant, font-weight, letter-spacing, line-height, text-align, 

text-indent, text-transform, word-spacing, list-style, list-style-image, list-style-position, list-style-type

 

단 a태그의 링크 관련 color 속성은 상속되지 않습니다. 반드시 a태그에 작성해야 합니다.

 

# 단위

px : 1픽셀을 1로 하는 단위  ->  0일 때는 px단위를 생략할 수 있습니다.
em : 폰트의 높이를 1로 하는 단위 ( 모바일, 반응형에 많이 사용 )
% : 기준이 되는 크기에 대한 비율 
rem : 루트인 html의 값을 기준으로 계산.( 모바일, 반응형에 많이 사용 )

 

https://www.toolo.kr/pxtoem

PX / EM 변환하기

 

 

 

em	부모 요소의 font-size	부모 폰트 크기 × 설정값	△ 중간	중첩 시 크기 누적, 버튼/내부 요소 마진 등에 사용
rem	루트 요소 (html)의 font-size	루트 폰트 크기 × 설정값	○ 높음	일관된 크기, 유지보수 편리, 폰트 및 여백에 많이 사용
vw	브라우저 가로(viewport width)	전체 가로 길이 × 백분율 (1vw = 1%)	◎ 매우 높음	반응형 레이아웃, 전체화면 요소, 배너 등에 활용

 

 

# 웹폰트

https://fonts.google.com/

Browse Fonts - Google Fonts

https://noonnu.cc/

눈누

font family

Noto Sans = 전체

Noto Sans KR = 영어 + 한국어 + 고대 한국어

 

 

https://noonnu.cc/font_page/694

눈누

 

 

https://fonts.adobe.com/fonts/pretendard

Pretendard | Adobe Fonts

 

 

 

 

 

# color

color

mdn

 

https://developer.mozilla.org/ko/docs/Web/CSS/color_value

<color> - CSS: Cascading Style Sheets | MDN

 

- 16진수 표기법

• #ffffff 처럼 #과 함께 6자리의 16진수로 표시. 
• 앞에서부터 두자리씩 묶어 빨강, 초록, 파랑의 양. 
• 하나도 섞이지 않았을 때는 00, 가득 섞였을 때는 ff로 표시. 
• 000000(검은색) ~ ffffff(흰색)
• 두 자리씩 중복될 경우 줄여 사용할 수 있음.
  예) #ffff00  #ff0, #cccccc  #ccc

 

- rgb/rgba 표기법

• color:rgb(255,0,0)처럼 세 자리의 숫자로 표시. 
• 앞의 숫자부터 빨강, 초록, 파랑의 양. 
• 하나도 섞이지 않았을 때는 0, 가득 섞였을 때는 255
• 투명도를 조절할 때는 color:rgba(255,0,0,. 3)처럼 마지막에 알파값 추가 
• 알파값은 불투명도를 나타내는 값으로 0~1 값 중에서 사용(1은 불투명, 0은 완전 투명)

 

- hsl / hsla 표기법 

• color:hsl(240, 100%, 50%) 처럼 세 자리의 숫자로 표시. 
• 앞의 숫자부터 색상(hue), 채도(saturation), 밝기(light)의 양.
• 투명도를 조절할 때는 hsla(240,100%,50%,0.3)처럼 마지막에 알파값 추가 
• 알파값은 불투명도를 나타내는 값으로 0~1 값 중에서 사용(1은 불투명, 0은 완전 투명)

- 색상 이름 표기법

• 기본 색상 16가지 
• 모든 브라우저표기색을 웹 안전 색상(web-safe color)라고 하는데 기본 16가지 색상을 포함해 모두 216가지입니다. 

 

- oklch()

가독성향상, 쉬운컬러변경

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch

oklch() - CSS: Cascading Style Sheets | MDN

 

oklch(45% 0.5 220/ 50%) : (Lightness Chroma Hue / Opacity)

L : 0% = 0.0, 100% = 1.0

c의 경우(채도) : 0% = 0, 100% = 0.4

 H(hue) : 색조 

 

https://developer.mozilla.org/en-US/docs/Web/CSS/hue

<hue> - CSS: Cascading Style Sheets | MDN

 투명도(0~1)

 

 

 

 

참고사이트

참고1

참고2

참고3

참고4

참고5

참고5

 

 

# 둥근 사각형, 그림자

속성	설명	mdn
border-radius	둥근 사각형	바로가기
border-radius 생성기	둥근 사각형 생성기	바로가기
border-radius 생성기		바로가기
box-shadow	그림자	바로가기
box-shadow		바로가기
box-shadow		바로가기
text-shadow		바로가기
float	띄워서 배치	바로가기

 

 

border-radius

border-radius

border-top-left-radius : 상단 왼쪽 모서리를 둥글게 

border-top-right-radius : 상단 오른쪽 모서리를 둥글게 

border-bottom-left-radius : 하단 왼쪽 모서리를 둥글게 

border-bottom-right-radius : 하단 오른쪽 모서리를 둥글게 

 

 

border-radius

 

border-radius

 

# box-shadow : 박스 그림자

box-shadow :  수평 그림자 / 수직 그림자 / 그림자 흐림(blur)  / 그림자 번짐(spread) / 그림자 색상 / inset 

 

 

# text-shadow :  글자 그림자

text-shadow :  수평 그림자 / 수직 그림자 / 그림자 흐림(blur)  /그림자 색상 

 

 

.text1 {
    font-size: 50px; /* 글자 크기 */
    color: white; /* 글자 색 */
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 
    /* 그림자를 네 방향으로 설정하여 테두리 효과 생성 */
}


.text2 {
    font-size: 50px;
    color: white;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
        -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000; 
        /* 더 굵은 테두리 효과 생성 */
}

 

 <p class="text1">HTML/CSS/JAVASCRIPT</p>
 <p class="text2">HTML/CSS/JAVASCRIPT</p>

 

 

그림자

 

 

# float  / clear 

화면을 구성하는 요소 간의 관계를 고려하여 각 요소를 배치하는 방법 

float : left  - 요소를 왼쪽으로 띄워져 있는 상태

float : right  - 요소를 오른쪽으로 띄워져 있는 상태

float : none  - float을 적용하지 않음 ( 요소를 띄우지 않음 )

 

clear : none / left / right / both 

clear: both 

 

* 자식을 띄우면 부모가 자식을 인식하지 못함
해결 
1. 부모에 overflow:hidden 
2. 부모에 ::after { content:""; display:block; clear:both } 
    주로. clearfix::after { content:""; display:block; clear:both } 만들고 사용합니다.

 

예)

클래스 작성  css부분 .clearfix::after { content:""; display:block; clear:both } html부분 <ul class="cleaerfix">     <li>list</li>     <li>list</li>     <li>list</li>     <li>list</li>     <li>list</li>     <li>list</li> </ul>

 

 

# 배경 / 스프라이트( sprite ) 배경 이미지 

 

배경

속성	설명	mdn
backgorund	배경 속기	바로가기
background-image	배경 이미지	바로가기
background-color	배경 색상	바로가기
background-size	배경 크기	바로가기
background-position	배경 위치	바로가기
background-repeat	배경 반복	바로가기
background-attachment	배경 고정	바로가기
background-clip	배경 자르기	바로가기
스프라이트 이미지만들기		바로가기

 

 

스프라이트( sprite ) 배경 이미지 

 

이미지 스프라이트(image sprite)란
여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미함
웹 페이지의 로딩 시간을 단축해 줌

네이버, 다음, 네이트 등에서 많이 사용함

 

# 넘침 관리, 보이기/숨기기 / 수직정렬

속성	설명	mdn
overflow	넘침	바로가기
visibility	보이기/숨기기	바로가기
vertical-align	수직정	바로가기