코드 여행 일기

블록 레벨 요소 vs 인라인 요소 본문

CSS

블록 레벨 요소 vs 인라인 요소

할짝개발자 2023. 9. 22. 19:07
728x90
반응형

 

 

블록 레벨 요소

자기가 속한 영역의 너비를 모두 차지하는 블록을 형성한다 (ex. div, p ,h1등)

인라인 요소

자기에게 필요한 만큼의 공간만 차지한다. (ex. span, a 등)

 

h1 블록 레벨 요소 & span 인라인 요소 예문

 

 

display 속성

display 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의한다.

 

 

 

 

border 속성

border 속성을 사용하면 요소가 차지하고 있는 영역에 테두리를 그릴 수 있다.

border 속성에는 속성 값으로 테두리의 두께, 모양, 크기 등을 함께 지정할 수 있는데,

이러한 속성을 ‘단축속성’ 이라 한다.

 

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>안녕하세요</title>
		<!--display & border-->    
		<style>
        h1{background-color: red; display: inline;}
        span{ border: 2px solid green;}
    </style>
</head>
<body>
    <h1>h1 입니다.</h1>
    <span> span 입니다.</span>
</body>
</html>

 

h1 블록 에서 인라인으로 변경됨 & span 테두리

 

 

위 글은 유튜브 유노코딩 영상을 정리하여 쓴 글 입니다.

728x90
반응형

'CSS' 카테고리의 다른 글

박스모델 2편, margin padding 다루기  (0) 2023.09.24
박스모델 1편, 박스모델 소개  (0) 2023.09.22
CSS 텍스트 꾸미기 속성  (0) 2023.07.28
CSS 선택자 1  (0) 2023.07.21
CSS 기초  (0) 2023.07.21
'CSS' Related Articles more