웹 프로그래밍/CSS

생활코딩 박스모델

mcdn 2021. 7. 14. 11:59
반응형

이번 시간은 박스모델에 대해서 배울 예정 

 

<!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>Document</title>
</head>
<body>
	<h1>CSS</h1>
Cascading Style Sheets (CSS) is a style sheet language used for 
describing the presentation of a document written in a markup language.[1] 

</body>
</html>

 

가장 기본 첫 코드

<h1>을 하면 CSS가 제목처럼 변한다 

 

<!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>Document</title>
</head>
<body>
	<h1>CSS</h1>
Cascading Style Sheets (<a href="https://ko.wikipedia.org/wiki/CSS">CSS</a>) is a style sheet language used for 
describing the presentation of a document written in a markup language.[1] 

</body>
</html>

<a> href 로 link 삽입 

 

 

<h1>은 화면 전체를 쓰므로 줄바꿈을 해준다 

<a>은 화면 전체를 쓰지 않는다. 

 

이 사람의 부피를 알기 좋은 건 부피감을 알 수 있다. 

 

<style>태그 안에 모든 h1에 대해서 border-width :5px 

border-color:red;

border-style: solid 

로 하면 그 사람의 border를 알 수 있다. 

똑같이 카피해서 a를 하면. a 도 자기 컨텐츠 만큼 알 수 있다. 

 

<!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>Document</title>
</head>
<style>
	h1{
		border-width:5px;
		border-color:red;
		border-style:solid;
	}
	a{
		border-width:5px;
		border-color:red;
		border-style:solid;
	}
</style>
<body>
	<h1>CSS</h1>
Cascading Style Sheets (<a href="https://ko.wikipedia.org/wiki/CSS">CSS</a>) is a style sheet language used for 
describing the presentation of a document written in a markup language.[1] 

</body>
</html>

전체화면을 쓰는 css h1과 그 부분만 차지하는 css a 선택자 

 

화면 전체를 쓰는 코드를 : 블록 레벨 엘리먼트 block level element 

자기 컨텐츠만 쓰는 코드 : inline element 

 

화면 전체 코드를 display:inline;이라고 하면 

inline처럼 작동한다 

 

<!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>Document</title>
</head>
<style>
	h1{
		border-width:5px;
		border-color:red;
		border-style:solid;
		display:inline;
	}
	a{
		border-width:5px;
		border-color:red;
		border-style:solid;
	}
</style>
<body>
	<h1>CSS</h1>
Cascading Style Sheets (<a href="https://ko.wikipedia.org/wiki/CSS">CSS</a>) is a style sheet language used for 
describing the presentation of a document written in a markup language.[1] 

</body>
</html>

<h1>태그 부분에서 css 줄바꿈이 사라졌다. 

display:inline 

 

크게 중요하지 않고 고칠 수 있다가 중요 

참고로 display:none하면 사라진다!!! 

 

컴팩트하게 압축해보자 

style부분에 박스들이 중복하고 있다. 

h1, a{

}

이렇게 해도 된다. 

 

그리고 border-width, border-color, border-line 부분이 모두 border가 중복된다 

이걸 한 줄에 모두 쓸 수 있다. 

 

<!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>Document</title>
</head>
<style>
	h1, a {
		border:5px solid red;
	}
</style>
<body>
	<h1>CSS</h1>
Cascading Style Sheets (<a href="https://ko.wikipedia.org/wiki/CSS">CSS</a>) is a style sheet language used for 
describing the presentation of a document written in a markup language.[1] 

</body>
</html>

 

이러면 모양은 같지만 중복이 획기적으로 많이 사라짐! 

border:부분   순서는 중요하지 않다 

 

컨텐트와 테두리에 여백을 주고 싶다. 그러면 패딩을 준다 

padding:20px 

 

<!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>Document</title>
</head>
<style>
	h1{
		border:5px solid red;
		padding:20px;
	}
</style>
<body>
	<h1>CSS</h1>
Cascading Style Sheets (<a href="https://ko.wikipedia.org/wiki/CSS">CSS</a>) is a style sheet language used for 
describing the presentation of a document written in a markup language.[1] 

</body>
</html>

padding 주기 전 

padding:20px 주고 난 후 css의 테두리와 여백이 꽤 생겼다 

 

 

뒤에 margin:0을 하면 

Cascading... 부분이랑 딱 달라붙게 되는데 margin은 바깥 여백을 의미하기 때문 

 

그리고 width 를 설정하면 

본래 display:block으로 인해 전체 화면을 쓰지만 

이제 박스모델의 가로 길이를 조절할 수 있다. 

 

<!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>Document</title>
</head>
<style>
	h1{
		border:5px solid red;
		padding:20px;
		margin:0;
		display:block;
		width:100px;
	}
</style>
<body>
	<h1>CSS</h1>
Cascading Style Sheets (<a href="https://ko.wikipedia.org/wiki/CSS">CSS</a>) is a style sheet language used for 
describing the presentation of a document written in a markup language.[1] 

</body>
</html>

최종 코드 

 

개발자 도구를 사용해서 css style을 볼 수 있다 

 

css는 화면 크기를 전체 쓰기도 하고 자기만의 크기를 갖고 있다 

width 

margin padding 여백을 설정할 수 있다. 

이걸 박스모델이라 한다 

태그 하나하나를 부피 를 의미하고 디자인 핵심이다!! 

 

 

반응형

'웹 프로그래밍 > CSS' 카테고리의 다른 글

생활코딩 css 반응형 디자인과 미디어 쿼리 소개  (0) 2021.07.14
생활코딩 css 그리드2 그리드 써먹기  (0) 2021.07.14
생활코딩 css 그리드  (0) 2021.07.14
생활코딩 박스모델2 줄긋기  (0) 2021.07.14
생활코딩 css 선택자를 스스로 알아내는 방법  (0) 2021.07.12
생활코딩 css속성을 스스로 알아내는 방법  (0) 2021.07.12
생활코딩 css 혁명적 변화  (0) 2021.07.12
생활코딩 css의 등장  (0) 2021.07.12

'웹 프로그래밍/CSS'의 다른글

  • 현재글생활코딩 박스모델

관련글

댓글

티스토리툴바