1교시: 웹개발 개념 및 HTML
1강 :html입문
1번 . 웹 개발에 필요한 지식과 참고자료
1. 웹사이트의 종류 3가지
추천 사이트 : 내가 만들고 싶은 기능의 예시를 코드화해서 보여준다.
접속방법
treehouse which layout static liquid로 검색해서 Which page layout? Static, Liquid, Adaptive, or Responsive 를 클릭한다.
DEMO라는 버튼을 클릭해서 각각의 웹사이트가 어떤 특징을 가지는지 직접 확인한다.
(1) 정적
브라우저 창의 크기를 변화시켯을 때 웹사이트의 구조와 화면이 변하지 않는다.
(2) 동적
브라우저 크기에 맞춰 웹사이트의 크기는 줄어드나 구조는 역시 변하지 않는다.
(3) 적응형 웹사이트
특정 화면비 구간에서 웹사이트의 크기 구조 모드 변화함
(다양한 기기의 화면에 맞춰 변화함)
(4) 반응형 웹사이트
특정 화면비에 관계없이 브라우저 창의 크기를 변화시킬 때마 그에 맞춰 웹사이트의 구조와 크기가 변화한다.
- 최근에는 특정 영역을 적응형 반응형 등으로 설정하여 개발하는 경우가 많아지고 있다.
- 조금 더 다양한 형태의 웹사이트 예시를 보고 싶다면?
(1) 디비컷
(2) 지디웹
(3) awwwards.com
케이스 스터디시 수상작들을 위주로 검색해보면 유용하다.
(4) 미디어 쿼리
피시버전뿐만 아니라 모바일 버전도 확인가능하다.
- 프론트 엔드 vs 백엔드
(1) 프론트 엔드란?
일반 사용자들이 기본적으로 마주하는 기본적인 영역을 프론트 엔드라고한다.
(2) 백엔드란?
이러한 일반 사용자들이 홈페이지를 사용함에 있어 다양한 편리한 기능과 시각적 효과를 개발하는 영역을 말한다.
-
크로스 브라우징의 개념
어떤 웹환경에서도 동일한 서비스를 제공하는 웹문서를 개발하는 것. -
웹접근성
내가 만든 웹사이트가 장애인들의 사회적인 약자들도 접근이 가능해야한다. -
라이브러리
가령, 내가 어떤 웹을 개발하고 있을 때 그곳에 어떤 기능을 추가하고자 한다면 기존에 개발되어 있는 라이브러리를 가져다쓰면 효과적으로 웹환경을 개발할 수 있다. (새로운 것을 개발하는 것에 집중하기 보단 기존에 잘 나와있는 기능을 나에게 맞게 변화시키는 것이 훨씬중요하다.)
2번. HTML입문 시작
- 웹 표준에 대해서
입력한 내용과 사용한 태그 간의 적절성이 높을수록 검색엔진에 더 많이 노출된다.
go to html
<!--홈페이지 이름짓는다. -->
<title>My first html</title>
<!-- 파비콘 이미지의 삽입-->
<link
rel="short cut icon"
type="image/icon"
href="https://ww.namu.la/s/df1eba9b735343d2430bcc3200e00f166ab20af00bc3e5918a555f7b22fed51e8c8cac11942a33a1a380f552b7da4a0ecb026d0fb54caaff2953dd9c46341111a44c14262ae25bef656753b6ec75cd69ca044f70518240a8d599c346aa3d86bf22fceb74c1807eab8bf4aabdbfbf1148"
/>
<!--<열린태그 속성 = '속성값'>
# </닫힌태그>--><!--이미지 넣어보기-->
<!--이미지태그 삽입시 알트 속성은 반드시 들어가 있어야 한다. 그 이유는 시각장애인등을 위해 알트 속성이 필요함 -->
<!--때론 네트워크 등의 문제로 이미지를 제대로 불러올 수 없을때도 있다. 그때 알트값으로 해당 이미지가 무엇인지 파악 가능.-->
<img
src="https://imgnews.pstatic.net/image/001/2021/06/28/PYH2021031819520006100_P4_20210628120113651.jpg?type=w647"
alt="사과 이미지"
width="100px"
height="50px"
/>
<!--본문에서 제목을 담당하는 태그는 <h1>이고 최대 h6까지 작성가능하다.-->
<!-- 1에서 6으로 갈수록 글자 크기가 작아진다.-->
<!-- h1태그는 1번만 쓴다. 그리고 대부분의 h1은 이미지등으로 처리되어 사용되는 경우가 많다.-->
<h1>기업명 또는 서비스명</h1>
<h1>
<a
href="https://nomadcoders.co/?gclid=CjwKCAjww-CGBhALEiwAQzWxOoATYoqN5nig89jKMGaWwTsdvCNxw8J4bVl4xYn9Cs3fTNb73vYoWBoCERUQAvD_BwE"
>
<img src="https://nomadcoders.co/m.svg" alt="니꼬!!" />
</a>
</h1>
<!--같은 중요도를 가지는 부분은 같은 h4로 분류해서 작성한다.-->
<h3>Service</h3>
<h4>Commerce</h4>
<h4>Design</h4>
<h4>Security</h4>
<h3>Portfolio</h3>
<!--본문을 입력하는 경우 p태그를 사용한다.-->
<p>본문을 입력해주세요</p>
<!--단어로서 표현하고 싶으면 span사용하면 됨.-->
<!--특정단어를 강조하고 싶을 경우 mark태그를 사용한다.-->
<p><span>동해물</span>과 백두산이 마르고 닳도록</p>
<p><mark>사과</mark>는 사과나무에서 나는 열매이다.</p>
<!--리스트 태그의 활용-->
<!--ol의 경우 리스트 간의 순서 혹은 중요도의 차이가 있을 때 사용-->
<!--ul은 그렇지 않은 경우 사용-->
<ol>
<li>사과</li>
<li>딸기</li>
<li>파인애플</li>
</ol>
<ul>
<li>사자</li>
<li>호랑이</li>
<li>박쥐</li>
</ul>
<!--사용예시-->
<ul>
<li><a href="#">영화</a></li>
<li><a href="#">부동산</a></li>
<li><a href="#">음악</a></li>
</ul>
<!--버튼에 대해서-->
<!--서브미트의 경우는 어떤 입력된 정보를 백엔드로 전달할 때 사용된다.-->
<button type="button">닫기</button>
<button type="submit">확인</button>
<!--비디오-->
<!--컨트롤스 옵션을 속성으로 지정해야 비디오가 웹에서 실행된다.-->
<!--영상을 반복 재생하고 싶을 경우 루프라는 옵션이 사용된다.-->
<!--이미지와 같은 방식으로 영상의 크기를 조절할 수 있다.-->
<video src="source/sample_file_mp4.mp4" controls autoplay muted></video>
<!--크롬 브라우져가 오디오는 자동재생되지 않도록 막아놨다.-->
<audio src="source/sample3.mp3" controls autoplay muted loop></audio>2교시: 라벨, 인풋, 폼 그리고 리스트
이름 이메일 비밀번호 숫자 파일 업로드 제출<!--라벨을 이용한 체크박스 만들기-->
<!--네임과 밸류 속성은 우리가 체크박스를 누를 경우 서버로 전달된다.-->
<label for="n1">한국</label>
<input id="n1" type="checkbox" name="country" value="한국" />
<!--인풋에서 타입의 속성값을 radio로 할 경우 체크박스 1개만 클릭이 된다.-->
<!--인풋에서 checked를 사용할 경우 이미 체크박스에 체크가된 채로 나타난다.-->
<label for="n1">한국</label>
<input id="n1" type="radio" name="country" value="한국" />
<!--만약에 텍스트에어리어를 사용하면 장문의 텍스트를 받을 수 있다.-->
<label for="content">문의내용</label>
<textarea id="content" cols="40" rows="8"></textarea>
<!--일종의 드랍다운 메뉴를 만드는 것-->
<select name="job">
<option selected disabled>직업을 선택해라!! 시발아</option>
<option value="학생">학생</option>
<option value="회사원">회사원</option>
<option value="기타">기타</option>
</select>
<!--표만들기/ 캡션은 제목을 의미한다.-->
<tabel>
<caption>상품정보</caption>
<!--테이블의 머리다.-->
<thead>
<!--일종의 테이블 축-->
<tr>
<th>상품</th>
<th>색상</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td>맥북 프로 16인치</td>
<td>그레이</td>
<td>300만원</td>
</tr>
<tr>
<!--셀병합을 시키고 싶을때 rowspan을 지정한다.-->
<td rowspan="2">맥북 프로 12인치</td>
<td>그레이</td>
<td>200만원</td>
</tr>
<tr>
<td>그레이</td>
<td>150만원</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">총 가격</td>
<td>5000</td>
</tr>
</tfoot>
</table>
<!--홈페이지 최상단에 나타나는 행이나 열을 나타냄-->
<header>
<h1>
<a href="#">
<img>
</a>
</h1>
<nav>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</nav>
</header>
<!--본문에 관련된 내용은 메인에 작성한다.-->
<main role="main">
<section>
<h2>service</h2>
</section>
<section>
<h2>portfolio</h2>
</section>
<!--아티클은 실제 정보가 들어가는 공간이다.-->
<article>
<h2></h2>
<p>힘들다 힘들어 시간 맞추기 힘들다 </p>
</article>
</main>
<!--메인이랑 연관성이 떨어지는 내용-->
<aside>
</aside>
<footer></footer>