実習-HELBAK
📌学習内容
ビジネス・ヒント
(1)
* { }:{}の属性値はすべてのhtmlタグに適用可能(2)CSS使用時に
html, body { width: 100%; height: 100%; }へ転入(3)y軸中央揃え式
position: relative;
height: 오브젝트 높이값;
top: 50%;
transform: translateY(-50%);(5)役割をカテゴリ別に明確に区別する
(6)classをリストアップするときの貼り付けと書き換えの違い
-
.payment-icon .one:payment-iconの子の1つ-
.payment-icon.one:payment-iconというクラスpayment-iconを選択(7)
a href=" "に含めることができる内容:URL/htmlドキュメント名/id名(8)長いテキスト入力時に適用可能な属性
-
overflow: hidden;:スペースを超えたテキストは表示されません-
white-space: nowrap;:自動改行を無効にする-
text-overflow: ellipsis;:スペースを離れたときに文にサムネイルを作成する(9)特定の属性のclassを予め設定し、htmlに直ちに適用することで、容易に連携とメンテナンスが可能
💡 操作のヒント(9)
📎CSS
.text-box {
width: 200px;
height: 200px;
background-color: yellow;
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
h1 {
background-color: pink;
}
h2 {
background-color: gray;
} <p class="text-box ellipsis">
우리집 뚱냥이들 너무 예뻐 우리집 뚱냥이들 너무 예뻐
우리집 뚱냥이들 너무 예뻐 우리집 뚱냥이들 너무 예뻐
</p>
<h1 class="ellipsis">
우리집 뚱냥이들 너무 예뻐 우리집 뚱냥이들 너무 예뻐
우리집 뚱냥이들 너무 예뻐 우리집 뚱냥이들 너무 예뻐
</h1>
<h2 class="ellipsis">
우리집 뚱냥이들 너무 예뻐 우리집 뚱냥이들 너무 예뻐
우리집 뚱냥이들 너무 예뻐 우리집 뚱냥이들 너무 예뻐
</h2>
•属性値を適用するために一般的に使用されるclass名
—
.m-t/b/l/r-00 : margin-top/bottom/left/right: 00px;— .p-t/b/l/r-00 : padding-top/bottom/left/right: 00px;📖 HELBAK
呑モバイルバージョンを使用したサイト
💡 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; /* 실습 사이트의 레이아웃 특수성 때문에 넣어줌 */
}📖header
💡 デザイン
📎html
<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="http://via.placeholder.com/22x20">
</a>
</li>
<li>
<a href="#" class="menu-button">
<img src="http://via.placeholder.com/22x20">
</a>
</li>
<li>
<a href="#" class="menu-button">
<img src="http://via.placeholder.com/22x20">
</a>
</li>
</ul>
</nav>
</header> #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; /* float 자식의 높이값을 부모가 인식할 수 있음 */
}
#header .buttons li {
position: relative;
float: left;
width: 33.33%; /* 3등분 */
height: 65px;
/*border: solid 5px red*/ /* 영역 시각화 */
}
/* a 태그를 li 전체에 걸치도록 적용하기 */
#header .buttons .menu-button {
display: block; a 태그는 inline 요소이기 때문에 block으로 바꿔줌
width: 100%;
height: 100%;
text-align: center; /* x축 중앙 정렬: inline, inline-block에만 가능 */
}
#header .buttons li:nth-child(1) .menu-button {
background-color: lightgray;
}
#header .buttons li:nth-child(2) .menu-button {
background-color: darkgray;
}
#header .buttons li:nth-child(3) .menu-button {
background-color: gray;
}
#header .buttons li .menu-button img {
position: relative;
height: 20px;
top: 50%;
transform: translateY(-50%);
}
💡 ヘッドPCバージョン
@media (min-width: 47em) {
#header {
position: fixed;
width: 100%;
height: 80px;
top: 0;
left: 0;
z-index: 99999;
}
#header h1 {
width: 50%;
}
/* 클릭이 쉬운 PC버전은 의도치않은 이동을 방지하기 위해 클릭 범위를 한정시켜 줌 */
#header h1 .logo {
width: 280px;
height: 80px;
}
#header .logo img {
margin-top: 30px;
}
#header .buttons {
position: absolute;
width: 50%;
/* absolute만 적용해주면 width 인식 못 하기 때문에 꼭 값을 줘야함 */
left: 50%;
top: 0;
/* 배치 방법이 특이한 편 */
}
#header .buttons li {
height: 80px;
}
}
📖main
💡 デザイン
📎html
<main role="main" class="main-content">
<ul class="product-group">
<li>
<a href="#" class="product-group-link">
<article>
<!-- article에는 title 필요 -->
<h2 class="link-text">Product 1</h2>
<img src="http://via.placeholder.com/1000x563">
</article>
</a>
</li>
<li>
<a href="#" class="product-group-link">
<article>
<h2 class="link-text">Product 2</h2>
<img src="http://via.placeholder.com/1000x563">
</article>
</a>
</li>
<li>
<a href="#" class="product-group-link">
<article>
<h2 class="link-text">Product 3</h2>
<img src="http://via.placeholder.com/1000x563">
</article>
</a>
</li>
<li>
<a href="#" class="product-group-link">
<article>
<h2 class="link-text">Product 4</h2>
<img src="http://via.placeholder.com/1000x563">
</article>
</a>
</li>
</ul>
</main> .main-content .product-group-link {
position: relative;
display: block;
/* 공간 크기를 이미지 크기와 비슷하게 맞춰줌 */
width: 100%;
height: 56.25%;
overflow: hidden;
border: solid 5px black;
}
.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: 60em) {
.main-content {
overflow: hidden;
}
.main-content .product-group-link {
float: left;
width: 50%;
height: 28.125%;
}
}
•メインヘッダーに重なる部分を削除
@media (min-width: 47em) {
.main-content {
padding-top: 80px;
/* header 높이만큼 padding 적용 */
}
}
📖footer
💡 デザイン
📎html
<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> #footer {
position: relative;
background-color: powderblue; /* 영역 시각화 */
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;
}
#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: greenyellow;
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;
padding: 0 5px;
}
#footer .right-methods li {
padding: 0 4px;
}
#footer h3 {
padding-right: 10px;
}
}
結果:バージョンを移動します.
司会者:PC ver.
📌難点
footer PCバージョンを使用する場合 #footer .right-methods {
float: right;
width: 50%;
background-color: greenyellow;
margin: 0;
padding-top: 32px;
padding-right: 40px;
text-align: right;
} to-top-buttonは直接上へ移動します
開発者ツールで確認すると、いっそ
footerが上端に捕まった.
📌解決策
開発者ツールで研究したところ、
footerはmainの中に入っていることがわかりました.非シャットダウン
</main>によるエラー🤦♀️
開発者ツール万歳😂
📌に感銘を与える
エラーが発生した場合、原因を特定して問題を解決するのに時間がかかります...執拗さと粘り強さは開発者の品格で、少し知っているようですハハハ😭
Reference
この問題について(実習-HELBAK), 我々は、より多くの情報をここで見つけました https://velog.io/@naheeyu/210716テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol