반응형
HTML은 웹페이지의 내용을 작성을 하는 역할이라면 CSS는 작성된 내용을 디자인하는 역할이다.
CSS구조는 기본 골격은 [속성: 속성값;] 형태이다.
HTML파일안에 CSS코드를 적어서 디자인을 할 수 있지만 그렇게 하면 코드가 너무 길고 가독성이 안 좋아지기 때문에 CSS파일을 따로 만들어서 HTML파일에 연결을 시킨다.
HTML파일과 CSS파일 연결
<html>
<head>
<link rel="stylesheet" href="design.css">
</head>
</html><link rel="stylesheet" href="design.css">
: head태그안에 위의 코드를 입력하여 CSS와 HTML을 연동시킨다. href에는 CSS파일이름을 적어준다.
CSS 사용하기
CSS는 디자인할 HTML 태그를 입력하고 중괄호 그리고 속성, 속성값을 입력하면 된다.
<html>
<head>
<meta charset="UTF-8">
<title>html 연습장</title>
</head>
<body>
<h1>hello</h1>
<h2>hello</h2>
<p>hello</p>
</body>
<html>h1 {
color: red;
}
h2{
font-size: 100px;
}
p{
color: blue;
}태그{
속성: 속성값;
}
대표적인 속성 종류
| 속성 | 속성 값 예시 | 내용 |
| font-size | 100px | 글자 크기 |
| text-align | left, right, center | 텍스트 정렬 |
| color | blue, red, black | 글자 색 |
| font-weight | bold, normal | 글자 굵기 |
| font-family | cursive | 폰트 이름 |
| margin | 10px | 바깥쪽 여백 |
| padding | 10px | 테두리 안쪽 여백 |
| font-style | italic | 폰트종류 |
| background-color | skyblue, green | 배경 색 |
색깔 사용하기
색깔값을 나타내는 방법은 총 3가지가있다. 색깔이름, rgb값 그리고 HEX값이다.
https://htmlcolorcodes.com/ 이 사이트에 들어가면 색깔을 3가지 값으로 볼수 있다.
color: blue;
color: #072FF8;
color: rgb(7, 47, 248);색깔속성 값중에 rgba값이 있는데 투명도를 포함하여 나타낸다. 예를 들어 투명도 50%이면 0.5로 나타낸다.
color: rgba(4.32.65.0.5);
그 외의 속성들
중앙정렬하기
margin-left: auto;
margin-right: auto;두개를 같이 사용하면 중앙에 정렬이 된다.
border 속성사용
border의 속성값은 3개를 같이 사용한다.
[border: 두깨 스타일 색깔;]
border: 10px solid red;
box-shadow 속성 사용
그림자를 표현할때 사용하는 속성이다.
[box-shadow: X축그림자 Y축그림자 흐림정도(blur) 퍼짐정도(spread) 색]
box-shadow: 1px 2px 20px 5px rgba(0,0,0,0.5);X축과 Y축그림자는 음수값도 사용가능하다. 양수와 음수는 방향을 나타낸다.
반응형
'Front-End > HTML,CSS' 카테고리의 다른 글
| HTML, padding, border, margin (1) | 2023.10.19 |
|---|---|
| HTML 태그 이름 붙이기, class, div 태그 (2) | 2023.10.19 |
| HTML의 head와 body (0) | 2023.10.19 |
| HTML의 기본 골격 구조 (0) | 2023.10.19 |
