html
Hypertext Markup Language
<tag or element>
<div></div> <!-- div tag or Div element-->
<h1></h1> <!-- H1 tag or H1 elment-->
<ul></ul> <!-- UL tag or UL elment-->
<li></li> <!-- Li tag or li element-->
<input type = ""> <!-- input tag라고 부름 /type은 attribute or 속성값 <input type = ""> 을 써야 됨
HTML : <> 꺽쇠로 이루어져있고 시작하는 태그가 있다면 닫는것도 반드시 있음.
<>안에 태그or elment 말고 다른 내용이 들어간다면 그것은 속성값이다.
예외 : 아래 인풋 , img, br 등 이 있음
--><input text = "text"> <!-- block or inline ? -->
<img src="">
<br />
<input tyep = "">
<div class="row_group">?
</div>
---------------------------------------------------------------------------------------------------------------------------------
html:5 를 쓰면 자동으로
<!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>
</head>
<body>
</body>
</html>
이게 뜸
* ctrl + S -> 실행
인라인? style 이니까 br 로 끝내서 내린다.
<!--html 구조
head : 머리 (정보를 저장하는 곳) - 매타태그, 자바 , 오지태그 (url줄때 이미지따라오는거)
body : 홈페이지 노출 소스 코드 작성
-->
<html>
<head>
<body>
</body>
</head>
</html>
<!--br 쓰는 입장은 편함.
근데 <p>가 좀더 가독성이 좋음.
<!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>
</head>
<body>
<p>
아이디 : <input type="text">
</p>
<p>
패스워드 :<input type="password"><br />
</p>
패스워드 확인 : <input type="password"><br />
주소 : <input type="text"><br />
취미 : <input type="checkbox"> PC
<input type="checkbox"> 독서
</body>
</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>
</head>
<body>
<!--h1~h6안에 글자를 제목-->
<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>
<!--결과 - 왼쪽부터 아래로 한줄 한줄....
이유 - elemnt 하나는 block 형태 or inline 형태 (inline형태는 옆으로)
H태그는 block 형태 왼쪽 -> 오른쪽까지 쭊~~~ 차지하고 있는것 (빈공간이 있으면 항상 가로로... 아래로 떨어지는 코드x 옆으로 붙는 속성. 자리가 없어서 칸이 없어서 아래로 떨어진것)
옆으로 붙는 거는 -> span 사용
<span>글자1</span>
<span>글자2</span>
<h1>글자3</h1>
<span>글자4</span>
이렇게 해보면 글자3이 내려옴. 이때 css가 필요 -->
HyperText Markup Language
<tag or element>
<div></div> <!-- div tag or Div element-->
<h1></h1> <!-- H1 tag or H1 elment-->
<u1></u1> <!-- UL tag or UL elment-->
<li></li> <!-- Li tag or li element-->
<input type = ""> <!-- input tag라고 부름 /type은 attribute or 속성값 <input tyep = ""> 을 써야 됨
HTML : <> 꺽쇠로 이루어져있고 시작하는 태그가 있다면 닫는것도 반드시 있음.
<>안에 태그or elment 말고 다른 내용이 들어간다면 그것은 속성값이다.
예외 : 아래 인풋 , img, br 등 이 있음
--><input text = "text"> <!-- block or inline ? -->
<img src="">
<br />
<input tyep = "">
<div class="row_group">
</div>

---------------------------------------------------------------------------------------------------------------------------------
html:5 를 쓰면 자동으로
<!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>
</head>
<body>
</body>
</html>
이게 뜸
* ctrl + S -> 실행
인라인? style 이니까 br 로 끝내서 내린다.
<!--html 구조
head : 머리 (정보를 저장하는 곳) - 매타태그, 자바 , 오지태그 (url줄때 이미지따라오는거)
body : 홈페이지 노출 소스 코드 작성
-->
<html>
<head>
<body>
</body>
</head>
</html>
<!--br 쓰는 입장은 편함.
근데 <p>가 좀더 가독성이 좋음.
<!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>
</head>
<body>
<p>
아이디 : <input type="text">
</p>
<p>
패스워드 :<input type="password"><br />
</p>
패스워드 확인 : <input type="password"><br />
주소 : <input type="text"><br />
취미 : <input type="checkbox"> PC
<input type="checkbox"> 독서
</body>
</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>
</head>
<body>
<!--h1~h6안에 글자를 제목-->
<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>
<!--
결과 - 왼쪽부터 아래로 한줄 한줄....
이유 - elemnt 하나는 block 형태 or inline 형태 (inline형태는 옆으로)
H태그는 block 형태 왼쪽 -> 오른쪽까지 쭊~~~ 차지하고 있는것 (빈공간이 있으면 항상 가로로... 아래로 떨어지는 코드x 옆으로 붙는 속성. 자리가 없어서 칸이 없어서 아래로 떨어진것)
옆으로 붙는 거는 -> span 사용
<span>글자1</span>
<span>글자2</span>
<h1>글자3</h1>
<span>글자4</span>
이렇게 해보면 글자3이 내려옴. 이때 css가 필요
-->
------------------------------------------------------기본기-----------------------------------------------------------
<html>
<head>
<title>경일아카데미</title>
</head>
<body>
Hello,world! 이렇게 그냥 쓰는 글자는 inline
</body>
<div>
hello, World
</div>
<span>
블록체인
</span>
<span>
WEB
</span>
<h1>제목1</h1>
<h1>제목2</h1>
<input type="text"> <!--input은 닫는게 없음 / 안에 꼭 속성값("") 쓰기 / 닫는 태그들은 대부분 인라인.img, input-ㅇ인라인 (img는 그닥..)-->
</html>
<!--
head - 내용 저장, 외부내용 컨트롤
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>
-> 이게 CSS
BLOCK AND INLINE ******************
** block ex)
p, h1,h2,div,ul(li),ol,form,nav,section
hr, blockquote, dd, dl, header, pre, table
블록 요소는 width, height, margin, padding의 지정이 가능
tex-align등의 문자 정렬이 가능
Inline ex)
a,b,p,strong, I, em, ins, del, sub, sup, abbr, br, span, img
인라인 요소는 높이, 너비의 지정, 문자 정렬이 불가능
Inline요소에 inline요소를, block요소에 block요소를 집어 넣는게 가능
대부분의 block요소는 inline요소를 포함 가능 하지만 inline요소에는 block요소를 포함할 수 없다.
inline요소를 block요소로, block요소를 inline요소로 변환할 수 있다.
<!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;}
</style>
</head>
<body>
<div class="top">
top
</div>
</body>
</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>
<style>
.top{background:blue;}
#bottom{background:red;}
</style>
</head>
<body>
<div class="top">
top
</div>
<div id="bottom">
bottom
</div>
</div>
</body>
</html>
<!--
elment 안에 elment를 넣고 또 elment를 넣어보기 (block쌓기)
div 속성값 h든, input이든 모든 elment는 모두 가능한 속성값
class - 여러개를 사용할 때
id - 유일무이한 하나
*Python class와 다름
. -> class를 명시할 때 사용
# -> id를 명시할 때 사용합.
-->
<!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 : #fff;
}
</style>
</head>
<body>
<div id="top">
<div id="bottom">
bottom
</div>
</div>
</body>
</html>
*** <div id="bottom">
bottom
</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>
<style>
*{
margin:0;
padding:0;
}
#top{
background:blue;
width:400px;
height:400px;
color : #fff;
}
#bottom{
background:red;
width:200px;
height:200px;
color : #fff;
}
</style>
</head>
<body>
<div id="top">
<div id="bottom">
bottom
</div>
</div>
</body>
</html>
style 에 마진 추가
<!--
elment 안에 elment를 넣고 또 elment를 넣어보기 (block쌓기)
div 속성값 h든, input이든 모든 elment는 모두 가능한 속성값
class - 여러개를 사용할 때
id - 유일무이한 하나
*Python class와 다름
. -> class를 명시할 때 사용
# -> id를 명시할 때 사용합. -->
--------------------------------------------------------------------------------------------------------------------------
<!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>
</style>
</head>
<body>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</body>
</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>
<style>
*{
margin:0;
padding:0;
}
ul,li {
list-style:none;
}
</style>
</head>
<body>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</body>
</html>
방법 1 )
style 안에
}
ul > li{
display:inline;
}
넣으면 inline 이 됨
방법 2) 근데 띄어쓰기 없이 그냥 나옴.
ul > li{
float:left;
}
이라는 방법도 가능
<!--
ul - li 는 메뉴를 만들 때 씀
ul - li 속성 앞에 쩜 . 한줄씩 내려가니 block형태
li 사용할 때 ul로 한번 묶어야함
-?> css통해 쩜 없애기
style - ul, li 쓰면 모든 ul, li 에 적용한다는 의미
* 뜻 : 모든 elment를 마진과 패딩 0 준다. reset 시키기?
css로 inline -> block / block -> inline 으로 바꾸기 가능
-->
float left 기능 설명
다음 elment가 영향 받음
아래 elment가 옆으로 붙는다
<!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;
}
#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>
<!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;
}
#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>
참고
[HTML] 태그(Tag) - <div> : 네이버 블로그 (naver.com)
[HTML] 태그(Tag) -
-------------------------------------------------------------------------------------------------------------------------------
<!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;
}
</style>
</head>
<body>
<div id="logo">
logo
</div>
<div id="navi">
navi
</div>
</body>
</html>
그담에heather 로 묶음.
->
<div id= "header">
<div id="logo">
logo
</div>
<div id="navi">
navi
</div>
스타일 도 변경
#header{
width:1200px;
}
+ 컬러 추가해서 확인
<!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;
background:red;
}
#navi{
float:right;
background:yellow;
}
#header{
width:1200px;
height:21px;
background:blue;
}
</style>
</head>
<body>
<div id= "header">
<div id="logo">
logo
</div>
<div id="navi">
navi
</div>
</div>
</body>
</html>
그 다음 * Ul + Li 추가해보기 (navi 글자는 지우기)
<div id="navi">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</div>
그 다음 style 에
ul,li{
list-style:none;
}
ul>li{
float:left;
}
추가 (menu 점 없애고 맨 오른쪽정렬?)
결과
<!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:21px;
}
ul,li{
list-style:none;
}
ul>li{
float:left;
}
</style>
</head>
<body>
<div id= "header">
<div id="logo">
logo
</div>
<div id="navi">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</div>
</div>
</body>
</html>
ul>li{
float:left;
width:100px;
}
*** a 태그 사용 법
</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><menu2</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>
입력하면 링크 menu 활성화됨
----Ul, Li 는 세트 -> 메뉴 만들때 , a 태그는 url 링크 연결
결론 :
<!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:21px;
}
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><menu2</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>
---------------------------------------------------경일아카데미 웹사이트 만들기--------------------------------------------
경일아카데미 웹사이트 ㄱ ㄱ
java script -이미지 바뀌는거, 글 바뀌는거, 메뉴 마우스 오버했을 때 변하는거
html - 안움직이는 이미지, 메뉴 가능
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>경일아카데미</title>
</head>
<body>
<div id ="wrap">
<div id ="header">
<h1 id="logo">
<a href="#"><img src=""></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>
src is short for source. After <img src=” you fill in the URL of an image.
새로운 파일 - commons - 새파일 css - 새 문서 index.css
내용
/*CSS Style Sheet */
#wrap{
width:1200px;
height:500px;
background:red;
}
Head에다가
<link rel="stylesheet" href="./commons/css/index.css">
이 때 주의점
html 파일은 list 독립 존재 (어떤 파일 안에 있으면 연결이 안됨,,)
추가
이렇게 나옴
근데
<link rel="stylesheet" href="./commons/css/index.css">
이건 무슨의미지
옆분 물어보니
rel -> 옆에 위치 ./commons/css/index.css 를 지칭하는거
rel - > 현 docu + related docu 관계
Link rel 과 함께 알아야할 것
<!--
절대 경로 (처음부터 끝까지의 경로 말함 ex) 집주소 풀네임)
상대 경로 (내 자신의 기준으로 어디로 가는지 ex)학원 - 스타벅스)
방금 우리가 사용한건 ./ 상대경로 (html에서 절대경로는 많지않음)
. -> myself
<link rel="stylesheet" href="./commons/css/index.css"> ~~어디어디에 있는 index파일 가져와라
.. 쩜 두개 : 내가 현재 있는 곳에서 밖으로 나가라.
index 가 main 파일 안에 있으면 ../
-->
경일 로고 다운 -> commons / images 새 파일 만들어서 -> png 저장
<body>
<div id ="wrap">
<div id ="header">
<h1 id="logo">
<a href="#"><img src="./commons/images/logo.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>
**** # 의 의미는 아직 url 없으니 해당위치에서 움직이지 않는다
The main use of anchor tags - <a></a> - is as hyperlinks. That basically means that they take you somewhere. Hyperlinks require the href property, because it specifies a location.
Hash:
A hash - # within a hyperlink specifies an html element id to which the window should be scrolled.
href="#some-id" would scroll to an element on the current page such as <div id="some-id">.
href="//site.com/#some-id" would go to site.com and scroll to the id on that page.
-------------------------------------------------------------------------------------------------------------
이제 index.css 내용 바꾸기 빨간색 끄고
/*CSS Style Sheet */
*{
margin:0;
padding:0;
}
====왼쪽 상단 마진 없앰
#wrap{
width:100%;
}
#header{
width:800px;
height:100px;
margin:0 auto;
}
빨간 배경으로 해서 위치 확인
#header{
width:800px;
height:100px;
margin:0 auto;
background:red;
}
------------------------------------------------------
/*CSS Style Sheet */
*{
margin:0;
padding:0;
}
ul,li{
list-style:none;
}
#wrap{
width:100%;
}
#header{
width:800px;
height:100px;
margin:0 auto;
background:red;
}
#logo{
float:left; -> 로고를 왼쪽으로 옮김
}
#gnb{
float:right; -> 메뉴들을 오른쪽으로 옮김
}
#gnb >ul>li{
float:left;
display:inline-block; -> 메뉴들을 inline 시킴
}
-----------
#gnb>ul>li>a{
font-size : 19px;
color: #004385;
font-weight: bold;
width:180px; 넓이 a안에 있는 글자의 넓이
display:inline-block;
}
- inline 은 넓이 지원이 안됨 . 정렬도 애매 (항상 블록을 줘야 가능)
inline 넓이 지원하고 있으면
display:inline-block; 씀
-------------------- 밑줄 쳐져잇는거 배우기----------
a{
text-decoration:none;
}
---------------------------------------------------------------세부조절 (마진, 패딩)
}
#logo{
margin:20px 0 0 0;
float:left;
}
12시, 3시, 6시, 9시 방향 ~이만큼 띄우겠다.
#header{
width:800px;
height:100px;
margin:0 auto; -> 그냥 외워 개념 : 위 아래로는 안띄우고 양옆으로는 띄울꺼야. 자동으로~
------------------
쪼곰 완성
/*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;
}
warp 시작할 때 국룰
header 상단 메뉴 지칭
logo 로고
navi or gnb 네비게이션
--------------------------------------------------------웹사이트 그림 넣기--------------------
</head>
<body>
<div id ="wrap">
<div id ="header">
<h1 id="logo">
<a href="#"><img src="./commons/images/logo.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 id="visual">
<img src="./commons/images/visual1.png">
</div>
</div>
</body>
</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>경일아카데미</title>
<link rel="stylesheet" href="./commons/css/index.css">
</head>
<body>
<div id ="wrap">
<div id ="header">
<h1 id="logo">
<a href="#"><img src="./commons/images/logo.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 id="visual">
<img src="./commons/images/visual1.png">
</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;
}
***궁금점 :
1.br 기능 / div가 뭐지
2. #navi > ul>li{float:left; width:100px;} **navi를 붙이는 이유?
배운 느낌 : 어렵다..
'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글
| 20210320 Javascript 기초 예습 (0) | 2021.03.21 |
|---|---|
| [6일차]20210319 프로그래머스 웹사이트 레이아웃 (0) | 2021.03.19 |
| [5일차]20210318 Position:absolute; Postition:relative; Position:fixed (0) | 2021.03.18 |
| [4일차] 20210317 웹사이트 화면만 html 로 60% 만들기 (4) | 2021.03.17 |
| 20210316 3일차 웹사이트 container/box/ul/li /class etc. (0) | 2021.03.16 |
