Top
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>multi columns</title>
<style>
body {
font: 12px 'Malgun Gothic',sans-serif;
}
#wrap {
width: 80%;
margin: 0 auto;
/*column-count: 3;
column-gap: 20px;
column-rule: 1px dashed #aaa;*/
column-width: 200px;
/* 갭까지 포함한 너비가 되어야 단이 충분히 나옴*/
columns: 100px 3;
/* 아무리 공간이 넓어도 지정한 단 수 이상 늘어나지 않음 */
}
#wrap h1 {
column-span: all;
/* h1 부분이 단 전체에 걸치는 영역을 확보함 */
}
</style>
</head>
<body>
<div id="wrap">
<h1>multi columns</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse sequi iste dolor, possimus maxime aspernatur, quae soluta doloremque culpa, nihil ex omnis numquam officia vero ea quibusdam officiis enim, rem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit illo suscipit maxime at iusto ipsa consequuntur a. Illum nesciunt veniam enim, accusantium quos repellat eveniet porro, perspiciatis commodi officiis libero. Distinctio, placeat, perspiciatis excepturi itaque repudiandae fuga ipsum deleniti vitae iste, natus, veritatis eos quibusdam quaerat dolore corrupti dignissimos! Voluptatum impedit, ad quam eum quis alias culpa architecto tempore sit itaque eius, atque magni. Eos necessitatibus ea unde quos qui labore reiciendis, veniam maxime numquam? Quo excepturi, necessitatibus, optio ex odio mollitia, odit a corporis magnam soluta blanditiis accusamus maiores rerum ab repellendus sequi autem consequuntur, ipsum? Obcaecati, tempore, provident.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>border-radius</title>
<style>
body {
font: 12px 'Malgun Gothic',sans-serif;
}
.box {
width: 400px;
height: 400px;
border: 3px solid black;
/*border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px;*/
/* 좌상 우상 우하 좌하 가로 반지름 / 좌상 우상 우하 좌하 세로 반지름 */
/*border-radius: 200px;*/
border-radius: 50px 0 50px 0;
}
</style>
</head>
<body>
<div id="wrap">
<div class="box">
</div>
</div>
</body>
</html>
네 모서리 다 50%씩 주면 원도 만들 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>background</title>
<style>
body {
font: 12px 'Malgun Gothic',sans-serif;
}
.box {
width: 400px;
padding: 20px;
height: 200px;
border: 3px solid black;
background:
/*url(img/twt.png) no-repeat 50px 30px,
url(img/insta.png) no-repeat 55px 35px,*/
/* 위에 쓴 이미지가 위로 올라옴 */
url(img/wendy.jpg) no-repeat 0 0 / cover;
/* cover 가로방향 세로방향 중에 넘치는거 짤라냄 */
background-clip: content-box;
/* padding 영역에는 배경 안나옴 */
background-origin: content-box;
/* 이미지 시작지점이 padding 안쪽 컨텐츠 부분부터 시작됨 */
color: white;
}
</style>
</head>
<body>
<div id="wrap">
<div class="box">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat praesentium voluptatem asperiores quia maxime porro temporibus nisi, nostrum ad, ducimus quidem reiciendis, mollitia reprehenderit blanditiis nam voluptatum illum? Officiis dolore facilis minus adipisci beatae ducimus saepe sed dolor consequatur vero, optio esse mollitia, praesentium tenetur totam sequi necessitatibus ratione alias reiciendis possimus, cupiditate est enim nulla eligendi voluptatibus? Ad dicta repellendus, cum distinctio sunt enim laborum officia cupiditate quae doloribus assumenda optio ducimus? Sunt earum, porro sed? Cumque, modi rerum sed nostrum assumenda accusamus at perspiciatis dolorum, eum eaque. Delectus atque dicta itaque minus fugit reprehenderit voluptatum beatae, fugiat numquam.
</div>
</div>
</body>
</html>
background-clip을 사용하면 본문 영역만 배경 넣기 가능
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>background</title>
<style>
body {
font: 12px 'Malgun Gothic',sans-serif;
}
.box-r {
width: 300px;
height: 300px;
border-radius: 50%;
background: rgb(255,255,255);
background: -moz-radial-gradient(30% 30%, ellipse cover, rgba(255,255,255,1) 0%, rgba(125,126,125,1) 42%, rgba(14,14,14,1) 88%, rgba(91,91,91,1) 100%);
background: -webkit-radial-gradient(30% 30%, ellipse cover, rgba(255,255,255,1) 0%,rgba(125,126,125,1) 42%,rgba(14,14,14,1) 88%,rgba(91,91,91,1) 100%);
background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,1) 0%,rgba(125,126,125,1) 42%,rgba(14,14,14,1) 88%,rgba(91,91,91,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#5b5b5b',GradientType=1 );
}
.box {
width: 400px;
padding: 20px;
border: 3px solid black;
color: black;
background: rgb(242,246,248);
background: -moz-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 40%, rgba(181,198,208,1) 63%, rgba(255,252,252,1) 70%, rgba(224,239,249,1) 100%);
background: -webkit-linear-gradient(top, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 40%,rgba(181,198,208,1) 63%,rgba(255,252,252,1) 70%,rgba(224,239,249,1) 100%);
background: linear-gradient(to bottom, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 40%,rgba(181,198,208,1) 63%,rgba(255,252,252,1) 70%,rgba(224,239,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9',GradientType=0 );
}
</style>
</head>
<body>
<div id="wrap">
<div class="box-r">
</div>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, itaque quod voluptatem. Perspiciatis sint beatae molestiae ab cum, adipisci, doloremque eligendi dolor quam maxime. Ullam incidunt, vitae harum provident esse, distinctio est error quod eum, minus non blanditiis earum accusamus similique aut soluta autem nesciunt rem beatae voluptates hic? Quia harum praesentium est dolorum minus totam quos cum non placeat cupiditate excepturi ex nesciunt nam porro explicabo debitis, et tempora quibusdam molestias vel impedit, delectus in? Doloribus dolore odit a voluptas pariatur ad ab deleniti ipsa? Voluptates tenetur, vel cupiditate. Dolore iste, culpa sint provident molestias nemo eveniet, id ullam.
</div>
</div>
</body>
</html>
CSS3로는 배경으로 그라데이션도 넣을 수 있다
이 사이트에서 css3 태그들을 간단하게 설정하고 복사할 수 있음
그라데이션 값도 가능
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>box-sizing</title>
<style>
body {
font: 12px 'Malgun Gothic',sans-serif;
}
.box {
width: 400px;
border: 5px solid black;
padding: 20px;
box-sizing: border-box;
/* padding, border 값까지 포함해서 width값이 됨 */
background-color: lime;
}
</style>
</head>
<body>
<div id="wrap">
<div class="box">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat praesentium voluptatem asperiores quia maxime porro temporibus nisi, nostrum ad, ducimus quidem reiciendis, mollitia reprehenderit blanditiis nam voluptatum illum? Officiis dolore facilis minus adipisci beatae ducimus saepe sed dolor consequatur vero, optio esse mollitia, praesentium tenetur totam sequi necessitatibus ratione alias reiciendis possimus, cupiditate est enim nulla eligendi voluptatibus? Ad dicta repellendus, cum distinctio sunt enim laborum officia cupiditate quae doloribus assumenda optio ducimus? Sunt earum, porro sed? Cumque, modi rerum sed nostrum assumenda accusamus at perspiciatis dolorum, eum eaque. Delectus atque dicta itaque minus fugit reprehenderit voluptatum beatae, fugiat numquam.
</div>
</div>
</body>
</html>
전에도 잠깐 다룬 적 있는데 box-sizing: border-box를 쓰면
설정해 둔 width값에 알아서 나머지 값이 다 포함된다.
(padding 값, margin 값, border 두께 등등)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex</title>
<style>
body {
font: 12px 'Malgun Gothic',sans-serif;
}
#wrap {
width: 900px;
margin: 0 auto;
display: flex;
}
#wrap h1 {
flex: 1;
}
#wrap .text {
flex: 3;
}
/* flex 속성의 값의 비율로 영역이 나누어짐 1:3 */
</style>
</head>
<body>
<div id="wrap">
<h1>Flex example</h1>
<div class="text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum quibusdam optio provident, non et iste necessitatibus numquam, voluptatem debitis, possimus tempore rerum beatae ducimus id consequatur laborum blanditiis ab accusamus hic eaque veritatis odit, porro quia officiis cum. Doloribus, quis aliquam sequi qui pariatur voluptatem porro officia molestias consequuntur officiis sint dolorem quidem facere sed maiores cupiditate voluptate. Id, voluptatem veniam modi. Aperiam consectetur, non nesciunt alias eius! Obcaecati, numquam doloribus, quam, veniam modi doloremque soluta iste culpa a consectetur enim error aliquid cum suscipit harum atque laborum hic? Perspiciatis tenetur laudantium quisquam. Accusamus nemo quas rerum rem. Quis, eos!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, quas, totam? Aut beatae natus quisquam placeat eaque dolores, ab expedita ad id dolor magnam? Voluptatum, expedita asperiores deserunt eum a.</p>
</div>
</div>
</body>
</html>
flex는 float처럼 해지할 필요도 없고
display : flex 로 설정하고
각 영역들에서 flex : 1, flex : 3 처럼 설정해주면 알아서 1:3으로 영역을 분배한다.
아직 grid는 뭔지 잘 모르지만 flex가 확실히 float보다 편할 것 같다.
반응형
'Daily Study > Web Dev' 카테고리의 다른 글
| 025 CSS3 공부 (4) transform, filter (0) | 2021.03.05 |
|---|---|
| 024 CSS3 공부 (3) transition, transform, animation (0) | 2021.03.04 |
| 022 CSS3 공부 (1) css3 선택자, 그림자,말줄임,투명도 지정 (0) | 2021.02.25 |
| 021 웹페이지 만들어보기 실습 (0) | 2021.02.23 |
| 020 CSS 공부 (16) 레이아웃 예제 실습 (0) | 2021.02.21 |
Daily Study/Web Dev
