6월 28일 Velog

류영서·2021년 6월 28일

대구AI스쿨

학습한 내용

웹 개발 개요

웹 개발 언어
HTML : 시각적인 정보, 텍스트/이미지
CSS : 디자인, 폰트 색상/구역 설정
JAVASCRIPT : 기능적인 역할

웹 사이트 레이어 종류
Static Layout : (브라우저의 크기가 변할 때) 크기, 구조 변화 없음
Liqid Layout : 브라우저의 전체 공간 차지, (브라우저의 크기가 변할 때) 크기 변화함, 구조 변화 없음
Adaptive Layout : (브라우저의 크기가 변할 때) 크기, 구조 변화 있음, 끊기는 느낌
Responsive Layout : (브라우저의 크기가 변할 때) 크기, 구조 변화 있으며 끊기는 느낌 없이 특정시점에서 모바일 구조로 바뀜

웹 사이트 레이어 참고할 수 있는 링크
(1) 국내
디비컷 : https://www.dbcut.com/bbs/index.php
지디웹 : http://www.gdweb.co.kr/main/
(2) 해외
어워즈 : https://www.awwwards.com/ -> 평가, 수상작
미디어쿼리 : https://mediaqueri.es/ -> 모바일도 포함
straightline : http://bm.straightline.jp/all

개발 용어
프론트엔드 : 웹 사이트 제작, 서버/통신과 같은 기능적 역할, 사용자에게 보여지는 모든 화면을 제작
백엔드 : 사용자가 보지 못하는 영역(로그인, 보안 등) 제작
FPT(파일 전송 프로토콜) : PC와 서버를 연결
라이브러리 : 이미 만들어진 기능들(예 : 이미지 슬라이드, 탭)

웹 제작시 고려사항
크로스브라우징 : 다양한 브라우저, 다양한 버전에서 동일한 출력을 위함
웹 표준 : 정보의 성격에 맞는 태그를 사용하여 작성
웹 접근성 : 장애인을 고려한 제작

개발 도구(Editor)
VS Code, SubLime Text, webstorm

HTML

<head>

	<meta charset = "utf-8">

	<meta name="description" content="Web Tutorial">
	<meta name="keyword" content="html, css, tutorial, web">
	<meta name="author" content="Youngseo Ryu">

	<title>HTML, CSS Tutorial</title>

	<link rel="shortcut icon" type="image/icon" sizes="32x32" href="favicon.ico">

</head>

head : 헤드태그(목차, 서머리) -> 화면에 보여지지 않음
태그(meta), 속성(charset), 속성값(utf-8 : 문자코드, 디폴트)
meta 태그는 닫힘태그가 없음
keyword : 간단한 단어, 태그/ description : 서머리, 요약/ author: 웹 주인
-> 검색 엔진에 잘 걸리게 하기 위한 것(과거)
title : 상단 탭 이름

<body>


    
	<a href="https://www.naver.com/" target="_blank">네이버</a>

	<img src="apple.png" alt="사과 그림" width="300px" height="">
	<img src="https://png.pngtree.com/png-clipart/20201221/ourmid/pngtree-fresh-red-apple-png-image_2598109.jpg" alt="사과 이미지">

    


    <h1>Title</h1>
    <h2>Title</h2>
    <h3>Title</h3>
    <h4>Title</h4>
    <h5>Title</h5>
    <h6>Title</h6>

    <h1>
    	<a href="https://www.naver.com/">
    		 <img src = "https://png.pngtree.com/png-clipart/20201221/ourmid/pngtree-fresh-red-apple-png-image_2598109.jpg" alt="애플">
    	</a>
    </h1>


    <h3>Service</h3>
    <h4>Service 부제</h4>

    <h5>Commerce</h5>
    <h5>Design</h5>
    <h5>Security</h5>


    <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 = 400px>
    </video>


    <iframe width="560" height="315"
             src="https://www.youtube.com/embed/N0VD9RFcoSQ" 
             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



</body>

body : 화면에 보이는 정보를 담아내는 것
a: 클릭 했을 때 다른 페이지로 넘어가는 것
-> target="_blank" : 새 탭으로 이동
-> target="_self" 혹은 “” : 현재 탭을 기준으로 이동
img : 이미지 정보, png 파일
-> src 속성값 : 파일 이름/이미지 주소
-> alt 속성값 : 시각장애인들을 위한 사진 이름 명시(웹 접근성),
이미지가 뜨지 않을 때 사진 이름 명시 -> width/height 중 하나만 지정하면 원본 비율 유지
 : 주석 처리, 주석 안에는 주석을 넣을 수 없음
h1~ : 숫자가 작을수록 중요한 정보(크기가 크다), 숫자를 하나씩 낮춰야 함
-> <h1></h1> : 가장 중요한 정보를 사용할 때 사용하는 태그, 내부에 <a><img></a> 삽입하는 것이 일반적
p : 본문 삽입, 브라우저는 공백을 한칸으로만 인식
-> span 태그 : 단어로서 표기할 때, 단어에 특정 디자인을 지정하고 싶을 때
-> mark 태그 : 특정 단어 강조(단어 풀이, 인용), 기본적으로 노란 배경
ol : 순차적 리스트
ul : 우선순위 없는 리스트
-> li : 글자 정보 삽입(항상ul, ol 안에는 li 먼저)
button : submit-> 데이터 통신을 위한 버튼
video
-> controls : 컨트롤 버튼 등장
-> controls autoplay muted : 자동 재생, 음소거
-> controls autoplay muted loop : 자동 재생, 음소거, 반복 재생
-> 유투브 동영상 퍼가기(iframe)
audio는 비디오랑 똑같음(width/height/autoplay 사용 불가능)

<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" placeholder = "최소 10글자 최대 15글자" id="pw" required minlength="10" maxlength="15">
 
	<label for="num">숫자</label>
	<input type="number" placeholder = "숫자만 입력" id="num" min="10" max="40" step="5">

	<label for="upload">파일 업로드</label>
	<input type="file" id="upload" accept="image/png, image/jpg">


	<button type="submit">제출</button>


	</form>

label : 입력칸의 제목, 이름의 역할
(label의 for 속성값) = (input의 id 속성값) -> 연결망 생성
input : 입력칸, type에 따라 달라짐 (text, email, password, number, file, checkbox-다중선택, radio-단일선택)
placeholder : 입력칸에 안내문구, 글자를 입력하는 순간 사라짐
accept : 확장명 제한, 쉼표로 구분
required : 필수로 받아야 하는 정보에 기입
minlength, maxlength : 최소/최대 글자수 제한
min, max : 하한/상한 지정, step : 단계 차이값


	<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="중국">

checked : 체크 되어있는 상태로 화면에 표시됨
name(그룹화), value(데이터): 서버에 전달해주는 결과 (예) country : 한국

<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>

textarea : cols(너비, 한줄당 글자수 제한), rows(높이, 줄제한), 많은 양의 텍스트 수용
select: selected disabled -> 선택되지 않는 값, 옵션 내부에 설정
select 내부에는 option만 사용가능

<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>아이패드 프로 12인치</td>-->
				<td>블루</td>
				<td>1,000원</td>
			</tr>
		</tbody>

		<tfoot>
			<tr>
				<td colspan="2">총 가격</td>
				<td >5,000원</td>
			</tr>
		</tfoot>
	</table>

table > caption : 제목
table > thead > tr > th(각각 입력) : 메뉴
table > tbody > tr > td(각각 입력) : 데이터
table > tfoot > tr > td(각각 입력) : 마지막 데이터
-> rowspan="2" (td 내부) : 2칸 열 병합
-> colspan="2" (td 내부) : 2칸 행 병함

<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 you. Nice to meet you.Nice to meet you. Nice to meet you. Nice to meet you. Nice to meet you. Nice to meet you. </p>
	</article>

		
	</main>


	<aside></aside>


	<footer></footer>


	<div></div>


	<form></form>

header > h1 > a> img : 제일 메인
header > nav> ul > li(각각 입력) > a : 메뉴

익스플로어에서 지원하지 않기 때문에 role="main" 입력
section과 article은 헤드라인(h, 타이틀 정보)이 필요하다
article : 신문의 본문 정보를 담아내는 구역
p 안에 내용(문단 형식) 입력
aside : 본문과 관계성이 떨어지는 내용

footer : 가장 최하단에 있는 내용
div : 임의의 작은 구역들, header/main/footer 제외 -> 가장 많이 사용하는 태그
form : label,input으로 받은 정보를 담는 것
header, nav, main, section, aritle, aside, footer : html5에서 새롭게 나온 문법 -> 크로스브로우징에 적용

학습한 내용 중 어려웠던 점 또는 해결못한 것들

table 태그 부분에서 내부의 태그들이 여러개로 늘어나서 수업을 듣는 도중에 계속 헷갈리는 부분이 많았다. 그리고 html 작성시에 자리 맞춤하는 부분에서 어려움을 겪었다.

해결방법 작성

위에 작성한 것처럼 경로를 내가 정리하여 타이핑 하였고 Sublime에서 직접 코드를 보는 것보다 더 머리에 잘 들어오는 느낌이였다. 앞으로 복잡한 코드를 배울 때에 이 방법을 적용하고자 한다. html 작성 시 자리 맞춤은 앞으로 더 연습을 많이 해서 익숙해지는 방법밖에 없을 듯 하다.

학습 소감

그동안 접해봤던 C언어와 파이썬과는 정말 다르다고 느꼈다. 오히려 나에게는 더 흥미로웠고 앞으로 더 열의를 가지고 공부하고 싶다는 생각이 들었다. 웹 개발 자체는 오늘이 처음이라 아직은 잘 모르겠지만 하루동안 많은 걸 배운 것 같다.

류영서

다음 포스트

6월 28일 Velog

웹 개발 개요

HTML

6월 29일 Velog

0개의 댓글