1주차 과정은 프로그래밍을 배워야 하는 이유, 프로그래밍 언어, 웹사이트 뼈대 만들기 첫단계로 이루어져 있다.
프로그래밍 하는 과정의 예시로 샌드위치 만드는 방법과 알고리즘 설명 예시로 엘리베이터 작동 방법이 강의에서 소개되었다.
엘리베이터 작동 방법에 대해 깊게 생각해 본적이 없었는데 알고리즘으로 생각해야 되는 과정에서 생각보다 고려해야 할 게 많아서 당황.
이런방식으로 설계해야 하는구나 하고 넘어갔는데 알고리즘 공부하게 된다면 어렵지 않을까 싶다.
- 프로그래밍 언어
여러 프로그래밍 언어들이 있는건 알았지만 이렇게 많을 줄은 몰랐다. 우리나라에서는 자바를 사용하는 기업이 많다고 알고 있는데 강의내용은 2020년 기준 랭크 순위가 Java, C, Python 순인데 최근은 어떻게 바뀌었나 궁금해서 검색해보니 2022년 8월 기준 Python, C, Java로 파이썬 사용이 크게 늘었다는 것을 확인할 수 있었다.
- 웹사이트 뼈대 만들기 (1) (2) - HTML (Visual Studio로 실습)
HTML(HyperText Markup Language) : 웹 페이지의 어떤 요소들을 가져다 놓는것. 인용가능한 하이퍼텍스트, 마크업 언어(특정 형식과 요건대로 배치)
참고사이트 : w3schools.com mdn.com
블로그 작성시 보았던 HTML이 뭔지 궁금했었는데 이 강의 들으면서 드디어 알게 되었다.ㅋㅋ 컴퓨터에게 문단별 구분,강조,제목구분,내용이나 정보분석 등을 알려주기 위해 사용하는 것이었다.
대부분의 웹사이트 페이지소스를 보면 html 태그 안에 head 태그, body 태그가 양분되어 있다. (html 태그 기본형)
head : 화면에는 나오지 않는 페이지 정보 ex) <title> 페이지 제목
body : 실제 화면에서 나타나는 부분
Visual Studio Code 프로그램에서는 ! 하나만 작성해도 html 기본형이 작성가능하다.
- 태그의 형식 (태그마다 가용 속성이 있고 불가용 속성이 있다)
<태그명>
</태그명>
- html 태그
<html lang="ko"> : language 언어 속성, 검색엔진, 시각장애인&고령자들을 위한 음성언어에 사용
- head 태그
<meta charset="UTF-8"> : 문자변환 인코딩,UTF-8은 유니코드 사용
<meta http-equiv="X-UA-Compatible" content="IE=edge"> : 최신버전 익스플로러에서 읽히도록 설정
<meta name="viewport" content="width=device-width, initial-scale=1.0"> : 이용기기별 사이즈에 맞춰서 변형가능
<title> : 브라우저검색결과,웹사이트 제목
<meta name="description" content=""/> : 검색엔진에서 표시되는 내용설정
<style> : CSS요소 (폰트 크기,색상 등)
<script> : Java scipt
- body 태그
디자인요소는 HTML보다는 CSS로 작성하는게 권장된다.
(부)제목태그
<h1>~<h6> : 번호별 크기다름 / 줄바꿈
줄바꿈 태그
<br> : break 닫는태그 불필요, 엔터효과(줄바꿈)
<p> : paragraph 문단구분
강조 태그
<b> : bold 글자 굵게
<strong> : 정보강조(음성언어에서 강하게 발음)
기울임 태그
<i> : italic 글자 기울임
<em> : emphasize 정보강조(음성언어에서 강하게 발음)
기타 태그
<small> : 글씨 작게
<cite> : citation 출처표기
<blockquote> : 긴텍스트 인용문에 사용
텍스트 관련 태그
<mark> : 사용자가 관심을 가질 정보 강조
<sup> : superscript 위첨자
<sub> : subscript 아래첨자
<s> : strike 취소선
가로선 태그
<hr> : 주제,분위기 전환 구분
이미지 태그
<img> : image 속성( src="경로" 이미지 절대/상대경로, alt="설명문" 이미지설명문, width="정수" 이미지가로길이(정수))
하이퍼링크 태그
<a> : anchor 속성( href="주소" 하이퍼링크 url, target="_self 또는 _blank" self는 현재창에서 열림, blank는 새 탭 열림)
중첩태그
목록태그 - 메뉴 항목등에서 사용가능
<ul> : unordered 순서없는 list 속성(type="표시모양" disc(기본모양),square,circle 등)
<ol> : ordered 순서있는 list 속성(type="표시형태" 1,A,a start"정수" 표시형태시작번호)
<li> : list item 목록요소
테이블 태그
<table> : 표
<caption> : 표 제목
<tr> : table row 표의 한 행
<th> : table header 어떤 열,행의 머리값인지 표시 속성(scope="col 또는 row" column 열,row 행)
<td> : table data 표의 각 칸 속성(colspan="숫자" 가로숫자칸병합, rowspan="숫자" 세로숫자칸병합)
Visual Studio Code를 이용하여 HTML 태그를 작성해서 실제 사이트에 구현되는 실습까지 진행했다. 실제 강의 시간은 짧지만 비쥬얼 스튜디오 자체를 처음 사용하다보니 익숙치 않았다. 강의화면 보면서 실습 따라가느라 강의시간의 2배는 걸리는 것 같은데 2주차 부터는 아예 블로그 포스팅 내용 정리하면서 공부해야 해서 시간이 더 걸릴듯ㅠ
그러나 이론만이 아닌 실제 프로그램 이용해서 코딩을 해보고 화면에 구현해 보니까 확실히 흥미는 생기고 있다. 기존에 자바만 했을때는 솔직히 흥미도는 떨어졌... 자바 사용하다가 비주얼스튜디오 사용하니까 이게 더 편한것 같기도 하고 ㅎㅎ
실습할때는 우와 이거 배운걸로 블로그에도 적용하면 되겠다 싶었는데 역시나 아직은 적용하지는 못할 거 같.. ㅠㅠ 좀 더 배워가면서 블로그에서도 HTML 이용해서 작성해봐야겠다.
'[패스트캠퍼스] K-디지털 기초역량훈련 프로그래밍 첫걸음 시작하기' 카테고리의 다른 글
| [패스트캠퍼스] 프로그래밍 기초 강의 학습후기 5주차 - 2022. 9. 6. 21:04 작성글 (0) | 2022.12.08 |
|---|---|
| [패스트캠퍼스] 프로그래밍 기초 강의 학습후기 4주차 - 2022. 8. 30. 21:48 작성글 (0) | 2022.12.08 |
| [패스트캠퍼스] 프로그래밍 기초 강의 학습후기 3주차 - 2022. 8. 23. 22:05 작성글 (0) | 2022.12.08 |
| [패스트캠퍼스] 프로그래밍 기초 강의 학습후기 2주차 - 2022. 8. 16. 22:13 작성글 (0) | 2022.12.08 |
| [패스트캠퍼스] 프로그래밍 기초 강의 시작 - 2022. 8. 9. 17:40 작성글 (0) | 2022.12.08 |
