BOOK : 모던 웹을 위한 HTMl5 + CSS3 바이블
| CSS3 속성 단위 | |
| 크기 단위 < % / em / px > | 백분율 단위 / 배수 단위 / 픽셀 |
| 색상 단위 < #000000 / rgb / rgba / hsl / hsla | HEX 코드 단위 / RGB 색상 단위 / HSL 색상 단위 |
| url 단위 < url('Desert.jpg') / url('other/Desert.jpg') | 현재 폴더의 / 현재 폴더 내부 other 폴더의 Desert 파일 |
크기 단위
전체 폰트 크기에 절대 크기를 지정하고(px) 난 후에 각각 태그에 상대크기를 지정하는(%, em) 방법이 많이 사용
100%가 초기에 설정된 크기 // 1.5배=1.5em=150% 상대적 크기 // 16px, 20px은 절대적 크기
색상 단위
rgba와 hsla의 A는 투명도를 의미하는 알파 값. 알파 값은 0.0 (완전 투명) ~ 1.0 (불투명) 사이의 숫자를 입력
사용 예시 { color: #0094 ff; } // {color: 255, 255, 255; } // {color: hsl(33, 100%, 50% }
url 단위
background-image: url('Deset.jpg'); -> 현재 폴더의 Deset.jpg
background-image: url('Other/Deset.jpg'); -> 현재 폴더 내부에 있는 Other 폴더의 Deset.jpg
background-image: url(' /Deset.jpg'); -> 루트 폴더의 Deset.jpg (서버 개념을 알아야 한다.)
| 속성 기본 |
| 가시 / 박스 / 테두리 / 배경 / 폰트 / 위치 / overflow / float / 그림자 |
| 가시속성 | |
| display 중요한 속성 | none / block / inline / inline-block |
| visibility 속성 | visible / hidden / collapse |
| opacity 속성 | opacity: 0.0~1.0 조절 |
display 속성 -
<style>
{ display: none; } - 태그를 화면에서 보이지 않게 만듭니다.
{ display: block; } , { display: inline; } , { display: inline-block; }
태그를 bolck 형식// inline 형식 // inline-block 형식//으로 지정
inline-block 형식도 width, height, margin 속성 적용 가능
visibility 속성 -
<style>
{visibility: visible; }, {visibility: hidden; }, {visibility: collapse; }
태그를 보이게 만든다 // 보이지 않게 만든다 // table 태그를 보이지 않게 만든다.
{ display: none; }과 {visibility: hidden; }의 차이점
-> 태그가 화면에서 제거되는 display: none; // 화면에서 보이지 않을 뿐 제거 X 공간도 남겨두는 visibility: hidden;
| 박스 속성 | |
| width , height | 글자를 감싸는 영역의 크기를 지정하는 스타일 속성 |
| margin , padding | 마진과 패딩의 너비를 지정하는 속성 |
| box-sizing | content-box; , border-box; |
width , height 속성
글자를 감싸는 영역의 크기를 지정 (px)
전체 너비 = width + 2 X (margin+border+padding)
전체 높이 = height + 2 X (margin+border+padding)
margin, padding 속성
위 오른쪽 아래 왼쪽 각각 지정 가능 ( margin-top / margin-right / margin-bottom / margin-left )
각각 지정 안 하고 margin 속성만 사용하여 각각의 너비 별도 지정도 가능
4개 지정 -> 위-오-아-왼 { margin: 5px 30px 5px 30px; }
3개 지정 -> 위(아)-오-왼 { margin : 5px 30px 30px; }
2개 지정 -> 위(아)-오(왼) { margin : 5px 30px; }
box-sizing 속성
width와 height 속성이 차지는 범위를 지정하는 속성
{ box-sizing: content-box; } -> 글자 들어가는 영역만큼 크기 지정
{ box-sizing: border-box; } -> 글자 영역 + 보더 + 패딩 포함한 크기 지정
전체 너비와 높이 표현하는 공식
{ box-sizing: content-box; } -> 박스 너비 = width + 2 X (margin+border+padding)
박스 높이 = height + 2 X (margin+border+padding)
{ box-sizing: border-box; } -> 박스 너비 = width + 2 X margin
박스 높이 = height + 2 X margin
요즘은 border-box 속성 값으로 많이 이용한다고 함
| 테두리 속성 | |
| border-width, border-style, border-color | 테두리 너비 지정 / 형태 지정 / 색 지정 |
| border-radius | 테두리가 둥근 사격형 또는 원을 만들 수 있다. |
border-width, border-style, border-color
각각의 속성 값으로 사용 가능한 것들
border-width : px, rem, inherit, initial 등
border-style : dashed, dotted, double 등
border-color : red, blue, rgb 등
속성 별로 각각 지정해도 괜찮지만 border 속성을 사용해 한 번에 입력 가능
{ border : initial dashed black; } -> width / style / color 순으로 띄어쓰기로 구분해서 입력
border 테두리의 부분 스타일 지정도 가능
border-left-width / border-right-style 등
border-radius
둥근 버튼을 별도의 이미지 없이 만들 수 있게 되었다.
{ border-radius : 20px; } -> 테두리가 둥근 사격형 만들어짐
{ border-radius : 50px 40px 20px 10px; } -> 왼쪽 위 / 오른쪽 위 / 오른쪽 아래 / 왼쪽 아래 모서리에 각각 적용 가능
| 배경 속성 | 속성 값 |
| background-image | url , gradient , image 등 |
| background-size | px, rem , contain, cover 등 |
| background-repeat | no-repeat , inherit , initial 등 |
| background-attachment | scroll , fixed 등 |
| background-position | 키워드(top,right등), x축 크기 , x축 크기 y 축 크기 |
<head>
<title>CSS3 배경 속성</title>
<style>
body{
<!-- css3 부터 배경 이미지 중첩 사용 가능 -->
background-image: url('계획1.png'), url('계획2.png');
<!-- size 지정 시 띄어쓰기로 구분한 것은 너비와 높이 지정하는 것이고
콤마(,)로 구분하는 것은 각각의 배경에 서로 다른 크기를 적용하는 것으로 인식한다. -->
background-size: 100% 250px , 50% 100px;
<!-- 기본값은 repeat으로 적용 , repeat-x / repeat-y / no-repeat 적용 가능 -->
background-repeat: no-repeat;
<!-- 어떤 방식으로 화면에 붙일 것인지를 지정하는 속성 scroll 기본값으로 / fixed등 적용
scroll에 따라 배경 이미지가 함께 이동 적용 / 스크롤 내려도 고정 fixed -->
background-attachment : fixed;
<!-- 크기 단위 (px,%등 1개 입력시 x축 크기 / 2개 입력이 x축크기 y축크기 적용)
또는 키워드(top,bottom,right,left등) 사용 -->
background-position : 0px 50%;
<!-- x축 0px 적용, y축 위치 50% 적용하는 코드 -->
}
</style>
</head>
review
inline 형식과 block 형식의 개념
마진, 보더, 패딩, 글자 영역에 대한 개념과
마진, 보더, 패딩으로 인한 박스의 전체 크기 개념
테두리와 배경 이미지에 대한 개념 학습
박스와 이미지를 넣는 방법에 대해 알 수 있었다.
아직 초반임에도 쉽게 보기만 했던 웹페이지들의 모습들이
하나하나 잘 짜인 스타일 속성들로 이루어진 것이라는 생각이 들었고
학습한 부분들만이라도
어떻게 사용되고 있는지 관심을 더 가지고 봐야겠다.
'Front-end > CSS' 카테고리의 다른 글
| [ CSS 레이아웃 ] 상세_searchBar (0) | 2022.06.22 |
|---|---|
| [ CSS 레이아웃 ] 상세_loginForm (0) | 2022.06.22 |
| [CSS 레이아웃 ] 상세_footer (0) | 2022.06.22 |
| CSS : CSS 속성 기본2 (0) | 2021.12.19 |
| CSS : CSS 선택자 (0) | 2021.12.18 |