1일차(4) Block, Inline 요소
* Block Element : 해당하는 컨텐츠 영역의 가로 행을 전부 다 차지하는 요소
* Inline Element : 해당 컨텐츠만큼의 영역(폭)만 차지하는 요소
<block 요소 예제1>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>blockElement</title>
<style>
.image-panel{
border-width: 2px;
border-style: dotted;
border-color: red;
border-radius: 10px;
}
/* 선택자에서 띄어쓰기를 하면 자식요소를 의미한다. */
.image-panel img{/* 클래스 속성의 값이 img-panel인 요소의 자식 중에서 img 선택 */
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>div요소는 문단을 나타낼 때 사용합니다.</div>
<div>문단에 해당하는 것은 문자열뿐만이 아니고 여러 가지 요소도 될 수 있습니다.</div>
<div>div요소는 폭을 100% 차지하는 block 요소입니다.</div>
<div class="image-panel">
<img src="a.png">
<img src="b.png">
</div>
<div class="image-panel">
<img src="c.png">
<img src="d.png">
</div>
<img src="e.jpg">
</body>
</html>- div : block element ↔ span : inline element
- border-width(너비) / -style(종류) / -color(색상) / -radius(곡률반경) 등 다양한 서식 적용 가능
- border-style 의 종류: solid(실선), dashed(긴 점선), dotted(점선), double(두줄), groove(움푹 들어간 선) 등
- 선택자의 띄어쓰기는 자식 요소를 의미한다.
- 부모 요소(parent element) : 상위 레벨
- 자식 요소(child element) : 하위 레벨
- 형제 요소(siblings element) : 같은레벨
- 웹페이지의 검사-console 페이지를 테스트용으로 적극 활용할 것!
console 페이지에서 라이브로 수정할수도 있음
<block 요소 예제2>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>blockElement2</title>
</head>
<body>
<h1>대제목</h1>
<h2>중제목</h2>
<h3>소제목</h3>
<h4>hn요소도 block 요소입니다.</h4>
<h5>h1~h6까지 있습니다.</h5>
<h6>h6입니다.</h6>
<p>p요소는 주로 문자열 단락(paragraph)를 구성할때 사용합니다.</p>
<p>천리길도 한걸음부터</p>
</body>
</html>
- console 페이지에서 각각의 요소들이 block 요소라는 것을 확인할 수 있다.(hn, p)
- user agent stylesheet : 따로 작성하지 않아도 웹브라우저에서 기본적으로 적용되는 css값
ex) html의 기본 글자크기는 16px
- console에서 보이는 px, em, rem 에 대해서는 하단의 단위 참고자료 보기!
<inline 요소 예제1>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>inlineElement.html</title>
<style>
.color-red{
color:red;
}
</style>
</head>
<body>
<h1>inline 요소에 대해 알아보기</h1>
<span>하나</span><span class="color-red">두울</span><span>세엣</span>
<br>
하나두울세엣
<p>span요소는 <span class="color-red">inline</span> 요소 입니다.</p>
<h2>기본 스타일을 가지고 있는 인라인 요소</h2>
<!-- b 요소는 단순히 굵은 글씨 -->
<p>천리길도 <b>한걸음</b> 부터</p>
<!-- strong 요소는 굵은 + 강조의 의미도 가지고 있다. -->
<p>천리길도 <strong>한걸음</strong> 부터</p>
<!-- i 요소는 단순히 이탤릭체 -->
<p>여러분 <i>즐거운</i> 코딩이 시작되었어요.</p>
<!-- em 요소는 이탤릭체 + 강조의 의미도 가지고 있다. -->
<p>여러분 <em>즐거운</em> 코딩이 시작되었어요.</p>
</body>
</html>- 브라우저에서 눈으로 보기에는 똑같지만, 다른 코드라는 것을 이해하기!
[br ↔ span 비교]
- br로 감싸놓은 경우에는 일부만 선택하기 어렵다.
- span으로 감싸놓은 경우는 글자의 흐름에 영향을 미치지 않으면서 특정 요소만 선택해서 다른 서식을 적용할 수 있다.
[b ↔ strong 비교]
- 브라우저-검사로 보았을 때 두 요소는 같아 보인다.
b : font-weight: bold;
strong : font-weight: bold;
→ 하지만 스크린 리더로 읽어보면 strong은 강하게 읽는다. '강조'의 의미를 포함하고 있는 요소.
(i와 em도 같은 관계)
[참고: 단위]
- px : 픽셀. 화소수
ex) 100개의 화소
- em : 물려받은 글자의 크기
ex) 물려받은 글자의 크기가 16px이라면 1em은 16px, 0.5em은 8px
물려받은 글자크기를 기준으로 상대적인 크기를 정하는 것
- rem : 무조건 html 요소의 글자 크기(16px)를 기준으로 한다.
ex) 1rem은 16px, 0.5rem은 8px
-> em 단위는 기준에 따라 상대적인 값이어서 사용하면 혼란이 따른다. 그래서 rem을 많이 쓰게 됨
[참고: 테두리 위치별 명칭]
- 테두리 위치 외워두기. margin-top,padding-left 등으로 조합해 사용
block-start = top
block-end = bottom
inline-start = left
inline-end = right
'국비교육(22-23)' 카테고리의 다른 글
| 2일차(2)/HTML 기초 : table (0) | 2022.10.06 |
|---|---|
| 2일차(1)/HTML 기초 : ul, ol, dl (0) | 2022.10.06 |
| 1일차(3)/HTML, CSS, Javascript 기초 (0) | 2022.10.06 |
| 1일차(2)/HTML, CSS, Javascript 기초 (1) | 2022.10.05 |
| 1일차(1)/HTML, CSS기초 (1) | 2022.10.05 |