[開発ログ7日目]複数のcss要素をレイアウト
12595 ワード
1.学習内容
メニューの作成
<body>
<nav class="menu">
<ul>
<li>
<a href="index.html">메뉴버튼</a>
</li>
<li>
<a href="kakao.html">카카오</a>
</li>
<li>
<a href="naver.html">네이버</a>
</li>
</ul>
</nav>
</body>
html, body {
margin: 0;
padding: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
a {
color: #000000;
text-decoration: none;
}
.menu ul {
overflow: hidden;
background-color: pink;
}
.menu li {
/*display: inline-block;*/
(메뉴버튼/카카오/네이버 사이에 공백생김)
float: left;
(공백없이 작성 가능)
width: 100px;
/*height: 50px;*/
background-color: yellow;
/*border: solid 1px red;*/
(메뉴버튼//카카오//네이버 겹치는 부분이 발생해서 사이 boder만 두께 달라짐)
border-top: solid 1px red;
border-bottom: solid 1px red;
border-left: solid 1px red;
(상세하게 부분을 나눠서 테두리 작성)
/*text-align: center;
line-height: 50px;
(1.height값 존재할 때 동일한px작성)
padding-top: 15px;
padding-bottom: 15px;*/
(2.위 아래 동일한 공백을 주면서 가운데 맞춤)
}
.menu li:last-child {
border-right: solid 1px red;
(마자막 li값 오른쪽에도 테두리 지정)
}
.menu li a {
display: block;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
}
.menu li a:hover {
(글씨가 아닌 공간에 커서를 둬도 링크이동 가능, css변경가능)
color: blue;
}
KACAプロファイルの接続
.kakao-lists li {
margin-bottom: 25px;
}
.kakao-lists li a {
display: block;
padding-left: 25px;
(이미지 앞에 공백)
}
.kakao-lists li img,
.kakao-lists li .kakao-info {
vertical-align: middle;
(!!img태그랑 info를 x축 중앙정렬)
}
.kakao-lists li img{
border-radius: 20px;
margin-right: 10px;
}
.kakao-lists li .kakao-info {
display: inline-block;
}
.kakao-lists li .kakao-info h3 {
font-size: 18px;
margin: 0;
}
.kakao-lists li .kakao-info span {
font-size: 14px;
color: #c8c8c8;
}
Navery氷情報の接続
.living-lists li {
width: 750px;
background-color: orange;
}
.living-lists .image-link,
.living-lists .info-link {
display: inline-block;
}
.living-lists .image-link{
margin-right: 21px;
}
.living-lists .info-link {
width: 512px;
}
ネイバーニュースに連絡
<div class="title-wrap">
<h3>임대차법 9개월, 서울 전세 줄고 월세 늘었다.</h3>
<div class="btn-wrap">
<div class="btn-left-wrap">
<button type="button">좋아요</button>
<button type="button">댓글</button>
</div>
<div class="btn-right-wrap">
<button type="button">요약</button>
<button type="button">크기</button>
<button type="button">팩스</button>
<button type="button">공유</button>
</div>
.title-wrap{
border-top: solid 2px #000000;
border-bottom: solid 1px #000000;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 15px;
padding-right: 20px;
}
.title-wrap h3 {
margin-bottom: 20px;
}
.title-wrap .btn-wrap {
display: flex;
(flexbox.help 사이트 참고)
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
align-content: stretch;
}
2.難しい内容
<a href=""></a>
にアドレス値を入力しますが、ページが移動できないのでうろうろします.3.解決方法
index.htmlでのみリンクが変更されているため、ページ移動が行われていないことがわかりました.
kakao.htmlとnaver.すべてのhtmlに共通のメニューリンクがあり、トラブルシューティングが完了しました.
4.勉強の心得
最初は横に並べ替えられなかったとき、結果よりも合理的だったようです.
習った要素ばかりなのに、なぜかやればやるほど難しくなる.
Reference
この問題について([開発ログ7日目]複数のcss要素をレイアウト), 我々は、より多くの情報をここで見つけました https://velog.io/@youjeongchoi0730/개발일지7일차-레이아웃-여러-css요소テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol