.png)
*오늘은 어떤 공부를 하였는가?
정보(이미지까지) 영역을 담당하는 개발언어가 html (설계도)
글자 폰트, 어떤 공간의 특정구역 을 설정하는 디자인적 영역을 담당하는 언어 css (내부 인테리어)
어떠한 효과, 메뉴를 클릭시 컨텐츠가 달라지는 기능을 만드는 언어 javascript (지문인식, 박수로 불이켜진다던지)
*웹 사이트의 레이아웃 종류
static layout
정적인 웹사이트, 과거의 만들어진 웹사이트 대부분
liquid layout
브라우져 크기에 맞춰 공간의 크기자체가 줄어드는 웹사이트
동적인 웹사이트
adaptive layout
뚝뚝 끊겨나가며 공간의 크기가 달라지고 레이아웃의 구조자체가 달라지는 웹사이트
적응형 웹사이트 (pc 모바일 노트북이 등장함에 따라 필요해짐)
responsive layout
자연스럽게 사이즈 변환 레이아웃의 구조자체가 달라지는 웹사이트
반응형 웹사이트
근래는 적응형,반응형을 섞은 웹사이트가 많음
웹사이트 종류 확인하는 사이트
디비컷, 지디웹, awwwards, Media Queries, straight line bookmark all
틈틈히 보도록
프론트 엔드 개발자
사용자가 보는 모든화면의 페이지를 개발하는 개발자
앞단영역
백엔드
사용자가 보지못하는 뒷단의 영역, 비밀번호가 맞는지 확인한다거나 고객정보를
안전하게 관리,보관하는 개발자
크로스 브라우징
브라우져의 종류,버전 에 맟춰 앞단작업을 하는 작업
웹사이트를 만들때 첫번째 고려하여야 할 작업
브라우져를 따지지 않고 결과값이 같아야 한다
웹표준
html언어를 이용하여 눈에 보이는 정보를 기입한다 하였을때
성격에 맞는 태그를 사용하여야 하는데 정확한 태그에 맞춰 작성하는것
웹접근성
장애인분들이 이용하는데도 무리가 없게 하는 작업
FTP
도메인 주소를 입력시 페이지가 열리게 하는 일종의 터널
사용자와 웹사이트를 연결해주는
라이브러리
웹사이트의 여러가지 효과는 이미 다른 개발자들이 만들어 놓은것이 많다
굳이 0에서 10까지 다 개발할필요는 없기에 다른사람이 이미 만들어놓은 기능을 가져다 사용하는 경우가 일반적이다 다른 사람이 만들어놓은 어떤 기능의 결과물
라이브러리 만으로도 웹사이트를 만들수 있다
개발도구
vs code, sublime text, webstorm
-도움되는 사이트
브라우져 점유율 알수있는 사이트
stat counter
개발언어가 브라우져의 영향을 받는지 확인하는 사이트
can i use
웹접근성 웹표준을 고려하여 개발할때 참고할 사이트
NULI 네이버가 만듬
웹접근성, 웹 표준에 문제가 없는지 확인하는 사이트
html validation
다른사람이 만들어 놓은 결과물을 공유하고 확인할수 있는 사이트
codepen
sublime txt 실습
-
각 언어에 맞게 확장명을 먼저 지정한다음 실습을 하여야 한다
-
html도 시대에 맞게 신조어가 생기기도 사라지는 언어도 있다.
-
<!DOCTYPE html>작성하면은 html5 최신 html문법으로 작성 하겠다는 뜻
대신 과거에 쓰던 html문법은 쓸수없다 -
<html> ~~~~~~</html> 이사이에 html 문법을 쓰겠다는 뜻 -
html문법은 태그로 구성 <열린태그> , </닫힌태그>
-
ex)
<html>hello world</html> -
<head></head>문서와 관련된 간단한 요약정보를 담는 영역 -
<body></body>정보를 담아내는 영역 -
<head> //헤드 영역안에 기본적으로 들어갸야할 정보들 <meta charset="utg-8"> //문자를 쓸때 필요하다 <meta name="description" content="web Tutoruial"> //서술이라고 보면됨 <meta name="keyword" content="html, css, Tutoruial, web"> //웹사이트와 관련된 단어정보 <meta name="author" content="Dogyeom yeo"> //이사이트를 소유하고 있는 사람의 이름 혹은 사이트명 <title>HTML, CSS Tutorial</title> // 제목기입 할때 필요 <link rel="shortcut icon" type="imge/icon" sizes="32x32" href="favicon.ico"> //사이트 파비콘 이미지 넣을떄 필요 </head> -
<a></a>메뉴를 만드는 태그 -
html언어를 공부한다는것은 태그가 무엇인지 그에 대응하는 속성들은 어떤것들이 있고 속성값으로 커스텀을 할수있는지 정해진 규칙대로 따라야하는지 이런것들을 암기하는 언어
이미지를 넣는 예제문제
.png)
-
<!-- a, img 태그 소개 <a href="https://www.naver.com/" target="_blank">네이버</a> <img src="arsenal.png" alt="아스날 이미지" width="180px" height="100px"> //이미지를 넣을때쓰는 태그 <img src="https://w7.pngwing.com/pngs/710/671/png-transparent-arsenal-f-c-premier-league-chelsea-f-c-arsenal-stadium-sports-association-arsenal-f-c-emblem-label-trademark.png" alt="아스날 이미지" width="180px" height="100px"> -->
머릿말 넣는, 사이트 연결 예제문제
-
.png)
-
<!--헤드라인의 약자,h1이 가장 중요 <h1>Title</h1> <h2>Title</h2> <h3>Title</h3> <h4>Title</h4> <h5>Title</h5> <h6>Title</h6> <h1>기업명 또는 서비스명 가장 중요하기에 한번만 사용</h1> <h1> <a href="https://www.naver.com/"> <img src="https://w7.pngwing.com/pngs/710/671/png-transparent-arsenal-f-c-premier-league-chelsea-f-c-arsenal-stadium-sports-association-arsenal-f-c-emblem-label-trademark.png" alt="네이버" width="200px" height="200px"> </a> </h1> --> <!--H태그는 반드시 순차적으로 쓴다 <h3>Service</h3> <h4>Service 부제</h4> <h5>Comerce</h5> <h5>Design</h5> <h5>Security</h5> <h3>Portfolio</h3> --> ```
텍스트, 메뉴설정, 버튼 예제문제
-
.png)
-
<!-- 몇개의 공백을 하든 한단어로 인식 <p>Nice to meet you</p> --> <!-- <p><span>동해물</span>과 백두산이 마르고 닳도록</p> <p><mark>사과</mark>는 사과 나무에서 나는 열매이다</p> --> <!--ul,ol태그 내용물은 li태그여야 한다,어떤 리스트 정보를 표현할때 사용 <ol> <li>메뉴1</li> <li>메뉴2</li> <li>메뉴3</li> </ol> <ul> <li>메뉴1</li> <li>메뉴2</li> <li>메뉴3</li> </ul> <ul> <li><a href="#">영화</a></li> <li><a href="#">부동산</a></li> <li><a href="#">음악</a></li> </ul> <ul> <li></li> </ul> --> <!-- <button type="button">닫기</button> <button type="submit">확인</button> 백엔드 개발자에게 전달할때 -->유튜브 링크 및 ,동영상, 오디오 예제문제
-
.png)
-
<!-- <video src="sample.mp4" controls autoplay muted loop width="400px" height="300px" > </video> --> <!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/ZeerrnuLi5E" 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 muted loop> </audio> -->
라벨과 인풋 예제문제
-
.png)
-
<form method="post"> <label for="name">이름</label> <input type="text" id="name" placeholder="이름을 입력하세요." required //필수항목 할시에 필요 속성 minlength="2" maxlength="8" //최소2글자 최대 8글자 > <label for="mail">이메일</label> <input type="email" placeholder="이메일을 입력하세요." id="mail" required> <label for="pw">비밀번호</label> <input type="password" placeholder="최소 6글자, 최대 12글자" id="pw" 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/jpg, image/gif"> <button type="submit">제출</button> </form>
체크박스 예제문제
-
.png)
-
<!-- <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="중국"> --> <!-- <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="중국"> -->
작성란과, 테이블, 셀렉트 박스 예제문제
.png)
<!--
<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>
-->
<!--
<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>
<td>레드</td>
<td>1,000</td>
</tr>
<tr>
<td>블루</td>
<td>1,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">총 가격</td>
<td>5,000원</td>
</tr>
</tfoot>
</table>
-->텍스트 링크로 통한 메뉴, 중요도에 따른 텍스트 예제문제
.png)
<!--
<header>
<h1>
<a href="#">
<img>
</a>
</h1>
<nav>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>
</nav>
</header>
<main role="main">
<section>
<h2>Service</h2>
</section>
<section>
<h2>Portfolio</h2>
</section>
<article>
<h2>Article title</h2>
<p>Nice to meet youNice to meet youNice to meet you</p>
</article>
</main>
-->-
<aside></aside>페이지 콘텐츠 외에 콘텐츠를 정의 -
<footer></footer>문서 또는 섹션의 바닥 글을 정의 -
<div></div>문서의 섹션을 정의 -
<form></form>사용자 입력을위한 HTML 양식을 정의
*오늘 강의중 힘들었던점?
-아무래도 동영상강의 로 진행되기 때문에 궁금한점이나 수업
템포를 못쫓아가는 경우가 종종 나왔다. 하지만 진심으로 재미있는 강의였다고 생각한다.아직은 기초 단계라서 문제점 까지는 없었다.
*강의 종료후
-오늘 html문법 첫강의를 하였는데, 어렵다면 어렵고 쉽다면 쉬운 느낌이다. 오늘 저녁에 다시한번 복기해보는걸로 오늘 공부를 마무리를 지어야겠다.느끼는 것이 반복과 많은 예제를 해보는것이 성장하는데 가장 중요할꺼 같다
