210706[7]大邱AI学校普通課程WebプログラミングCSS 5レイアウトlast
1 .学習の内容
今日はlayoutの最後の学習で、サイトを作成すると複数のページにジャンプできるメニューボタンを作成しました.そしてcssレイアウトの作成を支援するhttps://flexbox.help/ページで実習を行った.<!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="#">메뉴 버튼</a>
</li>
<li>
<a href="#">카카오</a>
</li>
<li>
<a href="#">다음</a>
</li>
</ul>
</nav>
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: whitesmoke;
/*border: solid 1px blue;*/
border-top: solid 1px red;
border-bottom: solid 1px red;
border-left: solid 1px red;
/*text-align: center;*/
/*line-height: 50px;*/
/*padding-top: 15px;*/
/*padding-bottom: 15px;*/
}
.menu li:last-child {
border-right: solid 1px red;
}
.menu li a {
display: block;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
}
.menu li a:hover {
color: blue;
}
.kakao-lists li img,
.kakao-lists li .kakao-info {
vertical-align: middle;
}
.kakao-lists li img {
border-radius: 20px;
}
.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;
}코드를 입력하세요
<!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="kakao-lists">
<li>
<a href="#">
<img src="https://via.placeholder.com/50">
<div class="kakao-info">
<h3>김채원</h3>
<span>chaewon kim</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/50">
<div class="kakao-info">
<h3>김채원</h3>
<span>chaewon kim</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/50">
<div class="kakao-info">
<h3>김채원</h3>
<span>chaewon kim</span>
</div>
</a>
</li>
</ul>
</body>
</html>
-->
<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 youNice 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 class="date-wrap">
<span class="source">집꾸미기</span>
<span class="date">2주일전</span>
</div>
</div>
</a>
</li>
</ul>
<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>
最初の成果物
2番目の成果物
3番目の成果物
githubリンク:
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/1
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/2
2.難しいところ
Naver Living Sectionの実習期間中、オレンジ色のレイアウトがありました<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 youNice 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 class="date-wrap">
<span class="source">집꾸미기</span>
<span class="date">2주일전</span>
</div>
</div>
</a>
</li>
</ul>```
다음과 같은 code에서 제대로 동작하지 않았다.
css code도 계속 분석하고 스크리닝을 했으나 별다른 문제점이 보이지 않아서, 다시 다 지우고 했는데, a태그가 제대로 안 감싸져있었다. 그리고 h3 영역에서 부분이 앞으로 나와있어서 Tab키를 눌러서 뒤쪽으로 정렬하니, css code 부분의 vertical-align: middle;이 제대로 작동하여 원하는 쪽으로 정렬이 되었다.
3.解決方法
コード自体が増えるにつれて、tagで包まれたものが互いに葛藤することが多くなり、一人で多くの練習が必要になるようです.
4.勉強の心得
今日は他の人の発展を見て、単独で実習してファイルをアップロードする人もいました.1週間半くらい経って、もう差があるような気がします.今夜までに、これまで学んだcssレイアウト部分まで、必ず復習+実習を行います.
Reference
この問題について(210706[7]大邱AI学校普通課程WebプログラミングCSS 5レイアウトlast), 我々は、より多くの情報をここで見つけました
https://velog.io/@yeonsuhong5684/2107067대구-AI스쿨일반과정웹-프로그래밍CSS5레이아웃last
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<!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="#">메뉴 버튼</a>
</li>
<li>
<a href="#">카카오</a>
</li>
<li>
<a href="#">다음</a>
</li>
</ul>
</nav>
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: whitesmoke;
/*border: solid 1px blue;*/
border-top: solid 1px red;
border-bottom: solid 1px red;
border-left: solid 1px red;
/*text-align: center;*/
/*line-height: 50px;*/
/*padding-top: 15px;*/
/*padding-bottom: 15px;*/
}
.menu li:last-child {
border-right: solid 1px red;
}
.menu li a {
display: block;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
}
.menu li a:hover {
color: blue;
}
.kakao-lists li img,
.kakao-lists li .kakao-info {
vertical-align: middle;
}
.kakao-lists li img {
border-radius: 20px;
}
.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;
}코드를 입력하세요<!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="kakao-lists">
<li>
<a href="#">
<img src="https://via.placeholder.com/50">
<div class="kakao-info">
<h3>김채원</h3>
<span>chaewon kim</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/50">
<div class="kakao-info">
<h3>김채원</h3>
<span>chaewon kim</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/50">
<div class="kakao-info">
<h3>김채원</h3>
<span>chaewon kim</span>
</div>
</a>
</li>
</ul>
</body>
</html>
-->
<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 youNice 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 class="date-wrap">
<span class="source">집꾸미기</span>
<span class="date">2주일전</span>
</div>
</div>
</a>
</li>
</ul>
<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>
Naver Living Sectionの実習期間中、オレンジ色のレイアウトがありました
<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 youNice 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 class="date-wrap">
<span class="source">집꾸미기</span>
<span class="date">2주일전</span>
</div>
</div>
</a>
</li>
</ul>```
다음과 같은 code에서 제대로 동작하지 않았다.
css code도 계속 분석하고 스크리닝을 했으나 별다른 문제점이 보이지 않아서, 다시 다 지우고 했는데, a태그가 제대로 안 감싸져있었다. 그리고 h3 영역에서 부분이 앞으로 나와있어서 Tab키를 눌러서 뒤쪽으로 정렬하니, css code 부분의 vertical-align: middle;이 제대로 작동하여 원하는 쪽으로 정렬이 되었다.3.解決方法
コード自体が増えるにつれて、tagで包まれたものが互いに葛藤することが多くなり、一人で多くの練習が必要になるようです.
4.勉強の心得
今日は他の人の発展を見て、単独で実習してファイルをアップロードする人もいました.1週間半くらい経って、もう差があるような気がします.今夜までに、これまで学んだcssレイアウト部分まで、必ず復習+実習を行います.
Reference
この問題について(210706[7]大邱AI学校普通課程WebプログラミングCSS 5レイアウトlast), 我々は、より多くの情報をここで見つけました
https://velog.io/@yeonsuhong5684/2107067대구-AI스쿨일반과정웹-프로그래밍CSS5레이아웃last
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
今日は他の人の発展を見て、単独で実習してファイルをアップロードする人もいました.1週間半くらい経って、もう差があるような気がします.今夜までに、これまで学んだcssレイアウト部分まで、必ず復習+実習を行います.
Reference
この問題について(210706[7]大邱AI学校普通課程WebプログラミングCSS 5レイアウトlast), 我々は、より多くの情報をここで見つけました https://velog.io/@yeonsuhong5684/2107067대구-AI스쿨일반과정웹-프로그래밍CSS5레이아웃lastテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol