# semantic
<head>
<meta charset="UTF-8">
<title>1. semantic(3)활용.html</title>
<style>
/*
배경이미지(background)를 불러오기
background 하위그륩
1.background-color:컬러코드
2.background-url:url(경로포함해서 불러올 이미지파일명)
3.background-repeat:no-repeat(반복안함), repeat-x(x축방향으로 반복)
repeat-y(y축방향으로 반복)
fixed(이미지 고정유무)
4.background-position:이미지 위치(left, top, bottom, right)
*/
body{
background:#ffffff url(../images/bg3.jpg) repeat-x fixed left bottom;
}
p{
font-family:굴림;
font-size:12px;
}
section{
display:block; /* 자동 줄바꿈 */
}
mark{
background-color:red;
font-size:12pt;
color:#660000
font-family:Gill Sans;
font-weight:bolder;
}
figcaption{
display:block;
font:12px 굴림;
color:blue;
padding:10px 0 0 0; /*padding top(10)만 적용*/
}
</style>
</head>
<body>
<!--
nav 선택(필수x), 본문내용 = section 태그는 여러번 나올 수 있다.
section 태그 내부에 반드시 article 태그가 없을 수 도 있다.
footer
-->
<header>
<h1>제주도 올레</h1> <!-- 문서 전체 제목 -->
</header>
<section>
<article>
<h3>제주 올레 7코스</h3>
<p>외돌개를 출발하여 법환포구를 경유해 월평포구까지 어어진 해안올레. 올레인들이 가장 아끼고 자연생태길인 '수봉로'를 만날 수 있다.
수봉로는 세 번째 코스 개척 시기인 2007년 12월, 올레지기인 '김수봉'님이 염소가 다니던 길에 직접 삽과 곡괭이만으로 계단과 길을 만들어서
사람이 걸어다닐 수 있도록 한 길이다.</p>
<b>패스포트 스탬프 확인 장소</b>
<p>
<b>시작</b> 외돌개 제주 올레 안내소<br>
<b>중간</b> 강정 올레 쉼터<br>
<b>종점</b> 월평 송이 슈퍼</p>
<p><b>난이도</b> : <font size = "5pt" color = "black">상</font> 총 16.4km(4~5시간)
수봉로는 언덕길이고 일강정 바당올레에서 서건도 사이 바윗길이 험한 편이다.</p>
</article>
</section>
<section>
<figure>
<img src="../images/road1.jpg">
<figcaption>
<mark>수봉로 언덕</mark>을 넘자마자 다시 만나게 되는 바다
</figcaption>
</figure>
<figure>
<img src="../images/road2.jpg">
<figcaption>
<mark>외돌개 산책로</mark>에서 외돌개가 보인다.
</figcaption>
</figure>
</section>
<footer> <!-- ex) 작가의 이메일, 문서 작성 날짜, 이메일 주소 표시(address) -->
<p>
이 문서는 <time datetime = "2023-04-19">2023년 4월 19일에 작성되었습니다.
<address>test1@naver.com</address>
</p>
</footer>
</body>
# css - position
<head>
<meta charset="UTF-8">
<title>2. CSS의 position.html</title>
<!--
position : 영역 속성([width, height](크기,넓이), [left, top](위치))
하위속성 : 1. default(기본값) = static : 작성한 순서대로(순차적으로) 화면에 보이게 배치하는 영역설정방법
2. absolute : 직접적인 좌표배치방법 기준점(브라우저의 좌측상단) [width, height](크기,넓이), [left, top](위치) 다 씀
3. relative : 상대적인 좌표배치방법(원래 자기위치 static 기준)
left, top이 설정하지 않은 상태)
4. fixed : 고정된 위치에서 움직이지 않는 속성, 위 아래 스크롤 해도 고정된 위치
-->
<style>
.rel{
position:relative;
}
.rel2{
position:relative;top:40px;left:50px;
}
.rel3{
position:absolute;top:30px;left:40px;
}
.fix{
position:fixed;
bottom:0;right:0; /* 오른쪽 하단 끝*/
width:200px;
border:solid 3px red;
background-color:white;
font-size:12pt;
}
</style>
</head>
# layout (1)
<head>
<meta charset="UTF-8">
<title>3. 레이아웃작성(1).html</title>
<style>
#jb-container{
width:40%;
height:30%;
border:1px solid #3300ff;
margin:0px auto;
/*
autu : 위쪽상단(margin-top),아래쪽하단(margin-bottom)은 0px(여백x)
좌우여백(margin-left,right)은 브라우저 기준으로 좌우폭을 자동으로 설정
*/
padding:20px; /* padding : 안쪽으로 여백 */
background-color:orange;
}
#jb-header{
border:1px solid #3300ff;
padding:40px; /* border와 글자 사이의 여백 */
margin-bottom:10px; /* border 바깥과 그 다음 div와 사이의 여백 */
background-color:red;
}
</style>
</head>
<body>
<!-- container : 문서의 전체 테두리 -->
<div id="jb-container">
<div id="jb-header">
<h2>2-Column Layout</h2>
</div>
<!-- content : 본문내용 -->
<div id="jb-content">
<h2>dfdfd</h2>
</div>
<!-- footer : 꼬리말 -->
<div id = "jb-footer">
<p>Copyright</p>
</div>
</div>
</body>
# layout(2)
<head>
<meta charset="UTF-8">
<title>4. 레이아웃작성(2).html</title>
<style>
#jb-container{
width:940px;
height:700px;
border:1px solid #3300ff;
margin:0px auto;
/*
autu : 위쪽상단(margin-top),아래쪽하단(margin-bottom)은 0px(여백x)
좌우여백(margin-left,right)은 브라우저 기준으로 좌우폭을 자동으로 설정
*/
padding:20px; /* padding : 안쪽으로 여백 */
background-color:orange;
}
#jb-header{
border:1px solid #3300ff;
padding:40px; /* border와 글자 사이의 여백 */
margin-bottom:10px; /* border 바깥과 그 다음 div와 사이의 여백 */
background-color:red;
}
#jb-content{
/*
content(580px), sidebar(260px) = 940px - 840px = 100px
본문내용을 순서대로 배치시키는 방법
<div> tag 로 설정된 영역들 사이의 배치할때 사용하는 속성
float :left, right
*float는 인접한 태그들까지 영향을 끼침
*/
width:580px;
border:1px solid #3300ff;
padding:20px;
margin-bottom:20px; /* 본문내용과 하단부분 사이의 여백 */
float:left;
}
#jb-sidebar{
width:260px;
border:1px solid #3300ff;
padding:20px;
margin-bottom:20px;
float:right;
}
#jb-footer{
/*
footer 영역을 설정하기 위해서는 위의 float설정값과는 상관이 없게 해야함
clear:both(위의 설정값을 해제)
*/
clear:both;
border:1px solid #3300ff;
padding:20px;
float:right;
}
</style>
</head>
<body>
<!-- container : 문서의 전체 테두리 -->
<div id="jb-container">
<div id="jb-header">
<h2>2-Column Layout</h2>
</div>
<!-- content : 본문내용 -->
<div id="jb-content">
<p>디지털 경제의 확산으로 우리 주변에는 규모를 가늠할 수 없을
정도로 많은 정보와 데이터가 생산되는 '빅데이터(Big Data)'
환경이 도래하고 있다. 빅데이터란 과거 아날로그 환경에서
생성되던 데이터에 비하면 그 규모가 방대하고, 생성 주기도 짧고
형태도 수치 데이터뿐 아니라 문자와 영상 데이터를 포함하는 대규모 데이터를 말한다.</p>
<p>PC와 인터넷, 모바일 기기 이용이 생활화되면서 사람들이 도처에
남긴 발자국(데이터)은 기하급수적으로 증가하고 있다
(정용찬, 2012a).
쇼핑의 예를 들어 보자.
데이터의 관점에서 보면 과거에는 상점에서 물건을 살 때만 데이터가
기록되었다. 반면 인터넷쇼핑몰의 경우에는 구매를 하지 않더라도
방문자가 돌아다닌 기록이 자동적으로 데이터로 저장된다.
어떤 상품에 관심이 있는지, 얼마 동안 쇼핑몰에 머물렀는지를
알 수 있다. 쇼핑뿐 아니라 은행, 증권과 같은 금융거래, 교육과
학습, 여가활동, 자료검색과 이메일 등 하루 대부분의 시간을
PC와 인터넷에 할애한다. 사람과 기계, 기계와 기계가 서로 정보를
주고받는 사물지능통신(M2M, Machine to Machine)의 확산도
디지털 정보가 폭발적으로 증가하게 되는 이유다.</p>
</div>
<!-- 사이드바 -->
<div id="jb-sidebar">
<h2>SideBar</h2>
<ul>
<li>html5</li>
<li>css</li>
<li>css추가된속성</li>
<li>자바스크립트 개요 및 작성법</li>
</ul>
</div>
<!-- footer : 꼬리말 -->
<div id = "jb-footer">
<p>Copyright 샬라샬라 샬라샬라</p>
</div>
</div>
</body>
# jsp(javascript)
<head>
<meta charset="UTF-8">
<title>5. 자바스크립트의 특징(1).html</title>
<!-- *일반적으로 <style>이 <script>보다 먼저 작성하고 나온다. -->
<style>
/* 주석 */
</style>
<script>
// 한 줄 주석 : 컴퓨터가 실행을 안하는 구문(설명문)
/* */ //여러줄 주석
/*alert : 사용자에게 주의, 경고를 할 때 사용하는 대화상자를 보여주는 내장함수
alert("자바스크립트 실행");
alert("파일로 만들어서 불러올 수 있다.");*/
</script>
<script src = "test.js">
</script>
</head>
<body>
<script>
alert("ㅋㅋ?");
</script>
<section>
<header>자바스크립트 언어</header>
<article>
<ol>
<li>브라우저에서 실행이 되는 언어(html문서와 같이 작성)</li>
<li>문법에 맞게 내용을 작성(source file) -> 컴파일(컴퓨터가 알아듣는 말로 변환(2진수)) -> 문법체크<br>
-> 메모리(RAM)에 로딩(컴퓨터가 실행(화면에 결과를 보여줌))</li>
<li>자바스크립트는 컴파일 과정이 없고 실행과정만 있다.</li>
<li>함수형 언어로 구성(java = method)</li>
<li>플랫폼(운영체재)에 상관없이 다 실행이 된다.</li>
<li>따로 파일을 만들어서 불러올 수 있다.</li>
</ol>
</article>
</section>
</body>
# jsp (2) - var(변수)
<head>
<meta charset="UTF-8">
<title>6. 변수의 개요 및 작성법(2).html</title>
<script>
// 형식 : var 변수명 = 저장 할 값(문자, 숫자, 논리적인 값);
// 변수명 : 영문자 + 숫자 + 특수기호(_, $)
// 보통 숫자가 먼저 오지 않는다(ex.1name (x))
// var 저장시킬 변수명 = prompt("출력할 메세지");
// var name = "홍길동"; // 변수 name 의 값은 홍길동
var name = prompt("what your name?");
var age = prompt("how old are you?");
//document : 예약어
document.write("name 변수의 값 : "+name+"<br>");
// 다시 한번 같은 변수명을 지정하면 마지막 변수로 지정한 값으로 바뀜
// name = "김길동"
//document.write("name 변수의 값 : "+name+"<br>");
alert(name);
alert(age);
document.write("name 변수에 저장된 값은 "+name+" 입니다.<br>");
document.write("당신의 나이는 "+age+"살 입니다.");
</script>
</head>
<body>
<ol>변수(Variable)개요 및 특징
<li>변수 : 사용자로부터 값을 입력(문자, 숫자, 논리적인값(참 또는 거짓))<br>
을 받아서 RAM에 저장</li>
<li>변수명을 줄 때 대,소문자를 구분 해야한다.(명사위주)(name,Name,NAME 다 다르게 인식한다)</li>
<li>var 변수명(의미 있는 단어를 써야됨) = 저장 할 값</li>
<li>변수의 값이 중간에 변경이 되면 된경된 값을 새로 저장</li>
</ol>
</body>
#jsp (3) - function(함수)
<head>
<meta charset="UTF-8">
<title>8. 자바스크립트의 함수의 개요 및 작성법(4).html</title>
<script>
/*
함수(function)
어떤 기능을 가진 최소한의 작업단위(프로그램을 작성하기 위한 최소한의 작업단위(구성요소))
ex)계산기능, 입력받아서 저장(prompt), 출력기능(alert)
회사(프로그램) -> 운영 -> 사람(직원 = 함수)
function 함수명(변수) {
(직원이름)(해야할일)
함수가 해야 할 일(계산, 저장, 출력...) -> 변수선언, 제어문(if문)
}
함수를 사용하는 이유는
단순하고 반복적인 일을 효율적으로(소스코드를 줄여주는) 처리하기 위해서 사용
함수를 사용하는 목적
1. 단순하고 반복적인 일을 하는 경우 : 매개변수 x, 반환값 x
2. 데이터를 입력해서 계산, 저장, 출력 하는경우 : 매개변수 o, 반환값 x
3. 계산, 웹프로그램 경우 : 매개변수o, 반환값 o
*/
// 1. 매개변수 x, 반환값 x = 함수선언(함수를 작성)
function print1(){
document.write("단순하고 반복적인 일을 대신 해줌<br>");
}
// 2. 매개변수 o, 반환값 x
function print2(su) { // 매개변수 : 함수가 받아서 처리해야 할 값(문자, 숫자, 논리);
document.write("입력받은 값 은 "+su+"입니다.<br>");
}
function print3(su,su2) {
document.write("입력받은 값은 "+(su+su2)+"입니다.<br>"); // 계산목적
}
// 3. 매개변수 o, 반환값 o
function print4(su,su2) {
var result = su+su2;
// 형식 : return 계산한 결과값(변수) or 수식(계산식) or 객체
return result; // return 이 있으면 리턴값이 있다
}
</script>
</head>
<body>
<script>
// 함수호출(call) : 직장상사가 업무지시를 내리는것
// 형식 : 함수명() or 함수명(변수...)
print1();
print2(30); // print2라는 함수를 호출하면서 매개변수 30을 전달(호출)
print2("자바스크립트 함수 연습중");
print3(10,20);
var hap = print4(100,200); // 형식 var 전달받을 변수명 = 호출할 함수명(매개변수~);
document.write("반환값은 ("+hap+")");
</script>
</body>'국비학원 > 공부' 카테고리의 다른 글
| 6일차 jsp(미니 프로젝트) (0) | 2023.04.28 |
|---|---|
| 5일차 jsp(Array) ~ DOM (0) | 2023.04.28 |
| 4일차 jsp(2) (0) | 2023.04.24 |
| 2일차 css ~ div (0) | 2023.04.20 |
| 1일차 html ~ table (0) | 2023.04.20 |