https://ohdiki1314.tistory.com/80(classとidの使い方は?

1.勉強の内容

NAVERページの右メイン領域と脚注領域の末尾とページ全体を作成した.
(1)ページ練習








(2)学習内容
ol tagの使用

ulタグとは異なる優先度リストを作成するために使用します.
HTML

<ol>
							<li>
								<div class="rank-content">
									<span class="rank">1</span>
									<a href="#">급식아빠-18화 죽은지 얼마나 됐어요?</a>
								</div>
								<div class="rank-box">
									<!-- status-stay, status-up, status-down  -->
									<div class="status status-stay"></div>
									<span class="number">0</span>
								</div>
							</li>

css

#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking ol {
	list-style: decimal;
}

#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	margin-bottom: 7px;
	padding: 0 13px;

	font-size: 12px;
}


#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-content a {
	display: inline-block;
	overflow: hidden;
	width: 140px;
	white-space: nowrap;
	text-overflow: ellipsis;
}



#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-content .rank {
	margin-right: 5px;
}

#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	
	width: 30px;
	height: 12px;

	top: -3px;
}

#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box .status {


	width: 12px;
	height: 12px;
}





#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box .status.status-stay {
	background-color: black;
}

#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box .status.status-up {
	background-color: red;
}

#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box .status.status-down {
	background-color: blue;
}

#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box .number {
	
}

list-style: decimal; 前に設定したlist-style値はnoneなので、olタグでは数字は表示されませんが、小数を足すと再び数字が表示されます.
改行の防止
css

#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-content a {
	display: inline-block;
	overflow: hidden;
	width: 140px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

詳細:https://www.codingfactory.net/10597
1行で表す方法はwhite-space:nowrap;に表示されます.
140 pxを超えると、オーバーフローが隠されています:hidden;を表示します.
text-overflow: ellipsis; スキップされた領域(...)を表示します.
(以前学んだ部分)
HTML特殊文字

下部領域では、NAVER CORPの左側に特殊文字Cがあります.
この場合、googleでhtml特殊文字を検索することで検索できます.
HTML

<footer id="webtoon-footer">

	<div class="webtoon-container">
		<div class="webtoon-footer-wrap">
	<div class="webtoon-footer-left">
		<ul>
			<li><a href="#">이용약관</a></li>
			<li><a href="#">이용약관</a></li>
			<li><a href="#">이용약관</a></li>
			<li><a href="#">이용약관</a></li>
			<li><a href="#">이용약관</a></li>
		</ul>
		<span>&#169; naver corp</span>
	</div>

で表します.
それ以外に、よく使われるのはで、スペースを強制する特殊な文字で、sumpletextでどのようにスペースを空けても、ページにはスペースがなく、これらの記号でスペースを表すことができます.
cssでの大文字と小文字の制御
ex>

#webtoon-footer .webtoon-footer-wrap span {
	text-transform: uppercase;
}

通常はHTMLに大文字と小文字を直接書き込んでタグ付けできますが、cssでは
text-transformを使用して制御できます.
text-transform: uppercase; (大文字一括使用)
text-transform: lowercase; (小文字で表示)
text-transform: capitalize; (頭文字を大文字に変更)
まっすぐに伸ばす

css

.webtoon-detail #webtoon-total-day .webtoon-day-lists {
	display: flex;
	flex-direction: row;
	border-bottom: solid 1px #f4f4f4;
}

上の図に示すように、長いエッジを描くために、

デフォルトstretch値を指定します.(flex-startはx)

2.実習

ダウンソース:
naver Web漫画-2-final(メイン右側+フッター+詳細ページ)HTML練習
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/35
naver webton-2-final(メイン右側+フッター+詳細ページ)実習css
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/36

3.困難な内容&解決方法

右上隅のような複雑な構造の部分は、図面設計作業を行う際にかなり難解なようです.
授業量が多くて、やっと2回聞いて、もう一度聞いてから理解することができて、今自分で図面の実習を構想しなければなりませんが、时間がありません.

4.感想

時間が少しずつ変わって、また投入も多くて、日記を書くのは骨が折れて、完全に私の所有に帰るのは難しいです.
実際、私は5-6種類の新しい文法を勉強していますが、今必要なのは構想設計図で、簡単な検索を通じて、私が構想して問題が発生したとき、私は一人で故障シュートをしなければなりません.そうすれば、実際の仕事で使用して、就職できる新人になります.短期間でポータルサイトを作ることができなくても、8月までに最初のターゲットとしていた女子グループファンページは、必ず作らなければならない強い睡眠時間以外は、角度を変えて作るべきだと思います.