반응형
1. HTML 과 CSS 연결하기
index.html파일 에서 <head>태그 안에 아래의 <link>태그를 넣어 style.css파일을 index.html파일과 연결해준다
<link href="style.css" rel="stylesheet" type="text/css" />2. [style.css] 파일 : Class 에 style을 주려면 앞에 .을 붙인다
.red{
color: red;
background-color: yellow;
text-align: center;
}
.border-blue{
border: 5px solid blue;
}
.img-size{
width: 200px;
height: 200px;
}
.margin-space{
margin-top: 40px;
margin-left: 100px;
margin-bottom: 40px;
}
.padding-space{
padding-top: 40px;
padding-left: 50px;
}
- color는 글자색, background-color는 배경색, text-align는 글자배열, border는 테두리를 나타낸다.
- width와 height는 img-size class의 가로,세로 사이즈 지정해준 것.
- margin-top 은 바깥의 위쪽에 공간을 준 것. 그 외 사방으로 공간을 줄 수 있다.
margin: 40px 100px 40px 100px; 을 주었다면 위 오른쪽 아래 왼쪽 순서대로 바깥쪽 마진공간이 생긴다.
- padding-top 은 안쪽에서 위 공간을 넓혀주었다.
바깥쪽 공간은 margin, 안쪽 공간은 padding 인 점 잊지말자!
* CSS종류는 워낙 많아서 자주 사용하는 것은 저절로 외워지긴 하지만 모를땐 구글링해서 필요에따라 찾아쓰자!
3. [index.html] 파일 : CSS주고싶은 태그안에 class를 넣어준다.
Class는 한태그안에 여러개 넣을 수 있다. 반드시 띄어쓰기로 구분 할것!
<div class="red border-blue"></div>CSS에서 만들어놓은 Class 재사용도 가능하다
반응형
'HTML과 CSS' 카테고리의 다른 글
| CSS 선택자와 선언_1 (0) | 2025.04.10 |
|---|---|
| VScode를 이용한 HTML과 CSS 연결 (0) | 2025.04.08 |
