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 itsnormal 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><htmllang="ko"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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><divclass="box1">box1</div><divclass="기준"><divclass="box2">box2</div><divclass="box3">box3</div></div><!-- <div>box2 <div>box3</div> </div> --><!-- <div>box3</div> --><!-- <div> <div></div> <div> <div></div> </div> </div> --></body></html>Fixed
<!DOCTYPE html><htmllang="ko"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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><divclass="nav">facebook</div><divclass="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><htmllang="ko"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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><divclass="other"><divclass="stiky"></div></div><divclass="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><htmllang="ko"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>transform</title><style>.one{border:darkgoldenrodsolid5px;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:all1s;}.one:hover{background:teal;transform:rotate(90deg)scale(2);}.two{border:solid5pxdarkgoldenrod;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:all1s;}.two:hover{background:teal;/* transform: skew(30de,20deg) scale(2); */transform:translate(100px,200px);}</style></head><body><divclass="one">Click!</div><br><divclass="two">Click!</div><br><divclass="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:leftThe element must float on the left side of its containing block.
- float:rightThe element must float on the right side of its containing block.
<!DOCTYPE html><htmllang="ko"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>float</title><style>img{width:200px;float:right;/* float: left; */}</style></head><body><imgsrc="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> <div>내용1</div> <div>내용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:4pxsolidblue;overflow:hidden;}2.Specify height of parent element.
.wrap{border:4pxsolidblue;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.
<divclass="first"></div><divclass="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><htmllang="ko"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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><htmllang="ko"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Naver Login (네이버로그인) UI</title><linkrel="stylesheet"href="reset.css"><style>section{width:350px;height:135px;background:#f6f9fa;border:1pxsolid#c7d6db;margin:0auto;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:1pxsolid#10bc52;border-radius:2px;margin:12px0;}.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:5px000;}li{list-style:none;}.find{float:left;}.findli{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:02px;}</style><body><!-- 네이버 로그인 부분 UI 만들기 --><section><article><p>네이버를 더 안전하고 편리하게 이용하세요</p><button><imgclass="logo"src="icon/title.png"alt=""><spanclass="login-text">로그인</span></button><ulclass="find"><li><imgclass="small"src="icon/lock.png"alt=""><ahref>아이디</a></li><li><spanclass="circle"></span></li><liclass="password"><ahref>비밀번호찾기</a></li></ul><ulclass="join"><li><imgclass="small"src="icon/user.png"alt=""><ahref>회원가입</a></li></ul></article></section></body></html>Top comments(0)
Subscribe
For further actions, you may consider blocking this person and/orreporting abuse
