Dev Log#27-8月3日
今日の勉強内容
✅ 1. NAVERTV芸能広告主left
1.NAVERTV芸能広告主left
button태그
inline-block属性を持ち、デフォルト値としてグレーの背景色を持つ.aラベルにaラベルがあると正しく認識できません.構文エラー.文字中のラベル(aラベル、h 1~h 6ラベル)は、上記の問題を適用する.
vertical-align: top;
:点と矢印を垂直に揃える:top;残りの位置を残量値に調整して反映します.コメントサイト:MDN #ent_main .ent_left #ent_section_6 ul .source:after {
content: '';
display: inline-block;
width: 2px;
height: 2px;
background-color: #d3d3d3;
vertical-align: top;
margin: 9px 2px 0 4px;
}
👉 html(ent_section_4)👉 html(ent_section_5)
👉 html(ent_section_6)
👉 html(ent_section_7)
👉 html(ent_section_8)
👉 html(ent_section_9)
👉 css(ent_section_4)
#ent_main .ent_left #ent_section_4 {
padding: 23px 0;
border-bottom: solid 1px #e4e4e4;
}
#ent_main .ent_left #ent_section_4 .title_wrap {
/*margin-bottom: 18px;*/
}
#ent_main .ent_left #ent_section_4 .title_wrap h3 {
font-size: 16px;
}
#ent_main .ent_left #ent_section_4 ul {
}
#ent_main .ent_left #ent_section_4 li {
padding: 18px 0;
border-bottom: solid 1px #f1f1f1;
}
#ent_main .ent_left #ent_section_4 li:last-child {
border-bottom: none;
}
#ent_main .ent_left #ent_section_4 a {
}
#ent_main .ent_left #ent_section_4 .ent_info {
width: 528px;
}
#ent_main .ent_left #ent_section_4 .ent_info h3 {
font-size: 14px;
font-weight: 700;
margin-bottom: 7px;
}
#ent_main .ent_left #ent_section_4 .ent_info p {
font-size: 12px;
font-weight: 400;
line-height: 20px;
color: #898989;
margin-bottom: 9px;
}
#ent_main .ent_left #ent_section_4 .ent_info .source {
font-size: 11px;
font-weight: 400;
color: #a7a7a7;
}
#ent_main .ent_left #ent_section_4 li img {
width: 88px;
height: 88px;
border: solid 1px #000000;
}
#ent_main .ent_left #ent_section_4 .btn_more {
display: block;
width: 100%;
height: 40px;
background-color: #ffffff;
border: solid 1px #e8e8e8;
line-height: 40px;
text-align: center;
color: #444;
}
👉 css(ent_section_5)#ent_main .ent_left #ent_section_5 {
padding: 24px 0 14px;
border-bottom: solid 1px #e4e4e4;
}
#ent_main .ent_left #ent_section_5 .title_wrap {
margin-bottom: 20px;
}
#ent_main .ent_left #ent_section_5 .title_wrap h3 {
font-size: 16px;
}
#ent_main .ent_left #ent_section_5 .title_wrap a {
font-size: 12px;
color: #999;
}
#ent_main .ent_left #ent_section_5 ul {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
#ent_main .ent_left #ent_section_5 li {
}
#ent_main .ent_left #ent_section_5 li a {
display: block;
width: 100%;
height: 100%;
text-align: center;
}
#ent_main .ent_left #ent_section_5 li img {
width: 55px;
height: 55px;
border-radius: 50%;
margin-bottom: 10px;
}
#ent_main .ent_left #ent_section_5 li h4 {
font-size: 12px;
font-weight: 700;
line-height: 16px;
color: #222;
letter-spacing: -1px;
}
👉 css(ent_section_6)#ent_main .ent_left #ent_section_6 {
padding: 24px 0;
border-bottom: solid 1px #e4e4e4;
}
#ent_main .ent_left #ent_section_6 .title_wrap {
margin-bottom: 17px;
}
#ent_main .ent_left #ent_section_6 .title_wrap h3 {
font-size: 16px;
}
#ent_main .ent_left #ent_section_6 .title_wrap a {
font-size: 12px;
color: #999;
}
#ent_main .ent_left #ent_section_6 ul {
}
#ent_main .ent_left #ent_section_6 li {
width: 148px;
}
#ent_main .ent_left #ent_section_6 ul .img_wrap {
position: relative;
width: 148px;
height: 85px;
border: solid 1px #000000;
margin-bottom: 10px;
}
#ent_main .ent_left #ent_section_6 ul .img_wrap img {
position: absolute;
width: 100%;
height: 100%;
}
#ent_main .ent_left #ent_section_6 ul .img_wrap .icon_play {
position: absolute;
display: block;
width: 28px;
height: 28px;
background-color: grey;
border-radius: 50%;
left: 8px;
bottom: 7px;
}
#ent_main .ent_left #ent_section_6 ul h4 {
font-size: 12px;
margin-bottom: 8px;
}
#ent_main .ent_left #ent_section_6 ul span {
font-size: 11px;
color: #141414;
}
#ent_main .ent_left #ent_section_6 ul .source {
color: #999;
}
#ent_main .ent_left #ent_section_6 ul .source:after {
content: '';
display: inline-block;
width: 2px;
height: 2px;
background-color: #d3d3d3;
vertical-align: top;
margin: 9px 2px 0 4px;
}
#ent_main .ent_left #ent_section_6 ul .program {
}
#ent_main .ent_left #ent_section_6 ul .program:after {
content: '';
display: inline-block;
width: 5px;
height: 5px;
background-color: red;
vertical-align: top;
margin: 7px 2px 0 4px;
}
👉 css(ent_section_7)#ent_main .ent_left #ent_section_7 {
padding: 24px 0 20px;
border-bottom: solid 1px #e4e4e4;
}
#ent_main .ent_left #ent_section_7 .title_wrap {
margin-bottom: 17px;
}
#ent_main .ent_left #ent_section_7 .title_wrap h3 {
font-size: 16px;
}
#ent_main .ent_left #ent_section_7 .title_wrap a {
font-size: 12px;
color: #999;
}
#ent_main .ent_left #ent_section_7 .movie_wrap {
align-items: stretch;
}
#ent_main .ent_left #ent_section_7 .movie_wrap .left {
}
#ent_main .ent_left #ent_section_7 .movie_wrap .left img {
width: 200px;
height: 122px;
margin-bottom: 11px;
}
#ent_main .ent_left #ent_section_7 .movie_wrap .left h4 {
font-size: 12px;
font-weight: 700;
}
#ent_main .ent_left #ent_section_7 .movie_wrap .right {
width: 412px;
margin-left: 18px;
}
#ent_main .ent_left #ent_section_7 .movie_wrap .right ul {
}
#ent_main .ent_left #ent_section_7 .movie_wrap .right li {
margin-bottom: 10px;
}
#ent_main .ent_left #ent_section_7 .movie_wrap .right li:last-child {
margin-bottom: 0;
}
#ent_main .ent_left #ent_section_7 .movie_wrap .right a {
display: inline-block;
max-width: 363px;
margin-right: 5px;
vertical-align: top;
font-size: 14px;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#ent_main .ent_left #ent_section_7 .movie_wrap .right span {
vertical-align: top;
font-size: 11px;
color: #898989;
}
👉 css(ent_section_8)#ent_main .ent_left #ent_section_8 {
padding: 24px 0 20px;
border-bottom: solid 1px #e4e4e4;
}
#ent_main .ent_left #ent_section_8 .title_wrap {
}
#ent_main .ent_left #ent_section_8 .title_wrap div {
align-items: flex-start;
}
#ent_main .ent_left #ent_section_8 .title_wrap h3 {
font-size: 16px;
}
#ent_main .ent_left #ent_section_8 .title_wrap ul {
position: relative;
top: -4px;
margin-left: 19px;
}
#ent_main .ent_left #ent_section_8 .title_wrap li {
}
#ent_main .ent_left #ent_section_8 .title_wrap li a {
font-size: 12px;
color: #181818;
}
#ent_main .ent_left #ent_section_8 .title_wrap li a:before {
content: '';
display: inline-block;
width: 1px;
height: 10px;
background-color: #e8e8e8;
margin: 0 10px;
vertical-align: -1px;
}
#ent_main .ent_left #ent_section_8 .title_wrap li:first-child a:before {
content: none;
}
#ent_main .ent_left #ent_section_8 .title_wrap li a.on {
font-weight: 700;
color: #e2458f;
border-bottom: solid 1px #e2458f;
}
#ent_main .ent_left #ent_section_8 .title_wrap .more {
font-size: 12px;
color: #999;
}
#ent_main .ent_left #ent_section_8 .news_lists {
}
#ent_main .ent_left #ent_section_8 .news_lists li {
padding: 18px 0;
border-bottom: solid 1px #f1f1f1;
}
#ent_main .ent_left #ent_section_8 .news_lists li:last-child {
border-bottom: none;
}
#ent_main .ent_left #ent_section_8 .news_lists a {
}
#ent_main .ent_left #ent_section_8 .news_lists .rank {
display: block;
width: 40px;
text-align: center;
}
#ent_main .ent_left #ent_section_8 .news_lists .news_info_wrap {
width: calc(100% - 40px);
}
#ent_main .ent_left #ent_section_8 .news_lists .news_info_txt {
width: 486px;
}
#ent_main .ent_left #ent_section_8 .news_lists .news_info_txt h4 {
font-size: 14px;
font-weight: 700;
margin-bottom: 9px;
}
#ent_main .ent_left #ent_section_8 .news_lists .news_info_txt p {
font-size: 12px;
font-weight: 400;
color: #898989;
margin-bottom: 8px;
}
#ent_main .ent_left #ent_section_8 .news_lists .news_info_txt span {
font-size: 11px;
color: #898989;
}
#ent_main .ent_left #ent_section_8 .news_lists .news_info_wrap img {
width: 88px;
height: 88px;
}
👉 css(ent_section_9)#ent_main .ent_left #ent_section_9 {
padding: 24px 0 20px;
border-bottom: solid 1px #e4e4e4;
}
#ent_main .ent_left #ent_section_9 .title_wrap {
margin-bottom: 17px;
}
#ent_main .ent_left #ent_section_9 .title_wrap h3 {
font-size: 16px;
}
#ent_main .ent_left #ent_section_9 .title_wrap a {
font-size: 12px;
color: #999;
}
#ent_main .ent_left #ent_section_9 ul {
}
#ent_main .ent_left #ent_section_9 li {
width: 200px;
border: solid 1px #000000;
}
#ent_main .ent_left #ent_section_9 a {
display: block;
}
#ent_main .ent_left #ent_section_9 li img {
width: 100%;
height: 122px;
}
#ent_main .ent_left #ent_section_9 li .txt_wrap {
padding: 13px 14px 18px;
}
#ent_main .ent_left #ent_section_9 li span {
font-size: 11px;
}
#ent_main .ent_left #ent_section_9 li .program {
color: #ff0080;
}
#ent_main .ent_left #ent_section_9 li .program:after {
content: '';
display: inline-block;
width: 2px;
height: 2px;
background-color: #d3d3d3;
vertical-align: top;
margin: 9px 2px 0 4px;
}
#ent_main .ent_left #ent_section_9 li .source {
color: #999;
}
#ent_main .ent_left #ent_section_9 li h4 {
padding-top: 8px;
font-size: 12px;
font-weight: 700;
line-height: 20px;
min-height: 36px;
}
👉 結果きょうの学習後期
今日はNAVERTVの出演者の左の部分の猫実習を終えました.今回の実習は、これまでの実習で最も長いコードを作成したようです.今日の授業で最も印象的なのは、aラベルにaラベルを繰り返し挿入し、middleではなく垂直位置にtopを与えて要素の位置を調整することができないことです.繰り返し作業を経て、最初は難しいものが今では迅速かつ容易に理解され、応用されるようになりました.明日も真剣に!✍🏻🔥
Reference
この問題について(Dev Log#27-8月3日), 我々は、より多くの情報をここで見つけました https://velog.io/@juhuii/Dev-Log-27-8월-3일テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol