아이콘
flaticon 사이트도 있다.
2. 인덱스 페이지 - 화면구현
ㄱ. 박스영역 중앙 배치 - margin: 0 auto;
ㄴ. 글자 이미지 중앙 정렬 - text-align: center;
ㄷ. 한줄일 경우 위아래 정렬 - line-height: 높이
+ 패딩값을 이용하기도 한다.
ㄹ. 이미지와 글자 겹치기
1. 부모요소: position: relative;
2. 자식요소: position: absolute;
ㅁ. h, ul, p: 기본적으로 margin 있음. (제거작업해야함)
ㅂ. 테이블디자인
1. border-colapse: colapse
2. td 상단과 하단 테두리 (좌우 사이드 넣지 않는게 추세)
3. 타이틀이 있으면 대표색상
4. td 에 패딩으로 여유있게
5. 숫자는 가능하면 오른쪽 정렬
ㅅ. 독립적인 버튼, 메뉴
1. position: fixed
2. 페이지 내에서 이동시 scroll-behavior: smooth
ㅇ. 페이지 공통으로 쓰이는 css 코드
1. common.css 분리해서 파일 만들고 페이지 link 호출
(테이블)
방금한거
안커질때 인라인블럭
독립적인 버튼, 메뉴
이거 넣으면 부드럽게 스크롤 이동됨
어..제트인덱스 넣으면 맨 위로 뜬다.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="wrapper">
<a href="#logo" id="backtop" class="show"><i class="fa-solid fa-angle-up"></i></a>
<header>
<div id="logo">
<div class="hgroup">
<h1 class="first">웹페이지디자인</h1>
<h1>웹퍼블리싱</h1>
<h1>코드스터디</h1>
<p>School of WebCoding</p>
</div>
</div>
<nav>
<label for="" class="toggle" onclick=""><i class="fa-solid fa-bars"> MENU</i></label>
<div class="mylink">
<ul class="menu">
<li><a href="">HOME</a></li>
<li><a href="">MEMBER</a></li>
<li><a href="">CLASS</a></li>
<li><a href="notice.html">NOTICE</a></li>
<li><a href="">GALLERY</a></li>
</ul>
</div>
</nav>
</header>
<div class="slideshow">
<div class="myslide">
<img src="images/키보드.png" alt="">
</div>
<a href="" class="control prev">❮</a>
<a href="" class="control next">❯</a>
<p class="dots">
<label for="" class="dot active"></label>
<label for="" class="dot"></label>
<label for="" class="dot"></label>
</p>
</div>
<div class="content">
<div class="notice">
<h3>최근공지사항 <span class="more"><i class="fa-solid fa-circle-info"></i></span></h3>
<table class="recent_notice">
<tr class="first">
<td><a href="">홈페이지제작 워크샵</a></td>
<td class="regdate">2010-10-10</td>
</tr>
<tr>
<td><a href="">웹디자인 설계 클래스</a></td>
<td class="regdate">2010-10-10</td>
</tr>
<tr>
<td><a href="">홈페이지제작</a></td>
<td class="regdate">2010-10-10</td>
</tr>
<tr>
<td><a href="">쇼핑몰 프로젝트 사업계획</a></td>
<td class="regdate">2010-10-10</td>
</tr>
<tr>
<td><a href="">홈페이지제작 워크샵</a></td>
<td class="regdate">2010-10-10</td>
</tr>
<tr>
<td><a href="">쇼핑몰 프로젝트 사업계획</a></td>
<td class="regdate">2010-10-10</td>
</tr>
<tr class="last">
<td><a href="">홈페이지제작 워크샵</a></td>
<td class="regdate">2010-10-10</td>
</tr>
</table>
</div>
<div class="gallery">
<h3>갤러리사진 <span class="more"><i class="fa-solid fa-circle-info"></i></span></h3>
<div class="entry">
<img src="images/KakaoTalk_20221026_142858989.jpg" alt="">
<div class="caption"><i class="fa-solid fa-camera-retro"></i>워크샵 모임 사진</div>
</div>
<div class="entry">
<img src="images/KakaoTalk_20221026_142859080.jpg" alt="">
<div class="caption"><i class="fa-solid fa-camera-retro"></i>사은회 회식 사진</div>
</div>
<div class="entry">
<img src="images/KakaoTalk_20221026_142859152.jpg" alt="">
<div class="caption"><i class="fa-solid fa-camera-retro"></i>남산 등산 모임 사진</div>
</div>
<div class="entry">
<img src="images/KakaoTalk_20221026_142859474.jpg" alt="">
<div class="caption"><i class="fa-solid fa-camera-retro"></i>남이도 야유회 사진</div>
</div>
</div>
<div class="sponsor">
<h3>스폰서광고 <span class="more"><i class="fa-solid fa-circle-info"></i></span></h3>
<div class="mybanner">
<img src="images/KakaoTalk_20221026_145503318.jpg" alt="">
</div>
</div>
</div>
<footer>
<address>&Copywriter © 2020
<span>GeneratePress IIBI</span>
</address>
</footer>
</div>
<script></script>
</body>
</html>
style
*{
font-family: Arial, Helvetica, sans-serif; /* 제목 */
}
body{
background-color: #fff;
/* border: 1px solid red; */
margin: 0;
}
.wrapper{
width: 100%;
min-width: 372px; /* 모바일 화면 최소 사이즈 */
margin: 0 auto;
background-color: #fff;
}
/* 헤더영역 */
header{
width: 100%;
height: 300px;
background-color: #6867a8;
color: #fff;
}
#logo{
height: 260px;
}
.hgroup{
text-align: center;
box-sizing: border-box;
padding-top: 20px;
}
.hgroup>h1{
margin: 0;
}
.hgroup>h1.first{
margin-top: 30px;
}
nav{
height: 40px;
background-color: #ededed;
color: #111;
position: relative;
}
/* label */
.toggle{
display: block;
height: 40px;
line-height: 40px;
padding-left: 20px;
font-weight: bold;
}
.toggle:hover{
color: orangered;
}
.mylink{
background-color: #ededed;
display: block; /* block */
border-top: 1px solid #111;
position: absolute;
top: 40px;
z-index: 99;
width: 100%;
}
.menu{
list-style: none;
margin: 0; /* ul태그 기본적으로 마진 o - 제거 */
padding-left: 0px;
}
.menu>li{
height: 40px;
width: 100%;
}
.menu>li>a{
display: block;
text-decoration: none;
width: 100%;
height: 40px;
line-height: 40px;
color: #111;
padding-left: 20px;
box-sizing: border-box;
}
.menu>li>a:hover{
background-color: #ffcc00;
}
/*푸터*/
footer{
width: 100%;
height: 40px;
background-color: #ededed;
}
address{
height: 40px;
line-height: 40px;
text-align: center;
}
address>span{
color: orangered;
font-weight: bold;
}
/* 상단 이동 버튼 */
html{
scroll-behavior: smooth;
}
#backtop{
position: fixed;
bottom: 20px;
right: 20px;
width: 30px;
height: 30px;
padding: 10px;
display: inline-block;
font-size: 30px;
background-color: #ffcc00;
color: #111;
border-radius: 30px;
text-align: center;
opacity: 0.7;
}
/* 슬라이드 영역 */
.slideshow{
width: 100%;
position: relative;
}
.myslide img{
width: 100%;
}
.control{
position: absolute;
top: 50%;
margin-top: -20px; /*50% 주면 꼭짓점 기준이기 때문에 내려와보여서 줌*/
padding: 10px;
color: #fff;
text-decoration: none;
background-color: rgba(100, 100, 100, 0.3);
}
.prev{
border-radius: 0px 5px 5px 0px;
}
.next{
right: 0;
border-radius: 5px 0px 0px 5px;
}
.dots{
position: absolute;
bottom: 0;
color: white;
width: 100%;
text-align: center;
}
.dot{
display: inline-block;
width: 15px;
height: 15px;
margin: 3px;
background-color: #fff;
border-radius: 15px;
}
.dot.active{
background-color: #6867a8;
}
/* 컨텐츠 영역 */
.notice, .gallery,.sponsor{
width: 100%;
box-sizing: border-box;
padding: 10px;
}
.recent_notice{
width: 100%;
border-collapse: collapse;
}
.recent_notice tr.first{
border-top: 2px solid #cccccc;
}
.recent_notice tr.last{
border-bottom: 2px solid #cccccc;
}
.recent_notice td{
border-top: 1px solid #ededed;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
td.regdate{
text-align: right;
padding-right: 10px;
}
.notice>h3{
position: relative;
}
span.more{
position: absolute;
/* border: 1px solid red; */
right: 10px;
font-size: 120%;
}
/* 갤러리최근사진 */
.gallery{
width: 100%;
}
.entry{
width: 100%;
box-sizing: border-box;
padding: 5px;
border: 1px solid #ededed;
margin-bottom: 5px;
}
.entry img{
width: 100%;
}
.caption{
padding-left: 10px;
color: #ffcc00;
background-color: #111;
}
/* 배너광고 */
.mybanner{
width: 95%;
box-sizing: border-box;
border: 2px solid #ededed;
margin: 5px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 10px;
text-align: center;
}
.mybanner img{
width: 60%;
}
3. 조건식이 중첩
ㄱ. if (조건) {
if (조건2) {
}else{
}
아이디 비밀번호 맞는지 확인하기
-알파벳 소문자 입력하고 모음인지 자음인지
메뉴 고르면 사진 출력해줌
음료버전
(2 입력했다.)
'학원 > 웹' 카테고리의 다른 글
| 자바 - 배열 , 메소드 (0) | 2023.01.12 |
|---|---|
| 웹 (0) | 2022.10.28 |
| [css/js] 애니매이션(트랜지션,트랜스폼)이론/모바일인덱스페이지만들기-슬라이드이미지,그위에화살표띄우기,그위에동그라미만들기(슬라이드하단도트)/글자위아래가운데정렬/(js)조건문-if,if/.. (0) | 2022.10.25 |
| [웹-css,js] 탭메뉴-메뉴와컨텐츠,디스플레이논/블럭//트렌지션-글자크기,이동,색,기울기 등등부드럽게변화/(js)숫자입력받아양수,음수출력/짝수홀수출력 (0) | 2022.10.24 |
| 10/18 웹수업 (0) | 2022.10.20 |
