3월 7일 내용정리
*복습하기
-스타일 지정
선택자{속성:값;}
.class명{속성:값;} --->적용하고 싶은곳에 여러번 쓸수 있음
#id명{속성:값;} --->유일하게 구분할때, 딱한번만 쓸수 있고 그래서 위치지정자로 쓰인다.
nav>ul 자식개념
nav li 후손개념(한칸띄기)
*{ } ->모든태그에 적용
: ->가상클래스
a:hover ->a태그에 마우스가 올라오면...어떤동작
li:hover ->li태그에 마우스가 올라오면...어떤동작
inline->줄바꿈안됨, 너비와 높이 못가짐, 마진 top과 botton은 없다.
block->줄바꿈됨, 너비와 높이 가짐, 마진 상하좌우 가능하다.
dispiay:inlin-block-> 줄바꿈 안됨, 너비와 높이 가능
<body의 구성요소>
<body>
<header>내용중에 공통적인 부분, nav 부분</header>
<section>내용부분</section>
<footer>아래 부분</footer>
</body>
-float는 떠다니는 속성으로 content을 일자로 붙이고 싶을때 사용
-크기=width+2*(padding+margine+border)
*외부 스타일 시트
스타일시트의 공통적인 부분을 css파일로 따로 빼서 "외부 스타일 연결" 에서 불러 온다
외부 글꼴도 따로 빼서 불러올 수 있다.
/*외부스타일 시트만들기*/
/*주의) <style></style>이란 태그를 쓰지 않는다.*/
/*pt(point) px(pixell)는 절대 단위 em은 부모태그 상대적단위 rem 제일 상단 body 를 부모로 상대적단위
상대적 단위는 % 로 비율로도 쓴다.*/
/*"맑은 고딕" 띄어쓰기할때는 꼭 쌍따움표 를 쓴다.*/
*{
margin: 0px;
padding: 0px;
}
/*html, body 중 콤마는 html와 body 모두 적용할래 */
html, body{
color:black
}
body{
width: 960px;
margin: 0 auto;
font-size: 16px;
/*컴터마다 글꼴이 있는것도 있고 없는 것도 있어서 1~4순위까지 순위적용 하여 있는거 적용하기 */
font-family: 궁서체, 굴림체, serif, sans-serif;
/*10pt= 13px =0.8em =80%
12pt=16px=1em=100%
h1-32px
p-16px
*/
}
/*text-align: 수평방향에서 정렬을 의미한다.*/
a{
text-decoration: none;
color:black;
}
li{
list-style: none;
}
img{
border: none;
}*index.html 부분
<!--단축키 alt+ shift +방향키 는 한줄복사-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바클라우드 융합 개발자</title>
<!--외부 글꼴 연결-->
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<!--외부 스타일 연결-->
<!--스타일시트의 공통적인 부분을 css파일로 따로 빼서 "외부 스타일 연결" 에서 불러 온다.-->
<!--외부 글꼴도 연결,j퀴리 붙여서 쓸때도 여기서 -->
<!--link href:외부연결 파일주소(상대경로) rel= 연결한 파일이 뭔지 설명-->
<link href="./css/basic.css" rel="stylesheet" />
<!--스타일시트 적용부분-->
<style>
/* 로그인/회원가입/사이트맵 부분 */
/* header 부분을 만들기, header와 section의 떨어트리기 위하여margin-bottom 을줌 */
.header {
margin-bottom: 30px;
background-color: aqua; /*확인용, 지울부분*/
}
.topNav{
background-color: red;/*확인용, 지울부분*/
width: auto;
height: 50px;
}
.topNav>ul{
list-style: none;
text-align: right;
}
.topNav li{
display: inline-block;
}
.topNav li>a{
display: inline-block;
width: 120px;
height: 50px;
line-height:50px;
text-align: center;
text-decoration: none;
margin: 0px 10px;
/*padding: 50px 10px; 위&아래 / 좌&우 */
}
.topNav a:hover{
background-color: blue;/*확인용, 지울부분*/
color: white;
border-radius: 10px; /*모서리 둥글게*/
}
/* 로그 부분 */
.logo{
text-align: center;
height: 80px;
line-height: 80px;
margin-top: 30px;
margin-bottom: 30px;
background-color: violet;/*확인용, 지울부분*/
}
/* 외부 글꼴 연결 import는 다운받아서 파일올려서 다른컴터에 다운받게 하겠다.
링크는 말그대로 링크로 연결해서 글꼴을쓴다.*/
.logo>h1{
font-family: 'Nanum Pen Script', cursive; /*외부 글꼴 연결*/
font-size: 3rem;
letter-spacing: 10px; /*자간, 글자와 글자의 간격*/
}
.mainNav{
width: auto;
height: 80px;
background-color: darkgreen;/*확인용, 지울부분*/
}
.mainNav>ul{
list-style: none;
text-align: center;
}
.mainNav li{
display: inline-block;
}
.mainNav li>a{
width: 150px;
height: 80px;
line-height: 80px;
display: inline-block;
text-decoration: none;
border-radius: 10px;
margin: 0px 10px;
}
.mainNav a:hover{
background-color: chartreuse;/*확인용, 지울부분*/
}
</style>
</head>
<body>
<!--header 부분을 만들기, body문서의 상단에 위치할 부분-->
<!--상자안에 넣어서 정리하고 관리하는게 편하므로<div>를 만듬 -->
<div class="header">
<!-- 로그인/회원가입/사이트맵 부분 -->
<div class="topNav">
<ul>
<li><a href="login.html">로그인</a></li>
<li><a href="member.html">회원가입</a></li>
<li><a href="sitemap.html">사이트맵</a></li>
</ul>
</div>
<!-- 로고 부분 -->
<div class="logo">
<h1>자바클라우드 융합개발자</h1>
</div>
<!-- 메뉴1/ 메뉴2 ... 메인 메뉴 부분 -->
<div class="mainNav">
<ul>
<li><a href="#">메인메뉴1</a></li>
<li><a href="#">메인메뉴2</a></li>
<li><a href="#">메인메뉴3</a></li>
<li><a href="#">메인메뉴4</a></li>
</ul>
</div>
</div>
<!--section 부분, body문서의 중앙 내용물들이 위치하는 부분-->
<div class="section">
<!-- 본문 왼쪽 메뉴 부분 -->
<div class="leftCon">왼쪽 메뉴 </div>
<!-- 본문 오른쪽 내용 부분 -->
<div class="rightCon">오른쪽 내용</div>
</div>
<!--footer 부분, body문서의 하단,회사 주소 및 전화...회사관련된부분-->
<div class="footer">
<h2>Copyright & copy; 2022 최빛나</h2>
</div>
</body>
</html>
좋은개발자가 되기위한 삽질기록 노트