대구 ai스쿨의 초반부 커리큘럼이 모두 끝나고 본격적인 웹개발수업이 시작됬다.
1일차 핵심내용
- 가장 많이 사용되는 웹프로그래밍 언어의 특징
- 웹프로그래밍의 전체적인 밑그림 및 추천 사이트
- 기초적인 HTML5 태그
가장 많이 사용되는 웹프로그래밍 언어의 특징(HTML, CSS, JAVASCRIPT)
시각적인 정보(시각 , 텍스트) - 로고 슬로건 = HTML
버튼에 색깔 폰트색상 등 디자인 영역 = CSS
메뉴 기능을 담당하는 기능 - 자바스크립트
웹사이트를 구성하는 언어는 크게 이렇게 3가지로 볼수있다.
웹프로그래밍의 전체적인 밑그림 및 추천 사이트
웹사이트의 4가지 종류에 대해 설명해놓음
1.Static Layout Example(정적인 웹사이트 ) - 말그대로 정적으로 움직이지 않음
2.Liquid Page Layout(동적인 웹사이트) - 구조자체는 바뀌지 않음 공간의 크기만 바뀜
3.Adaptive Page Layout(적응형 웹사이트) - 구조나 공간의 크기들이 달라진다.
다양한 기기에 맞춰 웹사이트를 제작해야할대 사용하는
4.Responsive Page Layout(반응형 웹사이트) - 자연스러운 리사이즈 효과 특정지점에서 모바일버전레이아웃으로 바뀌게되는 것을 반응형 웹사이트라고 한다.
적응형과 반응형을 섞어서 제작하는경우도 있다.
다양한 웹사이트를 접할수있는 사이트
디비컷, 지디웹, awwwards, mediaqueri.es, bm.straightline.jp
프론트엔드 개발자 - 웹사이트를 제작을하고 사용자가 보는 모든화면의 페이지를 제작
백엔드 개발자 - 사용자가 보지못하는 뒷단의 영역(로그인을 할때 등록됬는지 확인한다거나 고객정보를 안전하게 관리,보관하는 일을 맡음
크로스 브라우징 - 어느 웹브라우저에서도 동일한 사이트 기능을 내기위한것
웹표준 정보의 성격에 맞는 태그를 사용해야된다. 정확한 표준에 맞춰 작성하는것
웹접근성 - 장애인 분들도 사용할수있게 사이트를 접근성 높게 만드는것
FTP - 내가만든 사이트를 서버에 올려야지만 상대방이 내웹사이트를 방문할수있다.
내 피씨와 서버를 연결해주는 일종의 터널역할을 하는것이 FTP 이다.
라이브러리 - 웹사이트를 제작할때 클릭을 했을때 동적으로 움직이는 기능들을
이미 다른 개발자들이 만들어놓았다. 보편적으로 사용되는 기능들을 가져와서 바로 사용할수있게 해주는 것
웹사이트에서 검사를 누른뒤 elements - 왼쪽(html), 오른쪽 (css)
코딩 및 영상 강의
생활코딩 (html , css)
얄팍한 코딩사전(어려운 개발용어를 좀더 쉽게 입문자 입장에서)
thenewboston(html,css,javascript)
wes Bos(자바스크립트30)
Freecodecamp.org
w3schools.com
모던 자바스크립트 튜토리얼
edwith.org
Statcounter.com (전세계 사이트 점유율 확인가능)
나중에 웹사이트 고객이 점유율이 낮은 사이트를 고른다면 이사이트로 설득할수있다.
Caniuse.com - 브라우저의 버전에 영향을 받는지 내가 사용하는 코드가 브라우저의 몇버전부터 사용가능하는지
Nuli.navercorp.com - 웹접근성 웹개발에 도움이되는 네이버 사이트
Validator.w3.org - 내가 쓴 코드결과물이 웹표준에 맞게 잘작성했는지 검토해줄수있는 사이트
코드펜 - 다른사람이 만들어놓은 결과물을 공유하고 확인할수있는 사이트
기초적인 HTML5 태그
<head> - 목차 저자 등 머리부분 정보가 담긴태그 웹사이트의 키워드 정보등
<body> - 웹사이트에 보이는 모든정보들은 body 태그로 보인다.
<meta charset(속성)=“utf-8">
<meta name="description" content="Web Tutorial">
<meta name="keywords" content="html, css, tutorial, web">
구글검색엔진에 더 잘포착되어 눈에 띄게 할수있다.
낚시성 글을 골라내기위함
<a href="https://www.naver.com" target="_black">네이버</a>
target=“_black - 새탭에서 링크가 열린다.
_self - 그반대
<img src="apple.png" alt=“사과이미지”>
Alt - 시각장애인분들을 위해서 그분들을 알려주기위해 alt 값을 명시해야된다.(웹접근성)
이미지의 자리에 어떠한 정보가 들어갔었는지 표기하기 위해서(엑스박스떴을떄)
웹표준 - 제목은 제목코드에 맞게 작성해야지만이 검색엔진에 잘노출될수있다.
<h1> 태그는 기업명 로고 등에 딱한번만 사용하는것이 일반적임 가장 중요하고 노출되어야
하는곳에 집중적으로 사용한다.
하나의 페이지에 섹션별로 대표하는 타이틀이 들어간다.
서비스와 포트폴리오 중에서 무엇이 더중요할까? 동급의 정보를 가지고있다.
동급인 정보이기때문에 같은 <h3> 로 작성하는것이 바람직하다.
코드 작성시 h1~h5 순서대로 작성 중간에 빠져먹으면안된다 무조건 순서대로
<p><apan>동해물과 </apan>백두산이 마르고 닳도록</p>
<p><mark>사과</mark>는 사과 나무에서 나는 열매이다.</p>
<span> - 어떤 문장안에서 특정단어에 디자인을 적용하고자 할때
<mark> - 특정 부분을 강조하는 태그
<ol> - 순서가 있는 리스트
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ol>
<ul> - 순서가 없는 리스트(순서에 영향을 받지않는 리스트)
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
<button type="button">열기</button>
<button type="submit">닫기</button>
Button - 팝업을 닫는다던지 단순하게 버튼의 용도로만 사용됨
Submit - 무언가를 입력하고 눌렀을때 서버에게 전달할때 사용함
<video src="sample.mp4" controls></video>
Controls - 이것을 이용해 재생 및 여러가지 플레이기능사용가능하다.
Autoplay muted - 사이트에 접속하자마자 바로 영상재생
Loop - 영상이 끝났을때 곧바로 반복재생이 된다.
Width, height - 영상의 크기 조절가능
<iframe width="560" height="315" src="https://www.youtube.com/embed/MeptfAdiJxE"
title="YouTube video player"
frameborder="0" a
llow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-inure"
allowfullscreen>
</iframe>
유튜브에서 퍼기가 코드를 사용해서 사이트에 게시
<audio src="sample.audio.mp3" controls autoplay muted loop>q</audio>
오디오는 오토플레이를 크롬브라우저에서 사용하는걸 막아놨다.
웹프로그래밍 -HTML
<form method="post">
네이버 로그인창처럼 박스를 만들어 텍스트를 입력하고 원하는 브라우저창으로 넘어갈수있는것들도
모두 html로 뼈대를 만들 수 있다.
<label for="name">이름</label>
<input type="text" id="name" placeholder="이름을 입력하세요." required>
<label for="mail">이메일</label>
<input type="email" placeholder="이메일을 입력하세요." id="mail" required>
<label for="pw">비밀번호</label>
<input type="password" placeholder="최소 6글자, 최대 12글자 "id="pw" required>
<label for="num">숫자</label>
<input type="number" id="num" placeholder="숫자만 입력">
<label for="upload">파일 업로드</label>
<input type="file" id="upload" accept="image/png, image/jpg, image/gif">
<button type="submit">제출</button>
</form>
-required - input을 필수적으로 작성하게 만드는 코드
<label for="n1">한국</label>
<input type="checkbox" id="n1" name="country" value="한국">
<label for="n2">일본</label>
<input type="checkbox" id="n2" name="country" value="일본">
<label for="n3">중국</label>
<input type="checkbox" id="n3" name="country" value="중국">
-->
<!--country : 한국 --> 이런식으로 컴퓨터에게 입력 정보를 전달할수있다.
<!--country : 일본 -->
<label for="n1">한국</label>
<input type="radio" id="n1" name="country" value="한국" checked>
<label for="n2">일본</label>
<input type="radio" id="n2" name="country" value="일본">
<label for="n3">중국</label>
<input type="radio" id="n3" name="country" value="중국">
-->
<!-- radio는 단일 체크 기능-->
<label for="content">문의내용</label>
<textarea name="" id="content" cols="30" rows="10"></textarea>-->
<select name="job" id="">
<option selected disabled>직업을 선택해 주세요.</option>
<option value="학생">학생</option>
<option value="회사원">회사원</option>
<option value="기타">기타</option>
</select>
직업을 선택해 주세요. 는 선택되면안되기에 disabled해야하지만 이것만 사용하면 문장자체가 안나오기때문에
selected로 고정시킨뒤 사용하지 못하게 설정해야한다.
<header>
<h1>
<a href="#">
<img src="" alt="">
</a>
</h1>
홈페이지 상단 메뉴창을 만드는 태크 <nav>
<nav>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>
</nav>
</header>
HTML로 표를 만들수있다.
<table>
<caption>상품 정보</caption>
<thead>
<tr>
<th>상품</th>
<th>색상</th>
<th>가격</th>
</tr>
<tbody>
<tr>
<td>맥북 프로 16인치</td>
<td>그레이</td>
<td>3000원</td>
</tr>
<tr>
<td rowspan="2">아이패드 프로 12인치</td>
(rowspan은 위아래로 표를 정리해서 합칠 수 있다.)
<td>레드</td>
<td rowspan="2">1,000원</td>
</tr>
<tr>
<td>블루</td>
</tr>
</tbody>
</thead>
<tfoot>
<tr>
<td colspan="2">총 가격</td>
(colspan은 왼쪽오른쪽 표를 합쳐서 정리할 수 있다.)
<td>5,000원</td>
</tr>
</tfoot>
</table>
<main role="main">
main은 주 내용을 담을 그릇같은것이다.
홈페이지의 단락을 크게 나눠서 사용할 수 있는 <section> 그러나, 개발자의 성향에 따라
사용빈도와 그 쓰임새가 다룰수도 있다.
<section>
<h2>Service</h2>
</section>
<section>
<h2>portfolio</h2>
</section>
<article>
<h2>Article title</h2>
<p>Nice to meet you</p>
</article>
본문 정보와 관계성이 떨어지는 내용은 - <aside>
웹사이트에서 가장 하단에 해당되는 내용 - <footer>
주공간이외의 자잘한 공간들을 사용하는 태그 - <div>(가장많이 사용됨)
사용자에게 정보를 공급받는 공간들은 무조건 input태그와 세트로 움직인다.이렇게 오늘 수업 내용을 정리해 보았다.
정리하면서 오늘 배웠던 코드들도 일부 타이핑으로 사용해보았다.
기초적인 문법과 태그들이었지만,
어려웠던 부분
- rowspan과 colspan의 기준을 이해하고 사용하는것에 대한 구조가 헷갈렸다.
- table태그안에 포함되어있는 문법에 혼란을 겪었다.
독학으로 html의 기본문법을 어느정도 익혔었지만 내가 모르는 새로운 내용들도 많이 눈에 띄었다. 앞으로 꾸준히 잘해보자~!
