チームログインページの作成
21613 ワード
私の船のカメラは週3日で、やっと最初のプロジェクトが始まりました.
スモールプロジェクトでチーム紹介ページを作成
まず、私たちのグループはpdfでレイアウト草案を起草し、計画された枠組みで仕事を始めました.
私はホームページの仕事を担当しています.
まず、背景を明るい黒にするために、ボディ要素全体を包むdivを作成し、背景とフォントを加えました.
イメージはしばらく勝手に入れました.
中身は一時的に書き乱したものです
反応型の動作をかなり困難にする
ページの横幅を小さくして、円形の幅のねじれの問題が存在して、どのように解決して、ずっと比例を維持することを実現していないで、横並び、ページの幅の縮小に従って、自動的に小さくなります
だから@mediaを使って、ページ幅に応じてCSSを手動で設定するしかありません.
divタグに画像を入れるとき、ハイパーリンクを入れる方法が分からないのでgooglingをしました
チーム名とチームメンバーは、それぞれ名前、Eメールアドレス、日付を入力します.
スモールプロジェクトでチーム紹介ページを作成
まず、私たちのグループはpdfでレイアウト草案を起草し、計画された枠組みで仕事を始めました.
私はホームページの仕事を担当しています.
ホームレイアウト要素の使用
まず、背景を明るい黒にするために、ボディ要素全体を包むdivを作成し、背景とフォントを加えました.
.wrap {
font-family: 'NanumSquareBold';
background-color: #242428;イメージはしばらく勝手に入れました.
.title {
max-width: 1270px; // 반응형으로 동작하기 위해 최대 너비를 지정하고
width: 100%; // 100%를 주어 좁은 너비에서는 양끝까지 박스를 지정했다
padding: 100px 0 100px 0;
margin: auto;
text-align: center; // 텍스트 가운데 정렬
color: white;
font-size: 100px;
}
.title_coketmon {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSh6rgxhKUaQ6W7K9nYdoGy6-qNfA6p2xCT1w&usqp=CAU");
background-position: center;
background-size: cover;
max-width: 1270px;
width: 100%;
height: 480px;
margin: 0 auto 20px auto;
}中身は一時的に書き乱したものです
.introduce_title {
max-width: 1140px;
width: 100%;
margin: 100px auto 50px auto;
color: white;
font-size: 70px;
}
.introduce_subtitle {
max-width: 685px;
width: 100%;
margin: 0 auto 15px auto;
font-size: 35px;
}
.introduce_desc {
max-width: 685px;
width: 100%;
margin: 0 auto 50px auto;
color: white;
font-size: 20px;
}反応型の動作をかなり困難にする
ページの横幅を小さくして、円形の幅のねじれの問題が存在して、どのように解決して、ずっと比例を維持することを実現していないで、横並び、ページの幅の縮小に従って、自動的に小さくなります
だから@mediaを使って、ページ幅に応じてCSSを手動で設定するしかありません.
.member { // 4장의 멤버사진을 전부 묶어둔 클래스
display: flex; // 4장의 이미지를 가로로 배열하기 위해 flex와
flex-direction: row; // row를 지정했다
justify-content: center;
align-items: center;
width: 100%;
margin: 100px 0 0 0;
}
.member > div { // 사진 각각의 클래스
margin: 0 25px 100px 25px;
width: 300px; // 고정된 크기를 지정
height: 300px;
border-radius: 50%; // 원형 이미지
background-position: center;
background-size: cover;
}
@media (max-width: 1400px) { // 페이지 너비 1400 이하는 따로 css 지정
.member > div {
width: 200px; // 이미지를 조금 더 작게
height: 200px;
margin: 0 10px 100px 10px; // 여백도 조금 더 작게
}
}
@media (max-width: 900px) { // 페이지 너비 900 이하도 따로 css 지정
.member {
flex-direction: column; // row를 column으로 바꿔 세로 정렬
}
.member > div {
width: 300px; // 세로 정렬을 하는대신 크기를 원래대로 키움
height: 300px;
margin: 0 10px 100px 10px;
}
}divタグに画像を入れるとき、ハイパーリンクを入れる方法が分からないのでgooglingをしました
<style>
.member_1 {
cursor: pointer; // 이미지가 img 태그가 아닌 div 태그에 들어가있기 때문에 하이퍼링크를 넣어도 마우스를 갖다댔을때 커서가 손가락 모양으로 변하지 않는것을 수동으로 변하도록 지정
background-image: url("이미지링크");
}
</style>
<body>
<div class="member">
<div class="member_1" onclick="location.href='kim.html'"></div> // 페이지 이동되도록 온클릭 이벤트 지정
<div class="member_2" onclick="location.href='yeom.html'"></div>
<div class="member_3" onclick="location.href='cho.html'"></div>
<div class="member_4" onclick="location.href='choi.html'"></div>
</div>
</body>チーム名とチームメンバーは、それぞれ名前、Eメールアドレス、日付を入力します.
<style>
.footer {
font-family: 'Noto Sans KR', sans-serif; // 다른 글꼴을 적용
color: gray;
text-align: center;
border-top: 1px solid gray; // 상단에 실선
width: 100%;
padding-bottom: 50px;
margin: auto;
background-color: #242428;
}
.footer > p {
font-size: 30px;
margin-top: 50px;
}
.footer > div {
margin: auto;
}
</style>
<body>
<footer>
<div class="footer">
<p>내일배움캠프 AI트랙 2기 14팀 # 코켓몬</p>
<div>
<p>이름 이메일주소</p>
<p>이름 이메일주소</p>
<p>이름 이메일주소</p>
<p>이름 이메일주소</p>
<p>2022.04</p>
</div>
</div>
</footer>
</body>Reference
この問題について(チームログインページの作成), 我々は、より多くの情報をここで見つけました https://velog.io/@wkdudhksl/팀-소개-페이지-만들기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol