출처
이걸 보고 정리했습니다!
생활코딩 CSS : 이 영상들을 보고 글을 썼습니다.
https://opentutorials.org/course/2418
📌 float
편집 디자인에서 이미지를 삽화로 삽입할 때 사용하는 기법, 레이아웃을 잡을 때도 사용하는 기능이다.
수평정렬 레이아웃. 요즘은 flex를 더 많이 이용한다.
<!doctype html>
<html>
<head>
<style>
img{
width:300px;
float:left;
margin:20px;
}
p{
border:1px solid gray;
}
</style>
</head>
<body>
<img src="sample.mt.jpg" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita
</p>
<p style="clear:both;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita
</p>
</body>
</html>
float: none, left, right, inline-start, inline-end
- float: none
- float: left
- float: right
- float: inline-start
- float: inline-end
- float은 block 레이아웃의 사용을 의미하므로 일부 경우
display값이 수정된다.
float 해제하기
- float 속성을 사용한 요소의 부모 요소에
overflow: hidden을 추가한다.
=> 그러나overflow는float와 직접적인 연관성이 없으므로 권장하지 않음. - float 속성을 사용한 요소의 부모 요소에
.clearfix::after를 사용한다.
.clearfix::after {
content: "";
display: block;
clear: both;
}<body>
<div class="container">
<div class="clearfix">
<div class="item float">1</div>
<div class="item float">2</div>
<div class="item float">3</div>
</div>
<div class="item four">4</div>
</div>
</body>- clearfix를 사용한 요소의 안에는 float를 사용하는 자식 요소들만 존재해야 한다.
float를 활용한 holy grail layout
<!doctype html>
<html>
<head>
<style>
*{
box-sizing:border-box;
}
.container{
width:540px;
border:1px solid gray;
margin:auto;
}
header{
border-bottom: 1px solid gray;
}
nav{
float:left;
width:120px;
border-right:1px solid gray;
}
article{
float:left;
width:300px;
border-left:1px solid gray;
border-right:1px solid gray;
margin-left:-1px;
}
aside{
float:left;
width:120px;
border-left:1px solid gray;
margin-left:-1px;
}
footer{
clear:both;
border-top:1px solid gray;
text-align: center;
padding:20px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>
CSS
</h1>
</header>
<nav>
<ul>
<li>position</li>
<li>float</li>
<li>flex</li>
</ul>
</nav>
<article>
<h2>float</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit quae earum enim ab distinctio corrupti eius reprehenderit non, rerum ut nisi autem cum sint perferendis eum id velit, molestias nesciunt. Ullam dignissimos consequuntur explicabo id voluptas vel deleniti nesciunt veritatis iusto commodi, laudantium cumque vero deserunt laboriosam. Ea, quia est?
</article>
<aside>
ad
</aside>
<footer>
copyleft
</footer>
</div>
</body>
</html>📌 position
문서 상에 요소를 배치하는 방법을 지정
<body>
<div class="parent3">
<div class="parent2">
<div class="parent1">
<div class="child"></div>
</div>
</div>
</div>
</body>.parent3 {
width: 350px;
height: 250px;
background-color: tomato;
}
.parent2 {
width: 300px;
height: 200px;
background-color: skyblue;
perspective: 300px;
}
.parent1 {
width: 250px;
height: 150px;
background-color: orange;
position: relative;
transform: rotateX(45deg);
}
.child {
width: 100px;
height: 100px;
background-color: royalblue;
position: fixed;
right: 0;
bottom: 0;
}- position: static
html에 정의된 순서대로 배치된다. 기본값
- position: relative
자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용한다.
z-index가 auto가 아니면 새로운 쌓임 맥락(stacking context)를 생성한다.
- position: absolute
가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치한다. 만약, 조상 중 위치 지정 요소가 없다면 초기의 containing block을 기준으로 삼는다.
z-index가 auto가 아니면 새로운 쌓임 맥락을 생성한다.
position: absolute를 갖고 있는 자식 요소의 부모 요소는 반드시 position 속성을 가지고 있어야 한다. 만약 모든 조상 요소에 position이 없다면(가장 근접한 조상부터 탐색) viewport를 기준으로 삼게 된다.
position이 있는 조상 요소들을 탐색하지만, 가장 가까운 조상 요소에 position 속성을 추가해 주는 것이 구조적으로 관리하기가 쉽다.
- position: fixed
viewport의 초기 containing block을 기준으로 삼아 배치된다. 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 viewport 대신 그 조상을 containing block으로 삼는다.
항상 새로운 쌓임 맥락을 생성한다.
viewport를 기준으로 요소가 위치하게 된다. 따라서 부모요소가 position을 갖고 있어도 자식 요소에 영향을 주지 못한다.
parent2에
transform속성으로scale()함수를 써보자. 기본값인 1을 넣어준다면 다음과 같이 변한다.
child가transform이 지정된 parent2를 기준으로 위치를 잡게 되는 것을 볼 수 있다.transform은position과 상관 없는 속성인데, 영향을 받고 있어서 당황스럽다!
perspective
parent2가perspective속성을 갖게 된다면, 자식 요소는 어떻게 변환할지 규정해줘야 한다. parent2의 자식인 parent1이transform으로rotateX값을 갖게 된다면 아래와 같이 변한다.
즉, child의position에 영향을 주지 않고 위의 요소들을perspective와transform으로 변환하고 싶었지만 예상치 못한 결과가 나온다는 것을 알아야 한다!
- position: sticky
스크롤 해도 사라지지 않고 원래 자리에 위치한다.
z-index
위치지정요소와 하위 아이템의 z축 순서를 지정한다. 더 큰 z-index 값을 가진 요소가 가장 위로 올라온다.
https://developer.mozilla.org/ko/docs/Web/CSS/z-index
stacking context 쌓임맥락
가상의 z축을 사용한 html 요소의 3차원 개념화. 각각의 html 요소는 자신의 속성에 따른 우선순위를 사용해 3차원 공간을 차지한다.
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context
📌 multi-column
다단
CSS에서는 텍스트를 정리하기 위해 다단이라는 개념이 있다.
-
column-count
단을 몇 개로 나타낼 건지 결정한다.
-
column-width
지정된 픽셀을 기준으로 최적의 너비를 자동으로 판단한다.
-
column-rule
단과 단 사이의 구분선을 추가할 수 있다. border 속성과 동일하게 사용할 수 있다.
구분선은 기본적으로 부모요소의 color를 상속받는다. -
column-gap
단과 단 사이의 넓이를 지정(gap으로 대체 가능). normal이 기본값이다.
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="egoing">
<style>
.column{
text-align: justify;
column-count: 4;
/* column-width: 200px;*/
column-gap:30px;
column-rule-style: solid;
column-rule-width: 5px;
column-rule-color: red;
}
h1{
column-span: all;
}
</style>
</head>
<body>
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae blanditiis nostrum eum ipsam,
quam expedita distinctio aspernatur voluptas inventore in officia at, a repudiandae modi vel dicta exercitationem accusamus? Tenetur minima doloremque, sequi id, necessitatibus deleniti porro ex maxime perferendis quaerat rerum molestias dolor fugit ullam expedita? Earum velit eaque, esse aliquid labore, ex, corporis odit deserunt consectetur sit aspernatur
<h1>Lorem ipsum dolor sit amet.</h1>
ipsam quos cupiditate dolores voluptatem non nam voluptas ab animi quidem adipisci repellat id quod. Laboriosam, distinctio, ut. Quia deserunt, voluptates illum eos, qui, doloremque recusandae laudantium aliquam amet rerum nulla, eveniet. Libero quas iusto, suscipit esse beatae voluptas labore. Nobis facere architecto adipisci ipsa molestias, possimus tempore. Obcaecati, quae laborum atque perspiciatis natus dolore repellendus in officia, sit! Placeat, nesciunt cupiditate similique vitae minima iusto blanditiis perferendis obcaecati enim odio delectus. Quaerat quos deserunt, voluptas aperiam. Quo neque ducimus accusamus quibusdam minima incidunt, voluptatem saepe iusto sit numquam, expedita distinctio aliquid voluptatum alias voluptate sint est ab similique ipsam unde quas porro error? Illum unde consequuntur ab optio architecto, adipisci odit saepe dolor est perferendis error autem iusto a iste tempore nam enim quaerat dicta fugit vel eaque itaque, laborum? Dolores consequatur quo labore dolorem nemo in, tempora animi enim delectus ipsam amet possimus et deserunt recusandae eveniet provident cum quaerat dolorum esse, nam doloremque! Porro sapiente labore aliquam incidunt temporibus praesentium est tempora magnam placeat rem.
</div>
</body>
</html>
1개의 댓글
정말 잘 정리된 내용이네요!