3월 8일 내용정리
*복습하기
-inline-bolck 은 옆으로 쭉나열 가능하면, width, height,padding, margine 을 가질 수 있다.
-inline은 글꼴 관련된 것은 inline태그 예)a, span,input,img
1.html로 먼저 구조잡기
html 및 sheet 작성법은 큰순서는 아래와 같은
(1)html로 먼저 구조잡기
(2)베이직css 잡기(공통적인 css 설정)
(3)html로 내용
(4)css로 꾸미기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바 클라우드 융합 개발자</title>
<!--외부 글꼴/외부 스타일-->
<!-- link(링크) href(주소는)="주소" rel="연결된 문서가 뭐인지"-->
<link href="./css/basic01_0308.css" rel="stylesheet" type="text/css"/>
<!--스타일-->
<style>
/* header 부분*/
.header{
width: 960px; /* 생략가능 또는 100%-> 부모요소(body)크기 만큼*/
height: 250px;
background-color: aqua; /* 확인용 */
margin-bottom: 20px;
}
.topNav li{
display: inline-block; /* 리스트 요소 li에 적용*/
}
.topNav li>a{
display: inline-block; /* 마우스가 넓게 인식 하게 위해 잡아줌*/
padding: 5px 20px; /* width와 height로 할수 있지만 내부요소인 padding이 더 좋음. 위,아래 & 왼쪽,오른쪽 */
}
.topNav>ul{
text-align: right;
}
.topNav li>a:hover{
background-color: blue;
color: white;
border-radius: 10px;
}
.logo>h1{
text-align: center;
}
/*몸통 부분*/
.content{
background-color: burlywood; /* 확인용 */
height: 600px;/* 확인용 */
margin-bottom: 20px;
overflow: hidden; /* 자식요소에 float 을 썻을때 써줌*/
}
.left{
height: 600px;/* 확인용 */
float: left; /* 떠다니는 요소, 무언가를 배치하고 싶을때, 왼쪽에 붙게해죠 */
width: 200px;
margin-right: 20px;
background-color: chocolate; /* 확인용 */
padding-right: 10px;
}
.right{
height: 600px;/* 확인용 */
width: 740px;
background-color: crimson;/* 확인용 */
}
.footer{
height: 150px;
background-color: cornflowerblue;/* 확인용 */
}
</style>
</head>
<body>
<!--header 부분, 로그인, 로그, 메인 메뉴-->
<div class="header">
<div class="topNav">
<!--ul안에 안넣어줘도 되지만, 넣어주는 이유는 정렬이나 정리하기 쉽게하기위해-->
<ul>
<li><a href="login.html">로그인</a></li>
<li><a href="member.html">회원가입</a></li>
<li><a href="#">사이트맵</a></li>
</ul>
</div>
<div class="logo">
<h1>자바클라우드 융합 개발자</h1>
</div>
<ul class="mainMenu">
<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 class="content">
<div class="left">
<h1>왼쪽 부분</h1>
</div>
<div class="right">
<h1>오른쪽 부분</h1>
</div>
</div>
<!--footer 부분-->
<footer class="footer">
<h3>Copyright & Copy; 2022 최빛나</h3>
</footer>
</body>
</html>
2.베이직css 잡기(공통적인 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;
}
좋은개발자가 되기위한 삽질기록 노트