오전9시:
<tag or element>
<div></div>
<h1></h1>
<ul></ul>
<li></li>
<input type="">
HTML 은 < > 로 이뤄져있고 시작하는 태그가 있다면 닫는것도 있다
<div class="row_group"> div는 엘리먼트(element) class 는 속성
< >안에 태그 or 엘리먼트 말고 다른 내용이 들어가면 그것은 속성값이다.
닫는 태그들은 대부분 인라인이다.
예외....... <img src=""> <input type=""> <br/> 일단 3가지
오전 10시:
block과 inline이 혼용되었을때, ==>예를들면 글자2옆에 글자3을 붙이고 싶은데 글자3은 <h1></h1>이 붙어있어서 불가능하다. html로는 페이지를 만드는데 한계가 있다.
이때 CSS기능을 활용하여 옆에 붙일수 있다. (css는 html을 다채롭게 꾸며주는 역할)
CSS= 종속형 시트 또는 캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)는 마크업 언어가 실제 표시되는 방법을
기술하는 언어
<html>
<head>
<title>Documnet</title>
</head>
<body>
<h1>제목</h1>
<h2>제목</h2>
<h3>제목</h3>
<h4>제목</h4>
<h5>제목</h5>
<h6>제목</h6>
<span>글자1</span>
<span>글자2</span>
<h1>글자3</h1>
<span>글자4</span>
</body>
</html>오전11시:
항상 처음 시작을 html:5 엔터로 시작해야한다. (기본 틀)
또는 ! tab이다.
<div id="wrap"> </div>가 기본 body이다.
<!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>
<style>
#top{background:red;}
</style>
</head>
<body>
<div id="top">
Top
</div>
</body>
</html>오전12시:
id는 html안에서 유일한 1개
class는 여러개 가능
css을 어떻게 구분할꺼냐에 대한 것
#은 id를 명시할때 사용합니다.
.은 class를 명시할때 사용합니다.
<!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>
<style>
.top{background:blue; width:400px; height:400px; color:#fff;}
#bottom{background:red; width:200px; height:200px; color:white;}
</style>
</head>
<body>
<div class="top">
<div id="bottom">
bottom
</div>
</div>
</body>
</html>이 코드를 보고 어떤 형태가 만들어지는지 이해할수 있어야한다.
style 안에 *{margin:0; padding:0;} 을 써주면 조그마한 여백이 사라진다.
*는 모든 녀석들에게 적용시키겠다.
<!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>
<style>
*{margin:0; padding:0;}
ul,li{list-style:none;}
ul>li{float:left;}
#top{background:blue; float:left;}
#bottom{background:red; float:left;}
#footer{background:yellow;}
</style>
</head>
<body>
<div id="top">
Top
</div>
<div id="bottom">
bottom
</div>
<div id="footer">
footer
</div>
<div id="footer2">
footer2
</div>
</body>
</html> float:left; 개념 이해하기 다시 공부하기 이해하기...
float:right; 개념
오후 2시: div id="logo" div id="navi" 등등 어떤그룹 안에 어떤그룹 안에 어떤그룹을 넣는 개념.
실제 적힐 녀석들과 안적힐 녀석들을 구분해서 속성값을 써주는것.
그리고 그 그룹들을 어떻게 배열하고 css를 입힐껀지에 대한것.
<!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>
<style>
#logo{float:left;}
#navi{float:right;}
#header{width:1200px; height:50px; }
ul,li{list-style:none;}
#navi> ul >li{float:left; width:100px;}
</style>
</head>
<body>
<div id="header">
<div id="logo">logo</div>
<div id=navi>
<ul>
<li><a href="http://naver.com">menu1</a></li>
<li><a href="http://google.com">menu2</a></li>
<li><a href="http://daum.net">menu3</a></li>
<li><a href="http://yahoo.com">menu4</a></li>
<li><a href="http://kakaocorp.com">menu5</a></li>
</ul>
</div>
</div>
</body>
</html>head 안에 style을 만들수도 있지만 css 파일을 만들어서 거기서 작업을 하는 방법이 있다.
폴더를 만들어주고(자기만의 방법대로 집가서 만들어보기)
물론 작업하던 html파일과 작업을할 css파일을 링크를 걸어줘야 한다.
양식형태를 다 외우고<====중요!!!!! 활용해야 수업을 따라갈수 있겠다.
그리고 홈페이지에서 움직이는 화면이나 마우스포인트가 올라갔을때 정보가 튀어나오는 거는 java로 한것들이니 아직은 아니다.
./ 은 나 자신(내컴퓨터, 내현재파일위치) 매우중요 비주얼 스튜디오에서 파일 불러올때 쓰는 방법들이므로
../ 는 현재위치에서 나가라 매우중요 비주얼 스튜디오에서 파일 불러올때 쓰는 방법들이므로
경로설정 방법이다
처음에 css(style 링크 걸어야됨)에 *{margin:0; padding:0;} 설정. 그리고 html의 body에 <div id="wrap"> </div> 로
하는게 국룰.
<!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="./common/css/index.css">
</head>
<body>
<div id="wrap">
<div id="header">
<h1 id="logo">
<a href="#"><img src="./image/logo_new_2018.png"></a>
</h1>
<div id="gnb">
<ul>
<li><a href="#">학교소개</a></li>
<li><a href="#">교육과정</a></li>
<li><a href="#">취업정보</a></li>
<li><a href="#">커뮤니티</a></li>
<li><a href="#">상담신청</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>============================================================================
/* CSS Style Sheet */
*{margin:0; padding:0;}
ul,li{list-style:none;}
a{text-decoration:none;}
#wrap{ width:100%;}
#header{width:1200px; height:100px; margin:0 auto;}
#logo{margin:20px 0 0 0; float:left;}
#gnb{float:right;}
#gnb > ul > li {float:left; display:inline-block;}
#gnb > ul > li > a{font-size:19px; color: #004385; font-weight:bold; width:180px; display:inline-block; margin:40px 0;}
ㅓㅓ이거의 의미 다시한번 공부하고 형식,형태 외우기
오후4시: 내가 head밑에 큰 이미지를 넣고 싶었으니까 <div id="적절한단어"> </div>를 head밑에 위치시킨 후
<img src="아까배운 경로설정으로 파일 들고오기">를 해준다.
오후5시: 큰 틀의 레이아웃을 먼저 디자인 하고 거기서 어떤 css효과를 주어서 작업을 할 것인가.
오늘같은 경우 큰 틀의 wrap, header, logo, h1, big size image 5개가 쓰였는데 앞으로 잘 스케치할수 있느냐