3월3일 내용정리
*복습 코드 및 정리
<!--블록레벨태그:너비와 높이를 가진다. 예)<p>, <h1>~<h6>, <ul>, <ol>, <div>...등등-->
<!--인라인레벨태그:너비와높이를 못가진다. 예)<a>, <img>, <object>, <br>, <sub>, <sup>, <span>...등등-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<!--아래 그림이 커서 style에 그림사이즈조절-->
<!--stylesheet=css(디자인)은 어디든 들어가도 상관없지만
공통적인 부분은head에 넣는게 좋음 -->
<style>
/*스타일주석*/
img{width: 250px; /*이미지사이즈 조절*/
height: 300px;
}
</style>
<title>Document</title>
</head>
<body>
<h1>여기는 순서없는 목록</h1>
<!--div>ul>li*3>a{메뉴$} 여기서 $는 숫자를 말함-->
<div>
<ul> <!--순서없는 목록을 만든다-->
<li><a href="#">메뉴1</a></li><!--li는 각각리스트내용 이다.-->
<li><a href="#">메뉴2</a></li><!--li는 각각리스트내용 이다.-->
<li><a href="#">메뉴3</a></li><!--li는 각각리스트내용 이다.-->
</ul>
</div>
<!--절대경로:경로가 바뀌지 않고 고정 예)www.naver.com , c:\user\...등등-->
<!--현재작업하고있는 파일이 저장된 위치를 기준으로 설정-->
<!-- ./ 자신이 속해 있는곳-->
<!-- ../ 자신이 속해 있는폴더를 나와서 위 또는 상위폴더-->
<h1>하이퍼링크 부분</h1>
<div>
<!--target="_blank" 은 새창을 열어서 링크연결,내가 연창에서 링크이동시 target="_self"쓰거나 암것도 안쓰면됨 -->
<a href="https://www.naver.com/" target="_blank">네이버</a><br/>
<a href="http://www.keduit.com/" target="_blank">한국정보교육원</a><br/>
<a href="a.html" target="_blank">문서</a><br/>
<a href="./images/background01.jpg" target="_blank">그림</a><br/>
</div>
<h1>여기는 그림을 넣을 부분</h1>
<!--img(이미지)src(소스, 그림이 있는 자리),alt(그림에 대한 설명,
그림파일에 문제가 생겨서 안보일때 그림대신 여기글씨가 나타남.
언어번역기가 번역하는글자)-->
<!--<img src="그림이 있는 경로"alt="설명글"> 이거는 단독으로 쓰임 열고닫고 없음-->
<img src="./images/background01.jpg" alt="하늘사진">
<img src="./images/big_Tree01.jpg" alt="큰나무1">
<img src="./images/big_Tree02.jpg"alt="큰나무2">
</body>
</html>1.content,border,padding
2.margine
3.class
스타일을 적용하고 싶은곳에<태그 class="클래스명"></태그>넣어주고 스타일시트에 .클래스명{속성:값} 을 써서 스타일 적용
실습 코드 및 정리-1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>스타일 연습</title>
<style>
/* 스타일주석
선택자:html태그 {속성:값;} 형식으로 쓴다.
*/
h1{
color: aquamarine; /*글자색*/
background-color: darkblue;/*배경색*/
border: 1px solid yellow;
/*solid는 선의 종류중 일직선을 의미함
border 는 테두리 관련(두께,모양,색상)*/
}
div{
width: 400px; /*너비*/
height: 200px; /*높이*/
border: 1px solid red; /*테두리*/
margin-bottom: 10px; /*아래쪽여백*/
}
/* .클래스명{속성:값} --->스타일 시트에 적용해 줄때 */
.test{
color:black;
width: 200px;
height: 100px;
line-height: 100px;
border: 20px solid blueviolet;
}
</style>
</head>
<body>
<!--<태그 class="클래스명"></태그> 넣어주고 위 스타일시트에 .클래스명{속성:값} 을 써서 스타일 적용-->
<!--스타일을 적용하고 싶은곳에 클래스="클래스명"을 넣어주면 어떤 태그든 상관없이 클래스속성이 적용됨-->
<h1 class="test">글자1</h1>
<h1>글자2</h1>
<h1 class="test">글자3</h1>
<h3>h3 글자 연습1</h3>
<h3>h3 글자 연습2</h3>
<div>가</div>
<div>나</div>
<div class="test">다</div>
</body>
</html>실습 코드 및 정리
<!DOCTYPE html>
<html lang="kn">
<head>
<meta charset="UTF-8">
<title>스타일 연습</title>
<style>
/* *{ } 별표는 전체적용을 의미함
전체에 여백과 글자와 테두리 사이의 간격을 없앤*/
*{margin: 0px;
padding: 0px;}
/*body 전체에 적용할때*/
body{
width: 980px;
margin: 0px auto; /*auto 하면 자동적으로 가운데정렬,
margin은 위&아래&왼쪽&오른쪽 선택해서 적용가능함*/
}
.imgBox>img{ /*imgBox에 들어가 있는 자손img 만 적용해라*/
width: 200px;
height: 300px;
}
.smallImg{ /*smallImg class만 적용해라*/
width: 50px;
height: 30px;
}
li{
list-style: none; /*리스트 스타일, 불릿기호(순서없는 리스트 앞에 점)을 없앤다.*/
}
a{
text-decoration: none;/*밑줄없음*/
color: black;
}
h1{
margin-bottom: 20px;
margin-top: 20px;
border: 1px solid red;
}
</style>
</head>
<body>
<h1>여기는 그림 부분</h1>
<div class="imgBox">
<!--alt 는 써도그만 안써도 그만-->
<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>
<h1>여기는 메뉴 부분</h1>
<div>
<!--"#"은 아직 뭘 넣을지 안정했어 임시로 써놓음-->
<li><a href="#">메뉴1</a></li> <!--li는 리스트형태임을 알려줌-->
<li><a href="#">메뉴2</a></li> <!--li는 리스트형태임을 알려줌-->
<li><a href="#">메뉴3</a></li> <!--li는 리스트형태임을 알려줌-->
</div>
<h1>여기는 하이퍼 링크 부분</h1>
<div class="nav">
<a href="https://www.naver.com/" target="_blank">네이버</a><br/>
<a href="a.html" target="_blank">문서</a><br/>
<a href="./images/background01.jpg" target="_blank">
<img class="smallImg" src="./images/statue01.jpg"></a>
</div>
</body>
</html>
좋은개발자가 되기위한 삽질기록 노트