·다시 비대면 수업
-확실히 대면 수업을 하고 나서, 집에서 비대면 수업을 하려하니, 집에는 방해 요소들이 너무 많았다. 공부든, 일이든, 학원이든, 집이든 환경을 정리하고 집중을 방해하는 요소들을 없애버리는 것이 정말 중요한 것 같다.
·복습
-오전에는 전날의 복습을 하고, 오후에는 진도를 나갔던 어제와는 다르게, 오늘은 하루종일 복습을 하지만, 그 속에서 새로운 것들을 추가적으로 배우는 느낌이 강한 하루였다. 물론, 새로운 것을 배우지 않았다는 것은 아니다.
-새로운 툴을 사용하게 되었다. 메모장에 입력했던 !DOCTYPE html 등등의 태그들아 안녕~~ Editplus라는 툴을 30일 체험버전으로 다운받아서 사용했고 앞으로 사용할 예정이다. 물론 편리하고 색상을 통해 오류를 즉각 수정할 수 있어서 메모장보다는 훨씬 편리했다. 다만, 이런 말을 내 위치에서 해도 되나 싶기도 하지만, 기능에 많은 부분을 투자한 프로그램이지만 디자인은 전혀 신경쓰지 않은 느낌이었다. 이 프로그램만 보면 10년 정도 전의 컴퓨터를 보는 느낌이랄까...
-전날 했던 frameset태그와 form태그를 복습했다. 그리고 form태그의 복습에서는 autofocus나 placeholder 등과 같은 새로운 기능들도 배웠다. 사이트에 들어가자마자 검색창에 바로 입력이 가능하게 커서가 깜빡거리는 것도 개발자들이 넣어놓은 편리한 기능이었다니! 또한, 검색창에 무엇을 입력해야 하는지에 대한 정보를 주는 placeholder 기능도 생각보다 쉽게 이용할 수 있어서 신기하면서도 재밌었다.
새로 배운 것. block
-기존에는 html을 사용할 때 굳이 div태그를 사용하지 않았다. 그러나 어제 수업이 끝날 때 쯤, 선생님께서는 앞으로 비주얼적으로 크게 차이는 없지만 div를 굉장히 자주 사용하게 될 것이라고 말씀하셨다. 그 이유를 자세하게 설명해주시지는 않았는데, 오늘 페이지를 프레임이 아닌 블럭으로 나누고 나서 왜 그래야하는지 어렴풋하게 깨달았다.
-페이지를 블럭을 배치해서 나누기
https://github.com/ysparkr841/html_class/blob/main/s902_6.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>page</title>
<style>
html, body{margin: 0; padding: 0; height: 100%;}
.header{width: 100%; height: 15%; background: yellow;}
.nav{width: 15%; height: 70%; float:left; background: orange;}
.section{width: 70%; height: 70%; float:left; background: yellowgreen;}
.aside{width: 15%; height: 70%; float:left; background: orange;}
.footer{width: 100%; height: 15%; clear: both; background: plum;}
#if1{width: 100%; height: 100%;}
/*claer: both; float지시를 무시하고 아래에 배치*/
</style>
</head>
<body>
<header class="header"></header>
<nav class="nav">
<ul>
<li><a href="http://www.incheon.go.kr" target="ff1">인천시청</a></li>
<li><a href="http://www.naver.com" target="blank">네이버로</a></li>
<!--언더바의 유무는 링크할 페이지가 열려있든지 아니든지 새창에 띄울 것인지, 아니면 이미 열려있는 링크할 페이지로 이동할지임-->
</ul>
</nav>
<section class="section">
<iframe src="" name="ff1" id="if1"></iframe>
</section>
<aside class="aside"></aside>
<footer class="footer"></footer>
</body>
</html>-이런식으로 블럭들을 배치해 화면을 분할하는 방법을 배웠다. 여기서 aside의 float이 오른쪽에 위치해있는데 왜 right가 아니고 left인지는 왼쪽에 차곡차곡 블럭을 쌓는 느낌을 생각하면 될 것 같다.
-만일 이런 블럭들이 다섯개가 아니라 수십, 수백개라면? div를 통해 나눠주지 않으면 코드를 수정하거나 해당 블럭을 찾는 것도 정말 쉽지 않을 것이다.
·inline, block?
-태그의 타입에 대해 말씀하셨을 때 인라인 타입, 블록 타입이라고 말씀은 하셨는데 그게 무슨 뜻인지 확실하게 이해가 가지는 않았다. 그러나 마지막 시간에 div, h1, p 태그들과 a태그와 span태그를 동시에 사용해보고 그 뜻을 확실하게 깨달았다. 전자들은 본인이 자리를 잡으면 새로운 자리로 들어가 양보없이 그 자리를 차지하는 태그들, 즉 블록타입이었고, 후자들은 새로운 자리가 아닌 전에 있던 것들과 자리를 나란히 하는 인라인 타입이었다. 쉽게 말하자면 같은 라인에 나오는지 다른 라인으로 나오는지의 차이였다. 또한 img같은 태그들은 인라인 블록 타입으로 본인의 라인에서도 본인의 자리는 확실하게 챙기는 느낌의 타입이었다.
말로 쓰면 이해가 힘들 수 있지만
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div, img{margin: 20px 20px; padding: 10px;
width: 200px; height: 70px;
}
p{background: aqua;}
div{background: skyblue;}
span{background: orange; border: 5px solid red;
padding: 20px; margin: 150px 150px;
width: 200px; height: 70px;
}
</style>
</head>
<body>
박스의 유형<div>div h1 p 태그</div>는 블록박스 유형이고<!--내가 나오면 다음줄로 넘긴다.block박스-->
<p>그리고 <span>a span 태그</span><!--스팬은 다음 줄로 안넘김-->는 인라인 이며</p>
<p>img 태그<img src="../img/incheon_night.jpg" alt="img 태그" width="100" height="100">는 인라인 블록 유형이다</p>
<!--블록박스 ~ 새로운 라인에 만들어지고
인라인 박스 ~ 현재 위치 위에 만들어지며
인하인 블록박스는 현재위치에 박스가 별도로 만들어진다. br을 넣어줘야하냐 말아야하냐 등의 고려-->
</body>
</html>이런식으로 동시에 사용해보면 확실하게 알 수 있다. span 태그는 인라인 타입으로 같은 줄에 오지만, p태그의 배경색을 자신에게 맞게 조절하지는 않는다. 그러나 인라인 블록타입인 img태그는 p태그 내에서 자신의 존재를 확실하게 뽐내고 있어서 배경색이 본인의 내용 전부를 감싸게 한다.
(사실 이런 식으로 이해해도 되나 싶긴 하지만, 그래도 차이점을 확실하게 느꼈다. 설명이 어려울 뿐...)
·지금까지 배운 내용으로
-지금까지 배운 내용으로, 특히 오늘 배운 지식들을 중점적으로 사용해서, 검색창이 있는 페이지 느낌의 화면을 구성해보고 싶었다. 사실 header.html , nav.html 이런식으로 각 컨테이너들을 따로따로 파일로 만들고, 블록들로 페이지를 나눈 html에서 각각을 불러오고 싶었다. frameset을 사용했을 때처럼...
그러나 html에서 프레임 없이 html을 body부분에 불러오는 것이 쉽지 않았다. 그래서 각각 처음 따로 작성한 header.html파일의 내용을 복사해서 해당 부분에 넣어줬다. 문제는 css에서 뭔가를 사용하려고 하면 각 내용에 겹치는 부분이 너무 많아서 일일이 겹치지 않게 id나 class를 설정해서 해당 id와 class를 불러와야만 했다. 다행히 구역을 나누는 html과 header.html의 두 파일만 해주고, 나머지는 바로 입력했으니 그나마 수정시간은 줄어들긴 했다.
-다음은 내가 복습하면서 만들어본 html이다.
https://github.com/ysparkr841/html_class/blob/main/902prac_siteblock.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>902prac_siteblock</title>
<style>
html, body{margin: 0; padding: 0; height: 100%;}
.header{width: 100%; height: 20%; background: #F3F1F5;}
.nav{width:20%; height: 70%; float: left; background: #F0D9FF;}
.section{width:60%; height: 70%; float: left; background: #BFA2DB;}
.aside{width:20%; height: 70%; float: left; background: #F0D9FF;}
.footer{width: 100%; height: 10%; clear: both; background: #7F7C82;}
#FR1{width: 100%; height: 98%;}
#table2{margin-left: auto; margin-right: auto; padding-top: 50px; }
#form1{font-size: 20px;}
#table1{padding-top: 40%;}
#td2{padding-top: 40%;}
#a1{text-decoration: none;border: 3px solid blue; background: skyblue; font-size: 20px;}
#a2{text-decoration: none;border: 3px solid red; background: pink; font-size: 20px;}
#a1:hover{background: blue; color: white;}
#a2:hover{background: red; color: white;}
#form2{border: 2px solid black; margin-top: 100px;}
#f2leg{text-align: center; background: #F0D9FF; font-size: 20px;}
#div1{padding-left: 30%; padding-right: auto;}
#div2{padding-left: 10%; font-size: 10px; padding-right: 10%;}
</style>
</head>
<body>
<header class="header">
<table id="table2">
<tr>
<td>
<form id="form1">
검색:<input type="text" size="60%" autofocus placeholder="검색어를 입력하세요." >
<input type="submit" value="검색">
<!--<button type="submit">검색</button>도 가능-->
</form>
</td>
</tr>
</table>
</header>
<nav class="nav">
<table id="table1">
<tr>
<td id="td1">
<a href="http://www.incheon.go.kr" target="FRi1" id="a1">인천시청</a>
<br>:인천시청 홈페이지를 불러옵니다.
</td>
</tr>
<tr>
<td id="td2">
<a href="http://www.seoul.go.kr" target="FRi1" id="a2">서울시청</a>
<br>:서울시청 홈페이지를 불러옵니다.
</td>
</tr>
</table>
</nav>
<section class="section">
<iframe src="" name="FRi1" id="FR1"></iframe>
</section>
<aside class="aside">
<form id="form2">
<legend id="f2leg">---로그인---</legend>
아이디:<br>
<input type="text" size="47" maxlength="20"><br>
비밀번호:<br>
<input type="password" size="47" maxlength="20"><br>
<div id="div1">
<input type="submit" value="   확인   ">
<button type="reset">다시입력</button>
</div>
</form>
</aside>
<footer class="footer">
<div id="div2">
<hr>
회사소개·비즈니스·검색등록·제휴문의·인재채용<br>
<hr>
이용약관·운영정책·청소년보호정책·위치기반서비스이용약관·개인정보처리방침·웹접근성안내·고객센터
</div>
</footer>
</body>
</html>-내용이 조금 길고 복잡하고 많아졌다. 역시 많은 것을 구현하려고 하면 할 수록 어려워지는 것 같다. 나중에 html에서 html을 불러오는 방법을 배운다면 조금 더 수월하고 쉬워지지 않을까 싶다. css 부분도 훨씬 간결해질 것이다. 그래도 지금 내가 아는 수준에서 이 정도 화면을 만들어 냈다는 것이 뭔가 뿌듯했다. 5시 수업 종료 후, 9시까지 무조건 끝내려 했던 복습과 정리가 10시 넘어서까지 이어지고 있긴 하지만...
·앞으로
- 벨로그와 깃허브 정리는 꾸준하게 하자
- 대면과 비대면 수업이 번갈아가면서 진행되니 수업파일들을 잘 저장해서 집에 있는 파일을 학원에서, 학원에서 배운 파일을 집에서 잘 살펴볼 수 있게 하자.
- 영어 공부는 꾸준히 하자!
- 6개월의 긴 여정, 체력도 필요하니 매일하는 저녁 운동은 귀찮아도 무조건 하자!
- 혼자 복습하다가 궁금한 점은 무조건 적어놓기!! "게으른 자만이 메모를 하지."라는 명언? 명언이 아니라 망언이다! 메모는 습관처럼!
