⏺학습한 내용🕵️♂️
✅Reference Site
▶ 디비컷 - 국내외 다양한 웹사이트 확인 가능
▶ 지디웹 - 국내 다양한 웹사이트 종류 확인가능
▶ awwwards - 해외 여러 웹사이트 확인가능
(평가도 가능 / 좌측 메뉴에 winner에서 수상작보기)
▶ mediaqueri.es - PC, Mobile 등 여러 환경에서의 웹사이트 확인가능
▶ bm.straightline.jp - 검색 시 두번 째 링크 클릭 일본 웹사이트 확인가능
✅개발용어정리
▶ 크로스 브라우징 - 여러 웹브라우저 환경에서 동일한 환경과 기능으로 동작
▶ 웹표준 - 공식 표준, 기술 규격에 따른 웹 환경 구축
▶ 웹접근성 - 장애를 가진 사람도 웹사이트를 이용할 수 있게 하는 환경
▶ FTP - 서버와 클라이언트 사이의 파일 전송을 위한 프로토콜
▶ 라이브러리 - 웹사이트 제작 시 필요한 자원의 모임
✅ Youtube Channel
▶ 생활코딩 - HTML, , CSS, Javascript 전반적인 개발공부 ❗
▶ 얄팍학 코딩사전 - 어려운 내용도 쉽게 설명
▶ thenewboston - 해외 유명한 개발 채널
▶ wes bos - 재생목록에 javascript30 같이 보면 좋음
✅ Sub Site
▶ statCounter - 전 세계 웹 사이트 점유율 확인가능
▶ can i use - 웹 사이트별(+버전) 명령어 사용가능 환경 확인 가능
▶ Nuli - 네이버에서 제작, 웹사이트 제작하는 노하우 정리해놓은 페이지
▶ html validator - 코드 만들고 웹표준, 접근성에 적합한지 실시간 확인가능
▶ 코드펜 - 다른사람의 결과물에 테스트도 가능하고 가장 많이 사용할 듯 ❗
▶ w3schools.com - Tag 설명 확인가능
⭕HTML 강의내용
✅ 페이지제작#1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Web Tutorial">
<meta name="keywords" content="html, css, tutorial, web">
<meta name="author" content="Seyong Ahn">
<title>HTML, CSS Tutorial</title>
<link rel="shortcut icon" type="image/icon" sizes="32x32" href="favicon.ico">
</head>
<body>
<a href="https://www.naver.com/" target="_blank">네이버</a>
<img src="apple.png" alt="사과 이미지" width="100px" height="100px">
<img src="https://img.lovepik.com/element/40049/8215.png_860.png" alt="사과 이미지2">
<h1>Title</h1>
<h2>Title</h2>
<h3>Title</h3>
<h4>Title</h4>
<h5>Title</h5>
<h6>Title</h6>
<h1>기업명 또는 서비스명</h1>
<h1>
<a href="http://www.naver.com/">
<img src="https://img.lovepik.com/element/40049/8215.png_860.png"
alt="애플">
</a>
</h1>
<h3>Service</h3>
<h4>Service 부제</h4>
<h3>Portfolio</h3>
<p>Nice to meet you</p>
<p><span>동해물</span>과 백두산이 마르고 닳도록</p>
<p><mark>사과</mark>는 사과 나무에서 나는 열매이다.</p>
<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>
<button type="button">닫기</button>
<button type="submit">확인</button>
<video src="sample.mp4"
controls
autoplay muted
loop
width="300px"
height="300px">
</video>
<iframe width="800px" height="700px"
src="https://www.youtube.com/embed/C1WsphTG6-Y"
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
autoplay muted
loop
width="400">
</audio>
</body>
</html>🛑Code 되짚어보기
🔹DOCTYPE = 페이지의 HTML 버전이 무엇인지 웹 브라우저에 알려주는 역할
🔹 meta = 웹 페이지에서 보이지 않는 정보를 제공하는 쓰이는 태그
🔹 charset = 입력한 문서의 속성결정 / "utf-8" 디폴트값 필수
🔹 description = 페이지의 내용과 검색어와의 관련성을 간단히 알려주기 위한 한 줄 요약느낌
🔹 keywords = 웹사이트와 관련된 단어정보들
🔹 author = 이사이트를 소유 or 제작한 사람의 정보
🔹 title = 브라우저 오픈시 상단 탭부분의 타이틀란 정보
🔹
<!-- blank -->= HTML 에서 주석 처리, 주석안에는 주석을 못넣는다.🔹 target = target="_self" 창 바로이동 / target="_blank" 새창이동 (생략시 self값)
🔹 img = img에서 alt 값 무조건 넣어줌( 웹 접근성에 따라 시각장애인도 인식가능) img에서 width/height 하나만 넣을시 자동 비율조정됨
🛑Tag 상세설명
🔹 h
h1~h6 까지 쓸수 있음. 신문기사처럼 HTML 문서안에서 타이틀을 담당하는 글씨를 만들때 쓰는것 h1 태그는 가장 중요한 내용, HTML 문서에서 한번만 쓸 수 있다. 대부분 이미지로 많이 처리하기 때문에 img구조로 많이 만들어서 링크로 표현한다. h태그는 순서대로 써야되고 중간번호를 건너뛸순없음.
🔹 p
웹사이트에서 본문 정보를 담을 때 사용하는 Tag, 코드에서 공백은 하나만 처리한다.
🔹 span
just 단어로만 표기할 때 or 문장에서 특정단어의 디자인이 필요할 때
🔹 mark
특정단어를 강조할 때 / 단어사전, 인용구 같은 경우에서 강조할 때
🔹 ol/ul
순서(등급)의 기준이 있을때는 ol tag / 순서(등급)의 기준이 없을때는 ul 태그(일자 메뉴 생각)
ol / ul 태그 하위 태그에서는 항상 제일 먼저 li 태그 사용!!
🔹 button
submit => 버튼을 클릭했을때 백엔드로 데이터통신을 위한 명령어
🔹 video
video - src="파일이름" controls
바로재생을 하고 싶다 -> autoplay
음소거 됐을 때 자동재생되도록 -> muted
반복재생을 하고싶다 -> loop
크기조절을 하고 싶다 -> width / height
🔹 audio
오디오도 비디오와 마찬가지로 src 속상값, controls 값 넣어줌.
audio 태그는 '크롬'에서 정책상 기본적으로 자동재생을 막아놓음.
audio 태그는 video태그와 다르게 width / height 안됨.
🔹 iframe
보안상 이유로 유튜브영상 퍼올 때 말고는 안씀
✅ 페이지제작#2
<html>
<head>
<meta charset="utf-8">
<title>2회차 HTML 강의</title>
<style>
tr, td, th
{border: solid 1px #000000;}
</style>
</head>
<body>
<form method="post">
<label for="name">이름</label>
<input type="text" id="name"
placeholder="이름을 입력하세요"
required
minlength="2"
maxlength="8">
<label for="mail">이메일</label>
<input type="email"
placeholder="이메일을 입력하세요."
id="mail">
<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"
aceept="image/png, image/jpg, image/gif">
<button type="submit">제출</button>
</form>
<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="중국">
<label for="content">문의내용</label>
<textarea id="content" cols="40" rows="8">
</textarea>
<select name="jop">
<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>
<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>Portpolio</h2>
</section>
<article>
<h2>Article title</h2>
<p>Nice to meet you ㅎㅎㅎㅎ</p>
</article>
</main>
<aside></aside>
<footer></footer>
<div></div>
</table>
</body>
</html>🛑Tag 상세설명
🔹 label
for와 id는 같은 값으로 하는게 좋다.
🔘 placeholder => 입력창에 항상 있는 정보(이메일을 입력하세요)
🔘 required => 필수 입력사항
🔘 min(max)length => 최소,최대 글자길이 설정
🔘 min/max => 시작최저숫자, 최고 한계숫자
🔘 step => "n"씩 증가, 감소값
🔹 checkbox
>설정시 필수 입력사항!!
name 태그는 좌표의 역할을 한다
value 태그는 실질적으로 서버에 전달되는 데이터
>오로지 하나만 설정하고 싶다!
└>checkbox => radio로 바꾸면 그대로 설정가능
🔹 textarea
🔘 cols => 넓이 (한줄에 몇글자까지 넣을 것인지)
🔘 rows => 한 박스에 몇줄까지 보일것인지
🔹 select option
🔘 selected disabled => 선택내용을 알려주고 값을 내진 못하게 하는 명령어
🔘 selecterd -> default 값으로 설정
🔘 disabled -> 선택할수없게 만드는 코드
🔹 table
도표를 만들 때 사용함.
<caption> - 어떤 table에 대한 내용인지 설명 <thead > - 항목을 정리하는 공간 <tr> - 하나의 라인을 추가 할 때 사용 <th> - 각각의 항목명을 설명할 때 사용 <tbody> = thead <tr> <td> = ththead => th / tbody => td (보통 하나의 thead에 2개의 tr쓰는 경우는 드뭄)
🔘 같은 항목이라 셀(행)을 합칠 때
└>td 항목이름란에서 td탭안에 rowspan="반복횟수" 입력
🔘 공백란이라 칸을 맞추기 위해 열병합을 할 때
└> td 항목이름란에서 td탭안에 colspan="반복횟수" 입력
🔹 main
익스플로어가 지원하지않아서 main role="main" 꼭 넣어줘서 익스플로어에 내용을 알려줘야함.(페이지 본문에 해당하는 부분/ 일반적으로 하나의 문서에서 1개만 사용
🔹 section
페이지의 각각의 영역들을 만드는 태그
└> 한 덩어리(section)마다 h태그 달아줘야함. 바깥쪽에 적어도되고 main태그에 해도됨.
🔹 article
공간을 대표하는 라인 (신문지에서 뉴스보면 알 듯이 딱딱 나눠진공간)
역시 마찬가지로 aritcle태그도 대표하는 헤드라인 h태그를 반드시 넣어야함
본문정보를 넣는다 => p태그로 추가를 해주면됨.
🔘 ariticle - 실제정보가 들어가는 공간
🔘 h2 - 공간을 대표하는 타이틀 정보
🔘 p - 본문내용
🔹 aside
본문정보와 관계성이 떨어지는 내용을 적는 란
🔹 footer
웹에서 가장 하단에 들어가는 내용 (사업자정보, 번호, 주소 등 )
🔹 div
임의의 작은 구역을 설정할 때 쓰는 태그
거실, 방, 화장실 등이 head, nav, main, footer등
그 안에 소파, 가구 등 임의의 영역을 지정하는것
🔹 form
공간을 만들때 쓰는건 아니지만 사용자에 대한 정보를 담아내는 공간
🔘 input 태그를 사용할 때는 필수태그
⏺학습내용 중 어려웠던 점🤦♂️
아직까지는 어려운 점은 없고 모든 공부가 그렇듯이 반복/숙달만 잘하면서 차근차근 잡아가면 될 듯.
⏺해결방법🙋♂️
내일부터는 오후에 일이 있어 개인시간이 줄어드는데 아침/새벽으로 공부하면서 좀 더 부지런하게 움직여야 함.
⏺학습소감🙇♂️
6월부터 시작된 대구AI스쿨, 지난 4주간 간단하게나마 Deep leaning, Machine leaning, AI, Python 등 기본적인 개념과 더불어 간단한 실습을 하며 신경망 구조와 Algorithm을 이해하고 Jupyter notebook으로 실질적인 코딩해보는 시간을 가졌다.
Az-900 자격증 취득을 통해 Cloud 환경에 대한 정보도 많이 얻을 수 있었는데, 하루하루가 지날수록 다루는 툴도 굉장히 여러 가지가 있고, 갖춰야 할 지식에 대한 광활한 범위에 대해서도 점점 깨달아갔다. 영어도 그리 잘하는 편은 아니지만, 후에 실질적인 업무투입 시를 생각하면 글쓸 때나 말할 때 자주 사용하는 습관을 들이는 것에 대한 필요성도 느끼는 중,, 앞서 배운 이 내용들은 정식 강의를 진행하면서 개인시간을 통해 따로 조금씩 계속 공부하고 있으니 꾸준히만 하도록 노력해야 할 듯.
주니어 개발자로 성장중🌱