·첫 대면 수업
-처음 하는 비대면 수업은 생각보다 그리 힘들지 않았다. 집의 편리함은 확실히 있지만, 대면 수업이 주는 이점은 비단 교수님과 빠른 의사소통만 있는 것이 아니었다. 강의실 자체가 주는 공부하는 분위기, 집중하는 주변 사람들 덕에 나까지 고무되는 느낌이었다.
-강의실 컴퓨터로 쉬는 시간마다 여러가지를 찾아보았고 깃허브 사용법과 벨로그에 컴퓨터 코드를 입력하는 방법도 찾아냈다!! 사실 너무 쉬워서 이걸 이제야 발견했다는 게 너무 스스로 부끄럽기도 했다.
·복습
<!DOCTYPE html> <!--html5를 사용한다는 뜻-->
<html>
<head>
<meta charset="UTF=8"> <!--소문자로 써도 상관없음 utf-8, 모든 글자를 3바이트 체계로 바꾼다는 것-->
<title>제목</title>
<style>
table{ border-top: 5px solid blue;
border-bottom: 2px solid blue;
width: 200px; height: 50px;}
#t1{border: 5px solid green;}
#t2{border: 5px solid blue;}
iframe{width: 500px; height: 200px;}
#td1{background: yellow;}
.td2{background: pink;} /*#를 받는 건 id, .(점)을 받는 것은 class!*/
</style>
</head>
<body>
<table>
<tr align="center">
<td id="td1">
<a href="http://www.incheon.go.kr" target="kk1">
<img src="./img/incheon_night.jfif" width="100px" height="50px">
</a></td><!--target을 받는 것 name-->
<td class="td2">
<a href="http://www.seoul.go.kr" target="kk2">
<img src="./img/seoul_night.jfif" width="100px" height="50px">
</a></td><!--교수님은 a 안에 id와 class를 넣으셨고 실행결과는 조금 다름. 차이점은 하나는 칸 전체를 색칠하느냐, 글자가 포함된 영역만 색칠하느냐의 차이점.-->
</tr>
</table>
<iframe name="kk1" id="t1"></iframe>
<iframe name="kk2" id="t2"></iframe>
</body>
</html>-table과 a href 그리고 iframe 등을 이용해서 전날 했던 부분을 복습했다. 역시 당일날 내가 저녁에 따로 복습하는 것도 중요하지만, 다음날 또 보는 것도 상당히 중요하단 것을 느꼈다. 당일 복습은 복기하는 느낌이지만 다음날 복습은 진짜 내 것으로 만드는 것 같았다.
·ul, ol, li 태그 복습
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>List</title>
<style>
iframe{width: 500px; height: 200px;}
#ls1{background: yellow; width: 10%;}
#ls2{background: pink; width: 10%;}
</style>
</head>
<body>
<ul>
<li id="ls1">
<a href="http://www.incheon.go.kr" target="F1">인천시청</a>
</li>
<li id="ls2">
<a href="http://www.seoul.go.kr" target="F2">서울시청</a><!--"_self"하면 현재창인데 default값임 기본값-->
</li>
</ul>
<iframe src="" name="F1"></iframe>
<iframe src="" name="F2"></iframe>
</body>
</html>-역시 전날의 복습. 다만, 수업시간에 조금 헷갈리는 게 있었는데, 어제 구글링을 통해 ul과 ol의 사용법과 차이점을 더 확실하게 알아냈기에 조금 더 수월했다. ul과 ol 하위에는 무조건 li가 와야한다. 하이퍼링크를 넣고 싶어도 ul다음에 li가 온 다음 그 li 안에 하이퍼 링크가 와야한다는 점! ul 후 a href 후 li면 틀린 것! u와 o는 unordered와 ordered의 차이!
- 특히나 ul과 dl의 큰 차이를 수업에서는 알 수 없었는데, 구글링을 통해 dl태그는 용어의 정의나 설명을 하는 dt와 dd를 사용하는데 쓰이는 태그란 것을 알게 되었다. 추가적으로 구글링으로 알아본 결과, 정의와 그에 대한 설명이 아닌 부분에서 dl태그를 남발하는 경우를 지양하라는 글을 봤다. 그래서 dl에 적합하지 않은 부분은 최대한 ul을 쓰도록 할 것이다.
·form 태그: 로그인, 회원가입 등등
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
fieldset{width: 300px;
background: skyblue;
}
#sub1{border: 5px solid skyblue; background: blue; color: white; font-size: 20px;}
#re1{border: 5px solid pink; background: red; color: white; font-size: 20px;}
legend{border: 5px solid blue; font-size: 20px; background: navy; color: white;} /*css 연결방법은 # . 태그명령 이 세 개임*/
</style>
</head>
<body>
<form action="ch.jsp" method="get"><!--폼의 형식을 서버로 보내야 됨, html은 서버에 갈 수 없음. 그래서 jsp에 도움을 받음/ 보내는 방식은 get 혹은 post, jsp 서버가 받은 대로 처리함.-->
<fieldset>
<legend>인적사항</legend><!--leg,end임 레전드 아님, 레그 엔드-->
이 름:<input type="text" size="10" maxlength="8"><br><!-- 스페이스 한바이트짜리-->
아 이 디:<input type="text" size="12" maxlength="10"><br><!--여기 size는 보여주는 크기 maxlength는 최대 쓸 수 있는 글자 수-->
비밀번호:<input type="password"><br>
주민번호:<input type="text" size="6" maxlength="6">-<input type="password" size="7" maxlength="7"><br>
성 별:<label><input type="radio" name="ss">여자</label><!--라벨을 주면 글자만 눌러도 체크가 됨.-->
<label><input type="radio" name="ss">남자</label><br><!--checkbox, radio/ name을 주면 같은 카테고리에서 하나만 선택되게 함-->
사용언어<input type="checkbox" name="cb">한글
<input type="checkbox" name="cb">영어
<input type="checkbox" name="cb">독어
<input type="checkbox" name="cb">일어<br><!--여기는 따로 이름을 안 줘도 되는데, 중복체크 가능이라서, 다만 나중에 자바 스크립트에서 사용할 때를 위해 이름을 통일함-->
국적<select>
<option>한국</option><option>미국</option>
<option>중국</option><option>태국</option>
</select><br>
취미<select multiple="multiple">
<option>운동</option><option>게임</option>
<option>tv시청</option><option>음악감상</option>
</select>
</fieldset><br>
<input type="submit" value="제출" id="sub1"> <!--제출 버튼이 submit임-->
<input type="reset" value="취소" id="re1">
</form><!--br태그가 없으면 한 줄로 나오는 명령을 inline 명령이라고 함.-->
</body>
</html>- 는 띄어쓰기다. 수업시간에는 이런 방식으로 text를 입력하는 박스의 위치를 정렬했는데, 이렇게 하는 것보다 br태그로 한줄 내리는 것이 훨씬 더 깔끔하다는 것을 복습하면서 깨달았다.
다음은 내가 수업 끝나고 학원 빈 강의실에서 혼자 다시 해본 form태그다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form개인연습</title>
<style>
fieldset{width: 350px; background: #3399FF;}
legend{background: #0066CC ; font-size: 30px; border: 3px solid #003366; color: white;}
#sub1{background: #9999FF; font-size: 18px; border: 3px solid blue;}
#sub1:hover{background: blue; color: white;}
#res1{background: #FF9999; font-size: 18px; border: 3px solid red;}
#res1:hover{background: red; color: white;}
</style>
</head>
<body>
<div>
<form action="server.jsp" method="post">
<fieldset>
<legend>로그인</legend>
아이디:<br><input type="text" size="10" maxlength="15"><br>
비밀번호:<br><input type="password" size="10" maxlength="20"><br>
비밀번호 확인:<br><input type="password" size="10" maxlength="20"><br>
이름:<br><input type="text" size="10" maxlength="15"><br>
성별:<br><label><input type="radio" name="sx1">남자</label>
<label><input type="radio" name="sx1">여자</label><br>
성별:<br><select>
<option>남자</option><option>여자</option>
</select><br>
주민번호:<br><input type="text" size="5" maxlength="6"> - <input type="password" size="5" maxlength="7"><br>
언어:<br><label><input type="radio">한국어</label>
<label><input type="radio">영어</label>
<label><input type="radio">중국어</label>
<label><input type="radio">일본어</label><br>
언어:<br><select multiple="multiple">
<option>한국어</option><option>영어</option><option>중국어</option><option>일본어</option>
</select><br><br>
<input type="submit" value="작성완료" id="sub1">
<input type="reset" value="다시작성" id="res1">
</fieldset>
</form>
</div>
</body>
</html>-여기서 input type="radio"태그와 select태그를 사용해 각각 다자선택을 하는 언어 부분과, 한 가지만 선택해야 하는 성별 부분을 두 번 만들었다. 조금 다른 방식으로 나타나고, 애초에 입력방식이 완전히 다르지만 같은 것을 두 가지 방식으로 표현할 수 있다는 점을 기억하고 활용해보고 싶었다.
·frameset태그
-앞서 배웠던 iframe은 컨테이너 느낌으로 화면에 따로 블럭을 생성한다면, frameset 태그는 애초에 화면을 분할하는 태그다. 굉장히 큰 차이이기 때문에 헷갈리지 말 것!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<frameset rows="20%,*">
<frame src="">
<frameset cols="30%,*">
<frame src="">
<frameset rows="50%,*">
<frame src="">
<frame src="">
</frameset>
</frameset>
</frameset>
</html>-중요한 부분은 frameset을 한 후에 반드시 분할된 두 frame이 와야한다. 물론 한번 더 분할하기 위해서 frameset을 써서 frame이 하나 덜 나온 느낌이 들 수도 있지만, 결국 분할된 화면을 frame태그와 대조하면, 1대1로 매칭이 되어야 한다.
-또한, 화면을 분할했기 때문에 body파트는 사용하기 어렵다. 그래서 body파트를 작성하고 싶다면, 따로 body에 불러올 html파일을 작성하고 frame src=""에 해당 html파일을 불러오면 된다. 실제로도 이런식으로 html을 따로 만들어서 불러오는 방식이 더 자주 쓰인다고 하셨다.
·frameset과 frame 활용
-화면을 나누고, 그 나눈 화면의 내용을 다른 html파일에서 불러오는 연습을 수업에서 했었다. 그러나 불러오는 html파일이 하나여서 뭔가 성에 차지 않아서 수업 후에 스스로 페이지 같은 느낌을 만들어보기로 했다.
-무려 네 개의 메모장 파일이 필요했기에 전부를 이 곳 벨로그에 남기면 자칫 너무 길어질까 싶어서 깃허브 링크만 남기기로 했다. 아직 내가 원한 부분 전부 성공한 것은 아니지만 굉장히 성공적이었다.
https://github.com/ysparkr841/html_class/tree/main/Prac_site
·앞으로
-친구 말로는 html은 프로그래밍 언어가 아니고 지금 내가 하고 있는 웹이 훨씬 더 재밌다고 한다. 그 말은 점점 가면 갈수록 재미보다는 스트레스가 심하다는 말이겠지...? 그래도 당장 지금은 굉장히 재미있다. 원하는 방식으로 뭔가를 만들고 그 결과가 바로바로 화면에 나타나니 더더욱 그런 것 같다. 이렇게 계속 재미있게만 흘러갔으면 한다!
- 벨로그에도 코드를 넣어서 정리하기
- 깃허브에는 혼자 복습하며 만든 파일들 업로드하기
- 벨로그에 올리기 지나치게 많은 내용은 깃허브 링크를 남겨두기
- 대면이든 비대면이든 수업 후 저녁 8~9까지는 무조건 복습복습 실습실습!
- 앞으로도 파이팅!!!
