CSS -html안에서 css효과 적용
참고 : 브라우저가 CSS를 읽을 때 위에서부터 순서대로 읽는다.
만약 같은 selector를 가리키는 css가 여러개면 가장 마지막 스타일이 적용된다.
-> 즉, 코드의 순서가 결과에 영향을 미침
📌Blocks and Inlines
<head>
<style>
div {
height: 150px;
width: 150px;
background-color: tomato;
}
span {
background-color: turquoise;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<span>hello</span>
<span>hello</span>
<span>hello</span>
</body>👉결과
저 빨간 네모가 하나처럼 보이지만 아니야!
네모가 3개 붙어있는거임
span은 옆에 다른 요소가 올 수 있는데 box는 올 수 없는모습
block : 옆에 다른 요소가 못 오는거
inline : 다른요소 올 수 있는거 ex) span, a, image.. 이거 제외 나머지 대부분들은 block임
📌Margin Part One
<!--display속성 : block을 inline으로 inline을 block으로 바꾸는거-->
div {
display: inline;
height: 150px;
width: 150px;
background-color: tomato;
}
span {
display: block;
background-color: turquoise;
}👉결과
빨간박스 어디감?
⇒ inline요소는 높이와 너비를 가질 수 없어서 사라짐
inline은 높이와 너비가 없고 block은 높이와 너비가 있음
<head>
<style>
html {
background-color: tomato;
}
div {
height: 150px;
width: 150px;
background-color: white;
}
</style>
</head>
<body>
<div></div>
</body>👉결과
근데 하얀 네모랑 빨간 네모에 저 틈 보여?? 하얀 네모가 왜 왼쪽위로 딱 안붙어있고 좀 띄어있을까?
margin은 box의 border(경계)의 바깥에 있는 공간.
<style>
html {
background-color: tomato;
}
body {
background-color: thistle;
}
div {
margin: 0;
height: 150px;
width: 150px;
background-color: white;
}
</style>👉결과
<!--margin 없애는 방법-->
body {
margin: 0;
background-color: thistle;
}👉결과
<!--margin값 주기-->
div {
margin-left: 100px;
height: 150px;
width: 150px;
background-color: white;
}👉결과
📌Margin Part Two
margin-top,left,right,bottom등등 여러가지 있어
- margin: 20px;
⇒ 위아래왼쪽오른쪽 사방전부 20px- margin: 20px 15px;
⇒ margin값이 2개면 맨 처음값은 상하, 뒤에값은 좌우를 뜻함 위아래 20px 왼쪽오른쪽 15px- margin: 20px 5px 12px 9px;
⇒ 위20 오른쪽5 아래12 왼쪽9. 시계방향임
body {
margin: 0;
background-color: thistle;
}
div {
margin: 50px 100px;
height: 150px;
width: 150px;
background-color: white;
}👉결과
Q) 나는 하얀box만 margin 위아래를 50px로 지정했는데 왜 body부분 box까지 50px로 margin이 설정된거야? 왜?
A) 그게 바로collapsing margins 현상. 이 현상은 흰box의 경계가 보라색 box의 경계가 같을때 일어나고 그때 두 box의 margin은 하나가됨. 위 아래쪽만 일어나. 왼쪽오른쪽은 안그럼
♪(๑ᴖ◡ᴖ๑)♪ 기회는 도전에서부터 시작되는 것