주어진 디자인을 적절히 해석하여 웹페이지 형식으로 구현 레이아웃 클래스 .l_wrapper 활용하기 네거티브 마진, 가상 요소 셀렉터, 마진 병합, 인라인 레벨 요소 등, 기존 진도 적절히 활용하기 유연한 다단 구조, 그리드 구성에 대한 이해 해상도의 개념이 중요하다. 모든 사람들이 똑같은 모니터를 쓰는게 아니기에...크롬 화면 축소를 해보면 문제점이 보인다. PREVIEW HTMLDOCTYPE html>html> head> title>woodtitle> link rel="stylesheet" href="style.css"> head> body> header class="header"> div class="l_wrapper"> secti..
PREVIEW HTMLDOCTYPE html>html> head> title>My Bucket Liststitle> link rel="stylesheet" href="style.css"> head> body> div class="layout_wrapper"> section class="bucketlist"> header class="bucketlist-header"> h1>My Bucket listh1> header> div class="bucketlist-contents"> ol cl..
RESULTHTML 마크업은 웹 규모가 클때 주로사용 --> Cute animal Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos beatae fuga ex, officia tempore repudiandae commodi blanditiis. Quaerat, quis dolore illo in eaque odit sunt modi omnis necessitatibus saepe veritatis? CSS /*CSS Resets*/ /*h1이나..
RESULT HTMLdoctype html>html> head> title>Profiletitle> link rel="stylesheet" href="./style.css"> CSS연결--> head> body> div class="wrapper"> div 태그에 wrapper 라는 클래스명을 지정하여 전체 틀을 잡기--> div class="header"> wrapper 클래스 내에 header, contents, section 클래스를 만들어 3개의 레이아웃 구성 --> img class="profile" src="./images/profile.png" alt=""> 이미지 태그에 profile 클래스..
RESULT HTML DOCTYPE html> html> head> title>Fruitstitle> link rel="stylesheet" href="./common.css"> head> body> div> img src="orange.png" > h1>orangeh1> ul> li>a href="./orange.html">orangea>li> li>a href="./kiwi.html">kiwia>li> ..