ノートテキスト
ページ1:
1. Mengenal CSS Layout • Di materi CSS Dasar, kita sudah belajar bagaimana menambahkan gaya pada element-element di HTML • Selain menambahkan gaya di element, CSS juga biasanya digunakan untuk membuat layout (tata letak) halaman web Hampir semua web di dunia, akan menggunakan CSS untuk melakukan layouting (tata letak) komponen-komponen HTML nya • Salah satu tujuan melakukan tata letak adalah agar tampilan halaman web lebih menarik Materi CSS
ページ2:
2- Membuat Project Buat Folder dengan nama css-layout Materi CSS
ページ3:
3- Normal Flow Normal Flow • Normal Flow adalah bagaimana Web Browser menampilkan tata letak halaman HTML secara default, ketika kita tidak mengubah apapun pada tata letak nya Secara default, jika kita tidak menambahkan layout CSS sama sekali, maka Web Browser akan menampilkan halaman Web dalam Normal Flow Biasanya setiap Web Browser hampir memiliki Normal Flow yang sama Materi CSS
ページ4:
Tampilan Normal-flow
belajar-css-layout
EXPLORER
normal-flow.html.
Mm>head> style > ts p
OPEN EDITORS 1 unsaved
GROUP
normal-flow.html >
1
<!DOCTYPE html>
normal-flow.html
2
<html lang="en">
GROUP 2
3
<head>
Document
4
✓ BELAJAR CSS LAYOUT
5
display.html
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initia
<title>Document</title>
flexboxhtml
7
<style>
normal-flow.html
body {
9
width: 500px;
10
}
11
Pl
12
background-color:
13
border: 2px solid
aqua;
blue;
14
15
</style>
16
</head>
17
<body>
18
19
20
21
<h1>Normal Flow</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing el
<h2>Normal Flow</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing eli
22
</body>
23
</html>
Document x
http://127.0.0.1:3000/normal-flow.html
Normal Flow
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum possimus
vel, iste aperiam fuga maxime, neque culpa dignissimos perferendis
adipisci fugit magni maiores omnis atque Expedita voluptates id culpa.
Normal Flow
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero allam
repellendus voluptatibus ut aut mollitia magnam dolores, possimus, eveniet
eaque officiis ipsam ea accusamus harum omnis aliquam ratione! Expedita,
obcaecati?
24+
ページ5:
4 - Display Display Sebelum kita belajar melakukan tata letak, kita perlu bahas ulang tentang Display Kita tahu bahwa komponen di HTML memiliki default display, ada yang block dan ada yang inline Sebenarnya, kita bisa mengubah nilai display untuk komponen HTML menggunakan atribut display di CSS • https://developer.mozilla.org/en-US/docs/Web/CSS/display Materi CSS
ページ6:
Syntac Display M display - CSS: Cascading Style S WS CSS Fonts Module Level 3 Selection Embed Code-Googl × CA developer.mozilla.org/en-US/docs/Web/CSS/display PT Bursa Efek Indon... ChatGPT: Optimizin Getting Started Google Terjemahana Amazon.com Associ... Program Afiliasi Ind... Lazada Affiliate Pro... Mmdn web docs References Guides Plus Curriculum Blog Tools Theme References > CSS > display d Filter happens when display: flex is declared is defined in the CSS Flexible Box Model specification. Try it » All Boo Log in Sign up for free English (US) In this article Try it RESET direction display dominant-baseline empty-cells field-sizing filter -flex- float CSS Demo: display display: block; display: inline-block; display: none; display: flexi display: grid; Apply different display values on the dashed orange-bordered div, which contains three child elements. Some text A. Child 1 Child 2 Child 3 Some text B. Syntax Grouped values Description Accessibility Formal definition Formal syntax Examples Specifications Browser compatibility See also ▸font-
ページ7:
Nilai CSS Display Nilai CSS Display • inline, artinya komponen ditampilkan secara inline (hanya mengambil tempat secukupnya) • block, artinya komponen ditampilkan secara block (mengambil tempat kiri ke kanan komponen diatasnya) inline-block, artinya komponen ditampilkan secara inline, tapi kita bisa mengubah tinggi dan lebar komponennya seperti layaknya block • none, artinya komponen akan dihapus dan tidak ditampilkan
ページ8:
Penulisan display Inline-block
belajar-css-layout
EXPLORER
<>normal flow.html
display.html x
Display
✓ OPEN EDITORS
display.htm>Mm>head
http://127.0.0.1:3000/display.html
GROUP 1
<html lang="en">
normal-flow.html
3
<head>
xo display html
GROUP 2
5
6
Display
7
<style>
✓ BELAJAR-CSS-LAYOUT
8
display htm
9
<flexboxhtml
10
<>normal-flow.html
11
12
13
padding: 20px;
14
margin: 10px;
<meta name="viewport" content="width=devi
<title>Display</title>
.content {
background-color: aqua;
display: inline-block;
width: 200px;
height: auto;
Ini Konten 1
Lorem ipsum dolor sit amet,
consectetur adipisicing elit. At
animi doloribus maiores Alias
ratione dolorem perspiciatis,
expedita dicta tempora nemo
in iusto facilis, corporis quo
qui repellendus earum, nisi
Ini Konten 2
Lorem ipsum dolor sit amet,
consectetur adipisicing elit. At
animi doloribus maiores Alias
ratione dolorem perspiciatis,
expedita dicta tempora Demo
in iusto facilia, corporis que
qui repellendus earum, nisi
omnis
Ini Konten 3
Lorem ipsum dolor sit amet,
consectetur adipisicing elit. At
animi doloribus maiores. Alias
ratione dolorem perspiciatis,
expedita dicta tempora nemo
in iusto facilis, corporis que
qui repellendus earum,
15
16
17
</style>
18
</head>
19
<body>
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class="content">
<h1>Ini Konten 1</h1>
<p>Lorem ipsum dolor sit amet, consec
</div>
<div class="content">
<h1>Ini Konten 2</h2>
<p>Lorem ipsum dolor sit amet, consec
</div>
perspiciatis, expedita dicta temp
<div class="content">
<h1>Ini Konten 3</h1>
<p>Lorem ipsum dolor sit amet, consec
perspiciatis, expedita dicta temp
33
</div>
> OUTLINE
35
</body>
498
ページ9:
5 - Flexbox Flexbox • Flexbox Layout bertujuan untuk menyediakan cara yang lebih efisien untuk menata letak, menyelaraskan, dan mendistribusikan ruang antar item dalam wadah (container), bahkan ketika ukurannya tidak diketahui dan/atau dinamis (sehingga disebut "fleksibel"). • Flexbox Layout paling sesuai untuk komponen aplikasi, dan tata letak skala kecil, sedangkan Grid Layout ditujukan untuk tata letak skala besar. Grid Layout akan dibahas di materi tersendiri Materi CSS
ページ10:
Diagram Flexbox Diagram Flexbox flex container main axis Bex item cross start cross axis flex item main size flex item cross size main start cross and main and
ページ11:
Flex Direction Flex Direction Secara default, Flex Item akan ditampilkan dengan arah dari kiri ke kanan, kita bisa mengubah dengan atribut flex-direction: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
ページ12:
Penulisan Flexbox
EXPLORER
OPEN EDITORS
GROUP 1
normal-flow.htm
normal-how.
flexboxhtml>...
<!DOCTYPE html>
2 <html lang="en">
belajar-css-layout
flexbox
http://127.0.0.1:3000/xbxhtml
display.htm
3 <head>
<> Rexbox.html
4
<meta charset="UTF-8">
GROUP 2
3
xflexbox
<meta name="viewport" content="width=device-width, initi
<title>flexbox</title>
ini konten 1
ini konten 2
7
BELAJAR CSS-LAYOUT
<style>
<display.html
8
.container {
flexboxhtm
9
display: flex;
normal-flow.html
10
}
13
.conten{
12
background-color:
13
border: 2px solid
aqua;
blue;
Lorem ipsum dolor sit amet
consectetur adipiscing elit.
Fugit esse vero incidunt
maiores voluptatibus
exercitationem alian
veniam sit et commodi
praesentium facere rerum a
magni, exceptori quibusdam
asperiores suscipit
Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Fugit esse vero incide
maiores voluptatib
exercitationem alias sapiente
veniam sit et commodi
praesentium facere
magni, excepturi quibusdam
asperiores scipit.
ini konten 3
Lorem ipsum dolor sit amet
consectetur adipisicing el
Fugit esse vero incidunt
maiores voluptatibus
xercitationem alias sapiente
veniam sit et commodi
praesentium facere rerum
magni, excepturi quibusdam
asperiores suscipit
14
margin: 10px;
15
16
17
</style>
padding: 10px;
18
</head>
19
<body>
20
21
22
25
24
25
26
27
28
29
30
31
32
<div class="container">
<div class="conten">
<h1>ini konten 1</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisici
</div>
<div class="conten">
<h1>ini konten 2</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisici
</div>
<div class="conten">
<h1>ini konten 3</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisici
</div>
> OUTLINE
33
</div>
> TIMELINE
34
</body>
ページ13:
Contoh penulisan flex-directio
File Edit Selection View
<>normal-flow.html
Go
Run
<latihan him. <>display
flexbout>> html> body>
<!DOCTYPE html>
div.container
http://127.0.0.1:3000/
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1
<title>flexbox</title>
2
2
<html lang="en">
3
<head>
4
5
6
7
<style>
8
9
10
11
12
}
13
14
15
16
/*Dalam container conten akan dibagi rata lebar display dibagi
.container (
display: flex;
flex-direction: row-reverse;
/* default Flex-direction adalah rou*/
.conten{
</style>
17
18
19
20
21
</head>
22
<body>
23
24
25
26
27
28
29
30
31
background-color:
aqua;
border: 2px solid blue;
margin: 10px;
padding: 10px;
<div class="container">
<div class="conten">
<h1>ini konten 1</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
<div class="conten">
<h1>ini konten 2</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. F
</div>
<div class="conten">
shiaini kanten 3</h3>
ini konten 3
Lorem ipsum dolor sit amet
consectetur adipisicing elit. Fugit
esse vero incidunt maiores
voluptatibus exercitationem al
sapiente veniam sit et commodi
praesentium facere
magni, excepturi quibusdam
perior scipit
ini konten 2
Lorem ipsum dolor sit amet
consectetur adipisicing elit. Fugit
esse vero incidunt maiores
voluptatibus exercitation
sapiente veniam sit et commodi
praesentium facere rerum a
magni, excepturi quibusdam
asperiores suscipit
ini konten 1
Lorem ipsum dolor sit amet
consectetur adipisicing elit. Fugit
esse vers incidunt maiores
voluptatibus exercitationem ali
sapiente vem sit et commodi
praesentium facere rerum a
magni, excepturi quibusdam
asperiores scipit
ページ14:
Flex Wrap Flex Wrap Secara default, Flex Item akan ditampilkan dalam satu garis, baik itu vertical (row) atau horizontal (column) • Namun jika kita ingin Flex Item di wrap pada garis berbeda ketika dibutuhkan, maka kita bisa gunakan atribut flex-wrap • https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
ページ15:
Contoh penulisan flex-wrap
× File Edit Selection View Go Run
normal flow.html
<>latham.html.
flexbox html> html> head > style
<html lang="en">
3
<head>
6
8
10
13
12
belajar-css-layout
display.html
flexbox.html x
flexbox
http://127.0.0.1-3000/bx.html
<title>flexbox</title>
<style>
/*Dalam container conten akan dibagi rata lebar display dibagi kontennya
.container (
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
/* default Flex-direction adalah row*/
.conten{
ini konten 2
Lorem ipsum dolor sit amet
consectetur adipisicing elit. Fugit
vero incidunt maiores voluptatibus
exercitationem alias sapiente veniam
sit et commodi praesentiam facere
recom a magni, exceptari quibusdam
asperiores suscipit
ini konten 1
Lorem ipsum dolor sit amet
consectetur adipisicing elit. Fugit
vero incidunt maiores voluptatibus
exercitationem alias sapiente veniam
cit et commodi praesentium facere
rerum a magni, excepturi quibusdam
asperiores suscipit
width: 250px;
14
35
16
background-color:
17
border: 2px solid
aqua;
blue;
18
margin: 10px;
19
padding: 10px;
20
21
22
23
24
</head>
25
<body>
26
27
/*flex-wrap dipakai untuk membatasi bila konten banyak ke bawah */
</style>
ini konten 4
Lorem ipsum dolor sit amet
consectetur adipisicing elit. Fugit esse
vero incidunt maiores voluptatibus
exercitationem alias sapiente veniam
ait et commodi praesentium facere
rerum a magna, exceptors quibusdam
asperiores suscipit
ini konten 3
Lorem ipsum dolor sit amet
consectetur adipisicing elit. Fugit esse
vero incidunt maiores voluptatibus
exercitationem alias sapiente veniam
sit et commodi praesentium facere
recum a magna, exceptun quibusdam
asperiores scipit.
29
31
<div class="container">
<div class="conten">
chi ini konten 1</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit esse ver
</div>
<div class="conten">
<h1>ini konten 2</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit esse ver
</div>
<div class="conten">
<h1>ini konten 3</h1>
ini konten 6
Lorem ipsum dolor sit amet
consectetur adipisicing elit. Fugit esse
vero incidunt maiores voluptatibus
ini konten 5
Lorem ipsum dolor sit amet
consectetur adipisicing elit. Fugit esse
vero incidunt maiores voluptatibus
ページ16:
6- Flex Items Flex Items Komponen yang terdapat di dalam Flex Container, kita sebut dengan nama Flex Item • Selain melakukan pengaturan ke Flex Container, kita juga bisa melakukan pengaturan ke Flex Item Materi CSS
ページ17:
Order Order Secara default urutan Flex Item akan ditampilkan sesuai dengan urutan kode HTML yang dibuat Namun, jika kita ingin mengubah urutan ditampilkannya, kita bisa menggunakan atribut order https://developer.mozilla.org/en-US/docs/Web/CSS/order
ページ18:
Contoh penulisan flexbox-order
File Edit Selection View Go Run
normal-flow.htm
latiham.html.
display.html
flexbox-order.html > ☞ html > ® head > style > .conten
2 <html lang="en">
.container (
Tiex-wrap: wrap;
4
<head>
8
<style>
10
19
14
}
15
16
17
flexbox.html x
flexbox-order.htm
/* default flex-direction adalah row/
.conten{
background-color:
aqua;
border: 2px solid blue;
margin: 10px;
padding: 10px;
width: 200px;
/*flex-wrap dipakai untuk membatasi bila konten banyak ke bawah */
</style>
18
19
20
21
22
23
}
24
25
26
27
</head>
28
29
<body>
30
31
32
33
34
35
30
37
38
39
40
41
<div class="container">
<div class="conten" style="order: 3;">
<h1>ini konten 1</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. F
exercitationem alias sapiente veniam sit et commodi praese
quibusdam asperiores suscipit.</p>
</div>
<div class="conten" style="order: 2;">
<h1>ini konten 2</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. F
exercitationem alias sapiente veniam sit et commodi praese
quibusdam asperiores suscipit.</p>
-css-layout
flexbox-Order x
http://127.0.0.1:3000/mexbox-order.htmi
08
ini konten 3
Lorem ipsum dolor sit amet
consectetur adipisicing elit
Fugit esse vero incidiant
maiores voluptatibus
exercitationem alias sapient
veniam sit at commodi
praesentium facere rerum a
magni, exceptari quibusdam
asperiores suscipit
ini konten 2
Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Fugit esse vero incidunt
maiores voluptatibus
exercitationem aliam sapiente
veniam sit et commodi
praesentium facere rarum a
magni, excepturi quibusdam
asperiores suscipit
ini konten 1
Lorem ipsum dolor sit amet
consectetur adipisicing elit
Fugit esse vero incidunt
maiores voluptatibus
exercitationem alias sapiente
veniam sit et commodi
praesentium facrum
magni, excepturi quibusdam
asperiores suscipit
ページ19:
Flex Grow Flex Grow • Atribut flex-grow mendefinisikan kemampuan item fleksibel untuk berkembang jika diperlukan. Atribut flex-grow menerima nilai yang berfungsi sebagai proporsi dari total. Ini menentukan jumlah ruang yang tersedia di dalam wadah fleksibel yang harus digunakan oleh item tersebut. • Misal kita punya 5 Flex Item, dimana total dari 5 Flex Item tersebut memiliki jumlah flex-grów 20, artinya per 1 grow adalah 100% / 20 = 5% Sehingga Flex Item yang memiliki nilai flex-grow 2 artinya memiliki ruang sebesar 10% https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
ページ20:
Contoh penulisan property flex-grow
File Edit Selection View Go Run
display.htm
flexbox
belajar-css-layout
flexbox-order.html
flexbox-grow.html
Flexbox-Grow x
flexbox-grow.htm> html> head > > style
2 <html lang="en">
<title>Flexbox-Grow</title>
3
<head>
6
7
B
9
<style>
.container {
10
11
}
display: flex;
flex-direction: row;
.content {
background-color:
border: 1px solid;
15
16
17
}
18
19
padding: 5px;
laquaj
margin: 5px;
/*flex-grow membagi width sana rata small i bagian
large 2 bagian dibagi rata */
-small {
flex-grow: 1;
.large (
flex-grow: 2;
21
22
}
23
24
25
26
</style>
27
</head>
28
<body>
29
30
31
32
34
36
<div class="container">
</body>
<div class="content small">A</div>
<div class="content large">B</div>
<div class="content small">C</div>
<div class="content_large">0</div>
<div class="content small"></div>
</div>
http://127.0.0.1:3000/texbox-grow.html
ページ21:
Flex Shrink Flex Shrink • Jika flex-grow merupakan kemampuan untuk Flex Item untuk berkembang, maka atribut flex-shrink untuk menyusut ketika dibutuhkan Biasanya kemampuan untuk menyusut dibutuhkan ketika memang ukuran halaman tidak cukup, dan kita bisa mengatur nilai factor dari penyusutannya antar Flex Item, sama seperti flex-grow https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink
ページ22:
Contoh penulisan flex-shrink (penyusutan box)
http://127.0.0.1:3000/mexbox-shrinkhtm
Lorem ipsum dolor sit amet
consectetur adipisicing elit. Voluptate
sunt temporibus voluptatem
dignissimos architecto quisquam enim
aliquam inventore dolorum vitae dicta
corrupti cupiditate fugsat, similique
ducimus necessitatibus, perferendis
quasi repellat
Lorem, iprum
dolor sit amet
consectetur
adipisicing
elit. Voluptate
temporibus
voluptatem
dignissimos
architecto
quisquam
enim aliquam
ventore
dolorum vitae
dieta corrupti
cupiditate
fugial
similique
decimus
necessitatibus,
perferendi
quasi repellat?
Lorem ipsum dolor sit amet
consectetur adipisicing elit. Voluptate
sunt temporibus voluptatem
dignissimos architecto quisquam enim
aliquam inventore dolorum vitae dicta
corrupti cupiditate fugiat, similique
decimus necessitatibus, perferendis
quasi repellat?
File
display.html
Edit Selection View Go Run
belajar- -layout
flexbox-shrinkhtml > html >
<> xbox-order. >>flexbox-grown
head > style
flexbox-shrink html
Rexbox-Grow
2
<html lang="en">
4
<head>
B
<style>
13
14
15
16
.content {
background-color:
border: 1px solid;
aqua;
17
padding: 5px;
18
margin: 5px;
19
}
20
21
22
23
/*flex-shrink_mengurangi width dengan default 1, angka2
makin menyusutkan width nyas "/
.content {
24
flex-shrink: 1;
25
}
26
.content2 {
27
flex-shrink: 2;
28
}
29
38
-contents(
flex-shrink: 1;
31
32
</style>
33
</head>
34
35
<body>
36
37
38
39
40
41
<div class="container">
<div class="content content1">Lorem, ipsum dolor sit amet consectetur adi
<div class="content content2">Lorem, ipsum dolor sit amet consectetur adi
<div class="content content3">Lorem, ipsum dolor sit amet consectetur adi
</div>
42
</body>
ページ23:
Flex Basis Flex Basis Atribut flex-basis digunakan untuk membuat Flex Item mengambil ruang sebesar yang ditentukan, atau jika ruangan tidak tersedia, ambil semampunya Jika kita menggunakan flex-shrink: 0, maka akan dipastikan bahwa Flex Item akan mengambil sejumlah flex-basis, walaupun ukuran layar tidak mencukupi https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
ページ24:
Flex Alignment 7 - Flex Alignment Flex Item yang terdapat di dalam Flex Container, bisa kita rapikan atau selaraskan dengan beberapa atribut (justify-content, align-items dan align-content) Materi CSS
ページ25:
Justify Content Justify Content • Saat kita menggunakan Flexbox, kita bisa menggunakan atribut justify- content menentukan bagaimana Web Browser menentukan jarak antar Flex Item • Ada banyak nilai yang bisa kita gunakan dalam justify-content, seperti yang terlihat di gambar https://developer.mozilla.org/en- US/docs/Web/CSS/justify-content flex-start flex-end center space-between space-around space-evenly LJ
ページ26:
Contoh Penulisan Justify-Content denga nilai
evenly(dibagi rata space antaranya)
File Edit Selection View Go Run
> flexbox-shrink
flexbox-bashimi
<>flexbox-justify-content.html
<flexbox-justify-content.html > html> head > @style> *s.container
2 <html lang="en">
belajar-css-layout
Flexbox Justify Content X
http://127.0.0.1:9000/mexbox-justify-content.htm
3
<head>
7
<style>
8
11
12
13
}
14
.content (
15
16
background-color:
border: 2px solid
aqua;
blue;
17
padding: 10px;
18
margin: 10px;
.container {
background-color: yellow;
Justify-content: space-evenly;
Content 1
Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Accusamus aspernatur rem
quia earum odit, om
numquam similique obcaecati
itaque eveniet quae hic beatae
cum maiores, quibusdam sequi
ab ea neque
Content 2
Lorem ipsum dolor sit amet
consectetur adipisicing elit
Accusamus aspernatur ren
quia earues oda, omnis
sumquam similique obcaecati
itaque eveniet quae hic beatae
cum maiores, quibusdam sequi
ab ea neque.
Content 3
Lorem ipsum dolor sit amet
consectetur adipisicing elit
Accusamos aspernatur rem
quia earum odit, omnis
numquam similiqua obcaecati
itaque eveniet quae hic beatae.
cum maiores, quibusdam seque
ab ea neque
19
width: 200px;
20
height: auto;
21
22
23
24
25
</style>
26
</head>
27
<body>
28
29
30
31
32
33
34
35
36
37
39
<div class="container">
<div class="content">
<h1>Content 1</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisi
</div>
<div class="content">
<h1>Content 2</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisi
</div>
<div class="content">
<h1>Content 3</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisi
ページ27:
flex-start flex-end Align Items Align Items • Atribut align-items bisa digunakan untuk perataan Flex Item secara center ⚫ cross-axis https://developer.mozilla.org/en -US/docs/Web/CSS/align-items - baseline stretch text text text text text te
ページ28:
Contoh Penulisan align-items (Perataan content x,
perataan tinggi)
File Edit
Selection View Go Run
flexbox-justify-content.html.
xbox-basis.html X
flexbox-align-tem.html
flexbox-align-lem.html > html> head> <style> .container
1
<!DOCTYPE html>
2
<html lang="en">
3
4
<head>
5
6
7
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini
<title>Flexbox Align Item</title>
B
<style>
9
.container {
10
display: flex;
11
12
13
14
}
15
16
17
18
19
height: 500px;
background-color:
align-items: center;
yellow;
.content {
background-color:
aqua;
border: 2px solid blue;
20
21
22
23
24
25
20
}
27
</style>
28
</head>
29
30
<body>
31
32
33
34
padding: 10px;
margin: 10px;
width: 200px;
height: auto;
<div class="container">
<div class="content">
<h1>Content 1</h1>
<o>Lorem ipsum dolor sit amet consectetur adi
r-css-layout
Flexbox Alignem x
http://127.0.0.1:3000/flexbox-align-item.html
Content 1
Lorem ipsum dolor sit amet
consectetur adipisicing elit
Accusamus aspernatur rem
quia earum odit, omnis
sumquam similique obcaecati
itaque eveniet quae hic beatae
cum maiores, quibusdam sequi
ab ea que
Content 2
Lorem ipsum dolor sit amet
consectetur adipisicing elit
Accusamus aspernatur rem
quia earum odit, omnis
numquam similique obcaecati
itaque eveniet quae hic beatae
cum maiores, quibusdam sequi
ab es neque
Content 3
Lorem ipsum dolor sit amet
consectetur adipiscing elit
Accusamus aspernatur rem
quia earum odit, ommis
quam similique obcaecati
itaque eveniet quae hic beatse
cum maiores, quibusdam sequi
ab es peque
ページ29:
Penulisan code css agar conten ditengah align-item(center) dan
justify-content (center)
File Edit Selection View Go Run
xbox-basis.html X >> Sexbox-justify-content.html. flexbox-align-item.html × ▷
<flexbox-align-item.html> html >head>style> .container
<!DOCTYPE html>
belajar-css-layout
Flexbox Align item x
http://127.0.0.1:3000/mexbox-align-item.html
aqua;
Content 1
Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Accusamus aspernatur rem
quia earum odit, omnis
numquam similique obcaecati
itaque eveniet quae hic beatae
cum maiores, quibusdam sequi
ab ea neque
Content 2
Lorem ipsum dolor sit amet
consectetur adipisicing elit
Accusamus aspernatur rem
quia earum odit, omnis
sumquam similique obcaecati
itaque eveniet quae hic beatae
cum maiores, quibusdam sequi
ab ea neque.
Content 3
Lorem ipsum, dolor sit amet
consectetur adipisicing elit.
Accusamus aspernatur rem
quia earum odit, omnis
numquam similique obcaecati
itaque eveniet quae hic beatae
cum maiores, quibusdam sequi
ab ea neque
1
2
<html lang="en">
3
4
<head>
5
6
7
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini
<title>Flexbox Align Item</title>
B
<style>
9
.container {
10
display: flex;
11
12
13
14
height: 500px;
background-color: yellow;
align-items: center;
justify-content: center;
15
}
16
17
18
19
.content {
background-color:
border: 2px solid
blue;
20
21
padding: 10px;
margin: 10px;
22
23
width: 200px;
height: auto;
24
25
26
27
28
}
</style>
29
</head>
30
31
<body>
32
<div class="container">
33
<div class="content">
ページ30:
Align Content Align Content Atribut align-content digunakan agar menyelaraskan Flex Item seperti ⚫ justify-content • Namun pada align-content, ini hanya bisa dilakukan jika menggunakan flex-wrap dengan nilai wrap atau wrap-reverse https://developer.mozilla.org/en -US/docs/Web/CSS/align- content flex-start flex-end center stretch space-between space-around
ページ31:
Contoh penulisan align-content (untuk flex-wrap)
File Edit Selection View
x-justify-content
Go Run
flexbox-align-tem
flexbox-align-content.html
flexbox-align-content.html > © html › @head > ©style> .container
<html lang="en">
<meta name="viewport" content="width=device-width, initial
<title>Flexbox Align Item</title>
.container {
4
<head>
6
7
8
<style>
9
18
11
12
13
14
15
16
}
17
18
19
display: flex;
height: 1200px;
background-color:
flex-wrap: wrap;
yellow;
align-content: center;
.content {
background-color:
belajar-css-layout
Flexbox Align Item x
http://127.0.0.1:3000/flexbox-align-content.html
Content 1
Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Accusamus aspernatur rem
quia aarum odit, omnis
sumquam similique obcaecati
itaque eveniet quae hic beat
com maiores, quibusdam sequi
ab ea seque
Content 2
Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Accusamus aspernatur rem
quis earum odit, omais
numquam similique obcaecati
itaque eveniet quae hic bestse
cum maiores, quibusdam sequi
ab ea beque
Content 3
Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Accusamus aspernatur rem
quia earum odit,
quam similique obcaecati
itaque event quae hic beatse
cum maiores, quibusdam sequi
ab es neque
aqua;
20
border: none;
21
padding: 10px;
22
margin: 10px;
23
width: 200px;
24
height: auto;
25
26
</style>
27
</head>
28
29
<body>
30
31
32
33
34
35
36
<div class="container">
<div class="content">
<h1>Content 1</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisi
numquam similique obcaecati itaque eveniet qui
</div>
<div class="content">
Content 4
Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Accusamus aspernatur rem
quia earum odit, omnis
mumquam similique obcaecati
itaque eveniet quae hic beatae
com maiores, quibusdam sequi
ab ea seque
Content 5
Lorem ipsum dolor sit amet
consectetur adipisicing elit
Accusamus aspernator rem
quis earum odit, omnis
numquam similique obcaecati
itaque eveniet quae hic beatae
com maiores, quibusdam sequi
ab ea neque
ページ32:
Gap Gap • Sebelumnya, untuk menambahkan gap (jarak) antar Flex Item, kita biasanya menggunakan margin Saat menggunakan Flexbox, lebih baik gunakan Gap untuk menentukan jarak dalam row (baris) atau column (kolom) https://developer.mozilla.org/en-US/docs/Web/CSS/gap https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap
ページ33:
Contoh penulisan Gap (column-gap, dan row-gap)s
Edit Selection View Go Run
febox-align-item.html.
flexbox-align-content.html
flexbox-gap.html> ☞ html > ✪ head >style> .container
<html lang="en">
3
<head>
7
13
flexbox-gap.html X▷
belajar-css-layout
Flexbox Gaps x
http://127.0.0.1:3000/mexbox-gap.html
08
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
<title>Flexbox Gaps</title>
<style>
.container {
padding: 10px;
display: flex;
background-color:
yellow;
flex-wrap: wrap;
row-gap: 10px;
column-gap: 10px;
Content 1
Lorem ipsum dolor sit amet
consectetur adipisicing elit
Accusamus aspernatur rem
quia earum odit, omnis
numquam similique obcaecati
itaque eveniet quae hic beatae
com maiores, quibusdam sequi
ab es neque
Content 2
Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Accusam pemature
quis earum odit, omnis
mquam similique obcaecati
itaque eveniet quae hic beatae
com maiores, quibusdam sequi
ab es neque
Content 3
Lorem ipsum dolor sit amet
consectetur adipisicing elit
Accusamus supernatur rem
quia aarom odit, om
quam samilique obcaecati
itaque eveniet quae hic beatar
cum maiores, quibusdam sequi
absque
15
}
17
18
19
.content (
background-color:
aqua;
border: 2px solid blue;
padding: 10px;
width: 200px;
height: auto;
Content 4
Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Accusamus aspernatur sem
quia earum odit, omnis
numquam similique obcaecati
itaque eveniet quae hic beatse
cam maiores, quibusdam equi
ab ea neque
Content 5
Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Accusamus aspernatur rem
quia earum odit, omnis
numquam similique obcaecati
itaque eveniet quae hic beatse
cum maiores, quibusdam sequi
ab ea neque
25
}
</style>
26 </head>
27
28
<body>
29
30
<div class="container">
<div class="content">
<h1>Content 1</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisic
numquam similique obcaecati itaque eveniet quae
ページ34:
8 - Grid Grid Grid Layout adalah sistem tata letak berbasis grid dua dimensi • Flexbox adalah Layout yang bagus, tapi hanya satu arah, dan cocok pada kasus tertentu Grid Layout adalah fitur CSS yang dibuat untuk mengatasi permasalahan tata letak yang kompleks Materi CSS
ページ35:
Contoh Penulisan layout-Grid (hampir sama
dengan normal flow)
intent.ht
Edit Selection View Go Run
flexbox-align-item.html.
belajar-
-layout
nexbox-align-content
>> flexbox-gap
grid.html
08
>>grid.html> <html > ☞ head > ☞ style > .containt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale-1.0">
<title>Grid</title>
/ tampilan grid seperti normal flow"/
5
6
7
<style>
8
9
.container (
10
display: grid;
11
12
.containt {
13
background-color:
14
border: 2px solid
aqua;
blue;
15
padding: 10px;
16
margin: 10px;
17
}
18
</style>
19
20
</head>
21
<body>
22
23
24
25
26
27
28
29
30
31
32
33
</div>
<div class="container"><div class="containt">
<h1>Content 1</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur conse
</div>
<div class="containt">
<h1>Content 2</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur conse
</div>
<div class="containt">
<h1>Content 3</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur conse
http://127.0.0.1:3000/grid.m
Content 1
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur consequuntur eum amet
possimus qui distinctio soluta ad nesciunt alias onde corrupti rem esse, dolorum.culpa
consequatur, exercitationem molestie, more eligendi
Content 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur consequuntur eum amet
possimus qui distinctio soluta ad nesciunt alias onde corrupti rem esse, dolorum culpa
consequatur, exercitationem molestiae, inre eligendi
Content 3
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur consequatur cum amet
possimus qui distinctio soluta ad nesciunt alias onde corrupti rem esse, dolorum culpa
consequatur, exercitationem molestiae iure eligendi!
Content 4
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur consequuntur eum amet
ページ36:
Grid Terminology 9 - Grid Terminologi Sebelum kita lanjut tentang Grid Container, kita akan bahas dulu tentang Grid Terminology, agar tidak bingung di materi selanjutnya Seperti yang sudah kita tahu, bentuk dari Grid itu mirip seperti tabel Materi CSS
ページ37:
Grid Line Garis pemisah dalam grid baik itu vertikal atau horizontal, kita sebut dengan Grid line
ページ38:
Grid Cell • Area yang terdapat didalam kolom dan baris yang dipisah oleh Grid line, kita sebut dengan Grid Cell
ページ39:
Grid Track Bagian antara dua Grid Line, atau bisa dibilang baris, kita sebut Grid Track
ページ40:
Grid Area Total area dari berbagai Grid Cell kita sebut dengan Grid Area
ページ41:
10 - Grid Template Grid Template • Untuk menentukan kolom dan baris dalam Grid, kita bisa menggunakan Grid Template • Atribut grid-template-columns digunakan untuk menentukan kolom https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template- columns • Atribut grid-template-rows digunakan untuk menentukan baris https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template- rows Materi CSS
ページ42:
Contoh penulisan grid-template-coloumns dan
grid-template-rows
File Edit Selection View Go Run
-item.html
flexbox-align-content
<>grid-template.html>@html> @head
1 <IDOCTYPE html>
2
<html lang="en">
4
<head>
5
7
11
belajar-css-layout
>>>flexbox-gap.html
grid.html
<>grid-template.html • ▷
Grid
http://127.0.0.1:3000/grid-template.html
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid</title>
<style>
/ tampilan grid seperti normal flow"/
.container {
display: grid;
grid-template-columns: 200px auto 200px;
grid-template-rous: 500px auto;
Content 1
Lorem ipsum dolor sit
amet consectetur
adipisicing elit. Pariatur
consequuntur eum amet
possimus qui distmctio
soluta ad nesciunt alias
unde compti rem
dolorum culpa
consequatur
exercitationem
molestiae, iure eligenda
Content 2
Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Pariatur consequantur eum amet
possimus qui distinctio soluta ad
Desciunt alias unde corrupti rem
dolorum culpa consequat
exercitationem molestie, iure
eligendi!
Content 3
Lorem ipsum dolor s
amet consectetur
adipisicing elit. Pariatur
consequuntur eum amet
possimus que distinctio
soluta ad nesciunt ali
unde cocrapti remese
dolorum culpa
consequatur,
exercitationem
molestiae, iure eligend
.containt (
background-color:
border: 2px solid
}
15
16
17
18
19
20
21
22
</style>
23
k/head>
24
<body>
25
26
27
28
29
30
padding: 10px;
margin: 10px;
aqua;
blue;
<div class="container">
<div class="containt">
<h1>Content 1</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatu
distinctio soluta ad nesciunt alias unde corrupti rem esse, dol
molestiae, iure eligendi!</p>
</div>
<div class="containt">
<h1>Content 2</h1>
cosLorem ipsum dolor sit amet cons
tetur adipisicing elit. Pariatu
Content 4
Lorem ipsum dolor sit
amet consectetur
adipiscing elit. Paristor
consequuntur e amet
possimus qui distinctio
soluta ad nescinat alias
Content 5
Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Pariatur consequatur eum amet
possimus qui distinctio soluts ad
sesciant alias wode coerupti rem
esse, dolorum culpa consequat,
ページ43:
- 11 Grid Items Grid Items Komponen Children langsung dari Grid Container kita sebut dengan Grid Item Ada banyak hal yang bisa kita lakukan di Grid Item, seperti memilih kolom, baris atau area Materi CSS
ページ44:
Grid Item Start dan End Grid Item Start dan End Grid Item bisa ditentukan mau mulai dari kolom atau baris berapa Bahkan, untuk mempermudah, ketika membuat row template dan column template, kita bisa memberi nama sehingga mudah digunakan https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column- start https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end
ページ45:
Contoh Penulisan Grid-Line dimana htmlnya berisi model website dengan class header, content dan footer File Edit Selection View Go Run in-tem flexbox-align-content.html. flexbox-gap.html grid.html grid-template.html belajar-css-layout grid-ine.html e Grid-Lines grid-line.html> html> body> div.container > div.content> p 2 <html lang="en"> <div class="container"> <div class="header"> Selamat datang di Web programer 74 </div> <div class="content"> <h1>Programer SMA 74</h1> 4 <head> 44 </head> 45 46 <body> 47 48 49 50 51 52 55 54 55 56 57 58 59 60 61 </div> 62 </div> 63 64 </body> 65 66 </html> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur voluptate <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, ex. Deserunt <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil enim nobis quo <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione, laborum! Dic <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione, laborum! Dic </div> <div class="footer"> Develop with hard working by Programer SMA 74 http://127.0.0.1:3000/grid-line.html Selamat datang di Web programer Programer SMA 74 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur voluptates vel veritatis est, minus provident, inventore beatae accusamus, laborum odio placeat assumenda. Officia magnam aperiam odit id labore, voluptatum incidunt. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, ex. Deserunt quasi rerum, magnam amet reiciendis, cum fuga eum voluptatem praesentium alias ad corrupti iure obcaecati facilis eveniet sapiente! Consectetur? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil enim nobis quo neque saepe eos asperiores eveniet praesentium, quos iste, expedita magnam perferendis dicta voluptas incidunt vero cum repudiandae quas? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione, laborum! Dicta, labore magnam? Consectetur aspernatur, enim unde impedit voluptas ducimus maxime voluptatibus reiciendis sapiente odio amet illum eligendi possimus iure. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione, laborum! Dicta, labore magnam? Consectetur aspernatur, enim unde impedit voluptas ducimus maxime voluptatibus reiciendis sapiente odio amet illum eligendi
ページ46:
Contoh Penulisan Grid-Line-colomn dan Grid-Line-
row pada Grid-template-(colomn dan row)
File
Edit Selection View Go Run
nl
<> flexbox-align-content.html •
<>flexbox-gap.html
<> grid.html
belajar-css-layout
>>grid-template.html
grid-line.html
Grid - Lines x
grid-line.html > html> body > div.container > div.content> p
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid - Lines</title>
/* tampilan grid seperti normal flow*/
.container (
display: grid;
grid-template-columns: [cline1] 100px [cline2] auto [cline3] 100px [cline4];
grid-template-rows: [rline1] 50px [rline2] auto [rline3] 100px [rline4];
1
<!DOCTYPE html>
2
<html lang="en">
9
3
4
<head>
5
<meta charset="UTF-8">
6
7
8
<style>
9
10
11
12
13
14
}
15
16
17
18
19
20
21
}
22
23
24
25
.containt (
background-color:
border: 2px solid blue;
padding: 10px;
margin: 10px;
.header {
background-color:
grid-column-start: clinel;
grid-column-end: cline4;
222
26
27
aqua;
chocolate;
grid-row-start: rlinel;
grid-row-end: rline2;
http://127.0.0.1:3000/grid-line.htn
Selamat datang di Web programer 74
Programer
SMA 74
Lorem ipsum dolor sit
amet, consectetur
adipisicing elit.
Consectetur voluptates
vel veritatis est, minus
provident, inventore
beatae accusamus,
laborum odio placeat
assumenda. Officia
magnam aperiam odit
id labore, voluptatum
incidunt.
Lorem ipsum dolor sit
amet consectetur
adipisicing elit.
Dolores, ex. Deserunt
quasi rerum, magnam
amet reiciendis, cum
fuga eum voluptatem
praesentium alias ad
corrupti iure obcaecati
ページ47:
Contoh penulisan penempatan grid-
(colomn&row)-(start&end)
belajar-css-layout
flexbox-gal
gri
>>grid-template.html >>grid-in
File Edit Selection View Go Run
exbox-align-item.html
flexbox-align-content.html.
grid-line.html> html>body> div.container > div.content> p
2
<html lang="en">
<head>
8
<style>
.containt (
17
18
19
20
}
background-color:
aqua;
border: 2px solid blue;
padding: 10px;
margin: 10px;
@
22
.header {
background-color:
chocolate;
grid-column-start: clinel;
grid-column-end: cline4;
grid-row-start: rline;
grid-row-end: rline2;
27
28
}
29
30
.footer {
background-color:
chartreuse;
grid-column-start: clinel;
grid-column-end: cline4;
grid-row-start: rline;
37
38
39
40
41
42
}
grid-row-end: cline4;
.content {
}
background-color:
bisque;
grid-column-start: cline2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
</style>
Grid-Lines x
http://127.0.0.1:3000/grid-line.html
Selamat datang di Web programer 74
Programer
SMA 74
Lorem ipsum dolor sit
amet, consectetur
adipisicing elit.
Consectetur voluptates vel
veritatis est, minus
provident, inventore
beatae accusamus
laborum odio placeat
assumenda. Officia
magnam aperiam odit id
labore, voluptatum
incidunt.
Lorem ipsum dolor sit
amet consectetur
adipisicing elit. Dolores,
ex. Deserunt quasi rerum,
magnam amet reiciendis,
cum fugs eum voluptatem
praesentium alias ad
corrupti iure obcaecati
facilis eveniet sapiente!
Consectetur?
Lorem ipsum dolor sit
amet, consectetur
adipisicing elit. Nihil
ページ48:
Grid Area Grid Area Saat kita membuat Grid, kita bisa membuat Grid Area dengan menentukan nama dari Grid Area tersebut • Untuk membuat Grid Area, kita bisa menggunakan atribut grid- template-areas https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template- areas • Dan untuk menentukan Grid Item muncul di area mana, kita bisa gunakan atribut grid-area https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area Penggunaan Grid Area lebih mudah dibanding Grid Item Start dan End
ページ49:
Contoh Penulisan Grid-template-Area di panggilnya
dengan Grid-Area
belajar-css-layout
latihan-css-layout.html?
<>grid-area.html
Grid Area x
File
Edit
Selection View Go Run
grid.htmlx
<> grid-area.html>
grid-template.html
html> head >style> s containt
2
<html lang="en">
<head>
<style>
10
11
12
13
14
15
16
17
18
19
}
20
21
22
.container {
display: grid;
grid-template-columns: 100px auto 100px;
grid-template-rows: 100px auto 50px;
grid-template-areas:
"header header header"
".content.”
"footer footer footer";
.containt{
background-color:
aqua
border: 2px solid blue;
padding: 10px;
margin: 10px;
.header {
background-color:
grid-area: header;
chocolate;
29
30
}
31
32
.footer {
background-color:
Ichartreuse;
34
grid-area: footer;
35
36
}
.content {
background-color: Ibisque;
http://127.0.0.1:3000/grid-area.html
Selamat datang di Web programer 74
Programer SMA 74
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur voluptates vel
veritatis est, minus provident, inventore beatae accusamus, laborum odio placeat
assumenda. Officia magnam aperiam odit id labore, voluptatum incidunt.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, ex. Deserunt quasi
rerum, magnam amet reiciendis, cum fuga eum voluptatem praesentium alias ad corrupti
iure obcaecati facilis eveniet sapiente! Consectetur?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil enim nobis quo neque
saepe ecs asperiores eveniet praesentium, quos iste, expedita magnam perferendis dicta
voluptas incidunt vero cum repudiandae quas?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione, laborum! Dicta, labore
magnam? Consectetur aspernatur, enim unde impedit voluptas ducimus maxime
voluptatibus reiciendis sapiente odio amet illum eligendi possimus iure.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione, laborum! Dicta, labore
magnam? Consectetur aspernatur, enim unde impedit voluptas ducimus maxime
voluptatibus reiciendis sapiente odio amet illum eligendi possimus iure.
Develop with hard Working by Programer SMA 74
ページ50:
Grid Alignment 12 - Grid Alignment Grid juga sama seperti Flexbox, kita bisa lakukan penyelarasan seperti layaknya di Flexbox • Salah satu perbedaanya, dalam Grid, kita bisa melakukan penyelarasan Seluruh Grid Cell, atau hanya untuk satu Grid Cell saja Materi CSS
ページ51:
Justify Content Justify Content Saat kita menggunakan Grid, kita bisa menggunakan atribut justify- content menentukan bagaimana Web Browser menentukan jarak antar Grid Column Ada banyak nilai yang bisa kita gunakan dalam justify-content, seperti yang terlihat di gambar • https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
ページ52:
Contoh penulisan Justify Content
File Edit Selection View Go Run
latihan-css-layout.html 7.
grid-justify-content.how>@hm>
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
5
layout
<>grid-justify-content.html X
Grid Justify Content x
head>style> .container
http://127.0.0.1:3000/grid-justify-content.html
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale-1
<title>Grid Justify Content </title>
<style>
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
justify-content: space-evenly;
12
13
14
.conten{
15
background-color:
blanchedalmond;
16
17
18
19
20
</style>
padding: 10px;
border: 1px solid brown;
text-align: center;
21
</head>
22
<body>
23
24
25
26
27
28
29
30
32
35
<div class="container">
<div class="conten">1</div>
<div class="conten">2</div>
<div class="conten">3</div>
<div class="conten">4</div>
<div class="conten">5</div>
<div class="conten">6</div>
<div class="conten">7</div>
<div class="conten">8</div>
<div class="conten">9</div>
</div>
9
ページ53:
Align Content Align Content Atribut align-content digunakan agar menyelaraskan Grid Row seperti justify-content https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
ページ54:
Contoh Penulisan grid- align- Content
File Edit Selection View Go Run
latihan-css-layout.html •
>>grid-align-content.html> <html> <head> <style>
<!DOCTYPE html>
belajar-css-layout
grid-area.html •
grid-justify-content.html
<>grid-align-content.html x
Grid Justify Content x
.container
http://127.0.0.1:3000/grid-align-content.html
2
<html lang="en">
<head>
6
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Justify Content </title>
<style>
.container {
background-color:
height: 500px;
display: grid;
aqua;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
align=content: space-evenly;
Justify-content: space-between;
16
17
}
18
19
20
.conten (
background-color: blanchedalmond;
padding: 10px;
border: 1px solid brown;
text-align: center;
25
</style>
26
</head>
27
28
<body>
29
31
<div class="container">
<div class="conten">1</div>
<div class="conten">2</div>
<div class="conten">3</div>
<div class="conten">4</div>
ページ55:
Justify Items Justify Items • Justify Content akan melakukan penyelarasan seluruh Grid Item beserta Grid Line, namun pada Justify Items, penyelasan hanya dilakukan di level Grid Item di dalam Grid Cell, tanpa mengubah posisi Grid Line https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items
ページ56:
Contoh penulisan grid justify item
File Edit Selection View Go Run
belajar-ca-layout
grid-justify-item.htmlxgrid-linemi ▷
Grid Justify Content><
grid-align-content
grid-area.html .
grid-justify-content
<grid-justify-lehtml> html>head>style> .container
1
<!DOCTYPE html>
2
<html lang="en">
3
4
<head>
5
6
7
8
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale-1.0">
<title>Grid Justify Content </title>
<style>
/*yang berubah hanya grid itemya bukan grid line */
.container (
background-color: aqua;
height: 500px;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
justify-items: center;
10
11
12
15
14
15
16
17
18
19
.conten{
20
21
22
23
24
25
</style>
26
</head>
27
28
<body>
29
30
31
32
33
<div class="container">
<div class="conten">1</div>
<div class="conten">2</div>
<div class="conten">3</div>
<div class="conten">4</div>
background-color:
padding: 10px;
blanchedalmond;
border: 1px solid brown;
text-align: center;
http://127.0.0.1:3000/grid-justify-item.html
S
ページ57:
Align Items Align Items Align Items akan melakukan penyelarasan di level Grid Cell https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
ページ58:
Contoh penulisan align item (yang digabung dengan
justify item, justify content, dan align item)
File
Edit
Selection View Go Run
grid-justify-content.html X
grid-align-content.html
grid-justify-item.htm
grid-align-item.html
belajar-ss-layout
<>grid-html▷
Grid Align Hem
http://127.0.0.1:3000/grid-align-item.html
<>grid-align-item.html> <html> head >style> .container
1
<!DOCTYPE html>
2
<html lang="en">
3
4
<head>
5
<meta charset="UTF-8">
B
<meta name="viewport" content="width=device-width, initial-scale-1.0">
<title>Grid Align Item </title>
/*yang berubah hanya grid itemnya bukan grid line "/
.container (
background-color:
height: 500px;
display: grid;
aqua;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
align-items: center;
Justify-items: center;
justify-content: center;
align-content: center;
8
<style>
9
30
11
12
13
14
15
16
17
18
19
20
}
21
22
23
24
25
26
27
}
28
</style>
29
</head>
30
8
31
<body>
32
33
.conten{
background-color:
padding: 10px;
blanchedalmond;
border: 1px solid brown;
text-align: center;
<div class="container">
<div class="conten">1</div>
4
VA
5
ページ59:
Justify dan Align Self Justify dan Align Self Sebelumnya untuk Justify Content / Items dan Align Content / Items, akan berdampak ke semua Grid Item • Namun jika kita ingin membuat Justify dan Align hanya untuk salah satu Grid Item, kita bisa menggunakan Justify dan Align Self • https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
ページ60:
Contoh Penulisan justify dan align self (mengatur
item nya saja tidak berpengaruh ke lain)
File Edit Selection View Go Run
grid-align-content.htmlx
grid-justify-item
© grid-self.html> html> head> style
grid-align-item.html⚫grid-selt.html XD
belajar-css-layout
Grid Align item x
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Align Item </title>
1
<!DOCTYPE html>
2
<html lang="en">
3
4
<head>
5
0
7
8
<style>
9
10
11
12
13
14
15
16
17
18
/*yang berubah hanya grid itemnya bukan grid line */
.container {
19
20
}
21
22
23
24
25
26
}
27
28
29
30
}
31
</style>
background-color:
height: 500px;
display: grid;
aqua;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
align-items: center;
justify-items: center;
justify-content: center;
align-content: center;
.conten (
background-color:
padding: 10px;
blanchedalmond;
border: 1px solid #brown;
text-align: center;
.content (
justify-self: start;
align-self: self-start;
http://127.0.0.1:3000/grid-self.html
141
8
3
6
ページ61:
Gap (Bila mengunakan gap biasanya jangan mengunakan margin) Gap Gap, selain digunakan di Flexbox, juga bisa digunakan di Grid Tujuannya juga sama, untuk menambah jarak antar Grid Cell https://developer.mozilla.org/en-US/docs/Web/CSS/gap https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap
ページ62:
13 - Sub grid Subgrid • Saat kita membuat tata letak yang sangat kompleks, kadang kita sering menjadikan Grid Item menjadi Grid Container lagi • Pada kasus tertentu, walaupun Grid Item tersebut merupakan Grid Container, • namun kadang kita ingin aturan row dan column nya ingin mengikuti aturan Grid • Container yang ada diatasnya • Pada kasus seperti ini, kita bisa menggunakan Subgrid Materi CSS
ページ63:
Contoh penulisan code html dimana parent nya adalah container sedangkan childnya adalah content1 File Edit Selection View Go .html grid-align-item.html. <grid-self.html subgrid.html> html> head > @style> .content <html lang="en"> <div class="container"> <div class="content1"> 2 3 <head> 300 </style> 31 </head> 32 <body> 33 34 35 36 37 38 39 40 41 42 43 44 45 </div> 46 47 </body> 48 </html> <div class="inner">1</div> <div class="inner">2</div> <div class="inner">3</div> <div class="inner">4</div> <div class="inner">5</div> <div class="inner">6</div> <div class="inner">7</div> <div class="inner">8</div> <div class="inner">9</div> </div> P belajar-css-layout Release Notes: 1.96.2 <>subgrid.html Subgrid http://127.0.0.1:3000/subgrid.html 0 0 0 0
ページ64:
Contoh penulisan code CSS dimana parent nya adalah
container sedangkan childnya adalah content1
File Edit Selection View
\.html
grid-align-item.html
<grid-self.html
>subgrid.html> html> head > style > .content
1
<!DOCTYPE html>
2 <html lang="en">
Release Notes 1.96.2
subgrid.html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Subgrid</title>
3
<head>
4
<meta charset="UTF-8">
5
6
7
<style>
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.container (
}
display: grid;
grid-template-rows: 100px 100px 100px 100px 100px;
grid-template-columns: 100px 100px 100px 100px 100px;
background-color:
height: 500px;
width: 500px;
.contenti (
grid-column: 2/5;
grid-row: 2/5;
aqua;
background-color: blueviolet;
display: grid;
/*nilai subgrid dari grid-tempalte-row dan colomn
akan mengikuti parent grid tamplate row dan colomn diatasnya*/
grid-template-rows: subgrid j
grid-template-columns: subgrid;
.inner {
</style>
29
30
31
</head>
32
<body>
33
background-color: Obrown;
margin: 5px;
<div class="container">
Subgrid
http://127.0.0.1:3000/subgrid.html
ページ65:
14-Multiple Column Multiple Column Multiple column layout adalah cara untuk membuat tata letak seperti kolom dalam koran • Cara untuk membuat column adalah dengan menggunakan attribute column-count https://developer.mozilla.org/en-US/docs/Web/CSS/column-count • Atau jika kita ingin menentukan lebar kolom, tanpa peduli jumlah kolom yang akan dibuat, kita bisa gunakan atribut column-width https://developer.mozilla.org/en-US/docs/Web/CSS/column-width Materi CSS
ページ66:
Contoh penulisan Multiple Colom mengunakan colomn count File Edit Selection View Go grid-self.html Release Notes 1.96.2 x subgrid.htm O belajar-css-layout multiple-colomn.html grid-line.html Multiple-Colomn x multiple-colomn.html> html> head >style> .container 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 6 7 <style> 8 9 column-count: 4; 10 <meta name="viewport" content="width=device-width, initial-scale=1 <title>Multiple-Colomn</title> .container ( http://127.0.0.1:3000/multiple-colomn.html Judul Paragrap Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae similique distinctio iure, nisi expedita magnam porro enim dolorum nam ullam sunt nobis commodi rem repellat alias aliquam non velit nesciunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, doloribus? Eius magnam possimus praesentium facere incidunt repellat eveniet iure molestias neque temporibus illo sit doloribus, dolor, quos, ipsam deleniti impedit? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique, quos repellat inventore molestias optio cum, quo quod ipsum laborum repudiandae quisquam rem tenetur aliquid, doloremque totam explicabo consectetur at odio! 11 12 } </style> 13 </head> 14 <body> 15 16 17 18 19 20 <div class="container"> <h1>Judul Paragrap</h1> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. V <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. V <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. S </div> 21 </body> 22 </html>
ページ67:
Contoh penulisan Multiple Colom mengunakan
colomn witdh
File Edit Selection View Go
gnd-sel html
Release Notes: 1.962 x
P belajar-css-layout
sub-> >> multiple-colomn.html
grid-line.htm***
multiple-colomn.html > html> head >style> .container
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<meta name="viewport" content="width=device-width, initial-scale-1
<title>Multiple-Colomn</title>
.container {
}
7
<style>
8
9
10
11
12
</style>
13
</head>
14
<body>
15
16
17
18
19
20
21
</body>
22
</html>
column-width: 250px;
<div class="container">
<h1>Judul Paragrap</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. V
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. V
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. 5
</div>
Multiple-Colomn x
http://127.0.0.1:3000/multiple-colomn.html
Judul Paragrap
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Vitae similique distinctio iure, nisi expedita magnam porro
enim dolorum nam ullam sunt nobis commodi rem repellat
alias aliquam non velit nesciunt!
... 90
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Velit, doloribus? Eius magnam possimus praesentium
facere incidunt repellat eveniet iure molestias neque
temporibus illo sit doloribus, dolor, quos, ipsam deleniti
impedit?
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Similique, quos repellat inventore molestias optio cum, quo
quod ipsum laborum repudiandae quisquam rem tenetur
aliquid, doloremque totam explicabo consectetur at odio!
ページ68:
Column Style Column Style Kita juga bisa mengubah Style untuk Column • Atribut column-gap untuk mengatur jarak Column • https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap • Atribut column-rule untuk mengatur border dari Column • https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule
ページ69:
Contoh penulisan Colom style yaitu colomn-gap dan colomn-rule(untuk membuat garis) http://127.0.0.1:3000/multiple-colomn.html File Edit Selection View Go grid-self.htm P belajar-css-layout Release Notes: 1.96.2 x subgrid multiple-colomn.html Multiple-Colomnx multiple-colomn.html>@html 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 5 6 7 <style> <meta charset="UTF-8"> <meta name="viewport" content="width-device-width, initial-scale-1 <title>Multiple-Colomn</title> .container ( /*ingin membuat artikel seperti di koran */ column-count: 3; column-gap: 20px; column-rule: 3px solid black; Judul Paragrap Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae similique distinctio iure, nisi expedita magnam porro enim dolorum nam ullam sunt nobis commodi rem repellat alias aliquam non velit nesciunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, doloribus? Eius magnam possimus praesentium facere incidunt repellat eveniet iure molestias neque temporibus illo sit doloribus, dolor, quos, ipsam deleniti impedit? Lorem ipsum dolor sit amet consectetur, adipisicing elit Similique, quos repellat inventore molestias optio cum, quo quod ipsum laborum repudiandae quisquam rem tenetur aliquid, doloremque totam explicabo consectetur at odio! 10 11 12 13 } 14 </style> 15 </head> 16 <body> 17 18 19 20 21 22 23 </body> 24 </html> <div class="container"> <h1>Judul Paragrap</h1> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. V <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. V <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. s </div>
ページ70:
15 - Float Float • CSS memiliki atribut float, yang sebelum ada Flexbox dan Grid, dulu Float biasanya digunakan untuk membuat Layout • Atribut float digunakan untuk memposisikan elemen pada web, sekarang biasanya digunakan untuk gambar • https://developer.mozilla.org/en-US/docs/Web/CSS/float Materi CSS
ページ71:
Contoh penulisan Float di CSS
File Edit Selection View Go
latihan-css-layout.html?
flost.html> <html> <head> <style> ht
belajar-css-layout
subgrid.htm
multiple-colom
float.html
grdne
Float
http://127.0.0.1:3000/mo.html
1 <!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
6
<meta name="viewport" content="width=device-width, initial-scale-1.0">
<title>Float</title>
<style>
.container {
background-color:
laquamarine;
padding: 10px;
width: 300px;
height: 200px;
float: inline-end;
9
10
11
12
}
13
ing (
14
15
16
17
18
}
19
20
22
}
22
23
24
29
</style>
26
</head>
27
<body>
28
29
.artikel (
h1 {
padding: 10px;
text-align: center;
<div class="container">
<h1>Judul Artikel</h1>
<div class="image">
<img src="IMG_1318.JPG" alt="Colsplay Japaness">
</div class="artikel">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aut tota
calorem ipsum dolor sit amet consectetur adipisicing elit.
Facilis
Judul Artikel
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Aut totam suscipit saepe vero amet esse incidunt fugit
magni rerum a labore unde necessitatibus quis temporibus
aliquid, ex deserunt veritatis illum?
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Facilis sint quia impedit, voluptatibus obcaecati assumenda
expedita vitae quas fugiat dolore eaque ducimus, beatse
rerum accusantium iure iste error voluptas animi.
Lorem ipsum dolor, sit amet consectetur adipisicing elit
Cumque voluptate praesentium reiciendis, incidunt eos perspiciatis ipsa dolorem autem id cum, laborum at
sunt mollitia asperiores dignissimos voluptatibus consectetur beatae aut
ページ72:
16 - Positioning Positioning Positioning memungkinkan kita meletakkan posisi elemen di tempat yang tidak sesuai dengan Normal Flow Misal meletakkan elemen di atas elemen lain, atau meletakkan elemen di posisi yang selalu sama di Viewport browser Untuk mengubah posisi elemen, kita bisa menggunakan atribut position https://developer.mozilla.org/en-US/docs/Web/CSS/position Secara default, position bernilai static, artinya dia akan ditempatkan sesuai dengan Normal Flow Materi CSS
ページ73:
Relative Positioning Relative Positioning Relative positioning adalah posisi mirip seperti static positioning, dimana element akan ditempatkan sesuai Normal Flow. Namun setelah ditempatkan, kita bisa mengubah posisi elemen. • Pada static positioning, mengubah posisi tidak akan berdampak apapun
ページ74:
Contoh penulisan position relative
File Edit Selection View Go
subgrid.htm
multiple-colom
belajar-css-layout
ht
position relative.html
grith-line.html
Position Relative x
position-relative.html> © Hms › ✪ head > © style > .content2
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale-1.0"
3
!DOCTYPE html>
2
3
<head>
4
5
6
7
<style>
8
9
18
<title>Position Relative</title>
.content {
background-color:
width: 200px;
aquamarine;
11
12
33
24
15
16
17
28
}
height: 200px;
display: inline-block;
.content2 (
position: relative;
background-color: blueviolet;
top: 20px;
left: 20px;
19
}
20
</style>
21
/heads
22
-body>
23
24
25
26
27
28
29
30
<div class="content contenti">
<h1>Conten 1</h1>
</div>
<div class="content content2">
<h1>Conten 2</h1>
</div>
<div class="content content3">
<h1>Conten 3</h1>
31
</div>
32
:/body>
33
</html>
https://127.0.0.1:3000/position relative.html
Conten 1
Conten 3
Conten 2
ページ75:
Absolute Positioning Absolute Positioning Absolute positioning adalah menghapus elemen dari Normal Flow, bahkan tidak ada space yang digunakan sama sekali Posisi awal untuk elemen absolute adalah relative ke posisi terdekat dengan elemen sebelumnya, atau jika tidak ada, berarti di awal block element parent nya Jika elemen absolute tidak memiliki parent, maka parent nya adalah html
ページ76:
Contoh Penulisan position Absolut
File Edit Selection View Go
multiple-com.htmlx
position-absolut.html > html> body> div.content.content2
2 <html lang="en">
6
<head>
belajar-css-layout
▸ position-relative.html.
position-absolut.html x
Position Absolute
http://127.0.0.1:3000/position-absolut.html
Conten 2
Conten 3
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale-1.0"
<title>Position Absolute</title>
<style>
.content {
background-color:
width: 200px;
aquamarine;
height: 200px;
}
display: inline-block;
/*posisi content 2 menghilangkan posisi seblumnya beda denga relative
dimana posisi awal conten2 tidak hilang */
.content2 (
13
14
15
16
17
18
19
20
21
22
}
23
</style>
24
</head>
25
26
<body>
27
28
29
30
31
position: absolute;
background-color: blueviolet;
top: 20px;
left: 20px;
<div class="content content1">
<h1>Conten 1</h1>
</div>
<div class="content content2">
<h1>Conten 2</h1>
</div>
<div class="content content3">
<h1>Conten 3</h1>
33
34
35
</div>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum, deserunt accusantium fugiat molestias
dignissimos sure, beatae asperiores, illum facilis repellat eius odit! Labore error dolorem necessitatibus quas
molestias perspiciatis officia
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum, deserunt accusantium fugiat molestias
dignissimos iure, beatae asperiores, illum facilis repellat eius odit! Labore error dolorem necessitatibus quas
molestias perspiciatis officia.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum, deserunt accusantium fugiat molestias
dignissimos sure, beatae asperiores, illum facilis repellat eius odit! Labore emor dolorem necessitatibus quas
molestias perspiciatis officia.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum, deserunt accusantium fugiat molestias
dignissimos iure, beatae asperiores, illum facilis repellat eius odit! Labore error dolorem necessitatibus quas
molestias perspiciatis officia..
ページ77:
Z-Index Z-Index • Saat kita menggunakan Relative dan Absolute Positioning, yang mulai ⚫ mengganggu adalah elemen akan saling bertumpuk Secara default saat menggunakan relative dan absolute, maka posisi akan diatas element yang static, tapi bagaimana jika ternyata kita ingin mengubah posisi tumpukan? • Untuk mengubah posisi tumpukan elemen, kita bisa menggunakan atribut z-index, yang secara default bernilai auto atau 0 • Semakin tinggi nilai z-index, artinya posisi akan semakin diatas • https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
ページ78:
Contoh penulisan Z-index (dimana nilai minus berarti
posisi ada dibawah, kalau plus diatas)
File Edit Selection View Go
<oat.html X
position-relative
belajar-css-layout
position-absolut.html
z-index.html X grid-m
Position Absolute X
z-indexhtml> html> head > > style
<!DOCTYPE html>
1
2
<html lang="en">
3
4
<head>
5
6
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Position Absolute</title>
8
<style>
.content {
background-color:
width: 200px;
height: 200px;
aquamarine;
display: inline-block;
http://127.0.0.1:3000/z-index.html
Conten 1
Conten 3
/*z index seperti tumpukan bila nilainya minus maka ada di lapisan bawah
bila nilainya plus maka ada diatasnya"/
.content2 {
position: absolute;
background-color: blueviolet;
top: 210px;
left: 210px;
z-index: -1;
13
14
}
15
16
17
18
19
20
21
22
23
24
}
25
</style>
26
</head>
27
28
<body>
29
30
31
32
33
<div class="content content1">
<h1>Conten 1</h1>
</div>
<div class="content content2">
<h1>Conten 2</h1>
Lorem ipsum dolor sit amet consectetur, adipiscing elit. Voluptatum, deserunt accusantium fugiat
molestias dignissimos sure, beatonten facilis repellat eius odit! Labore error dolorem
necessitatibus quas molestias perspiciatis officia
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, deserunt accusantium fugiat
molestias dignissimos sure, beatae asperiores, illum facilis repellat eius odit! Labore error dolorem
necessitatibus quas molestias perspiciatis officia
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, deserunt accusantium fugiat
molestias dignissimos iure, beatae asperiores, illum facilis repellat eius odit! Labore error dolorem
necessitatibus quas molestias perspiciatis officia
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum, deserunt accusantium fugiat
molestias dignissimos sure, beatae asperiores, illum facilis repellat eius odit! Labore error dolorem
necessitatibus quas molestias perspiciatis officia
ページ79:
Fixed Positioning Fixed Positioning Fixed positioning adalah menghapus elemen dari Normal Flow, bahkan tidak ada space yang digunakan sama sekali, jadi sama seperti Absolute positioning • Posisi awal untuk elemen absolute adalah relative ke posisi terdekat dengan elemen sebelumnya, atau jika tidak ada, berarti di awal block element parent nya Namun yang membedakan dari Absolute adalah, perubahan posisi pada element fixed, dia akan relative ke viewport (halaman web yang terlihat) • Oleh karena itu, jika halaman web kita scroll, maka elemen fixed akan diam ditempat, dan tidak akan mengikuti scroll
ページ80:
Contoh penulisan Position-Fixed
File Edit Selection View Go
alive.htm
<>position-absolut.html
<>position-fixhtml> © htm > © head > © style
belajar css-layout
>position-fichtml x <>grid-▷
Position Absolute
http://127.0.0.1:3000/position-fixt
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1
<title>Position Absolute</title>
laquamarine;
<!DOCTYPE html>
2
<html lang="en">
3
4
<head>
5
B
7
8
<style>
9
.content {
10
background-color:
11
width: 200px;
12
13
height: 200px;
display: inline-block;
14
}
15
16
17
18
19
20
21
22
/*posisi content 2 akan tetap pada vieportnya
artinya ketika discroll dia diam */
.content2 {
</style>
24
25
26
</head>
27
28
<body>
29
32
position: fixed;
background-color: blueviolet;
top: 220px;
left: 220px;
z-index: -1;
<div class="content content1">
<h1>Conten 1</h1>
</div>
<div class="content content2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, deserunt accusantium fugiat molestias
dignissimos sure, beatae asperiores, illum facilis repellat eius odit! Labore error dolorem necessitatibus quas molestias
perspiciatis officia
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, deserunt accusantium fugiat molestias
dignissimos sure, beatae asperiores, illum facilis repellat eius odit! Labore error dolorem necessitatibus quas molestias
perspiciatis officia
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, deserunt accusantium fugiat molestias
dignissimos sure, beatae asperiores faciles pellet dit! Labore error dolorem necessitatibus quas molestias
perspiciatis officia
Conten 2
Lorem ipsum dolor sit amet consectetur og elit. Voluptatum, deserunt accusantium fugiat molestias
dignissimos sure, beatae asperiores, illum facilis repellat eius odit! Labore error dolorem necessitatibus quas molestias
perspiciatis officis
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, deserunt accusantium fugiat molestias
dignissimos sure, beatae asperiores, illum facilis repellat esos odit! Labore error dolorem necessitatibus quas molestias
perspiciatis officia
Lorem ipsum dolor sit amet consecte pentcing ent. Volopritum, deserunt accusantium fugiat molestias
dignissimos sure, beatae asperiores, illum facilis repellat eius odit! Labore error dolorem necessitatibus quas molestias
perspiciatis officia
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, deserunt accusantium fugiat molestias
dignissimos iure, beatae asperiores, illum facilis repellat eius odit! Labore error dolorem necessitatibus quas molestias
perspiciatis officia
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum, deserunt accusantium fugiat molestias
dignissimos sure, beatae asperiores, illum facilis repellat eius odit! Labore error dolorem necessitatibus quas molestias
perspiciatis officia
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum, deserunt accusantium fugiat molestias
dignissimos sure, beatae asperiores, illum facilis repellat eius odit! Labore error dolorem necessitatibus quas molestias
perspiciatis officia
ページ81:
Sticky Positioning Sticky Positioning • Sticky positioning adalah gabungan antara relative dan fixed position Sticky positioning akan menampilkan elemen seperti relative positioning, yang artinya dalam Normal Flow, namun ketika elemen di scroll dalam ambang batas yang sudah disesuaikan, maka otomatis akan menjadi fixed positioning
ページ82:
Contoh penulisan position-sticky dimana biasanya
dipakai pada style menu sebuah website
× File Edit Selection View Go
n-relative.html
position-absolut.html
z-index.html
position-chb
position-sticky.html
belajar-css-layout
Position Sticky
position-sticky.html> <html> <head> style
1 <!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1
<title>Position Sticky </title>
/sticky dipakai di menu ketika dscroll
dia ada relatifnya lalu fixed ketika di scroll "/
.sticky {
background-color:
position: sticky;
z-index: 1;
top: 20px;
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
6
7
<style>
8
9
10
11
12
13
14
15
16
17
18
19
<body>
20
21
22
23
24
25
26
27
28
29
30
31
32
</style>
</head>
pink;
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Invent
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit
<p class="sticky">Lorem ipsum dolor, sit amet consectetur adipisic
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit
http://127.0.0.1:3000/position-sticky.html
earum, dignissimos, animi rerum dolor? Aperiam vero aliquam perferendis excepturi beatae aut rerum cumque!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit cupiditate quam odit est, enim similique repellendus
earum, dignissimos, animi rerum dolor? Aperiam vero aliquam perferendis excepturi beatae aut rerum cumque
earum, dignissimos, animi rerum dolor? Aperiam vero aliquam perferendis excepturi beatae aut rerum cumque!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit cupiditate quam odit est, enim similique repellendus
earum, dignissimos, animi rerum dolor? Aperiam vero aliquam perferendis excepturi beatae aut rerum cumque!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit cupiditate quam odit est, enim similique repellendus
earum, dignissimos, animi rerum dolor? Aperiam vero aliquam perferendis excepturi beatae aut rerum cumque!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit cupiditate quam odit est, enim similique repellendus
earum, dignissimos, animi rerum dolor? Aperiam vero aliquam perferendis excepturi beatae aut rerum cumque!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit cupiditate quam odit est, enim similique repellendus
earum, dignissimos, animi rerum dolor? Aperiam vero aliquam perferendis excepturi beatae aut rerum cumque!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit cupiditate quam odit est, enim similique repellendus
earum, dignissimos, animi rerum dolor? Aperiam vero aliquam perferendis excepturi beatae aut rerum cumque!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit cupiditate quam odit est, enim similique repellendus
earum, dignissimos, animi rerum dolor? Aperiam vero aliquam perferendis excepturi beatae aut rerum cumque!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit cupiditate quam odit est, enim similique repellendus
earum, dignissimos, animi rerum dolor? Aperiam vero aliquam perferendis excepturi beatae aut rerum cumque!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit cupiditate quam odit est, enim similique repellendus
earum, dignissimos, animi rerum dolor? Aperiam vero aliquam perferendis excepturi beatae aut rerum cumque!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit cupiditate quam odit est, enim similique repellendas
earum, dignissimos, animi rerum dolor? Aperiam vero aliquam perferendis excepturi beatae aut rerum cumque!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit cupiditate quam odit est, enim similique repellendus
earum, dignissimos, animi rerum dolor? Aperiam vero aliquam perferendis excepturi beatae aut rerum cumque!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit cupiditate quam odit est, enim similique repellendus
earum, dignissimos, animi rerum dolor? Aperiam vero aliquam perferendis excepturi beatae aut rerum cumque!
T
ページ83:
- 17 Fraction Unit Fraction Unit Saat kita membuat layout, kadang kita akan sering menggunakan satuan unit bernama fr (fraction) • Fraction adalah sisa ruang dalam Grid, sisa ruang biasanya adalah sisa ruang yang bisa diisi setelah di kurangan Grid Item yang tidak flexible (ukurannya sudah fix) • Cara perhitungan fr mirip dengan flex-grow, dimana ukurannya akan dihitung dari total fr • Misal jika sisa ruang adalah 1000px, dan total fr adalah 20fr, maka 1 pr bernilai 50px Materi CSS
ページ84:
Fraction adalah satuan yang membagi sisa ukuran
dari content yang fixed (1fr artinya 1 bagian)
http://127.0.0.1:3000/fraction
Content
Content
Content
File Edit Selection View Go...
-html
z-index.html
position-fam
traction.html> html > > head > ☞style> .container
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
fraction.html
<meta name="viewport" content="width=device-width, initial-scale-1
<title>Fraction</title>
3
<head>
5
6
<style>
B
18
21
/fr/ fraction adalah satuan unutk membagi sisa dari conten
dalam hal ini side bar 200px sisanya ada 4 fr */
.container {
display: grid;
grid-template-columns: 200px 1fr 2fr 2fr 1fr;
column-gap: 10px;
.sidebar (
15
16
17
}
18
background-color: blueviolet;
.content {
belajar-css-layout
ES Fraction
Sidebar
19
background-color:
aquaj
20
}
21
22
</style>
23
</head>
24
<body>
25
26
27
28
<div class="container">
<div class="sidebar">
<h1>Sidebar</h1>
</div>
29
30
31
<div class="content" Content</div>
<div class="content">Content</div>
<div class="content" Content</div>
32
<div class="content" Content</div>
33
</div>
34
3/body>
ページ85:
Fraction bisa juga ditulis dengan repeat(4, 1fr)
artinya ada 4 kolom dengan dibagi rata fractionnya
File Edit Selection View Go
z-index
position-fict
fraction.html >> html > > head >> style
1
<!DOCTYPE html>
2
<html lang="en">
<head>
position-sticky html
fraction.html.
belajar-css-layout
Fraction
http://127.0.0.1:3000/traction.html
Coment
Content
Content
Content
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale-]
<title>Fraction</title>
5
6
7
<style>
/*fr/ fraction adalah satuan unutk membagi sisa dari conten
dalam hal ini side bar 200px sisanya ada 4 f */
.container {
display: grid;
grid-template-columns: 200px repeat (4, 1fr);
column-gap: 10px;
.sidebar (
Sidebar
}
15
16
17
}
18
.content {
19
background-color: blueviolet;
background-color:
aqua;
20
}
21
22
</style>
23
</head>
24
<body>
25
26
27
<div class="container">
<div class="sidebar">
<h1>Sidebar</h1>
28
</div>
29
38
31
<div class="content">Content </div>
<div class="content" Content </div>
<div class="content" Content </div>
32
55
<div class="content" Content </div>
</div>
ページ86:
Media Queries 18 Media Queries - Media Queries adalah fitur di CSS yang bisa digunakan untuk memodifikasi tampilan web sesuai dengan kondisi Device, Web Browser atau System Setting milik pengguna Seperti yang kita tahu, saat membuat web, pastinya kita tahu bahwa perangkat pengguna pasti berbeda-beda, ada yang membuat web kita dari Smartphone, Laptop, Komputer, bahkan ukuran layarnya bisa berbeda-beda • Oleh karena itu kadang mungkin kita ingin mengubah tampilan sesuai dengan kondisi perangkat pengguna Materi CSS
ページ87:
Contoh penulisan media queries di html Edit Selection View Go Run belajar-css-layout litiban: html media-query.html malles largess o media-query.html> html>@head>@link Media Query X http://127.0.0.1:3000/media-query.html 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> Lorem ipsum. dolor sit amet consectetur Lorem ipsum, dolor sit amet consectetur Lorem ipsum, dolor sit amet consectetur 5 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Media Query</title> Harum, dignissimos 7 8 9 <link rel="stylesheet" href="small.css" media="min-width: 10px"> <link rel="stylesheet" href="large.css" media="min-width: 500px"> </head> 10 <body> 119 12 13 14 15 16 17 18 19 20 21 <div class="container"> <div class="content">Lorem ipsum, dolor sit amet consectetur adipi <div class="content">Lorem ipsum, dolor sit amet consectetur adipi <div class="content">Lorem ipsum, dolor sit amet consectetur adipi <div class="content">Lorem ipsum, dolor sit amet consectetur adipi <div class="content">Lorem ipsum, dolor sit amet consectetur adipi <div class="content">Lorem ipsum, dolor sit amet consectetur adipi <div class="content">Lorem ipsum, dolor sit amet consectetur adipi <div class="content">Lorem ipsum, dolor sit amet consectetur adipi </div> </body> 22 </html> adipisicing elit. adipisicing elit adipisicing elit itaque ipsto corporis ipsam libero Repellat animi sed non excepturi veritatis libero ipsum tempore suscipit, fugit aliquam inventore error minima Lorem ipsum dolor sit amet consectetur adipisicing elit Harum, dignissimos itaque justo corporis ipsam libero. Repellat animi sed non Hanum. dignissimos itaque justo corporis ipsam libero. Repellat animised non exceptur veritatis libero ipsum tempore suscipit, fugit aliquam inventore error minima Lorem ipsum, dolor sit amet consectetur Harum, dignissimos itaque isto corporis ipsam libero Repellar animi sed non excepturi veritatis libero ipsum tempore suscipit, fugit aliquam inventore error minima Lorem ipsum dolor sit amet consectetur adipisicing elit adipisicing elit Harum, dignissimos staque justo corporis ipsam libero. Repellat animi sed non Harum, dignissimos taque justo corporis ipsam libero. Repellat animi sed non Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum, dignissimos itaque iusto corporis ipsam libero. Repellat animi sed non excepturi veritatis libero ipsum tempore suscipit, fugit aliquam inventore error minima Lorem ipsum, dolor sit amet consectetur adipisicing el Harum, dignissimos staque iusto corporis ipsam libero Repellat ami sed non
ページ88:
File
belajar-css-layout
#small.css
#large.css x
Media Query x
Edit Selection View Go Run
<latiham.html X <media-query.html
#large.css > .container
.container {
1
2
3
4
}
5
6
7
}
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
.content {
background-color: laqua;
48+
@
Lorem ipsum.
dolor sit amet
consectetur
adipisicing elit
Harum,
dignissimos
itaque iusto
corporis ipsam
http://127.0.0.1:3000/media-query.html
libero. Repellat
animi sed non
excepturi
veritatis libero
ipsum tempore
suscipit, fugit
aliquam
inventore error
minima
Lorem ipsum.
dolor sit amet
consectetur
Lorem ipsum.
dolor sit amet
consectetur
adipisicing elit
Harum
dignissimos
itaque iusto
corporis ipsam
libero. Repellat
animi sed non
excepturi
veritatis libero
ipsum tempore
suscipit, fugit
aliquam
inventore extor
minima
Lorem ipsum,
dolor sit amet
consectetur
adipisicing elit adipisicing elit
Harum
dignissimos
itaque iusto
corporis ipsam
libero. Repellat
animi sed non
excepturi
veritatis libero
ipsum tempore
Harum.
dignissimos
itaque iusto
corporis ipsam
libero. Repellat
animi sed non
exceptur
veritatis libero
ipsum tempore
Lorem ipsum.
dolor sit amet
consectetur
adipisicing elit.
Harum,
dignissimos
itaque iusto
corporis ipsam
libero. Repellat
animi sed non
excepturi
veritatis libero
ipsum tempore
suscipit, fugit
aliquam
inventore error
minima
Lorem ipsum,
dolor sit amet
consectetur
adipisicing elit.
Harum,
dignissimos
itaque iusto
corporis ipsam
libero. Repellat
anima sed non
excepturi
veritatis libero
ipsum tempore
Lorem ipsum
dolor sit amet
consectetur
adipisicing elit.
Harum,
dignissimos
itaque iusto
corporis ipsam
libero. Repellat
animi sed non
excepturi
veritatis libero
ipsum tempore
suscipit, fugit
aliquam
inventore error
minima
Lorem ipsum,
dolor sit amet
consectetur
adipisicing elit.
Harum.
dignissimos
itaque iusto
corporis ipsam
libero. Repellat
animi sed non
exceptun
veritatis libero
ipsum tempore
ページ89:
contoh hasil dari media queris belajar-css-layout #small.css large.css Media Query x Edit Selection View Go Run latham.html <media-query.html. <media-query.html> html>head> link 1 <!DOCTYPE html> 2 <html lang="en"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Media Query</title> <link rel="stylesheet" href="small.css" <link rel="stylesheet" href="large.css" <div class="container"> 3 <head> 4 <meta charset="UTF-8"> 5 6 7 8 9 </head> 10 <body> 11- 12 13 14 15 16 17 18 19 20 21 </body> 22 </html> media="min-width: 10px"> media="min-width: 500px"> <div class="content">Lorem ipsum, dolor sit amet consectetur adipi <div class="content">Lorem ipsum, dolor sit amet consectetur adipi <div class="content">Lorem ipsum, dolor sit amet consectetur adipi <div class="content">Lorem ipsum, dolor sit amet consectetur adipi <div class="content">Lorem ipsum, dolor sit amet consectetur adipi <div class="content">Lorem ipsum, dolor sit amet consectetur adipi <div class="content">Lorem ipsum, dolor sit amet consectetur adipi <div class="content">Lorem ipsum, dolor sit amet consectetur adipi </div> Lorem ipsum. http://127.0.0.1:3000/media-query.html dolor sit amet consectetur adipisicing elit Harum, dignissimos itaque iusto corporis ipsam libero. Repellat animi sed non exceptur veritatis libero ipsum tempore suscipit, fugit aliquam inventore error Lorem ipsum. dolor sit amet consectetur adipisicing elit. Harum, dignissimos itaque iusto corporis ipsam libero. Repellat animi sed non Lorem ipsum, dolor sit amet consectetur adipisicing elit Harum, dignissimos itaque susto corporis ipsam libero Repellat animi sed non excepturi veritatis libero spsum tempore suscipit, fugit aliquam inventore error minima. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum, dignissimos itaque justo corporis ipsam libero Repellat animi sed non Lorem ipsum dolor sit amet consectetur adipisicing elit Harum dignissimos itaque justo corporis ipsam libero Repellat animi sed non excepturi veritatis libero ipsum tempore suscipit, fugit aliquam inventore error minima Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum dignissimos itaque iusto corporis ipsam libero Repellat animi sed non Lorem ipsum dolor sit amet consectetur adipisicing elit Harum, dignissimos itaque justo corporis ipsam libero. Repellat animi sed non excepturi veritatis libero ipsum tempore suscipit, fugit aliquam inventore error minima Lorem ipsum, dolor sit amet consectetur adipisicing elit Harum, dignissimos itaque iusto corporis ipsam libero. Repellat animi sed non
ページ90:
19 - Display None Display None Sebelumnya, di materi Display kita bahas sedikit bahwa atribut display bisa memiliki value none (dihapus / dihilangkan) Pertanyaannya, untuk apa kita membuat elemen, tapi harus dihilangkan? Sebenarnya banyak kegunaannya, contohnya di materi ini, kita akan coba membuat Menu Bar memanfaatkan Display None (Display none biasanya digunakan untuk membuat menu/navigasi dalam bentuk dropdown) Materi CSS
ページ91:
Contoh penulisan menu bar html nya File Edit Selection View Go Run .html <> menu-bar.html • belajar-css-layout #media-query.css #small.css #large.css Menu Bar Dropdown x http://127.0.0.1:3000/menu-bar.html >> menu-bar.html > > html > > body > Op <meta name="viewport" content="width=device-width, initial-sca <title>Menu Bar Dropdown</title> 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 6 7 </head> 8 <body> 9 10 11 12 13 14 15 A <!-- Menu bar mengunakan display none --> <div class="menubar"> <button class="menu">Sosial Media</button> <div class="menulist"> <a href="a">Facebook</a> <a href="a">Instagram</a> <a href="a">Tiktok</a> <a href="a">Youtube</a> </div> </div> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. E <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 17 18 19 20 21 22 </html> </body> 16 Sosial Media Facebook Instagram Tiktok Youtube Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, facere ipsa. Accusantium voluptas soluta fugit possimus blanditiis nobis nisi quia quidem eligendi quasi, iusto minus aut nulla quibusdam quos iste? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque totam quam tenetur quaerat quia velit vitae animi ducimus nulla, dolore expedita impedit eligendi ab corporis beatae quasi aspernatur illo sunt
ページ92:
Contoh Penulisan css nya mengunakan display.
none
belajar-css-layout
media-query-css
> menu-bar.html⚫ media-query D&
File Edit Selection View Go
latham.html
media-query.html.
<> menu-bar.html > html> <head> <style> s menulist
<html lang="en">
.menu{
background-color:
color: black;
padding: 10px;
border: none;
cursor: pointer;
.menulist (
display: none;
position: absolute;
background-color:
z-index: 1;
.menulista (
color: black;
aqua;
aquamarine;
text-decoration: none;
display: block;
2
3
<head>
7
10
<style>
}
11
12
13
14
15
16
17
}
18
19
20
21
22
23
}
24
25
26
27
28
29
}
30
31
32
}
33
34
35
}
36
@
padding: 10px;
.menulist a:hover {
background-color: blueviolet;
.menubar:hover .menu {
background-color: blue;
.menubar:hover .menulist {
display: block;
38
}
Menu Bar Dropdown x
http://127.0.0.1:3000/menu-bar
Sosial Media
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, facere ipsa. Accusantium voluptas soluta fugit
possimus blanditiis nobis nisi quia quidem eligendi quasi, iusto minus aut nulla quibusdam quos iste?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque totam quam tenetur quaerat quia velit vitae
animi ducimus nulla, dolore expedita impedit eligendi ab corporis beatae quasi aspernatur illo sunt.
Other Search Results
Recommended
HTML Form
5
0
Comment
No comments yet