box 모델
1.block모델: 배치가 아래로 감
ex)div, p, h1-h6 ...
2.inline모델: 배치가 옆으로 감
ex)a, span
3.inline-block모델: line과 block의 속성을 모두 가짐
4.block -> inline변경:display:inline, display:inline-block
- inline:width,height,padding-top 줄 수 없음
- inline-block:width,heigh,padding-top 줄 수 있음
<style> .box1{ display:inline; } .box2{ display:inline-block; width: 50px; height: 50px; background: yellow; } </style> <body> <div class="box1">box1</div> <div class="box2">box2</div> </body> //block 모델인 div태그를 inline모델과 inline-block모델로 바꿈 //inline-block모델은 width,height을 줄 수 있음 inline은 X //inline모델로 바꾸면 아래로 배치되면 div태그가 옆으로 배치됨
5.inline -> block변경:dispaly:block;
<style>
a{
display:block;
}
</style>
<body>
<a href="#">Home</a><a href="#">join</a>
</body>
//inline모델인 a태그를 block모델로 바꿈
//block모델로 바꾸면 옆으로 배치되던 a태그가 아래로 배치됨
selector
1.자식 선택자(>):부모 아래있는 첫번째 자식만 적용
section>p {color:blue;}
=section밑 첫번째 p만 컬러 블루 적용
<style>
ul>li{
font-size:30px;
}
</style>
<body>
<ul>
<li>직접통화</li>
<li>문자남기기</li>
</ul>
</body>
//ul밑 첫번째 li만 폰트사이즈 30px 적용
2.자속 선택자(빈칸):부모 아래있는 모든 자손들에게 적용
section p{background:gray;}
=section 밑 모든 p태그에 배경 그레이 적용
<style>
ul li{
color:red;
}
</style>
<body>
<ul>
<li>직접통화</li>
<li>문자남기기</li>
</ul>
</body>
//ul밑 모든 li에 컬러 red 적용3.형제 선택자:같은 부모를 가진 형제들 사이에 적용
1)div+h1
:div태그의 형제 중 첫번째 h1에만 적용
2)div~h1
:div태그의 형제 중 모든 h1에 적용
<style>
div+h1{
color:yellow;
}
div~h1{
background:black;
}
</style>
<body>
<div class="txt1">
<p>자식</p>
</div>
<h1>제목</h1>
<h1>제목2</h1>
</body>
//div태그의 형제 중 첫번째 h1에만 컬러 yellow 적용
//div태그의 형제 중 모든 h1에 배경 black 적용4.속성 선택자:지정한 속성을 가진 태그에 적용
a[href]{
color:red;}
=a태그에 href속성을 가진 태그에 적용
<style>
a[target="-blank"]{
color:green;
}
</style>
<body>
<a href="#">home</a>
<a target="_blank">logout</a>
</body>
//target blank를 지정한 속성에만 컬러 green 적용 -> logout만 컬러 green
배운 거 머리에 집어넣기 위한 블로그