elex/css-examples
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2024-06-16

Browse Source
This commit is contained in:
Elex
2024-06-16 01:16:39 +09:00
parent d2e7f6ad44
commit e9af16eb7b
14 changed files with 262 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Writerside/c.tree
View File

@@ -31,5 +31,9 @@
<toc-element topic="Responsive.md"/> <toc-element topic="Responsive.md"/>
<toc-element topic="Media-Query.md"/> <toc-element topic="Media-Query.md"/>
</toc-element> </toc-element>
<toc-element topic="Animation.md"/>
<toc-element topic="Scroll-Snap.md"/>
<toc-element topic="Transform.md"/>
<toc-element topic="Transition.md"/>
</toc-element> </toc-element>
</instance-profile> </instance-profile>

27
Writerside/topics/Animation.md Normal file
View File

@@ -0,0 +1,27 @@
# Animation
* `animation`
* `animation-duration`
* `animation-name`
* `animation-iteration-count`
* `animation-direction`
```CSS
p {
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
translate: 150vw 0;
scale: 200% 1;
}
to {
translate: 0 0;
scale: 100% 1;
}
}
```

1
Writerside/topics/Box-Model.md
View File

@@ -85,6 +85,7 @@ html {
* `background-position` * `background-position`
* `background-attachment` : scroll | fixed | local * `background-attachment` : scroll | fixed | local
* `box-shadow`
## Overflow ## Overflow

16
Writerside/topics/Media-Query.md
View File

@@ -1,3 +1,17 @@
# Media Query # Media Query
Start typing here... ```CSS
@media screen and (min-width: 600px) {
body {
color: blue;
}
}
```
```CSS
@media (orientation: landscape) {
body {
color: rebeccapurple;
}
}
```

6
Writerside/topics/Responsive.md
View File

@@ -1,4 +1,8 @@
# 반응형 레이아웃 # 반응형 레이아웃
Start typing here... ```html
<meta name="viewport" content="width=device-width,initial-scale=1" />
```

7
Writerside/topics/Scroll-Snap.md Normal file
View File

@@ -0,0 +1,7 @@
# Scroll Snap
* `scroll-snap-type`
* `scroll-snap-align`
* `scroll-snap-stop`
* `scroll-margin`
* `scroll-padding`

2
Writerside/topics/Styling-Image-and-Media.md
View File

@@ -2,7 +2,7 @@
* `width` * `width`
* `height` * `height`
* `min-wodth`, `min-height` * `min-width`, `min-height`
* `max-width`, `max-height` * `max-width`, `max-height`
* `object-fit` : fill | contain | cover | none | scale-down * `object-fit` : fill | contain | cover | none | scale-down
* `object-position` * `object-position`

7
Writerside/topics/Transform.md Normal file
View File

@@ -0,0 +1,7 @@
# Transform
* `transform`
* `translate`
* `rotate`
* `scale`
* `transform-origin` : 변환 기준점 좌표를 지정합니다. 기본값은 요소의 가운데입니다.

14
Writerside/topics/Transition.md Normal file
View File

@@ -0,0 +1,14 @@
# Transition
* `transition`
* `transition-property`
* `transition-duration`
* `transition-timing-function`
* `transition-delay`
```CSS
div {
transition: <property> <duration> <timing-function> <delay>;
}
```

35
src/breadcrumb.html Normal file
View File

@@ -0,0 +1,35 @@
<!--
~ Copyright (c) 2024. Elex. All Rights Reesrved.
~ https://www.elex-project.com/
-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Breadcrumb</title>
<style>
html {
box-sizing: border-box;
}
.breadcrumb {
display: flex;
list-style-type: none;
}
.breadcrumb .item:not(:last-child)::after {
display: inline-block;
margin: 0 0.25rem;
content: ">";
}
</style>
</head>
<body>
<ul class="breadcrumb">
<li class="item">Menu 01</li>
<li class="item">Menu 02</li>
<li class="item">Menu 03</li>
<li class="item">Menu 04</li>
</ul>
</body>
</html>

29
src/centering-element.html Normal file
View File

@@ -0,0 +1,29 @@
<!--
~ Copyright (c) 2024. Elex. All Rights Reesrved.
~ https://www.elex-project.com/
-->
<!DOCTYPE html>
<html lang="ko">
<head>
<title></title>
<style>
html, body {
width: 100%; height: 100%;
}
.container{
display: flex;
align-items: center;
justify-content: center;
width: 100%; height: 100%;
}
.center {
width: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="center">Centered!</div>
</div>
</body>
</html>

34
src/multicolumn.html Normal file
View File

@@ -0,0 +1,34 @@
<!--
~ Copyright (c) 2024. Elex. All Rights Reesrved.
~ https://www.elex-project.com/
-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Responsive Layout</title>
<style>
html {
box-sizing: border-box;
}
article {
column-count: 3;
column-gap: 2rem;
column-rule: 1px solid #242424;
}
</style>
</head>
<body>
<article>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam cursus ultricies. Fusce sit amet sollicitudin tellus. Vivamus sed nisl tellus. Aenean iaculis sollicitudin est, sagittis interdum ex ultricies eu. Pellentesque turpis sapien, mattis eget fermentum nec, tristique congue felis. Vestibulum convallis diam et est dignissim hendrerit. Etiam feugiat, est ullamcorper imperdiet sagittis, urna mauris aliquam lacus, suscipit pretium nisl ligula vel purus. Nam euismod leo quis nulla vestibulum, varius malesuada tellus ornare.</p>
<p>Nulla eu faucibus justo, et scelerisque urna. Aenean finibus vel ipsum at congue. Nulla facilisi. Nunc rutrum neque at eros finibus pulvinar. Nunc nunc augue, ullamcorper ac nibh vel, lacinia vulputate mauris. Proin eget nibh a mi efficitur sagittis eu in odio. Vivamus elit est, dapibus eget mi laoreet, accumsan facilisis purus. Aliquam erat volutpat. Curabitur ac mauris nec nunc consequat porttitor. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p>Donec nec nisl pharetra, maximus velit a, dapibus arcu. Suspendisse sit amet scelerisque enim. Curabitur eget tincidunt dui. Cras hendrerit finibus odio, at fermentum velit sollicitudin eget. Fusce lacinia ac turpis ut volutpat. Maecenas tempus in magna a mollis. Maecenas quis nisi mi. Curabitur nec arcu non dolor sollicitudin lobortis at euismod elit. Ut aliquet ipsum ac enim tincidunt pretium.
</p>
<p>Donec pulvinar metus elit, vel pretium lectus vestibulum auctor. Quisque vel libero est. Ut est purus, placerat id auctor eget, tincidunt in ex. Pellentesque tincidunt dolor nunc. Suspendisse in lectus nec lectus fringilla lobortis. Nulla quam erat, volutpat et vulputate sed, cursus eget turpis. Phasellus malesuada, quam ut fringilla cursus, lorem nisl vulputate est, pulvinar posuere ligula velit in nunc. Quisque nec risus imperdiet, accumsan odio at, commodo metus. Suspendisse dignissim eu velit vitae suscipit. Quisque a volutpat tortor, quis consectetur justo. Vivamus tincidunt posuere auctor.</p>
<p>Nulla a erat diam. Donec sollicitudin molestie orci, sit amet gravida sapien. Aliquam ac justo accumsan, mollis ex at, posuere tortor. Proin quis sapien neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse ut faucibus neque. Aenean sit amet ultricies augue. Nulla facilisi. Morbi congue maximus eros, ut aliquet neque efficitur ac.</p>
</article>
</body>
</html>

46
src/responsive-layout.html Normal file
View File

@@ -0,0 +1,46 @@
<!--
~ Copyright (c) 2024. Elex. All Rights Reesrved.
~ https://www.elex-project.com/
-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Responsive Layout</title>
<style>
html {
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
margin:0; padding: 0; border: 0;
width: 100%;
}
.item {
margin:0; padding: 0; border: 0;
width: 100%;
}
@media screen and (min-width: 768px) {
.item {
width: 50%;
}
}
@media screen and (min-width: 1024px) {
.item {
width: 25%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 01</div>
<div class="item">Item 02</div>
<div class="item">Item 03</div>
<div class="item">Item 04</div>
</div>
</body>
</html>

37
src/toolbar.html Normal file
View File

@@ -0,0 +1,37 @@
<!--
~ Copyright (c) 2024. Elex. All Rights Reesrved.
~ https://www.elex-project.com/
-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Toolbar Layout</title>
<style>
html {
box-sizing: border-box;
}
.nav-bar {
display: flex;
width: 100%;
}
.item {
}
.right {
margin-left: auto;
}
</style>
</head>
<body>
<div class="nav-bar">
<div class="item">Menu 01</div>
<div class="item">Menu 02</div>
<div class="item">Menu 03</div>
<div class="item">Menu 04</div>
<div class="item right">Menu 05</div>
</div>
</body>
</html>