[블록 요소]
- (style 설정 따로 안할 시) 페이지의 전체 너비를 차지
- 항상 새 줄에서 시작함=줄바꿈이 자동으로 발생.
줄 바꿈 원하지 않는다면, css에서 style를 display: inline;
- 대표적인 예 :
<div>, <p>, <h1>, <ul>, <ol> 등이 있습니다.
- 용도: 주로 큰 구조적 요소를 만들거나 레이아웃을 구성할 때 사용
<div> : 따로 의미는 갖지 않고, 관련된 콘텐츠를 그룹화하여 의미적으로 연결하거나, 웹 페이지의 구조를 나누고 다양한 섹션을 만드는 데 사용
<!DOCTYPE html
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
background: orange;
width: 150px;
height: 100px;
}
p {
background: violet;
width: 120px;
<!-- display 적으로만 block요소를 inline으로 변경(줄바꿈 없앰) -->
display: inline;
}
ul {
background: aqua;
}
</style>
</head>
<body>
<div>기타등등</div>
<h1>블록요소1</h1>
<p>블록요소2</p>
<ul>블록요소3</ul>
</body>
</html>
[인라인 요소]
- 필요한 만큼의 너비만 차지
- 줄 바꿈 없이 다른 인라인 요소와 같은 줄에 배치됨
줄 바꿈 원하면, css에서 style를 display: block;
- 대표적인 예:
<span>, <a>, <strong>, <img> 등
<span> : 따로 의미는 갖지 않고, 그룹화 하는 데 사용 <b> vs <strong> vs <font-weight: bold;>:
<b> : 시각적으로만 강조됨. html 언어
<strong> : 접근성 도구+시각적으로 강조됨. html 언어
<font-weight: bold;> : 시각적으로만 강조됨. css 언어
<i> vs <em> vs<>
<i> : 시각적으로만 강조
<em> : 시각적+접근성 도구
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
background: orange;
width: 1500px;
height: 1000px;
}
em {
background: violet;
width: 300px;
height: 100px;
display: inline;
}
a {
background: aqua;
}
</style>
</head>
<body>
<span>인라인요소1</span>
<em>인라인요소2</em>
<a>인라인요소3</a>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
em {
font-style: normal;
color: red;
}
span {
font-family: '궁서체', cursive;
}
</style>
</head>
<body>
<h1>뉴스 제목</h1>
<p>
국회는 상호원조 또는 <em>안전보장</em>에
관한 조약, 중요한 <span>국제조직</span>에 관한
조약, 우호통상항해조약, 주권의
제약에 관한 조약, 강화조약,
국가나 국민에게 중대한 재정적
부담을 지우는 조약 또는
입법사항에 관한 조약의
체결·비준에 대한 동의권을 가진다.
</p>
</body>
</html>
