2021.06.04(デンマークショッピングセンター実習)
37330 ワード
学習の内容
[上部領域を使用]
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 미디어 쿼리를 사용하기 위해선 필수로 넣어주는 코드 */ <header id="header">
<h1>
<a href="#" class="logo">
<img src="https://via.placeholder.com/186x18">
</a>
</h1>
<nav class="buttons">
<ul>
<li>
<a href="#" class="menu-button">
<img src="https://via.placeholder.com/22x20">
</a>
</li>
<li>
<a href="#" class="menu-button">
<img src="https://via.placeholder.com/22x20">
</a>
</li>
<li>
<a href="#" class="menu-button">
<img src="https://via.placeholder.com/22x20">
</a>
</li>
</ul>
</nav>
</header>/* css초기화 작업 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
body {
overflow-x: hidden;
font-family: sans-serif;
color: #585858;
}
h1, h2, h3, h4, h5, h6, p {
font-weight: 400; /* 100~900까지 100단위로 바뀜*/
}
li {
list-style: none;
}
a {
text-decoration: none;
}
img {
vertical-align: middle; /* 이미지 하단에 미세한 공백 제거 */
}
span {
display: block;
}/* mobile버전 상단 영역 작업 */
#header h1 {
background-color: #ffffff;
}
#header h1 .logo {
position: relative;
display: block;
width: 100%;
height: 65px;
background-color: yellow;
}
#header .logo img {
position: absolute;
top: 0;
margin-top: 23px;
left: 50%;
margin-left: -93px;
}
#header .buttons ul {
overflow: hidden;
}
#header .buttons li {
position: relative;
float: left;
width: 33.333%;
height: 65px;
}
#header .buttons .menu-button {
display: block;
width: 100%;
height: 100%;
text-align: center;
}
#header .buttons li:nth-child(1) .menu-button {
background-color: blue;
}
#header .buttons li:nth-child(2) .menu-button {
background-color: pink;
}
#header .buttons li:nth-child(3) .menu-button {
background-color: green;
}
#header .buttons li .menu-button img {
position: relative;
height: 20px;
top: 50%;
transform: translateY(-50%); /* y축 기준으로 중앙정렬하는 방법 */
}
/* pc버전 상단 영역 작업 */
/* 1em = 16px */
@media (min-width: 47em) {
#header {
position: fixed;
width: 100%;
height: 80px;
top: 0;
left: 0;
z-index: 99999;
}
#header h1 {
width: 50%;
}
#header h1 .logo {
width: 280px;
height: 80px;
}
#header .logo img {
margin-top: 30px;
}
#header .buttons {
position: absolute;
width: 50%;
left: 50%;
top: 0;
}
#header .buttons li {
height: 80px;
}
[メイン領域を使用]
<main role="main" class="main-content">
<ul class="product-group">
<li>
<a href="#" class="product-group-link">
<article>
<h2 class="link-text">Product1</h2>
<img src="https://via.placeholder.com/1000x563">
</article>
</a>
</li>
<li>
<a href="#" class="product-group-link">
<article>
<h2 class="link-text">Product2</h2>
<img src="https://via.placeholder.com/1000x563">
</article>
</a>
</li>
<li>
<a href="#" class="product-group-link">
<article>
<h2 class="link-text">Product3</h2>
<img src="https://via.placeholder.com/1000x563">
</article>
</a>
</li>
<li>
<a href="#" class="product-group-link">
<article>
<h2 class="link-text">Product4</h2>
<img src="https://via.placeholder.com/1000x563">
</article>
</a>
</li>
</ul>
</main>/* mobile버전 메인 영역 작업 */
.main-content .product-group-link {
position: relative;
display: block;
/*float: left;*/
width: 100%;
height: 56.25%;
border: solid 10px red;
overflow: hidden;
}
.main-content .product-group-link img {
width: 100%;
height: 100%;
}
.main-content .product-group .link-text {
position: absolute;
left: 25px;
bottom: 25px;
color: black;
font-size: 25px;
}
/* pc버전 메인 영역 작업 */
@media (min-width: 47em) {
.main-content {
padding-top: 80px;
}
}
@media (min-width: 60em) {
.main-content {
overflow: hidden;
}
.main-content .product-group-link {
float: left;
width: 50%;
height: 28.125%;
}
}
[下部領域を使用]
<footer id="footer">
<nav class="left-nav">
<ul>
<li><a href="#">Terms and conditions</a></li>
<li><a href="#">Cookies</a></li>
</ul>
</nav>
<nav class="right-methods">
<h3>Payment Methods</h3>
<ul>
<li><span class="payment-icon one"></span></li>
<li><span class="payment-icon two"></span></li>
<li><span class="payment-icon three"></span></li>
<li><span class="payment-icon four"></span></li>
<li><span class="payment-icon five"></span></li>
</ul>
</nav>
<a href="#" class="to-top-button"></a>
</footer>/* mobile버전 하단 영역 작업 */
#footer {
position: relative;
background-color: purple;
padding-bottom: 66px;
}
#footer .left-nav {
padding-top: 20px;
text-align: center;
}
#footer .left-nav li {
padding: 5px 0;
}
#footer .right-methods {
text-align: center;
margin-bottom: 20px;
margin-top: 30px;
}
#footer .right-methods li {
display: inline-block;
padding: 7px 4px;
}
#footer .right-methods .payment-icon {
display: inline-block;
width: 30px;
height: 20px;
}
/* .payment-icon.one 클래스명을 붙여 쓰면 여러개의 payment-icon중에 one클래스를
가지고 있는 영역을 선택 */
#footer .right-methods .payment-icon.one {
background-color: black;
}
#footer .right-methods .payment-icon.two {
background-color: red;
}
#footer .right-methods .payment-icon.three {
background-color: pink;
}
#footer .right-methods .payment-icon.four {
background-color: blue;
}
#footer .right-methods .payment-icon.five {
background-color: gray;
}
#footer .to-top-button {
position: absolute;
display: block;
width: 66px;
height: 66px;
background-color: green;
bottom: 0;
left: 50%;
margin-left: -33px;
}
PCバージョンの下部領域の使用/
@media(min-width: 60em) {
#footer .left-nav {
float: left;
width: 50%;
/*background-color: yellow;*/
text-align: left;
padding-top: 32px;
padding-left: 40px;
}
#footer .right-methods {
float: right;
width: 50%;
/*background-color: yellowgreen;*/
margin: 0;
padding-top: 32px;
padding-right: 40px;
text-align: right;
}
#footer ul, #footer li, #footer h3 {
display: inline-block;
vertical-align: middle;
}
#footer .left-nav a {
font-size: 14px;
position: 0 5px;
}
#footer .right-methods li {
padding: 0 4px;
}
#footer h3 {
padding-right: 10px;
}
[その他のHTML、CSS操作のヒント]
<li><a href="https://www.naver.com/">one</a></li>
<li><a href="contact.html">two</a></li>
<li><a href="#three">three</a></li>.text-box {
width: 200px;
height: 200px;
background-color: yellow;
white-space: nowrap; /* 영역을 벗어나도 줄바꿈을 하지 않고 일렬로 나열 */
overflow: hidden;
text-overflow: ellipsis;
/* 글자태그 사용시 말줄임표시를 이용해야 할 경우 위에 코드3줄을 작성 */
}
<h1 class="ellipsis"><h1>
<h2 class="ellipsis"><h2>.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}学習内容の難点
kidsgaoは適応型サイトを作成し、高さを使うため、デンマークのショッピングモールの実習は反応型なので、幅と高さを%で指定し、サイトの大きさに合わせて自然にサイズを調整すると、大きさやレイアウトの形がわかりにくくなります.
解決策
%を使用して導入する方法は多様であるため、反作用が適用されたブート・バーのサンプル・サイト・コードを表示するなど、反作用導入の様々な構成を理解することが役に立つと思います.
学習の心得.
2つのサイトの設計とレイアウトにアニメーションメディアクエリーを構成し、適応性と反応性などのすべての学習内容の実践を通じて、これらの内容をよりよく理解し、実際の操作で使用するテクニックをビデオに含めることで、効率を向上させます.
フレームワークを作成するガイドバーのサンプルコードを取得して削除し、文字、画像、サイズのみを変更し、cssプロパティと展開操作が複数あることがわかりました.
Reference
この問題について(2021.06.04(デンマークショッピングセンター実習)), 我々は、より多くの情報をここで見つけました https://velog.io/@lstem12/2021.06.04-denmark-shoopingmall-trainingテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol