대구 AI 스쿨을 6월1일 부터 시작했다. OT와 MS 자격증을 따는 시간을 가지고 2주간 AI교육을 들었다. 그동안은 Teams를 이용한 실시간 화상 강의었고, 오늘부터 듣는 교육은 동영상 강의를 통한 교육이다. 수업을 열심히 듣고 나의 공부흔적을 남기고자 한다.
오늘 무엇을 배웠지?
웹프로그래밍 관련 언어
웹사이트 구성 언어
- HTML : 정보영역을 담당 -> 정보가 들어가는 곳
- CSS : 폰트, 색상, 배치 등 디자인 담당 -> 내부 인테리어 담당
- Java script : 메뉴를 클릭했을 때 해당 메뉴/웹사이트로 이동 등의 기능적인 부분을 담당
웹사이트 레이아웃
- Static Page layout : 정적인 웹사이트, 웹사이트 사이즈와 무관한 배열, 사이즈
- Liquid Layout : 동적인 웹사이트, 브라우저 크기에 따라 사이즈가 달라지나 배열구조는 달라지지 않음
- Adaptive Layout : 적응형 웹사이트, 특정 지점에서 브라우저 크기에 따라 공간의 크기와 배열구조도 달라짐 ->다양한 기기에 맞춘 layout
- Responsive Layout : 반응형 웹사이트, 자연스럽게 브라우저 크기에 따라 공간의 크기와 배열구조도 달라짐
(다양한 웹사이트를 볼 수 있는 곳 : 디비컷,지디웹,awwwards,mediaqueris)
크로스 브라우징 : 웹사이트 제작시 다양한 브라우저(크롬,익스플로러, 엣지 등)에서 동일하게 기능, 작동하도록 하는 것
FTP : 서버와 PC를 연결해주는 통로(채널)
라이브러리 : 웹사이트 제작시,다른 사람들이 만들어 놓은 기능의 결과 (ex/ 팝업 라이브러리, 슬라이딩 라이브러리...)
<참고>
('statcounter'를 통해서 브라우저 점유율을 확인할 수 있다!)
('Can I use?' 에서 내가 사용한 단어가 다양한 브라우저에서 기능하는지(호환성체크) 확인할 수 있다!)
('Nuli' 에서 웹 접근성과 다양한 개발도구 설명을 볼 수 있다!)
('HTML validator' 에서 웹 표준, 웹 접근성에 맞게 브라우저를 만들었는지 확인 할 수 있다!)
('codepen' 에서 HTML, CSS, Javascript 결과물을 확인하고 다른 사람들이 만든 것도 참고 할 수 있다!)
('https://www.w3schools.com/tags/default.asp' 에서 HTML에 사용하는 태그들에 대한 정보를 얻을 수 있다!)
sublime 사용해서 HTML 언어 작성
<!DOCTYPE html>: HTML 최신 문법으로 작성하겠다는 의미- <열린태그>___</닫힌태그> : 열린태그와 닫힌태그 사이에 있는 것이 컨텐츠
<head>: 문서와 관련된 간단한 summary 정보<body>: 웹사이트에 있는 정보를 담아내는 곳 (웹사이트에서 보이는 모든 정보는 이 태그에 있다.)
<head>
<열린태그 charset="속성값">: charset(속성), 속성값에 원하는 것을 넣는다.<title>_</title>: title 코드 사이에 적은 이름이 웹사이트 이름이 된다.<link rel="shortcut icon" type="image/icon" sizes="32x32" href="파일명: 웹사이트 탭에서 보이는 아이콘을 설정
<body>
<a></a>: 메뉴버튼 클릭했을때 특정 페이지로 넘어가게 하는 태그 (anker의 약자)
ex)<a href="https://www.naver.com/" target="_self">네이버</a>
: 네이버라는 글자를 클릭하면 https://www.naver.com/ 사이트로 이동
(_self : 동일한 웹사이트가 바뀜, _blank : 새로운 탭이 열림, target을 설정하지 않은 경우는 기본값으로 설정됨)<img src="apple.png" alt="사과 이미지">: 이미지를 보여줌. scr="파일명.확장자" 또는 scr="이미지 url 주소", alt="설명"->alt값을 설정해 주어야 웹 접근성 error가 나지 않는다.<!-- -->: "--" 사이에 설명을 적으면 코드 주석으로 쓸 수 있음!<h1>Title</h1>: "Title"에 원하는 이름을 적어 1~6 점점 숫자가 커질수록 글자가 작게 나타낼 수 있다.<span>동해물과</span>: "동해물과"라는 말을 단어로써 표기할때 사용 or 디자인을 설정할때 span 태그 함<mark>사과</mark>: "사과"를 강조하고 싶을때 사용 ->노란 하이라이트로 표시<ol></ol>: 순서가 있는 목차 -><li></li>태그를 사용한 후 다른태그 사용<ul></ul>: 순서가 없는 목차 (동일한 등급, 등급이 없는 경우) -><li></li>태그를 사용한 후 다른태그 사용<button type="button">닫기</button>
<button type="submit">확인</button>:
"submit"은 백엔드개발자에게 정보를 전달하겠다는 의미<video src="sample.mp4"></video>: "img" 태그와 같이 영상을 보여줌. 이때, 'controls'를 scr="" 뒤에 연속해서 설정하면 영상을 재생 가능하고 아래의 설정값을 줘서 자동재생, 반복재생, 영상 크기 등의 설정을 할 수 있다. (autoplay muted, loop, width="400px", height="300px")<iframe></iframe>: 유튜브 영상을 가져올 때 사용 (보안상의 이유로 잘 사용하지 않음)<audiio scr="sample_audio.mp3></audio>: "video" 태그와 같이 음성을 들려줌. 하지만, "video" 태그와 달리 자동재생(autoplay)은 적용불가. (muted(음소거), loop(반복재생)만 적용가능)
- 정보입력 태그
<form method="post"></form>: 제출할 수 있는 폼을 만들며, 이 태그 안에 원하는 라벨을<label></label>,<input>태그를 이용해 폼을 구성한다.<label for="name">이름</label>: 이름/라벨링<input type="text" placeholder="이름을 입력하세요." id="name" required minlength="2" maxlength="8">: "input" 태그는 입력할 수 있는 창을 만들어주고 입력 type에는 text, emial, password, number, file 등이 있다.
("placeholder" 태그는 입력창에 입력하기 전까지 입력창에서 보여줄 수 있는 문구를 설정할 수 있고 "label"태그의 'for'와 "input"태그의 'id' 같아야한다. "required" 는 입력을 해야지 제출 할 수 있도록 해주는 태그이고, 최소수는 "minlength", 최대수는 "maxlength" 로 설정한다.
file을 업로드 할 수 있도록 할때, "accept" 태그를 이용해 업로드 가능한 확장자명을 설정할 수 있는데, 다음과 같은 방식으로 설정 가능
ex)<label for="upload">파일 업로드</label>
<input type="file" accept="image/png, image/jpg, image/gif" id="upload">)<label for="n1">한국</label>
<input type="checkbox" id="n1" name="country" value="한국">: for="n1", type="checkbox"-> 중복가능한 체크박스를 만드는 태그. type="radio" -> 중복선택이 불가한 체크박스를 만드는 태그.
이때, "name", "value"를 꼭 설정해야 한다. 두개가 설정되지 않으면 빈 정보만 서버에 전달될뿐... 우리가 원하는 정보를 서버에 보내고 받을 수 없다! 또, 체크가 된 상태로 시작하도록 설정하고 싶다면 원하는 항목에 "checked"를 설정한다.
ex)<label for="n1">한국</label>
<input type="radio" id="n1" name="country" value="한국" checked><label for="content">문의내용</label>
<textarea id="content" cols="40" rows="8"></textarea>: for="content", 텍스트를 적을 수 있는 창을 만들어주는 태그. 행의 수는 "rows", 열의 수는 "cols"로 설정.<select name="job">
<option selected disabled>직업을 선택해주세요.</option>
<option value="학생">학생</option>
<option value="회사원">회사원</option>
</select>
: 선택할 수 있는 창을 만드는 태그. name에 속성을 설정하고, option으로 선택항목을 설정. 선택이 불가한 항목을 설정할때는 "selected disabled"로 설정한다.
표를 만들때 사용하는 태그
-
<table></table>: 표를 만들 때 사용하는 태그. -
<caption>_</caption>: '_'에 표의 이름을 설정 -
<thead></thead>: 표의 항목 이름을 설정.
ex)
-
<tbody></tbody>: 항목에 따른 값을 설정.
ex)
이때, 동일한 항목은 "rowspan"을 통해 병합하여 나타낼 수 있음. -
<tfood></tfoot>: 마지막 최종 셀 설정.
ex)
이때, 병합하고 싶은 열의 수만큼 "colspan"을 이용하여 셀을 병합하여 나타낼 수 있음.
공간을 만들때 사용하는 태그
<header></header>: 머리/가슴/배, 서론/본론/결론 처럼 웹사이트의 머리부분, 상단부분에 해당하는 공간을 만들때 사용하는 태그.<h1></h1>&<a></a>,<nav></nav>&<li></li>&<a></a>태그를 이용해 공간을 설정
ex)
<main></main>: 본문에 해당하는 공간을 만들 때 사용하는 태그 1. (explorer에서는 제공하지 않는 태그이므로 explorer에서 사용할 경우에는 role="main" 을 설정해야한다.-><main role="main"></main><section></section>: 본문에 해당하는 공간을 만들 때 사용하는 태그 2. "main"태그안에 설정해도 되고 "main"태그와는 별개로 설정 가능하다. "section"에 해당하는 이름을 설정해주기 위해<h2></h2>태그를 사용한다.<article></article>: 본문에 해당하는 공간을 만들 때 사용하는 태그3. 글을 많이 작성할때 필요한 태그.<h2></h2>태그로 제목을 설정하고,<p></p>태그로 글을 설정한다.<aside></aside>: 본문정보와 관계성이 떨어지는 정보를 제공할때 사용하는 태그.
-<footer></footer>: 결론, 하단부분에 해당하는 공간을 만들 때 사용하는 태그.
-<div></div>: 공간을 분리할 때 사용하는 태그.
태그의 속성 : Inline / Block
- Inline : 공간에 대한 크기 설정 불가. -> 상하배치 불가
- Block : 공간에 대한 크기 설정 가능. -> 상하배치 가능
∴ 동일한 태그를 연속해서 작성했을 때 '줄바꿈' 이 되는지 안되는지 로 Inline과 Block을 구분 할 수 있음! 태그들이 Inline인지, Block인지 알고 있는것이 굉장히 중요하다!
무엇이 어려웠지?
공간을 만들때 사용하는 태그를 배우기 시작하면서 머리가 살짝 어지럽기 시작했다. 태그들이 워낙 다양하고 프론트엔드의 디자인, 설계에 따라 사용하는 태그들이 달라지기 때문에 유연하게 사용할 수 있는 태그라는 것이 확실한 구분이 되지 않아 오히려 처음 배우는데 어렵게 느껴졌다.
어떻게 해결했지?
역시 구글신은 모든 것을 알고 있다. 일단 모르면 검색부터 하는 것이 진리의 방법이다. 구글링으로 다른 사람들이 설명한 글들을 읽으면서 여러 예제들을 확인하면서 이해했다.
그래서?
아무래도 이렇게 일지를 쓰는건 처음이라 공부한 것을 정리하는데 힘을 많이 쏟았다. 기초가 탄탄하지 않으면 아무리 열심히 쌓아올려도 쉽게 무너지기 때문. 차근차근 꾸준히 하되 틈없이 공부하려고 나중에 다시 봐도 이해되기 쉽게 최대한 설명을 했다. 만약에, 오늘 코딩작업하는 것을 처음 해봤다면 이보다 더 많은 설명들이 달렸을 것이라..고 생각한다. (거의 선생님이 말씀하시는 말을 그대로 옮겨적는 대본수준...?) 다행히도 2주간 아무것도 모르지만 머신러닝작업의 'ㅁ'까지는 따라해봐서 검은색 화면에 글자만 적는 것에 대한 심적 부담과 진입장벽이 많이 낮아졌을 것이라 생각한다. 내가 글자로 적었던 것이 웹사이트에서 원하는대로 적혀 나온다는 것이 굉장히 신기하고 새롭고 즐겁다. 이 즐거움이 오래가길 바라면서... 내일 실습을 기대해본다.
