-
[CSS] 블록 모델, 그리드Web/CSS 2020. 5. 15. 05:54
블록 모델
-블록 레벨 엘리먼트: 화면 전체를 사용하는 태그
-인라인 엘리먼트: 자신의 부피만큼을 사용하는 태그
display: inline; 속성 사용하여 블록 레벨 엘리먼트라도 인라인 엘리먼트처럼 자신의 부피만큼 사용 가능.
1. 테두리 그리기
<style>
h1{
border-width: 5px; 테두리의 두께
border-color: red; 테두리의 색상
border-style: solid; 테두리의 스타일, 점선인지 실선인지, solid는 단선
}
</style>
2. 중복 제거하기
<style>
h1{
border: 5px solid red; <- 속성값들의 순서는 중요하지 않음.
}
</style>
3. 콘텐츠와 테두리 사이에 여백을 주고 싶다면 (padding 값 추가)
<style>
h1{
border: 5px solid red;
padding: 20px;
}
</style>
4. 테두리와 테두리 간 간격을 없애고 싶으면 margin 속성을 제거
<style>
h1{
border: 5px solid red;
padding: 20px;
margin: 0;
}
</style>
5. <h1> 태그는 박스 모델상 dispay:block; 이 생략되어 있는 상태며 화면 전체를 사용하고 있음. 이를 바꾸기 위해 width 값으로 100px를 지정하면 100px만큼 태그의 크기가 변경됨.
<style>
h1{
border: 5px solid red;
padding: 20px;
margin: 0;
width: 100px;
}
</style>
- <h1> 태그에 아래쪽 테두리 만들기
<style>
h1{
font-size: 45px;
text-align: center;
border: 1px solid gray;
}
</style>
margin 값 때문에 위쪽과 아래쪽의 여백 크기가 다름.(개발자 도구로 확인 가능) 따라서 앞의 코드에서 margin을 없애 준다.
<style>
h1{
font-size: 45px;
text-align: center;
border: 1px solid gray;
margin: 0px;
}
</style>
텍스트랑 테두리가 너무 달라붙을 경우, padding 값을 지정해 준다.
<style>
h1{
font-size: 45px;
text-align: center;
border: 1px solid gray;
margin: 0px;
padding: 20px;
}
</style>
- <ol> 태그에 오른쪽 테두리 만들기
<style>
ol{
border-right: 1px solid gray
}
</style>
<ol> 태그는 화면 전체를 쓰는 블록 레벨 엘리먼트이기 때문에, width 값을 지정해서 <ol> 태그의 크기를 지정해야 함.
<style>
ol{
border-right: 1px solid gray
width: 100px;
}
</style>
테두리와 화면 전체의 여백이 생기기 때문에, margin 값을 없애 준다
<style>
ol{
border-right: 1px solid gray
width: 100px;
margin: 0px;
}
</style>
body 태그의 margin 값을 제거한다.
body{
margin: 0px;
}
-그리드
두 개의 태그를 나란히 배치하고 싶으면 그것을 감싸는 부모 태그가 필요함.
디자인을 위해 어떤 의미도 없는 태그를 사용해야 할 때가 있는데, 그럴 때 사용하는 무색 무취의 태그가 바로 <div> 임. division의 약자
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>살려주세요</title>
</head>
<body>
<div>으아아아아아아아ㅏ아악</div>
<div>살려주세요</div>
</body>
</html>
div 태그는 기본적으로 블록 레벨 엘리먼트이기 때문에 줄바꿈이 됨. <div> 태그와 같은 목적으로 고안된 것이 <span> 태그.(인라인 엘리먼트) 목적에 따라 사용
두 개의 요소를 나란히 놓기 위해 그리드 사용, 그러려면 두 개의 태그를 감싸는 부모가 필요함
<div>
<div>으아아아아아아아ㅏ아악</div>
<div>살려주세요</div>
</div>
부모 태그의 id 값을 'grid'로 지정.
<div id="grid">
<div>으아아아아아아아ㅏ아악</div>
<div>살려주세요</div>
</div>
grid-template-columns 속성을 추가한 다음 첫 번째 칼럼은 150px 정도의 부피를 갖고, 두 번째 칼럼은 나머지 공간을 다 쓴다는 의미로 1fr 지정
<style>
#grid{
border-bottom: 1px solid gray;
display: grid;
grid-template-columns: 150px 1fr;
}
</style>
www.evernote.com/l/Alcr6o0QHDxMkYQAIbRTe7tyI3Ezzv6_VDA/
블록 모델, 그리드
블록 모델 -블록 레벨 엘리먼트: 화면 전체를 사용하는 태그 -인라인 엘리먼트: 자신의 부피만큼을 사용하는 태그 display: inline; 속성 사용하여 블록 레벨 엘리먼트라도 인라인 엘리먼트처럼 자신
www.evernote.com
www.evernote.com/pub/highcolor9871/webdesign
Evernote 공유 노트북:
www.evernote.com
'Web > CSS' 카테고리의 다른 글
[CSS] 분할태그와 CSS응용, block을 이용한 레이아웃 설계 (0) 2020.05.16 [CSS] CSS의 이해, CSS의 선택자, 웹폰트 적용 방법, 벤더 프리픽스 (0) 2020.05.16 [CSS] CSS 코드의 재사용 (0) 2020.05.16 [CSS] 미디어 쿼리 (0) 2020.05.16 [CSS] css를 이용한 텍스트 꾸미기, 사진 정렬, class와 id 선택자 (0) 2020.05.15