3월10일 내용 정리
1.아래의 순서대로 진행 하면 된다.
큰것부터 잡고 그다음 세세하게 꾸미기
(1)html로 먼저 구조잡기
(2)베이직css 잡기(공통적인 css 설정)
(3)html로 내용
(4)css로 꾸미기
2.구글 폰트 가져와서 글꼴에 적용해 봤다.
사이트에 있는 주소 그대로 head에 붙여넣고,
원하는 태그에 스타일에 font family 복붙하면 적용된다.
이때 다운 받아서 쓰게 하고 싶으면 @import할것!
아직 그부분은 안배웠지만, 쌤이 인터넷이 연결되어 있다면 외부 폰트를 사용하는것이 좋다함. 단!라이센스는 꼭 확인해 볼것!
3.margine을 줄때 좌우 여백은 and 이고 상하 여백은 or 이다.
예)좌10+우10=좌우20
예)상10||하10=상하10
<!--inline-bolck 은 옆으로 쭉나열 가능하면, width, height,padding, margine 을 가질 수 있다.-->
<!--inline은 글꼴 관련된 것은 inline태그 예)a, span,input,img-->
<!--(1)html로 먼저 구조잡기 (2)베이직css 잡기(공통적인 css 설정) (3)html로 내용 (4)css로 꾸미기-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바 클라우드 융합 개발자</title>
<!--외부 글꼴/외부 스타일-->
<!--import는 다운받아서 쓸수 있게하는거, 인터넷이 연결되어 있다면 링크만 가져다 쓰는게좋음-->
<!-- link(링크) href(주소는)="주소" rel="연결된 문서가 뭐인지"-->
<link href="https://fonts.googleapis.com/css2?family=Hi+Melody&display=swap" rel="stylesheet">
<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;
}
/* 로고 */
.logo{
height: 100px;/* 상자의 높이 */
line-height: 100px;/* 수직 정렬 */
/*padding: 50px 0px; 상자 내부 간격 조정, 자연스럽게 수직 정렬이됨
height, line-heigh을 대신한다.*/
margin: 10px 0;/* 상자와 상자의 간격 */
}
.logo>h1{
text-align: center;
font-family: 'Hi Melody', cursive;/*외부글꼴 폰트 적용*/
letter-spacing: 10px; /*글자사이의 간격*/
font-size: 3rem; /*상대적 사이즈 변경 기준은 공통css 에 넣어놓은 html, body{}의 사이즈 기준*/
color: blueviolet;
}
/*메인 메뉴 부분*/
/*div안에 안넣고, ul상자에 바로 넣어서 저장*/
.mainMenu{
text-align: center;
/*margin-top: 10px; 위아래 마진은 각각 다른상자 즉, 1번div 상자에는 margin-top,*/
}
.mainMenu>li{
display: inline-block;
}
.mainMenu a{
display: inline-block;
font-size: 1.3rem;
letter-spacing: 5px;
font-weight: bold; /*글자의 굵기*/
padding: 10px 20px;
}
/*hover는 마우스를 올렸을때*/
.mainMenu a:hover{
background-color: blueviolet;
color: aliceblue;
border-radius: 10px;
}
/*몸통 부분*/
.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;
}
.left>ul{
text-align: center;
margin-top: 50px;
}
.left a{
display: block;
padding: 10px;
font-size: 1.5rem;
}
.left a:hover{
background-color: blue;
color: white;
}
.right{
height: 600px;/* 확인용 */
float: left;
width: 740px;
background-color: crimson;/* 확인용 */
/*overflow: hidden; /*관례적으로 자식에 float이 있으면 부모요소에 overflow: hidden*/
}
/*right 부분의 그림 관련 설정*/
.right>img{
width:230px;
height: 250px;
}
.footer{
height: 100px;
background-color: cornflowerblue;/* 확인용 */
font-size: 20px;
}
.footer>ul{
line-height: 100px;
}
</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">
<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 class="right">
<img src="./images/background01.jpg" alt="배경그림1">
<img src="./images/background02.jpg" alt="배경그림2">
<img src="./images/background03.jpg" alt="배경그림3">
<img src="./images/big_Tree01.jpg" alt="큰나무1">
<img src="./images/big_Tree02.jpg" alt="큰나무2">
<img src="./images/big_Tree03.jpg" alt="큰나무3">
</div>
</div>
<!--footer 부분-->
<footer class="footer">
<h6>한국정보교육원|대표자:김선경|사업자번호:156-81-01617|직업정보제공사업신고확인증 신고번호:서울관악 제2013-02호</h6>
<h6>서울시 관악구 봉천로 227 보라매샤르망 |Tel:02-855-9611|Fax:02-856-9742</h6>
<h6>E-mail : kyoungwon199@naver.com|개인정보보호책임자 : 김선경 (kyoungwon199@naver.com)</h6>
<h6>Copyright © 2022 최빛나 All Rights Reserved.</h6>
</footer>
</body>
</html>
4.flexbox
flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃으로 만들어짐
문서의 영역 중에서 flexbox가 놓여있는 영역을 flex 컨테이너라고 부르고 flex 컨테이너를 생성하려면 부모요소에 display 값을 flex 혹은 inline-flex로 지정함. 지정된 컨테이너의 자식요소가 flex 항목이 됨
<!--float 또는 flexbox 둘중에 하나를 써야한다. 박스의 사이를 조절해줌-->
<!--예전에는 테이블을 써서 정리 했는데 html5로 넘어오면서 div박스나 li 박스로 정리해줌 -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>플렉스 박스</title>
<style>
body{
width: 960px;
margin: 0px auto;
height: 800px;
border: 1px solid blue;
}
.imgCont{
width: 950px;
height: 100vh;/*view port 의 높이, 브라우져의 높이*/
background-color: bisque;
display: flex;/*반드시 부모요소에*/
flex-wrap: wrap; /*사이즈가 넘치면 알아서 줄바꿔서 배치*/
justify-content:center ;/*부모요소 컨테츠에 적용이 됨*/
/*justify-items: ;자식 요소 컨테츠에 적용이 됨 주로 ustify-content 만 쓰임*/
/*justify-content: space-around 왼쪽과 오른쪽 끝에 공간을 포함해서 균등한 여백을 형성한 상태로 배치*/
/*justify-content:space-between 왼쪽과 오른쪽 끝에 있는 요소를 끝에 붙이고, 남은 부분들은 균등한 공간을 형성한 상태로 배치*/
align-content: center; /*수직 가운데 정렬*/
/*align-content: space-around 위,아래 끝에 공간을 포함해서 균등한 여백을 형성한 상태로 배치*/
/*align-content:space-between 위,아래 끝에 있는 요소를 끝에 붙이고, 남은 부분들은 균등한 공간을 형성한 상태로 배치*/
}
.imgCont>img{
width: 300px;
height: 350px;
margin: 5px;
}
</style>
</head>
<body>
<div class="imgCont">
<img src="./images/big_Tree01.jpg">
<img src="./images/big_Tree02.jpg">
<img src="./images/big_Tree03.jpg">
<img src="./images/big_Tree04.jpg">
<img src="./images/big_Tree05.jpg">
<img src="./images/big_Tree06.jpg">
</div>
</body>
</html>
좋은개발자가 되기위한 삽질기록 노트