반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>box-sizing / 가상태그 After, Before / 순서선택자</title>
<link rel="stylesheet" href="./css/study1.css">
</head>
<body>
<h1>box-sizing</h1>
<p>태그의 규격을 정하는 기준 기본값은 content-box로 설정 되어있다.</p>
<div class="abox">A-box</div>
<div class="bbox">B-box</div>
<hr>
<h1>가상태그 After/Before</h1>
<p>선택된 태그의 첫번째 혹은 마지막 자식 태그를 css 문법을 통해 만들 수 있는 방법(css문법)</p>
<ul class="list">
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
</ul>
<hr>
<h1>순서선택자</h1>
<p>형제 태그의 순서를 사용하여 선택자로 지정할 수 있다.</p>
</body>
</html>
*{margin: 0;padding: 0;}
.abox{
width: 400px; /*기본값 : width는 테두리(border)를 뺀 콘텐츠 박스 너비를 의미한다!*/
height: 150px;/*기본값 : height는 테두리(border)를 뺀 콘텐츠 박스 높이를 의미한다!*/
border: 20px solid black;
padding:10px;
/* box-sizing: content-box; /*기본값*/
box-sizing: border-box;
/* 박스 사이즈의 규격을 테두리 박스 맞추겠다. 즉 테두리 포함한 너비가 400, 높이가 150임을 의미함! 테두리가 커질 수록 속의 콘텐츠 내용 박스의 크기가 줄어든다.*/
}
.bbox{
width: 400px;
height: 150px;
border: 10px solid blue;
}/*기본값인 Content-box로 테두리를 제외한 것이며 온전히 콘텐츠 내용 부분의 크기만 의미한다.*/
.list:before{content:"리스트0";border:1px solid purple;}
/* ul태그의 첫번째 자식을 가상으로 만든다는 의미, css 속성명에 content가 반드시 있어야 함 */
.list:after{content:"마지막 리스트";border:1px solid blue;}
/* befor와 after 태그는 인라인레벨 요소의 성격을 갖춰서 줄바꿈이 안되며 해당되는 콘텐츠 내용만큼의 영역(너비)만 차지한다. */
.list li:nth-of-type(3){color:red;}
/* 리스트 중에 3번째- nth(몇번째)를 선택한다는 의미 */
.list li:nth-of-type(2n){background: salmon;}
/* 리스트 중에 2n=짝수 번째를 선택함 */
.list li:nth-of-type(2n+1){background: lime;}
/* 리스트 중에 2n+1=홀수 번째를 선택함 */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>레이아웃 배치-float</title>
<link rel="stylesheet" href="./css/study2.css">
</head>
<body>
<h1>float</h1>
<p>선택된 태그를 둥~ 띄워서 부모태그의 왼쪽 혹은 오른쪽에 나란히 배치하는 방법</p>
<p>부모태그는 float 된 자식 태그를 집나간 자식으로 인식!</p>
<h1>clear</h1>
<p>clear는 플로트(float)를 해제할 수 있는 속성을 의미한다.
clear가 지정된 태그는 이전 플로트 된 형제들 중 가장 높은 height를 갖고 있는 형제의 바로 밑에 위치 </p>
<div class="box">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<!-- <div class="clearbox">clear</div> -->
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
*{margin:0;padding:0;}
/* layout */
.box{
width:1200px;
border:1px solid red;
margin:0 auto;
background:pink;
}
.a{
width:300px;height:300px;background:red;float:left;opacity: 0.5;
}
/* margin값 상쇄는 좌우는 안되고 '상하'만 된다. */
.b{
width:300px;height:300px;background:blue;float:left;opacity:0.7;
}
.c{
width:300px;height:300px;background:green;float:left;opacity:0.7;
}
/* .clearbox{
clear:both;background: yellow;
} */
/* clear는 플로트 속성을 해제한 것을 의미하고, 속성 값으로 both를 쓰면 오른쪽이든 왼쪽이든 양쪽 모두 없앤다는 의미 */
.box:after{content:""; display:block; clear:both;}
/* 가상태그는 인라인레벨 요소로 기본값이 적용되기 때문에 블록 레벨 요소로 변경해야함(display:block;) , content라는 속성이 있어야 가상 태그가 되므로, 명시하고 속성값은 비워둠*/
p{
color:white;
background: purple;
}
/*
1. 플로트를 할 때 반드시 클리어를 해야함
2. 클리어 속성은 clear : both 를 사용하며 클리어 속성을 띈 블록레벨 요소를 반드시 마지막 형제로 위치시켜야 함
*/반응형
'IT > HTML&CSS' 카테고리의 다른 글
| [비즈니스] 아웃룩 자주쓰는 메일 서식 저장하기 (0) | 2021.12.07 |
|---|---|
| [CSS] html+css 활용 예제 풀기(2021-10-26) (0) | 2021.11.25 |
| [CSS] overflow/box-shadow/text-shadow/border-radius/opacity(2021-10-19) (0) | 2021.11.24 |
| [CSS] 박스모델 예제_Box model 공부(2021-10-12) (0) | 2021.11.24 |
| [CSS] 박스모델 3요소(선, 바깥여백, 안여백)_border, margin, padding_별5개(2021-10-08) (0) | 2021.11.24 |