(em은 기준이 body의 font-size) em은 부모에게 px로 폰트사이즈를 주고 그 기준에 맞춰서 자손들에게 em으로 값을 주는것이다. 하지만 여기서 문제가 자주 발생하게 되는데 부모의 폰트 사이즈를 기준으로 두어야 하는데 하다보면 부모의 기준 값이 변하게 되고 이때 문제가 발생하게 된다. 그래서 나온것이
rem 이다. rem은 최상위인 root(html)가 기준이 된다. 그래서 부모의 기준이 변해도 root가 지정되어 있으면 변하지 않게된다. (rem이 곱하기와 같은 개념이기 때문에 주로 기준 폰트를 10px로 쓰인다.)
프로그램 자체에 자동으로 기준을 넣어 놓으면 단축키를 누르면 자동으로 계산해서 넣어줍니다.
해당 이미지를 코딩하는데 이때 구조를 잘 생각해야한다 어떤 부분은 내려가기 때문에 지정을 잘 해주어야 한다.
<body>
<divid="wrap">
<mainid="container">
<sectionclass="visual"></section>
<sectionclass="content"></section>
</main>
<footerid="footer"></footer>
</div>
</body>
기본적인 큰 구조 (헤더가 없는 레이아웃이기 때문에 제외됨)
<body>
<divid="wrap">
<mainid="container">
<sectionclass="visual">
<divclass="in"></div>
</section>
<sectionclass="content">
<divclass="in"></div>
</section>
</main>
<footerid="footer">
<divclass="in"></div>
</footer>
</div>
</body>
컨텐츠가 브라우저의 크기에 따라 배경이 넓어지고 좁아지고 할것이기 때문에 따로 IN을 설정하여 컨텐츠의 영역을 잡아준다.
<body>
<divid="wrap">
<mainid="container">
<sectionclass="visual">
<divclass="in">
<divclass="visual-content">
<divclass="visual-txt">
<h1>Full Motion</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<divclass="visual-arrow">
<ahref="#content"class="btn-down">
<imgsrc="./images/arrow.svg"alt="down">
</a>
</div>
</div>
</div>
</section>
<sectionclass="content"id="content">
<divclass="in">
<ulclass="cont-list">
<li>
<divclass="thum">
<imgsrc="./images/pic01.jpg"alt="pic">
</div>
<divclass="txt">
<h2>Lorem ipsum dolor, sit amet</h2>
<p>consectetur adipisicing elit. Reprehenderit exercitationem quidem vero, ducimus voluptatibus nobis praesentium debitis vitae maxime dolorum ut.</p>
<ahref="#"class="btn green">Watch</a>
</div>
</li>
*5
</ul>
</div>
</section>
</main>
<footerid="footer">
<divclass="in"></div>
</footer>
</div>
<style>
*{
margin: 0; padding: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
color: inherit;
}
ul,ol{
list-style: none;
}
img,video{
max-width: 100%;
}
a,span{
display: inline-block;
}
html{
font-size: 10px; /*기준을 잡아주는것 셋팅은 되어있지만 기입하여 알 수 있도록 한다.*/
