WEB/HTML, CSS
CSS - Classes, inline Block(4)
아랑팡팡
2023. 12. 9. 23:40
728x90
CSS - Classes, inline Block
1. lnline
- inline 요소는 높이와 너비를 가질 수 없다.
- padding 요소는 사방에 가질 수 있다.
위 상황에서 위 아래 margin을 적용하고 싶다면 inline요소를 block로 수정해야한다.
<!DOCTYPE html>
<html lang="kr">
<head>
<link rel="shortcut icon" href="https://assets.nflxext.com/en_us/layout/ecweb/netflix-app-icon_152.jpg" />
<meta charset="UTF-8">
<title>HTML 연습</title>
<link rel="stylesheet" href="styles.css" />
<style>
body {
margin: 20px;
}
span {
background-color: teal;
padding: 20px;
margin: 30px;
}
</style>
</head>
<body>
<span>hello</span>
<span>hello</span>
</html>
line요소
- span : inline요소로 텍스트를 묶기 위해 사용
2. Class
<!DOCTYPE html>
<html lang="kr">
<head>
<link rel="shortcut icon" href="https://assets.nflxext.com/en_us/layout/ecweb/netflix-app-icon_152.jpg" />
<meta charset="UTF-8">
<title>HTML 연습</title>
<link rel="stylesheet" href="styles.css" />
<style>
body {
margin: 20px;
}
.btn {
padding: 20px;
margin: 30px;
padding: 5px 10px;
border-radius: 10px;
}
.teal {
background-color: teal;
}
.green {
background-color: green;
color: white;
}
</style>
</head>
<body>
<span class="teal btn">hello</span>
<span class="green btn">hello</span>
<span class="teal btn">hello</span>
<span class="green btn">hello</span>
<span class="teal btn">hello</span>
<span class="green btn">hello</span>
</html>
Class
- .으로 시작하고 클래스 이름이 뒤에온다. ex) .className .class1
- 선택자로 해당 클래스가 적용된 모든 HTML요소에 스타일 규칙을 적용할 수 있다.
- HTML요소에 클래스를 적용하면 class속성을 사용할 수 있다.
ex) <div class="className">
- Class의 장점으로 재사용성, 유지보수, 구체성이 있다.
3. display
inline-block의 문제점
- 반응형 디자인(Responsive Design)을 지원하지 않는다.
- inline-block는 block가 inline속성을 가질 수 있게 한다. 하지만 정해진 형식이 없어 깔끔하지 못하다.
<!DOCTYPE html>
<html lang="kr">
<head>
<link rel="shortcut icon" href="https://assets.nflxext.com/en_us/layout/ecweb/netflix-app-icon_152.jpg" />
<meta charset="UTF-8">
<title>HTML 연습</title>
<link rel="stylesheet" href="styles.css" />
<style>
body {
margin: 20px;
}
div {
display: inline-block;
width: 50px;
height: 50px;
background-color: teal;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</html>
728x90
반응형
LIST