반응형
HTML에 CSS 적용 방식
- 태그에 직접 작성하기 (인라인)
<body>
<div style="color: red;">안녕하세요</div>
</body>
- HTML에 포함하기 (내장)
<head>
<style>
div{
color: red;
}
</style>
</head>- 외부에서 가져오기
<head>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<div>HTML에 외부에서 불러오기1</div> <!-- red -->
</body>
선택자
- 태그를 이용한 선택자
<head>
<style>
div{
color: gold;
}
</style>
</head>
<body>
<div class="hi">반갑습니다~~~~~~</div>
- 클래스를 이용한 선택자
<head>
<style>
.hi{
color: gold;
}
</style>
</head>
<body>
<div class="hi">반갑습니다~~~~~~</div>
</body>
여백
margin : 외부 요소와의 간격
padding : 내부 여백
한 개의 설정으로 모든 설정값이 바뀌는 것을 단축 속성, 아래처럼 개별적으로 설정하는 것을 개별 속성이라 한다
margin-top
margin-right
margin-bottom
margin-left
반응형