공부할 내용 (172~222쪽)
1. 단위
-절대 단위는 px가 있다.
px 한가지이며 모니터 화면을 구성하는 사각형 1개의 크기를 의미한다.
-상대 단위는 % , em , rem, vw, vh 가 있다.
% : 해당 속성의 상위요소 속성값에 상대적인 크기를 가진다.
em : 부모 요소의 텍스트 크기에 상대적인 크기를 가진다.
rem : html 태그의 텍스트 크기에 상대적인 크기를 가진다.
vw : 뷰포트의 너비를 기준으로 상대적인 크기를 가진다. (1vw는 뷰포트 너비의 1/100)
vh : 뷰포트의 높이를 기준으로 상대적인 크기를 가진다.(1vh는 뷰포느 높이의 1/100)
2. 색상 표기법
키워드 표기법: 색상의 영문명을 속성값으로 사용하는 방법이다.
RGB 색상 표기법: RGB는 빨간색 초록색 파란색을 이용해 특정색을 표현하는 방법이다.
HEX 표기법: Red, Green, Blue에 해당하는 값을 각각 16진수로 변환해 나타내는 표기법이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
color:red;
}
h2 {
color:rgb(255,0,0)
}
h3{
color:#ff0000
}
</style>
</head>
<body>
<h1>red</h1>
<h2>red</h2>
<h3>red</h3>
</body>
</html>
2. 텍스트 속성
-font-family 속성
font-family 속성을 사용하면 글꼴을 지정할수 있다.
-font-size 속성
font-size 속성은 텍스트 크기를 변경할 수 있다.
-font-weight 속성
font-weight 속성은 텍스트이 굵기를 지정할 수 있다.
-font-style 속성
font-style속성은 글꼴의 스타일을 지정할때 사용한다.
-font-variant 속성
font-variant 속성은 영문텍스트를 크기가 작은 대문자로 변경할때 사용한다.
-color 속성
텍스트이 색상을 지정할때 사용한다.
-text-align 속성
text-align속성은 텍스트를 정렬 할때 사용한다.
text-align:left //왼쪽
text-align: right //오른쪽
text-align: center //중앙
text-align: justify //텍스트 양쪽
-text-decoration 속성
text-decoration 속성은 텍스트를 꾸며 주기 위해 사용한다.
text-decoration: none //텍스트 장식 모두 지우기
text-decoration: line-through //텍스트 중간을 관통하는 선 긋기
text-decoration: overline // 텍스트 위에 선 긋기
text-decoration: underlone //텍스트 아래에 선 긋기
-letter-spacing
letter-spacing은 글자 사이의 간격을 조절할때 사용한다.
-line-height 속성
line-height 속성은 텍스트 한 줄의 높이를 지정할때 사용하는 속성이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.font_big {font-size: 2em;}
.font_italic { font-style: italic;}
.font_bold { font-weight: bold;}
.font_center { text-align: center;}
.font_left { text-align: left;}
.font_color { color:brown;}
</style>
</head>
<body>
<p class="font_big font_italic font_bold font_center">나도코딩</p>
<p class="font_bold font_left font_color">HTML</p>
<p class="font_center">열심히 해보자꾸나~</p>
</body>
</html>
3. 박스모델 구성하기
- margin 영역
요소의 외부 여백을 의미한다.
- border 영역
요소의 테두리를 의미한다.
-padding영역
요소의 내부 여백을 의미한다.
-content
요소의 내용을 의미한다.
4. 배경 설정하기
-background-color 속성
배경에 색상을 넣을때 사용한다.
- background-image 속성
배경안에 이미지를 넣을때 사용한다,
-background-repeat 속성
이미지가 작은 경우 이미지를 반복해서 채운다.
-background-size 속성
이미지의 크기를 정할때 사용한다.
-background-position 속성
이미지의 위치를 결정할때 사용한다.
-background-attatchment 속성
삽입된 이미지를 스크롤 할 때 , 이미지의 작동방식을 결정한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px; height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
'학습단 > HTML+CSS+Javascript 학습단' 카테고리의 다른 글
| 6장 효과적인 레이아웃을 위한 CSS 속성 다루기 (0) | 2023.03.14 |
|---|---|
| 5-2장 css 필수 속성 다루기 (0) | 2023.03.13 |
| 4장 CSS 선택자 다루기 (0) | 2023.03.10 |
| 3-2장 실무에서 자주 사용하는 HTML 필수 태그 다루기 (0) | 2023.03.09 |
| 3장 실무에서 자주 사용하는 HTML 필수 태그 다루기 (2) | 2023.03.08 |
