클래스 (class)
css에 디자인 속성을 일일히 지정해 줘야 하는데
이런 귀찮음을 해소할 수 있는게 바로 '클래스' 선택자이다.
class의 이름을 지정해줘야 한다.
class 이름을 'lighter' 라고 하겠다.
#html 코드
<div class = 'light'>
볼드체
</div>
#css 파일에서 클래스를 불러올 떄는 '.클래스명' 으로 입력
.light{
font-weight: lighter;
}html에 bold 클래스 이름을 붙이고, css에서 위와 같이 실행하면
모든 bold 클래스가 두꺼운 볼드체로 적용된다.
패딩(padding)과 마진(margin)
패딩과 마진은 웹 페이지에서 여백으로 사용되는 요소이다.
패딩(padding) : 속을 넣다, 채워 넣다
마진(margin) : 여백, 여유'
파란색 부분이 콘텐츠, 초록색 부분이 패딩, 주황색 부분이 마진이다
패딩과 마진이 중요한 이유는 바로 가독성 때문이다
패딩과 마진은 아래 코드처럼 작성하면 된다.
padding : 20px; 상하좌우 20px로 지정
padding: 3px 10px; 상하 = 3px, 좌우 = 10px
padding: 5px 10px 3px; 위쪽= 5px, 좌우= 10px 아래쪽 = 3px
padding: 5px 10px 7px 3px; 위쪽 = 5px. 오른쪽= 10px, 아래쪽 = 7px, 왼쪽 = 3px으로 지정
margin: 20px; 상하좌우 = 20px로 지정
margin: 3px 10px; 상하 = 3px, 좌우 = 10px로 지정
margin: 5px 10px 3px; 위쪽 = 5px, 좌우 = 10px, 아래쪽 = 3px으로 지정
margin: 5px 10px 7px 3px; 위쪽 = 5px, 오른쪽 = 10px, 아래쪽 = 7px, 왼쪽 = 3px으로 지정width과 height가 300px인 하늘색 박스를 만들고
padding과 margin을 상하좌우 모두 30px로 지정
#html
<!DOCTYPE html>
<html lang = 'ko'>
<head>
<meta charset='UTF-8'>
<title>zzuzzu의 웹사이트</title>
<link rel ='stylesheet' href = './style.css'/>
</head>
<body>
<div class = 'box1'>
콘텐츠
</div>
</body>
</html>#css
div{
width : 300px;
height : 300px;
}
.box1{
background-color :lightblue;
padding: 30px;
margin: 30px;
}#결과
여기서는 마진의 폭이 전체 화면으로 지정됐다.
개발자 도구에 들어가서 보면
입력하지 않은 'div { display: block;}' 라는 요소가 자동으로 배치되어있다.
'display: block'은 앞뒤로 줄바꿈이 이루어져서 가로는 100% 세로는 내용만큼 차지한다.
그래서 'display:inline-block;'을 이용할것이다.
"display: inline-block;"을 사용하면 줄바꿈 없이 박스를 표시할 수 있다.
패딩과 마진이 제대로 적용되었다.
예시
#html
<!DOCTYPE html>
<html lang = 'ko'>
<head>
<meta charset='UTF-8'>
<title>zzuzzu의 웹사이트</title>
<link rel ='stylesheet' href = './style6.css'/>
</head>
<body>
<div class = 'box'>
1. tomboy - 여자아이들
</div>
<div class = 'box'>
2. 스물다섯, 스물하나 - 자우림
</div>
<div class = 'box'>
3. 고백 - 뜨거운 감자
</div>
<div class = 'box'>
4. 정이라고 하자 - 서동현
</div>
<div class = 'box'>
5. 비상 - 임재범
</div>
</body>
</html>#css
.box{
padding : 20px;
margin : 30px;
background-color: lightgreen;
}#결과
★ 정리하기 ★
✔ 클래스
✔ 패딩과 마진
- 패딩 : 콘텐츠 내부 여백
- 마진 : 콘텐츠 외부 여백
'Web 개발 > [HTML,CSS]' 카테고리의 다른 글
| [HTML/CSS] 7. 도형만들기 (0) | 2022.07.08 |
|---|---|
| [HTML/CSS] 6. 단위와 위치 (0) | 2022.07.03 |
| [HTML/CSS] 4. css (0) | 2022.07.01 |
| [HTML/CSS] 3. 중요태그 정리 (0) | 2022.06.30 |
| [HTML/CSS] 2. HTML의 기본 구조 (0) | 2022.06.30 |
