본 게시글은 인프런 강의 "CSS 기본부터 활용까지"를 보고 공부한 내용을 정리하고 있습니다.
[무료] CSS 기본부터 활용까지 - 인프런 | 강의
CSS는 HTML을 아름답게 꾸며주는 디자이너의 언어입니다. CSS는 디지털 컨텐츠를 생산하는 사람들에게는 붓 질과 같은 것이 아닐까 싶습니다. 이 수업에서는 디지털 붓 질을 하는 법을 알려드립니
www.inflearn.com
인라인 VS 블럭레벨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Hello world</h1>
스타벅스 <a href="http://www.naver.com">아메</a>리카노
</body>
</html>
다음 코드의 실행 결과이다.
왜 h1태그는 줄바꿈이 자동으로 일어나고 a태그는 줄바꿈이 나타나지 않을까?
<style>
h1,a{
border:1px solid red;
}
</style>스타일 시트를 통해 각각의 영역을 보자.
style border을 통해 각각의영역을 보면
h1태그는 좌측처음부터 우측 끝까지의 영역을 차지하고, (블럭레벨 엘리먼트)
a태그는 텍스트의 크기만큼 영역을 차지한다. (인라인레벨 엘리먼트)
보통 제목태그를 사용하면 줄바꿈을 사용하고, a태그를 사용하면 줄바꿈을 사용하지 않기 때문에 코드를 효율적으로 짜기 위해 다음과 같이 실행된다.
일라인 레벨을 블럭레벨로 블럭 레벨을 인라인 레벨로 바꿀수 없을까?
h1 {
display: inline;
}
a {
display: block
}다음과 같이 코드를 짜면,
블럭레벨인 h1은 인라인레벨로, 인라인 레벨인 a태크는 블럭레벨로 바뀐다.
'프론트엔드 > CSS' 카테고리의 다른 글
| [css] flex공부 블로그 (0) | 2022.12.05 |
|---|---|
| CSS 기본부터 활용까지 - 박스모델 (0) | 2022.07.29 |
| CSS 기본부터 활용까지 - 웹폰트 (구글 웹폰트 사용) (0) | 2022.07.29 |
| CSS 기본부터 활용까지 - Font (0) | 2022.07.29 |
| CSS 기본부터 활용까지 - text : align (0) | 2022.07.29 |