·복습
-오늘은 새로운 것들 보다는 새로 시작된 한 주의 내용들을 복습하는 시간이었다. 사실, 지속적으로 복습을 하면서 실습을 하게 하시는 것은 그만큼 반복적인 학습과 이해가 중요해서겠지 싶었다. 물론, 그 과정에서 배운 것이 없는 것은 아니다. 전에 해봤지만 이제서야 이해된 것들도 많다.
가로로 된 메뉴를 구성하는 과정에서 전에는 table 태그와 tr td를 사용했다. 그 이유는 ul로 하고 싶었지만 li의 중앙 정렬이 힘들어서였는데, inline 태그인 li를 중앙 정렬하려면, li를 인라인 블록으로 display하고 ul에 text-align: center;를 주면 해결됐다. 왜 어제 인라인, 블록, 인라인 블록 타입을 그렇게 열심히 배웠는지 새삼 느꼈다.
그래서 전날 만들어봤던 사이트 파티션을 어제는 table로 만들었다면 ul태그로 만들어보기로 했다. 비슷한 것의 반복이지만, 여러가지를 조금 더 신경써서 수정하면서 변경하면서 해봤다.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>block</title>
<script>
function jmenu(){
document.write("환영합니다.");
}
</script>
<style>
html, body{margin: 0; padding: 0; height: 100%;}
#header{width: 100%;height: 15%; text-align: center;}
#nav{width:15%; height: 70%; float: left; background: skyblue;}
#section{width:70%; height: 70%; float: left; background: #EDF6E5;}
#aside{width:15%; height: 70%; float: left; background: #FFBCBC;}
a{text-decoration: none;}
a:hover{background: gray; color: white;}
ul{margin: auto; text-align: center; background: lightgray; width: 80%;}
li{display: inline-block; margin: 0px 80px;}
h4{color: black; margin: auto;}
legend{font-size: 19px;}
form{border: 3px solid black;}
div{margin-left: 55px;}
</style>
</head>
<body>
<header id="header">
<script>
jmenu();
</script>
<!--<h4>메뉴</h4>-->
<div id="SC1">검색:<input type="text" size="60"></div><br>
<ul>
<li><a href="http://www.icia.co.kr">인천일보아카데미</a></li>
<li><a href="http://www.incheon.go.kr">인천시청</a></li>
<li><a href="http://www.seoul.go.kr">서울시청</a></li>
<li><a href="http://www.naver.com">네이버</a></li>
<li><a href="http://www.daum.net">다음</a></li>
</ul><br>
</header>
<hr>
<nav id="nav">
<form action="jsp.jsp" method="post">
<legend>로그인 정보</legend>
아이디:<br>
<input type="text" size="33" autofocus placeholder="아이디를 입력하세요."><br>
비밀번호:<br>
<input type="password" size="33" placeholder="비밀번호를 입력하세요."><br><br>
<div id="divbt"><input type="submit" value="확인"> <input type="reset" value="취소"></div>
</form>
</nav>
<section id="section">
</section>
<aside id="aside">
</aside>
</body>
</html>-이 밖에도 form형식도 더 연습했지만 비슷한 파일들이 너무 많아져서 따로 올리지는 않겠다. 다만, form형식을 사용하는데 더이상 뭘 보고 쓸 필요도 없을 정도로 많이 연습해서 정말 익숙해지긴 했다.
·javascript
-아직 javascript를 깊숙하게 배울 타이밍은 아니었지만, 오늘 조금은 맛보자고 하셔서, javascript를 조금 써봤다.
script태그를 쓰고 안에서 쓰는 거였는데, 파이썬을 visual studio code에서 사용할 때와 비슷했다. visual studio code를 script 안에다가 작성하는 느낌? 그리고 콘솔 혹은 터미널처럼 결과를 같은 화면에서 보여주는 것이 아니라, html 파일을 켜서 브라우저에서 보여주는 느낌이었다. 아~ 이래서 파이썬을 선행학습으로 했구나 싶기도 했다.
-우선 안녕하세요라는 말을 3가지 방식으로 써봤다.
1. html에 직접 작성하는 것.
2. body부분에 script태그-> javascript의 언어로 안녕하세요 출력.
3. head부분에 script태그로 함수 안녕하세요를 출력하는 함수를 선언 후, 바디 파트에 함수를 사용하는 것.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>안녕하세요_3ways</title>
<script>
function SY(){
document.write("안녕하세요.");
}
function PE(ss){
document.write(ss+" "+"안녕하세요.");
}
</script>
</head>
<body>
방법1: HTML로 "안녕하세요."출력<br>
안녕하세요.<br><br>
방법2: javaScript로 "안녕하세요." 출력<br>
<script>
document.write("안녕하세요.");
</script><br><br>
방법3: javaScript로 함수를 만들어서 그 함수를 출력(단, 이때는 head쪽을 잘 볼 것!)<br>
<script>
SY();/*괄호 무조건 써줘야 하고, ;이거 진짜 까먹지 말자!!!!*/
</script><br><br>
</body>
</html>-익숙하지 않아서 ;를 정말 많이 빼먹었다. 그래서 쓰면서도 계속 주석으로 ;빼먹지 말자 빼먹지 말자를 다짐했다.
-그 다음엔 추가로 함수에 변수까지 넣어주어서 변수 + 안녕하세요가 출력되게 했다.
<head>
<script>
function PE(ss){
document.write(ss+" "+"안녕하세요.");
}
</script>
</head>
<body>
</script><br><br>
방법 응용1: javaScript로 함수를 만들어서 그 함수를 출력할건데, 추가적으로 변수까지 보내서 변수의 내용이 같이 출력되게 함.<br>
<script>
PE("이름");
</script><br><br>
</body>그 후에는 button 태그와 onclick을 이용해서 버튼을 누르면 안녕하세요가 출력되고, 거기서 나아가 변수를 받아서 출력되게 만들어봤다.
방법 응용2: 버튼을 만들어서 버튼을 누르면 함수의 내용이 출력, 단, 변수를 보내지 않는 버튼과 변수를 보내는 버튼을 따로따로 만들자.<br>
<button onclick="SY();">인사(변수없음)</button><br><br>
<button onclick="PE('박의수');">인사(변수있음)</button>-변수를 설정하는데 기준이 있다고 했는데, 그 기준은 아직 배우지 않아서 그 기준에 맞는지는 모르겠다. 다만, 독학을 잠깐 하면서 본 내용으로는, 소문자와 대문자를 구분하고, 숫자가 먼저 나오게 하지 않으며, 스페이스바는 사용하지 않고 언더바를 사용하고, 기존에 있는 기능들, 예를 들면 frameset이나 if 등의 기능을 나타내는 단어들은 변수로 사용하지 않는다고만 알고 있다. 여기서 그 기준이 더 있는지는 좀 더 공부해봐야겠다.
자바스크립트의 기능으로 사진파일에 커서를 올리면 다른 사진으로 변하는 기능도 구현이 가능하다고 하는데 빨리 배우고 싶은 생각이 들었다. 다만, 수업시간에 진도에 맞춰 배우는 게 낫다고 생각해서, 예습보다는 복습에 더 공을 들이려 한다.
·앞으로
- 사실 자바 스크립트가 추가되고 조금 더 복잡해진 느낌은 확실히 있었다. 그래도 배운 거 바로바로 복습하고 정리해서 더 많은 것을 배웠을 때 헷갈리지 않고 딱딱 해낼 수 있게 만들자!!! 매일 지금처럼 복습! 정리!
- 운동과 영어공부도 꾸준히 하자.
- 주말을 어떻게 보낼지 아직 무겁게 생각해보지 못했는데, 앞으로는 책도 주신다고 하니 예습 복습에 쓰고, 이번주는 복습과 다른 공부들을 하는쪽으로 해보자!
- 오늘도 파이팅!!
