2021.07.06 CSS練習

25721 ワード
テキストリンク

📒 Li,aラベルにdisplay blockとfloatを用いて,NAVER特定領域で使用するメニューボタンを作成する


html基礎タスク
html, body {
	margin: 0;
	padding: 0; }

ul {
	list-style: none;
	margin: 0;
	padding: 0; }

a {
	color: #000000;
	text-decoration: none; }

📌 overflow: hidden;

<ul>
  <li>
   </li>
</ul>

ul=부모태그, li=자식태그 
li태그가 3차원 이기때문에 ul 높이값에 영향을 줄 수 없기때문에 ✍ overflow: hidden; 사용하여 부모높이값이 화면 표기 가능, 
float의 부모로 overflow hidden을 사용하면 부모의 높이값을 인식할수있다
✔ css
.menu ul {
	✍overflow: hidden;
	background-color: pink; }

📌 スペースサイズ、境界の作成

.menu li {
	display: inline-block;
👉 x軸の位置合わせを維持しながらスペースのサイズを維持できますが、空白を作成します.
	   dispaly: inline-block 대신
	 💡float: left를 사용함으로써 x축정렬이고, 
           공백없애기 가능
	   왼쪽에서부터 li 태그를 정렬시키겠다.
	
	float: left;

	width: 100px;
	height: 50px;
	background-color: yellow;
	border: solid 1px red;
📌 正確なboarder値の調整


    
	 ✔ 박스의 특정 부분 border값 세팅하기
	border-top: solid 1px red;
	border-bottom: solid 1px red;
	border-left: solid 1px red;
📌 最後のborder値を適用するための仮想選択プログラムの作成
.menu li:last-child {
	border-right: solid 1px red; }
📌 テキストの配置の変更
 
	li태그 안 a 태그 자체가 x축으로 가운데 가도록 되어있다.
    
	👉 text-align: center;
📌 y軸を中心に揃えます.

1.ボタンに高さの値がある場合、ピッチの上下に影響する属性を使用します。


	line-height: 50px;
    크기는 보통 height높이 따라 하면 가능하지만, 서체스타일에따라 조절필요

2.ボタンに高さ値がない


	padding-top: 15px;
	padding-bottom: 15px; }
	글자를 기준으로 위쪽과 아래쪽에 공백을 생성하면 된다.
📌 ボタンにマウスを置いたときにマウスのシェイプが変化するアトリビュート

.menu li {
	display: block;
	text-align: center;
	사이에 공백을 넣어줌으로써 중앙으로 정열
	padding-top: 15px;
	padding-bottom: 15px; }
📌マウスサスペンション時の色切替機能

.menu li a:hover {
	color: blue; }
📌 ページ移動機能
ファイル名を属性値としてhrefに渡すこともできますが(クリックすると対応するメニューに移動できます)、マルチページ機能を適用するhtmlドキュメントhrefにファイル名をすべて入れる必要があります.
✍html
<body>


		<nav class="menu">
		<ul>
			<li>
				
			👉  <a href="index.html">메뉴 버튼</a>
			</li>
			<li>
			👉 	<a href="kakao.html">카카오</a>
			</li>
			<li>
				<a href="#">다음</a>
			</li>
		</ul>
	</nav>
</body>

✍ css
📌 各liラベルの空白サイクル
.kakao-lists li {
	margin-bottom: 20px;}

.kakao-lists li a {
	display: block;
	padding-left: 25px;}
	a태그와 img사이에 padding left 로 25px의 여백이 생긴다.
📌 vertical-align: middle;x軸を作成する中心位置配列を使用する

.kakao-lists li img,
.kakao-lists li .kakao-info {
	vertical-align: middle;
}
📌 画像のローカル空白期間(余白)

.kakao-lists li img {
	margin-right: 10px;
	border-radius: 20px; }

.kakao-lists li .kakao-info {
	display: inline-block; }
📌 初期化コードの入力
👉 kakao infoに空白値を0にします

x축기준으로 vertical-align: middle; 에 의해  정가운데 정렬

.kakao-lists li .kakao-info h3 {
	margin: 0; }

.kakao-lists li .kakao-info span {
	font-size: 14px;
	color: #c8c8c8; }
💡 imgタグはdisplay-blockの特徴を持ち、kakao infoはdisplay-inlineに変更されます.
vertical-align: middle; x軸の中央揃えに調整できます.



 

✍ html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<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>


	<ul class="living-lists">
		<li>
			<a href="#" class="image-link">
				<img src="https://via.placeholder.com/170x114">
			</a>
			<a href="#" class="info-link">
				<div class="living-info">
					<span>리빙</span>
					<h3>퇴사 후, 36년 된 노후주택을 고쳐 짓고 살아요.</h3>
					<p>Nice to meet you 
                    			Nice to meet you 
                    			Nice to meet you Nice to meet you Nice to meet you  
                               		Nice to meet you Nice to meet you  Nice to meet you Nice to meet you 
                      			Nice to meet you Nice to meet you </p>
				</div>

				<div class="date-wrap">
					<span class="source">집꾸미기</span>
					<span class="date">2주일 전</span>
				</div>
			</a>
		</li>
	</ul>

📒 2つのaラベルをx軸に並べ、ulラベルの全領域のサイズを指定し、liラベルの全領域のサイズ*/

📌 Liタグは領域全体の空間サイズを指定する
✍ css

.living-lists {
	width: 750px;
	background-color: orange; }


.living-lists .imge-link,
.living-lists .info-link {
	display: inline-block;
	vertical-align: middle;}

.living-lists .imge-link {
	margin-right: 21px;}

.living-lists .info-link {
	width: 512px;}



✍ html
<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>
		</div>
	</div>


css
.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;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: stretch;}
ココア結果🚀
NAVER結果🚀
💡 cssレイアウトのWebサイトを理解する
https://ko.learnlayout.com/
Group Anagrams
210918 TILミニプロジェクトレビュー