Dahye Ji
Posted on November 7, 2021
Position
position is css property that sets how an element is positioned in a document. The top, right, bottom and left properties determine the final location of positioned elements.
- static: The element is positioned relative to its normal flow(normal position). This is the default value. Static positioned elements are not affected by the top, bottom, left, and right properties.
- relative: The element is positioned according to the normal flow of the documents, and then offset relative to itself on the values of top, right, bottom and left. The offset(top, right, left, bottom) does not affect the position of any other elements.
- absolute: The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closet positioned ancestor, if any; otherwise, it is placed relative to the initial containing block(usually body)
- fixed: The element is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
- sticky: The element is positioned based on the user's scroll position.
Static, Relative, Absolute
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>relative</title>
<style>
.box1 {
position: static;
background-color: green;
color: white;
width: 100px;
height: 100px;
}
.기준 {
position: relative;
}
.box2 {
/* */
position: absolute;
/* position: relative; */
left: 40px;
/* right: 40px; */
top: 30px;
background-color: green;
color: white;
width: 100px;
height: 100px;
z-index: 2;
/* z-index:0 원래 있어야 할 자리 */
/* z-index:1 원래 있어야 할 자리보다 앞으로 */
/* z-index:-1 원래 있어야 할 자리보다 뒤로 */
/* z-index: 0; */
}
.box3 {
position: absolute;
left: 50px;
top: 50px;
background-color: aqua;
color: white;
width: 100px;
height: 100px;
z-index: 1;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="기준">
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
<!-- <div class="box2">box2
<div class="box3">box3</div>
</div> -->
<!-- <div class="box3">box3</div> -->
<!-- <div class="face">
<div class="eye"></div>
<div class="nose">
<div class="mustache"></div>
</div>
</div> -->
</body>
</html>
Fixed
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position - fixed</title>
<style>
body {
margin: 0;
padding: 0;
}
.nav {
position: fixed;
padding: 10px;
background: #4267B2;
color: white;
font-weight: 700;
font-size: 30px;
line-height: 50px;
width: 100%;
height: 60px;
}
.container {
margin-top: 0;
padding-top: 120px;
margin-left: 100px;
margin-right: 100px;
}
</style>
</head>
<body>
<div class="nav">facebook</div>
<div class="container">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo maxime quas porro reiciendis, molestias natus
accusantium, blanditiis repudiandae obcaecati deleniti adipisci. Velit totam hic reiciendis temporibus,
obcaecati necessitatibus. Autem, commodi?
Minus ea animi excepturi, magni commodi obcaecati ipsum. Deleniti ipsum, maiores dolorum eaque nihil, hic
dolorem perferendis ipsam reiciendis fuga laboriosam? Similique delectus consectetur eius doloremque
temporibus quos minima eveniet.
Recusandae in fugit ad provident quaerat illum aspernatur voluptatum repellat, praesentium ex aut! Quaerat
molestias voluptatem ratione voluptates rem ex voluptas reiciendis nobis in id placeat aperiam, ut quasi
repudiandae.
Sint magni suscipit dicta voluptatum, soluta in exercitationem tempore minima modi, quos tenetur cumque
aperiam ad facilis necessitatibus possimus, repellat dolores voluptates minus. Molestias fugit perspiciatis
velit cumque porro sit!
At, provident corporis cum reiciendis odit distinctio repudiandae tenetur consectetur eaque dolorem
voluptate iusto sed beatae molestias, error non aperiam quibusdam ullam! Reiciendis doloremque sunt minima
velit ullam voluptatem assumenda?
Commodi nulla adipisci quasi magnam exercitationem quis nihil? Cumque nam dolorem repudiandae alias debitis
sunt deleniti possimus deserunt non? Alias officia atque unde quae aspernatur rerum fuga sunt tenetur
consequuntur?
<br><br>
Natus, ad. Quaerat eaque in dolorem? Obcaecati ab iusto non reprehenderit? Consequatur obcaecati facere
assumenda, sequi distinctio possimus fuga exercitationem nam. Ipsam, vitae. Quos aspernatur quis cumque hic
earum ipsa.
Sed id ea magnam aut consequuntur natus odio corrupti voluptatem hic? Repellat minima accusamus at
laudantium provident animi illo officiis? Tenetur et eos, excepturi minima nobis quia assumenda voluptatem
aut?
Porro ad eos maiores, doloribus, laborum debitis dolores mollitia id inventore laudantium explicabo, dolore
tenetur sint. Omnis distinctio hic, sint ullam alias, similique sit dolor libero saepe molestias at quod!
Dolorem necessitatibus ab ipsa, culpa explicabo vero perspiciatis id illum. Doloribus minima unde
accusantium saepe in architecto recusandae iusto, cum praesentium labore hic temporibus voluptatibus eius,
vel dolores facilis nostrum!
A, ullam obcaecati! Ut assumenda ratione temporibus quasi autem hic amet eaque eos incidunt neque eveniet,
ipsam ad perferendis provident. Nam, iste dolores. Amet corporis iusto quos quasi voluptates! Porro!
Laboriosam sed earum officiis? Repudiandae, iste veniam omnis provident odio doloribus minus? Porro
distinctio nemo provident vero fuga voluptate, corporis quisquam alias tenetur, praesentium numquam vitae
fugiat laudantium soluta? Consequuntur!
Id, labore consectetur culpa excepturi commodi vero sapiente porro quidem nesciunt, fuga quas quos veritatis
sed impedit eveniet odit deserunt dolore enim fugit exercitationem error. Aperiam nam enim dignissimos ab?
<br><br>
Eius hic alias quis facilis dolore debitis adipisci? Sint tempora officiis distinctio esse eaque quis
blanditiis quos necessitatibus, mollitia, minima aut beatae quidem. Quis quidem veniam, qui aut soluta
culpa?
Alias non distinctio dicta nulla provident molestiae molestias dolorem placeat deleniti explicabo quaerat,
dolor rem voluptas praesentium laborum? Repellat et nobis, reprehenderit vitae ipsum officia natus accusamus
dolorem iure est.
Facilis suscipit mollitia minima ipsum excepturi, nisi eum cumque aperiam veniam harum corporis, quasi ipsa
ad nemo dolores nam architecto! Veniam dolores velit iste, praesentium dolor aut suscipit optio vero!
Accusantium maiores quia minus distinctio dicta dolorem assumenda, nostrum exercitationem reiciendis sit
fugit nulla hic explicabo velit nam vel cupiditate voluptate sint maxime porro soluta obcaecati praesentium
quasi? Esse, magni?
Similique vero possimus explicabo, hic unde perspiciatis corporis, voluptatum odio error ratione assumenda
impedit! Nobis nam totam ipsam, soluta explicabo iusto! Animi incidunt sit cumque corrupti voluptatum itaque
aspernatur ipsum?
Voluptates amet similique nulla sint illum nesciunt aspernatur voluptatibus sunt! Esse facere officiis
temporibus! Delectus non in excepturi illum sapiente voluptatum explicabo! Fugit corrupti similique
aspernatur perferendis. At, eligendi recusandae?
Quas a cumque esse, at, numquam vitae officiis voluptatem natus distinctio labore eveniet quibusdam ducimus
sed odio cupiditate facilis ab provident incidunt? Voluptatem sit enim dolorem a rerum. Ipsam, vitae.
Totam laboriosam corporis, nisi illo voluptatum nam, aut dolore fuga debitis quia earum inventore similique
dolores esse voluptate deleniti recusandae. Iste veniam in explicabo atque error vitae unde voluptatum?
Asperiores?
<br><br>
Veniam ea qui possimus. Quisquam, dolore dolorem consequuntur nulla, porro, debitis neque qui minus vero
aliquid impedit voluptate modi autem est beatae commodi distinctio nostrum at voluptas reprehenderit.
Sapiente, quibusdam.
Blanditiis consequuntur iste sunt, ex quis labore quaerat ratione ullam aspernatur maiores vero nesciunt
quae, nemo perferendis repellat facilis magnam dolor rem odio beatae. Expedita praesentium vel sit nisi
alias.
Vitae quod voluptatum porro non temporibus dignissimos magni illo quasi quidem, ab consequatur blanditiis
totam asperiores eum, quam officiis. Maiores temporibus fugiat voluptatibus aliquam? Delectus, praesentium
reiciendis! Magni, fugiat nisi!
Molestiae, totam vero excepturi ullam voluptatem corporis obcaecati vitae amet porro labore necessitatibus
praesentium asperiores repudiandae, blanditiis, sunt assumenda eligendi! Consequatur delectus ad officia
ducimus hic esse ipsum quisquam dolores!
Excepturi voluptas, non modi vel soluta asperiores nisi fuga dicta molestias ducimus accusantium quos porro,
repudiandae neque nesciunt. Exercitationem, quos accusamus? Fugit vel error iusto ab deleniti harum totam
quia.
Omnis culpa molestiae tempore deleniti quos tenetur. Delectus tempore consequatur mollitia, omnis autem
iusto? Commodi corporis reprehenderit officia saepe sequi, eveniet eos odio, doloribus quisquam dolores illo
rerum dolorem error.
Odio est iste esse vero quis molestiae alias voluptates libero, excepturi fugit, autem, commodi quasi et. At
ab laboriosam, omnis et quod dolorum officia quam adipisci! Eaque iste reprehenderit accusamus.
Laborum tempora ipsum unde exercitationem a consequuntur quaerat velit explicabo. Ipsa ut deserunt hic
consequatur autem voluptatum, numquam id! Velit modi asperiores nihil molestias obcaecati neque in harum
quae tempora.
Molestias accusantium eum itaque laborum eius tempora excepturi est magni quia iusto velit ratione incidunt
optio illum quos tenetur deleniti, quae minus ab, sunt earum eos quas quasi. Quasi, tempora.
Sapiente sit quaerat ducimus enim nulla earum, voluptates aut harum. Minus ad totam a eligendi voluptas non
illo eaque quo, maiores nostrum, sapiente necessitatibus enim odio praesentium voluptatem cum accusamus?
Consequuntur esse, quam et modi accusantium dolore facere hic at aliquam saepe pariatur nulla animi
aspernatur non veniam impedit laboriosam ducimus architecto, quos velit neque, nemo fugiat nihil! Magnam,
atque!
Corporis illo laudantium dolore aspernatur natus hic delectus alias magnam maiores omnis. Dolore soluta illo
qui, numquam ea quod recusandae quia laudantium necessitatibus nesciunt inventore voluptatibus perspiciatis
quasi ipsam quam.
Aut tempore quidem minima sit maiores reprehenderit adipisci ut perferendis temporibus nihil, facilis, est
possimus dolorum. Mollitia tempore vitae debitis nobis, odit nulla nostrum perferendis minus dolores
corrupti, sapiente quae.
Mollitia, veniam unde! Ullam, sequi repellat totam facere veniam, at quia, praesentium magnam voluptas ab
quidem? Tempore nisi quos voluptatibus repudiandae harum sunt, minus illum. Nisi corrupti sint illum
obcaecati?
Impedit, neque enim. In quia dolores quisquam pariatur dicta quo reiciendis laboriosam commodi perferendis
facilis, totam hic quos eligendi voluptatibus? Eius quisquam odit dolorem nam eum similique in hic
repudiandae!
Rem sint velit distinctio delectus maxime amet corrupti possimus illo eligendi, dolore nulla rerum soluta
magni quod quis ipsum. Atque iste nulla itaque beatae quaerat hic molestiae ex! Excepturi, doloribus!
<br><br>
Unde suscipit, explicabo, similique praesentium numquam, laudantium ad eos libero ipsam enim labore hic! A
eveniet impedit corporis? Sunt consectetur quasi repellendus pariatur consequuntur laboriosam sequi
accusamus, asperiores aspernatur veritatis?
Laboriosam quod, cum praesentium consequatur eius odit placeat ullam harum at qui rem velit aspernatur
aliquid. Eaque, ea nulla soluta harum minus animi aut, necessitatibus nostrum, non voluptatibus similique
dolor?
Harum fuga, voluptatum, unde cum veniam soluta eligendi commodi nostrum corrupti libero neque odit dolorum
doloremque illo omnis nisi. Consectetur nesciunt quod quo tempore deserunt explicabo nemo neque similique.
Dolorum.
Eum doloribus laborum iusto ducimus nam, optio illum autem animi pariatur repellendus, suscipit vitae ad
nisi rerum dolorum quis iste commodi, sed possimus. Iste fugiat debitis numquam maxime molestias. Molestias!
Delectus voluptate iste vel ipsa expedita dolorem dolore soluta aperiam, rem quaerat beatae modi, totam
officia, laudantium earum repellendus! Rem officia perspiciatis totam. Nam, provident hic aspernatur dolorum
doloremque autem.
Ipsam reiciendis expedita doloribus similique necessitatibus beatae inventore, provident modi, nisi quis
commodi sequi odio ut nobis obcaecati incidunt? Eligendi ullam maiores aut facere esse nemo aliquam quae
nisi. Nobis?
<br><br>
Illo, consequatur. Corporis fugit facilis nostrum dignissimos quae nulla dolore cupiditate, dolores eius
quibusdam similique odit? Quae cum, eveniet quasi velit obcaecati nisi libero ad! Quibusdam commodi nobis
consequatur tempore!
Aut optio quos dolor error, deserunt vitae quia illo quisquam at autem labore impedit placeat mollitia
neque. Excepturi, deleniti tenetur ad ab tempora sit numquam, vero similique minus facilis nemo.
Adipisci, alias perferendis! Tempore enim vitae eveniet accusantium ipsam error consequatur itaque
architecto ab at ea nemo, dicta, ullam atque praesentium voluptatibus eaque, nihil quia. Officiis ad dolor
molestias itaque.
Veritatis alias numquam pariatur quaerat odit, tenetur, accusamus, eaque reprehenderit in expedita harum?
Eos ea repellat impedit ipsa in delectus dolore nihil ducimus eveniet reiciendis possimus molestiae,
blanditiis, asperiores officia.
Voluptatibus dolorem placeat laboriosam quod fugit repellendus, dolores veniam magni distinctio consectetur
delectus animi vel officia soluta ad voluptas molestias commodi cupiditate atque nemo quasi? Deserunt
incidunt recusandae numquam rerum?
Autem, consequuntur officiis? Vitae, quo quia et similique quos facere saepe dicta aut fugiat fuga dolore
rem iure molestiae nihil esse voluptatem eius neque voluptate deserunt laboriosam nesciunt. Laudantium,
alias!
In blanditiis facere unde neque odio aspernatur sequi minus ullam placeat dolorem omnis voluptas recusandae
eius soluta, dolore sint perspiciatis laudantium reprehenderit excepturi porro? Minima qui harum esse
temporibus nihil?
Laboriosam, rem! Natus ab nihil aliquid dolorum amet veritatis unde, molestiae veniam reprehenderit eius
voluptatibus facilis earum obcaecati ex dolores quis nisi quibusdam quia nostrum asperiores totam adipisci,
laudantium ipsa.
Quae, quos nemo vel suscipit ullam obcaecati, quas earum alias ab deleniti nam sapiente nulla unde sit omnis
aliquid nobis provident necessitatibus voluptates placeat soluta magni minus, iste ex. Reiciendis?
Inventore eveniet nostrum amet dolor iure repellendus qui autem alias, illum deleniti cum. Quia non placeat
qui possimus incidunt atque, mollitia repellendus optio distinctio harum, dolorem minima, deserunt saepe
iste!
Consequatur cumque aliquid earum autem ex eaque vel dolore reprehenderit mollitia, sit incidunt fugiat odio,
ullam dolorum quaerat maiores dolor? Quibusdam voluptatibus ad mollitia numquam fugit vero autem, laboriosam
placeat?
Ut optio dicta est non. Ea perspiciatis eius itaque quod ullam repellat doloremque sint autem corporis
harum! Voluptates dolores nisi numquam odit optio maxime, veniam blanditiis neque, beatae ea totam.
Voluptates, provident obcaecati! Quo corrupti aperiam adipisci obcaecati eum nesciunt ducimus dicta, alias
similique laudantium architecto eos, amet, at neque. Harum, mollitia! Quas recusandae iure praesentium
voluptate, voluptates voluptatum repellat.
Accusantium ratione, harum dolor voluptate ipsum officia iusto, eveniet hic in saepe provident quia ab.
Tempore quos praesentium ab quia nemo laboriosam, fugit optio! Ab ducimus iste expedita voluptatem
praesentium.
Quo molestiae voluptate hic? Culpa quod similique recusandae quis laborum maiores, veniam asperiores
reprehenderit est, sit vitae alias ipsum minima dolorum facere dicta mollitia adipisci error vero quasi
officia blanditiis.
Facilis iusto commodi, nostrum in temporibus eum omnis! Ullam voluptatem natus exercitationem voluptatibus
veritatis praesentium inventore amet expedita corrupti, possimus quia doloremque fugit porro modi ducimus,
nostrum voluptas voluptates quos.
Nemo, nulla! Fuga voluptate necessitatibus molestias accusantium repellendus harum animi obcaecati nemo,
expedita explicabo nesciunt quaerat dicta reiciendis illum totam, quos sit placeat quo saepe officiis
doloribus eaque? Ad, sapiente.
Reprehenderit officia saepe explicabo eaque magnam beatae fugiat consectetur delectus? Sunt voluptate
officia magni enim aperiam sequi magnam eos autem fugiat omnis consectetur, distinctio itaque quo veniam
architecto at et.
Mollitia cupiditate suscipit facere dignissimos eum doloremque, quisquam molestias sit dolores, adipisci
odio quibusdam deserunt neque, natus nostrum! Repellendus cumque consequatur consequuntur atque tenetur
repudiandae optio laudantium! Earum, voluptatibus magnam.
</p>
</div>
</body>
</html>
Sticky
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position - sticky</title>
<style>
body {
height: 500px;
background: lightblue;
}
.other {
height: 1000px;
background: yellow;
}
.other2 {
height: 1000px;
background: black;
}
.stiky {
position: sticky;
width: 50px;
height: 50px;
background: pink;
top: 10px;
}
</style>
</head>
<body>
<div class="other">
<div class="stiky"></div>
</div>
<div class="other2"></div>
</body>
</html>
z-index
z-index sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
z-index:0
Where it supposed to be
z-index:1 (positive)
One layer up from where it supposed to be
z-index:-1 (negative)
One layer behind from where it supposed to be
(Negative values to lower the priority)
Transform
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transform</title>
<style>
.one {
border: darkgoldenrod solid 5px;
border-radius: 30px;
background: chocolate;
height: 100px;
width: 200px;
/* If you are drawing something, it's better to use box-sizing: border-box; */
box-sizing: border-box;
text-align: center;
line-height: 80px;
color: white;
font-size: 28px;
transition: all 1s;
}
.one:hover {
background: teal;
transform: rotate(90deg) scale(2);
}
.two {
border: solid 5px darkgoldenrod;
border-radius: 30px;
background: chocolate;
height: 100px;
width: 200px;
box-sizing: border-box;
text-align: center;
line-height: 80px;
color: white;
font-size: 28px;
transition: all 1s;
}
.two:hover {
background: teal;
/* transform: skew(30de,20deg) scale(2); */
transform: translate(100px, 200px);
}
</style>
</head>
<body>
<div class="one">Click!</div>
<br>
<div class="two">Click!</div>
<br>
<div class="three">Click!</div>
</body>
</html>
Draw Character in CSS - Drawing my own character
There was a challenge to draw our own character using what we've learnt about position. This is what I've done!
My code
Float
Float is a CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow.
- float:left The element must float on the left side of its containing block.
- float:right The element must float on the right side of its containing block.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float</title>
<style>
img {
width: 200px;
float: right;
/* float: left; */
}
</style>
</head>
<body>
<img src="https://t1.daumcdn.net/cfile/tistory/235B2F485958F12129" alt="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, ad, autem quaerat sed impedit cupiditate tenetur
recusandae facere, alias ab nihil nisi eligendi eaque ea molestiae dolore accusantium repellat maiores? Lorem ipsum
dolor sit amet consectetur adipisicing elit. Ab aliquid officiis, at fugiat ratione expedita vel tenetur facere
suscipit
aut earum magnam in? Nihil perspiciatis laudantium minus officiis voluptatum cumque.
Veritatis ea, fugit tenetur ex fugiat magnam odio dicta! Ex quo commodi qui nesciunt harum voluptas iusto officiis
tempora porro ipsam nemo quas, atque pariatur minus ab praesentium nihil! Praesentium!
Laboriosam at itaque adipisci, consequuntur quaerat quisquam dicta eum similique quia ex. Amet minus expedita dolor
officiis ipsam exercitationem non, repellendus quaerat perspiciatis doloribus beatae iusto rem minima aut ut.
</body>
</html>
Problem of float
When children elements all have float property, parent element does not apply the height of children and only takes what parent has for the height. It makes children element to be left outside.
Example of the issue as above
<!doctype html>
<html>
<head>
<style>
.wrap{
border: 4px solid blue;
}
.content{
float: left;
margin: 5px;
height: 20px;
border: 2px solid green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="content">내용1</div>
<div class="content">내용2</div>
</div>
</body>
</html>
Solving problem of float
There are a few ways to solve the problem.
1.Giving overflow to parent element.
overflow is used when element's content is too big to fit in.
If you use overflow, it extends the height of parent element so that child element can fit in parent element.
.wrap {
border: 4px solid blue;
overflow: hidden;
}
2.Specify height of parent element.
.wrap {
border: 4px solid blue;
height: 35px;
}
This will work but specifying parent element is not a good practice because when height of child element get changed or another child element get added, the height of parent element needs to be changed but it's not practical if you have to change the height all the time when it gets changed.
3.Use 'clear'
Give clear property to the sibling element that is right next to the one that has float property.
<div class="first"></div>
<div class="second"></div>
div{
width:100px;
height:100px;
background-color:black;
}
.first{
float:left;
}
.second{
clear:both; /* both 속성은 left, right 둘 다 클리어 합니다. */
background-color:pink;
}
4.* Clear-fix *
Solve it with ::after (pseudo element)
Add pseudo element as the last child to the parent element. So make the parent element to recognise the children elements.
This is called clear-fix.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float</title>
<style>
/* float 해제하는 여러가지 방법들 */
/* ul {
overflow: hidden;
display: inline-block;
} */
/*
clear-fix
부모요소에 after 사용. => 가장 마지막 자식요소로 가상요소를 만듦
(before는 가상의 자식요소를 만드는데, 가장 첫 번째 자식요소로 가상요소를 만듦)
현업에서는 clear-fix 라는 클래스를 만들고 (유틸리티 클래스)
부모 요소에 클래스로 집어넣어서 적용 많이 한다고 함..
*/
ul::after {
display: block;
content: '';
clear: both;
}
li {
float: left;
width: 300px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</body>
</html>
Float Practice - cloning Naver Login UI
My code for the UI above
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Naver Login (네이버로그인) UI</title>
<link rel="stylesheet" href="reset.css">
<style>
section {
width: 350px;
height: 135px;
background: #f6f9fa;
border: 1px solid #c7d6db;
margin: 0 auto;
margin-top: 50px;
}
article {
padding: 15px;
}
p {
font-size: 12px;
margin-top: 0;
color: #4f4e4e;
}
button {
background: #17ce5f;
border: none;
color: white;
width: 100%;
height: 50px;
border: 1px solid #10bc52;
border-radius: 2px;
margin: 12px 0;
}
.logo {
width: 68px;
line-height: 18px;
vertical-align: middle;
margin-right: 2.4px;
}
.login-text {
font-size: 14px;
font-weight: 700;
line-height: 18px;
vertical-align: -2.4px;
}
ul {
padding: 0;
margin: 5px 0 0 0;
}
li {
list-style: none;
}
.find {
float: left;
}
.find li {
display: inline-block;
}
.join {
float: right;
}
.small {
width: 10px;
}
a {
text-decoration: none;
font-size: 13px;
color: #4f4e4e;
}
span[class=circle] {
width: 3px;
height: 3px;
border-radius: 50%;
background-color: #cdd2d6;
display: inline-block;
vertical-align: middle;
margin: 0 2px;
}
</style>
<body>
<!-- 네이버 로그인 부분 UI 만들기 -->
<section>
<article>
<p>네이버를 더 안전하고 편리하게 이용하세요</p>
<button>
<img class="logo" src="icon/title.png" alt="">
<span class="login-text">로그인</span>
</button>
<ul class="find">
<li>
<img class="small" src="icon/lock.png" alt="">
<a href>아이디</a>
</li>
<li><span class="circle"></span></li>
<li class="password"><a href>비밀번호찾기</a></li>
</ul>
<ul class="join">
<li>
<img class="small" src="icon/user.png" alt="">
<a href>회원가입</a>
</li>
</ul>
</article>
</section>
</body>
</html>
💖 💪 🙅 🚩
Dahye Ji
Posted on November 7, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.