[학습일지] JAVA 교육일지 1일차

인천일보아카데미/- 학습일지

[학습일지] JAVA 교육일지 1일차

w1z 2022. 5. 23. 15:01

수업 및 교육과정을 시작하기전 학습마인드 셋

교수님이 전달하고자 하는 의미를 조금 요약해보자면,

input 과 output 의 값을 외워서 프로그래밍 하는 것이 아니라

input 을 넣었을 때, output 나오는 그 mechanism 을 생각하면서 과정을 지나가자.

당연히 이해가 안될 수 있지만, 반복적으로 보다 보면 이해가 되고 구구단처럼 외워져 빠르게 실무에 적용 가능하다.

정도 인 것 같다.

HTML (HyperText Mark-up Language) 개요

--> 고등학교 정보시간때 해봤던 기억이 난다. 프로그래밍 언어는 아니다. 마크업 언어지만 컴퓨터와 language 를 통해서 상호작용을 경험 해보기 위해 배우는 것 같다. 마크 업 언어란, 문서가 화면에 표시되는 형식을 나타내거나 데이터의 논리적인 구조를 명시하기 위한 규칙들을 정의한 언어라고 한다. 문서 작성 및 웹 개발에 널리 이용되고 있다. 프로그래밍 언어들은 함수나 메서드의 요소로 구성되어 있다면, 마크업 언어는 태그로 구성되어 있다.

프로그래밍 언어와 여러 다른 점이 있겠지만, 논리 구조를 연산하지 못한다는 점이 프로그래밍 언어로 구분 할 수 없다.

ex ) 1.1 + 0.1 = 1.2 에 대해 True 나 False 의 논리 값을 언어 내에서 판정 할 수 없다.

--> html 4 vs html 5

메모장에 그냥 <html>로 시작하게된다면, html 4 버전을 사용하게 되지만, <!DOGTYPE html> 의 간단한 태그 하나로 5버전을 사용 할 수 있다. 스마트폰 등 모바일 장치들의 등장으로 웹 페이지가 모바일 화면에도 맞고 데스크탑에도 맞아야하는 수요가 생기면서 이를 개선할 방안으로 html 5가 등장하게되었다. 4 버전에서는 멀티미디어 컨텐츠를 재생하기 위해서는 Adobe Flash 같은 플러그인이 필요했으나, 5에선 내장지원된다.

이외에도 의미론적이고 구조적인 요소가 추가 및 확장 되었다.

+) 의미론적이다 (semantic) 가 무슨 뜻일까?

웹페이지의 구조와 내용을 더 명확하게 설명하고, 웹 개발자가 문서를 작성 할 때 의도한 의미를 더 잘 전달할 수 있게 한다. 정확하게는 모르겠지만 조금 더 가독성과 시각화 측면에서 성능이 높다 라는 뜻 같다. 결국 그것이 독자가 의미와 구조를 파악하는데 도움이 될테니.

2. 기본 형식 및 여러 태그들

--> 기본 :

<!DOCTYPE html> #html 5 버전사용 <html> <head> <title> #tap에 표시되는 이름 </title> </head> <body> #내용 </body> </html>

--> 여러 태그

1. <h1> : 글씨 크기 조정. 1~6까지 있으며, 설정을 안할시 default 값은 <h4> 이다. 1이 제일 큰 글씨.
2. <a> : 텍스트, 이미지, 아이콘 등을 클릭 가능한 링크로 만든다. href = "주소" 로 하이퍼링크를 걸 수 있다. HTML5 버전부터는 하이퍼링크의 용도로만 쓰인다고 한다.
3. <img> : 이미지를 불러오는데 사용한다 src =" 주소 "속성은 반드시 포함되어야 하며, alt = ""속성으로 이미지를 표시 할 수 없는 경우 대체 텍스트를 제공 할 수 있다. width, height 로 size도 지정이 가능하다.
4. <br>,<p> : 줄바꿈(Enter 1회) , 문단바꿈(Enter 2회)

3. 표 만들기

<!DOCTYPE html> <html> <head> </head> <body> <table border = "1"> #table 이라는 태그로 불러온다. border는 굵기지정 <tr> #1행생성 <td>국어</td> #1행 1열 <td>영어</td> #1행 2열 <td>수학</td> #1행 3열 <td rowspan = '3'>기말<br>고사</td> # rowspan은 3개 열병합.(아래로3칸) </tr> <tr> #2행생성 <td>100</td> #2행 1열 <td>95</td> #2행 2열 <td>90</td> #2행 3열 </tr> <tr> #3행생성 <td colspan = '3'>중간고사</td> # colspan 행병합 (오른쪽으로 3칸) </tr> </table> </body> </html>

결과 :

4. 표만들기 + CSS(Cascading Style Sheets)

HTML에서 CSS를 활용하는 방법은 크게 2가지가 있다.

head에서 선언하여 body에서 사용한다. head 에서 선언하면, 또 3가지로 적용이 가능하다. 직접 태그명령, #, . 을 이용해서 서식적용이 가능하다.
body에서 직접 태그 명령을 한다.

<!DOCTYPE html> <html> <head> <style> table{width : 80%; height : 200px; background-color : #00ff00; # width를 %로 설정하면 창에 대한 비율, #00ff00 는 RGB표기법 border-top : 5px solid blue; border-bottom : 3px solid red; border-left : 10px solid skyblue; border-right : 10px solid orange; #solid 는 실선 } td{border : 1px dotted red; text-align : center;} #점선설정 / 가운데 정렬 #ht{background-color : blue;} #ht라는 서식 함수?요소? 라고 보면 됨. #ht2{background-color : skyblue;} #어느 문자든 id = 'ht'를 해주면 이대로 서식적용이 됨. #ht3{font-size : 40px; color : #FF0000;} caption{font-size : 40px; color : #ff0000;} .pk{background-color : #659900;} </style> </head> <body> <table> <caption>시간표</caption> <tr> <td>시간/요일</td> <td>월</td> <td>화</td> <td>수</td> <td>목</td> <td>금</td> </tr> <tr> <td>1</td> <td></td> <td rowspan = '2' colspan = '2' id = 'ht'>HTML</td> # "#"으로 선언한 요소는 id로 불러옴 <td></td> <td></td> </tr> <tr> <td>2</td> <td></td> <td></td> <td></td> </tr> <tr> <td>3</td> <td rowspan = '3' id = 'ht2'>영어</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>4</td> <td></td> <td rowspan = '2' colspan = '3' class = 'pk'>인천야경</td> #"."으로 선언한 요소는 class로 불러옴 </tr> <tr> <td>5</td> <td></td> </tr> </table> </body> </html>

결과 :

다음과 같이 width = 80% 로 전체화면이나 작은 화면이나 전체의 80%만 차지하게 된다.

오늘 배운 내용들은 모두 Visual Studio Code 와 같은 IDE를 이용하지 않고 메모장에서 해나간 것 들이다.

자동완성 기능들도 있고, 들여쓰기 등 자동으로 해주다보니 초심자에게는 어쩌면 독이 될 수도 있어서 이렇게 진행 하셨다고 한다.

프로그래밍을 공부하는 사람들 사이에서 백문이 불여일타 라는 말이 있듯, 보조기능 없이 날코딩 해보는 것도 좋다고 생각한다. 그래서 오늘 수업에서는 최대한 ctrl C ,V의 사용을 자제 했다.