목표
- display 속성중 하나인 inline 속성에 대해 이해한다.
- inline속성과 block 속성의 차이를 이해한다.
display 속성이란?
- display는 화면에 보여주다는 의미한다.
- display 속성은 어떻게 화면에 보여줄지를 결정한다.
- display 속성중 none은 화면에 보여주지 않는다.
display inline 속성이란?
- display의 속성은 inline, block, none, inline-block 등 여러가지 존재
- inline 속성은 display의 default 값 ( display을 지정하지 않으면 inline 값을 가진다. )
- inline 속성을 가진 tag로는 <strong/>, <a/> , <b/>
- inline 속성은 줄 속에 넣는 요소. 즉 줄바꿈되지 않는다. 한줄에 여러개가 배치 가능하다.
inline 속성과 block 속성의 차이
- inline 속성은 줄 속에 넣는 요소. 즉 줄바꿈되지 않는다. 한줄에 여러개가 배치 가능하다.
- inline 속성을 가진 tag로는 <strong/>, <a/>, <b/>
- block 속성은 한줄에 하나만 배치, 즉 줄바꿈된다. 한줄에 여러개가 배치가 불가능하다.
- block 속성을 가진 tag로는 <div/>, <p/>, <ul/>, <ol/>
inline 속성의 특징
- width (너비), height (높이) 설정 불가
- margin-top, margin-bottom 설정 불가
- padding은 설정 가능, 공간을 차지하지 않는다.
- boader 설정 가능
inline 속성과 block 속성의 차이 이해하기
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
</head>
<body>
<h1>메인화면</h1>
<p>안녕하세요!! 늘푸른 개발자입니다.</p>
</body>
</html>
실행결과
- 늘푸른 개발자를 좀더 강조하고자 그 부분만 글씨크기와, 배경색을 바꾸고자 한다.
- block 속성을 가진 태그를 사용한다면 줄바꿈이 일어나기 때문에 inline 속성을 가진 태그를 사용한다.
- inline 속성을 가지고 강조한다는 의미를 가진 strong 태그를 사용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<style>
strong {
font-size : 1.5em;
background-color: yellow;
}
</style>
</head>
<body>
<h1>메인화면</h1>
<p>안녕하세요!! <strong>늘푸른 개발자</strong>입니다.</p>
</body>
</html>
실행결과
- block 속성을 가진 태그인 <div/>로 바꿔보자
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<style>
div {
font-weight: bold;
font-size : 1.5em;
background-color: yellow;
}
</style>
</head>
<body>
<h1>메인화면</h1>
<p>안녕하세요!! <div>늘푸른 개발자</div>입니다.</p>
</body>
</html>
실행결과
정리
- inline 속성은 텍스트를 변경하는데 용의
- block 속성은 정보를 표현하는데 용의
출처
https://aboooks.tistory.com/85
https://www.youtube.com/watch?v=CwEzDMTpQHY