[배운내용]
1강-1) 웹프로그래밍이란?
1. 웹 페이지의 구성
- html → 텍스트,이미지 정보 즉, 네이버 홈페이지에서 '메일, 카페, 블로그...' 등과 같은 내용을 담을 때 사용. 정보영역을 담당.
- CSS → 글자의 색이나 배치 등색상과 공간구역 담당.
- Java Script → 네이버 홈페이지에서 오른쪽 '증시'에서 내용이 슬라이드 된다거나 , 마우스를 올리면 컨텐츠가 재생되는 등의 기능적인 영역을 담당.
EX_ 건축물로 비유를 해보자.
설계하기 전 설계도면을 그리는 것을 html, 실내외 인테리어를 하는 것을 CSS, 지문인식 잠금도어같은 기능적인 부분을 자바스크립트 라고 생각할 수 있다.2. 웹사이트의 종류
1) 정적인 웹사이트 (Static Layout) : 브라우저 폭을 줄일때 콘텐츠 공간은 그대로 있고 줄인 만큼 페이지의 일부만 보임. 과거의 페이지 모습.
2) 동적인 웹사이트 (Liquid Layout) : 브라우저 폭을 줄일때 콘텐츠 공간의 크기가 변경됨
3) 적응형 웹사이트 (Adaptive Layout) : 브라우저 폭을 줄일때 콘텐츠 공간의 크기가 변경되다가 어느 순간부터 레이아웃 구조도 변경됨
4) 반응형 웹사이트 (Responsive Layout) : 브라우저 폭을 줄일때 콘텐츠 공간의 크기가 변경되는데 적응형보다 더 부드럽게 리사이징되고, 어느 순간부터 레이아웃 구조도 변경됨3. 프로그래밍을 할 때 고려해야할 사항
1) 크로스 브라우징 : 크롬, 엣지, 사파리 등 각기 다른 브라우저에서 모두 문제없이 실행되게 하는 것
2) 웹 표준 : html언어를 사용해서 눈에 보이는 정보를 입력할 때, 정보의 속성에 맞게 입력하는 것
3) 웹 접근성 : 장애인들도 사용할 수 있는 페이지를 구현하는 것
4) FTP : 웹페이지를 구현했을 때 도메인주소를 부여해 연결될 수 있도록 하는 것
※ 라이브러리: 웹사이트의 구성에 필요한 기능들 중 개발자들이 이미 만들어둔 것을 보관.
프로그래밍을 할 때 라이브러리를 잘 활용하여 내 사이트에 적용시키면 시간과 노력을 단축할 수 있다.1강-2) 서브라임 텍스트(Sublime Text)를 이용한 html 실습
1. html 시작하기
(1) 기본 틀
<열린태그 태그속성="속성값">
<열린태그> </닫힌태그>
</닫힌태그>
**<!DOCTYPE html> ▶ _"html 5버전에 맞는 문법을 쓰기 위한 태그" _
<html> ▶ _"html문법을 넣기위한 공간"_
<head> ▶ _ "해당 문서에 대한 간단한 서머리 정보를 담는 공간"_**
<meta charset="utf-8"> ▶ "Character set : 문자세팅/ 한글이 깨지지 않게 하기 위해서 사용하는 태그"
<meta name="description" content="Web Tutorial">
<meta name="keyword" content="html, css, tutorial, web">
<meta name="author" content="Minkyeong Kwon"> ▶ "문서의 서머리 정보"
<title>HTML, CSS Tutorial</title> ▶ "페이지의 제목. 탭에 보이는 이름을 설정"
<link rel="shortcut icon" type="image/icon" sizes="32x32" href="favicon.ico"> ▶ "탭에 보이는 아이콘을 설정"
**</head>**
**<body> ▶ "페이지 화면에 보이는 모든 정보를 담는 공간"
</body>
</html>**(2) 텍스트, 이미지 삽입하기
< !-- --> : 주석. 코드에 대한 메모,설명을 하거나, 개발진행 중 오류가 발생하면 어느 부분에서 오류가 있었는지 확인하기 위해 넣음. 주석 안에 주석은 넣을 수 없음.
- 글자 삽입태그
<a href="https://www.naver.com/" target="_blank">네이버</a>
▶ "'네이버'라는 글자에 "https://www.naver.com/"로 접속하는 하이퍼링크를 적용."
▶ " target은 페이지를 열때 새 창에 열것인지(_blank) 같은 창에 열것인지(_self 혹은 기본설정값이므로 작성하지 않아도됨) 설정
<p>Nice to meet you</p>
▶ " 본문 내용을 작성할 때 사용하는 태그. 공백을 아무리 넣어도 한번밖에 인식이 안된다는 특징이 있음"- 이미지 삽입태그
<img src="apple.png" alt="사과 이미지" width="150px" height="80px">
▶ "scr속성은 이미지의 경로를 나타냄. 현재 'apple.png'는 해당 html파일과 같은 폴더에 있으므로 경로 없이 파일명만 적어주어도 실행됨. "
▶ "img태그를 사용할 때, alt속성을 꼭 같이 사용해야함. 시각장애인은 이미지를 볼 수 없기 때문에 그에 대한 설명이 필요하기 때문. **웹 접근성**과 관련된 부분"
▶ "이미지의 크기를 지정할 때 width와 heigh를 모두 지정하면 비율이 바뀌지만 이미지가 잘리지는 않는다 !"(CSS할 때 다시 비교)
<img src="http://pngimg.com/uploads/apple/apple_PNG12439.png" alt="사과 이미지">
▶ "이미지 파일의 주소를 복사하여 삽입하는 경우"-
글자크기 설정
<h1>Title</h1> <h2>Title</h2> <h3>Title</h3> <h4>Title</h4> <h5>Title</h5> <h6>Title</h6> ▶ "h태그를 사용할 때는 반드시 숫자 순서대로 작성해야함. h1아래에 오는 값이 h3, h4 처럼 건너뛰고 적을 수 없음. 무조건 순서대로 작성. 글자크기의 조정은 CSS에서 가능함." ▶ "h1은 가장중요한 내용 기업명, 서비스명을 넣음. 이것보다 더 중요한 내용은 한페이지 안에 있을 수 없기 때문에 h1은 하나의 html문서에서 하나만 있다고 생각하자." -
글자의 강조효과
<span>동해물</span> ▶ "단어만 적을 때"
<p><span>동해물</span>과 백두산이 마르고 닳도록</p>
▶ "span은 '동해물'이라는 단어를 강조할 때. 스타일 설정하지않으면 이 태그만으로는 외관상 변화는 없음"
<p><mark>사과</mark>는 사과 나무에서 나는 열매이다.</p>
▶ "mark는 '사과'라는 단어를 정의할 때 정의하는 단어를 표시하기 위해 사용.- 인덱스 표시하기
<ol>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ol>
▶ "ordered list 이란 뜻으로 순서대로 내용을 정렬.
1. 메뉴1
2. 메뉴2
3. 메뉴3 으로 표시됨"
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
▶ "unordered list이란 뜻으로 순서가 없이 내용을 정렬.
- 메뉴1
- 메뉴2
- 메뉴3 으로 표시됨"
▶ "리스트 정보이면서 중요도, 등급이 없는경우 **ul**
있는 경우**ol**"
- 버튼 삽입하기
<button type="button">닫기</button>
<button type="submit">확인</button>- 비디오 삽입하기
[저장된 비디오 삽입]
<video src="Sample.mp4" controls autoplay muted loop width="400" height=""></video>
▶ "control 속성이 없으면 영상 재생버튼 등 컨트롤 환경이 안되므로 꼭 넣어야함.
autoplay는 크롬에서 갑작스런 큰소리 재생으로 사용자의 불편함을 주지 않도록 방지하고 있으므로, mute와 함께 사용해주어야함
loop 반복재생
width, height 크기조정"[유투브 비디오 삽입]
< iframe width="800" height="700" src="https://www.youtube.com/embed/mu_ZMCiB2ms" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
▶ "유투브 영상에서 공유-퍼가기-링크복사 하여 붙혀놓으면 됨"- 오디오 삽입하기
<audio src="sample.audio.mp3" controls loop ></audio>
▶ "오디오는 control이 반드시 있어야하며, 비디오와 다르게 autoplay,크기조정(width,height)이 불가능" 2강) HTML
(3) 회원정보입력
- 가입폼 만들기
<form method="post">
<label for="name">이름</label>
<input type="text" placeholder="이름을 입력하세요." id="name" required
minlength=" 2" maxlength="8">
<label for="mail">이메일</label>
<input type="email" placeholder="이메일을 입력하세요." id="mail" required>
<label for="pw">비밀번호</label>
<input type="password" id="pw" placeholder="최소 6글자, 최대 12글자 입력" required
minlength=" 10" maxlength=" 15">
<label for="num">숫자</label>
<input type="number" id="num" placeholder=" 숫자만 입력" min="10" max="40" step="5">
<label for="upload">파일 업로드</label>
<input type="file" id="upload" accept="image/png, image/jpeg">
<button type="submit">제출</button>
</form>이름
이메일
비밀번호
숫자
파일 업로드
제출
- 선택지 만들기
<label for="n1">한국</label>
<input type="checkbox" id="n1" name="counrty" value="한국">
<label for="n2">일본</label>
<input type="checkbox" id="n2" name="counrty" value="일본">
<label for="n3">중국</label>
<input type="checkbox" id="n3" name="counrty" value="중국">
<label for="n4">그 외</label>
<input type="checkbox" id="n4" name="counrty" value="그 외">
▶ "체크박스. 다중선택가능."
▶ "name과 value는 반드시 함께 있어야한다.
서버에 내용을 전달할때 name의 속성값은 내용물을 그룹핑하는 역할, value는 실질적으로 서버에 전달되는 데이터.
name을 사용할때 value가 없으면 서버에 빈값을 보내는것과 같음.<label for="n1">한국</label>
<input type="radio" id="n1" name="counrty" value="한국" checked>
<label for="n2">일본</label>
<input type="radio" id="n2" name="counrty" value="일본">
<label for="n3">중국</label>
<input type="radio" id="n3" name="counrty" value="중국">
▶ "라디오. 동그란 선택지모양이며 다중선택 불가능."- 문장 적는 공간 만들기
<label for="content">문의내용</label>
<textarea id="content" cols="40" rows="8"></textarea>
▶ "input보다 더 많은 내용을 적는 공간이 필요 할 때."- 옵션 선택박스 만들기
<select>
<option selected disabled>직업을 선택해 주세요.</option>
▶ "설명 및 디폴트로 설정되게 하기 위해서 사용. 다시 선택할 수 없도록 disabled 반드시 적기"
<option value="학생">학생</option>
<option value="회사원">회사원</option>
<option value="기타">기타</option>
</select>
- 표 만들기
<table>
<caption>상품 정보</caption> ▶ "제목"
<thead>
<tr>
<th>상품</th>
<th>색상</th>
<th>가격</th>
</tr>
</thead>
▶ "인덱스"
<tbody>
<tr>
<td>맥북 프로 16인치</td>
<td>그레이</td>
<td>3,000원</td>
</tr>
<tr>
<td rowspan="2">아이패드 프로 12인치</td>
▶ " 같은 내용이 반복될 때 가독성을 높이기 위해 열을 2개 만큼 확장."
<td>레드</td>
<td>1,000원</td>
</tr>
<tr>
<td>블루</td>
<td>1,000원</td>
</tr>
</tbody>
▶ "내용"
<tfoot>
<tr>
<td colspan="2">총 가격</td>
▶ "표의 행 위치를 맞추기위해 행을 2개 만큼 확장."
<td>5,000원</td>
</tr>
</tfoot>
</table>
▶ "곤충에 비유하여 thread-머리 / tbody-가슴 / tfoot-배"
- 그 외 페이지 구성
<aside></aside>
▶ "본문정보와 관계성이 떨어지는 내용을 aisde에 넣음"
<footer></footer>
▶ "회사정보 등 페이지의 가장 아래쪽에 위치하는 내용"
<div></div>
▶ "설계도면에서 필요없는 내용. 즉 임의의 내용들은 div코드 안에 입력"[어려웠던 점]
수업에 대한 부분보다도 개발일지를 적는게 낯설고 Velog도 처음 이용해보다 보니 익숙하지 않아 어려움이 있는 것 같다.
[해결방법]
앞으로 매일 개발일지를 적으면서 이전에 적었던 개발일지를 복습하면서 더 가독성있고 이쁜(?) 개발일지가 되도록 수정해 나가야겠다.
[학습소감]
문과생인 나에게 코딩은 너무나도 멀고 높은 산처럼 보였지만 지금은 등산로 시작점 어딘가에 와있는 느낌이다. 아직 산이 너무 커보이고 이걸 언제 다 하나 하는 막막함도 있지만 그래도 가까이 있다는 느낌이 든다. 지난 주까지 파이썬에 대한 교육을 하고 오늘 프론트엔드 개발을 위한 html을 처음 배우기 시작했는데, 파이썬을 배운게 오늘 수업을 이해하는데 도움이 된 것 같다. 그리고 문득 초등학생 때인가 방과후 학교에서 html을 배웠던 기억이 났다. 오늘 하나씩 태그를 배우면서 그때 생각이 문득 나서 놀랬다. 나도 사실은 코딩에 너무 멀지만은 않았나보다.
AI School 취준생 개린이