#1 Html_ 210628

hwanginchang·2021년 6월 28일

Sublime Text html 웹프로그래밍

대구 AI스쿨_웹프로그래밍

목록 보기

1/53

과정명 : 대구 AI 스쿨 일반과정
강의 : 웹프로그래밍김인원_1웹프로그램밍이란?210501
웹프로그래밍김인원_2_HTML_210505
주제 : HTML

웹프로그래밍 이란?

웹프로그래밍의 구성

HTML(정보)
CSS(디자인)
Jave Script(기능)

HTML 웹프로그래밍의 구성은 각자 역활을 하는 여러 언어로 구성되어 있으며 HTML은 태그(Tag)를 통해 웹사이트의 공간을 구상하고 배열을 꾸미며 다양한 정보를 입력한다.

<열린태그></닫힌태그>

의 형태를 기본으로 하지만 모든 태그가 이런 형태를 가진 것은 아니다. 유튜브의 다른 강의에서 들었던 내용을 어렴풋이 기억하자면 약 150여가지의 태그가 있지만 홈페이지 하나를 구성하는 태그가 평균적으로 24가지라는 이야기기가 있다. (추후 다시확인 : 유튜브 생활코딩)

프론트 엔드(Front end) : 사용자가 보는 영역 (UI)
백 엔드(Beck end) : 사용자가 보지 못하는 이면의 영역(보안)

웹 레퍼런스 사이트(Case work)

디비컷
https://www.dbcut.com/bbs/index.php
지디웹
http://www.gdweb.co.kr/main/
어워즈
http://www.i-award.or.kr/web/
미디어쿼리
https://developer.mozilla.org/ko/
treehouse
https://teamtreehouse.com/

개인적으로 웹프로그래밍을 배우는데 있어 이런 레퍼런스 자료들을 많이 본다는 것은 개발역량을 키우는 것 만큼이나 큰 도움이 된다고 생각하다. 시간을 들여 천천히 들여다 보면 분명 많은 도움이 될것으로 기대된다.

개발도구

visual studion
sublime text
web stome(유료)
+chrome

독학할 수 있는 곳

유튜브

생활코딩
얄팍한 코딩사전
the new boston
wes bos(Java script30)_자바스크립트 기능 30가지

사이트

Free cod campe(다양한 툴을 학습할 수 있음)
W3 school
모던 자바스크립트(한글로 학습할 수 있음)
edwith(네이버에서 제공하는 온라인 강의)

Sub site

state counter : 전세계 브라우저 점유율을 확인
nuli : 네이버, 다양한 개발 노하우를 설명

웹 문서, 파일 코드의 접근성과 웹 표준을 검토
https://validator.w3.org/
작업의 결과를 공유
https://codepen.io/

HTML_Sublime Text

기본구성 head/head

<!DOCTYPE html> 
<html>
<head>

<meta charset="utf-8">

<meta name="description" content="Web Toturial">
<meta name = "keywords" content = "html, css, tulorial,web">
<meta name ="author" content="Inchang Hwang"> 

<title>HTML, CSS Tutorial</title>

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

</head>

가장 기본적인 구성
사용할 언체체계(utf-8)_한글 사용을 위함
웹문서의 설명, 키워드, 제목, 권한자 그리고 아이콘 까지 웹울 구성하는 메타 데이터를 입력하는 작업 html-5의 표준을 지키며 검색의 용의함을 도모
head/ body/ foot으로 구성

body - a 태그

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

네이버

a태그 웹문서 본문의 가장 상단

H1~6 태그

<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://cdn.statically.io/img/cdn.imgbin.com/20/25/2/imgbin-ryuk-apple-photography-fotolia-apple-tHy2J29WRJYpCMFC9GBfbh3Mz.jpg" alt="애플">
	</a>
</h1>

Title

기업명 또는 서비스명

---------------------------------------------------- -------------------------------------------------

타이틀을 표시하는 태그
1~6단계
h1 태그는 가장 상위의 타이틀로 상호같은 가장 큰 단위에 사용하며 겹치게 사용하지 않는다.
웹사이트의 로고는 대부분 메인페이지로 연결된다.
alt 속성값을 통하여 연결이 되지 않더라도 정보를 제공하고 사이트를 이용하기 힘든 장애인이나 노인들에게 편의를 제공하는 설정값이다.

h태그의 하위 태그

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

<h5>Comerce</h5>
<h5>Design</h5>
<h5>Security</h5>

<h3>Portfolio</h3>

Service

Service 부제

Comerce

Design

Security

Portfolio

h태그의 하위 값은 사이트의 다양한 네비게이터를 구성하는데 사용된다.

p태그 span태그 mark태그

<p>Hello Stranger</p>
	
<span>사과</span>
<p><span>동해물과</span> 백두산이 마르고 닳도록</p>
<p><mark>사과</mark>는 사과 나무에서 나는 열메이다.</p>

Hello Stranger

사과

동해물과 백두산이 마르고 닳도록

사과는 사과 나무에서 나는 열메이다.

p태그 : 문자열을 출력하는 태그
~~- span태그 / mark태그 : 문자를 지정하여 특수하게 표시?하는 함수~~

ol, ul, 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>

메뉴1
메뉴2
메뉴3

------------------------------

메뉴1
메뉴2
메뉴3

ol : 순서가 중요한 리스트(리스트에 숫자 인텍스가 붙는다.)
ul : 순서가 중요하지 않는 리스트(리스트에 기호 인텍스가 붙는다.)
li : 리스트를 생성한다. href=# == 링크, 연결이 설정되지 않음

butten태그

	<button type="button">닫기</button>
	<button type="submit">확인</button>

닫기
확인

단추/ 버튼을 생성한다.
button의 속성값 type="button" : 확인버튼
button의 속성값 type="submit" : 제출버튼

video태그

<video src="sample.mp4" controls 
	                autoplay muted
			loop
			width="300px"
			height="300px"
</video>

영상을 제생하는 태그
controls : 필수 속성값
autoplay muted : 자동음소거 재생
loop : 반복 제생
width : 영상 넓이
heght : 영상높이

iframe 태그

<iframe width="560" height="315" 
		src="https://www.youtube.com/embed/q8nqCq2fluQ"
		title="YouTube video player" 
		frameborder="0" 
		allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
		allowfullscreen>

유튜브의 소스코드를 실행하는 태그
보안상의 이유료 거의 사용안함
유튜브에서 소스코드를 복사하여 실행

audio 태그

<audio src="sample_audio.mp3" controls muted looP>
</audio>

음성파일을 실행하는 태그
controls muted loop 속성값을 사용

HTML_ex2_Sublime Text

style 태그(CSS)

<style > tr, td, th {border : solid 1px #000000;}
</style>

tr, td, th 태그로 만들어진 테이블의 구분선을 주는 CSS태그

form 태그

label 태그

input 태그

<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="최소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>

이름

이메일

비밀번호

숫자

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

form태그 제출하는 post속성값
라벨과 인풋박스를 생성하는 태그
for = id로 서로를 연결
type속성값
text : 텍스트 속성
email : 메일주소 속성
password : 비빌번호 속성
number : 숫자 속성
file : 파일 속성
placeholder : 라벨에 캡션을 주는 속성값
minlenght : 최소 글자수
maxlenght : 최대 글자수
required : 필수
min : 최소값
max : 최대값
step : 단계값

type ="radio"

textarea 태그

```
<label for="n1">한국</label>	
<input type="radio" id="n1" name="country" value="한국" checked>

<label for="n2">일본</label>	
<input type="radio" id="n1" name="country" value="일본">

<label for="n3">중국</label>	
<input type="radio" id="n1" name="country" value="중국">


<label for="content">문의내용</label>
<textarea id="content" cols="40" rows="8"></textarea>

한국

일본

중국

문의내용

type = "radio" : 체크박스
textarea태그 : 글상자

select태그

option태그

<select name="job">
	<option selected disabled>직업을 선택해 주세요. </option>
		
	<option value ="학생">학생</option>
  
	<option value ="회사원">회사원</option>
	<option value ="기타">기</option>
</select>

직업을 선택해 주세요. 학생 회사원 기

select/ option태그 : 콤보상자

table태그

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

상품정보
상품	색상	가격
맥북 프로 16인치	그레이	3,000원
아이패드 프로 12인치	레드	1,000원
블루	1,000원
총 가격	5,000원

table태그 : 데이터테이블을 만든다.
rowspan 속성으로 같은 데이터의 행을 합친다.
colspan 속성으로 같은 데이터의 열을 합친다.
thead : 테이블의 머릿글
tbody : 테이블의 본문
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

section

article

aside

div

<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 youNice to meet youNice to meet youNice to meet youNice to meet youNice to meet you</p>
</article>
</main>

<aside></aside>

<footer>
		
</footer>


<div></div>


<form>
		
</form>

main : 본문을 구성하는 함수
Section
article
aside : 중요도가 떨어지는 섹션을 구성
-div : 본문의 구역을 설정함

Reviwe

R을 공부하면서도 느낀거지만 생소한 언어에 대한 스트레스와 답답함은 반복적인 사용으로 점점 줄어들 것으로 예상된다. 강의 막바지에는 집중을 하지 못해 많은 부분을 놓쳤 강의를 다시 들을 수 있으니 큰 문제는 되지 않을 듯하다.

생소한 언어인 만큼 코드를 좀 좀더 쉽게 읽을 수 있는 노하우나 태그 속성값 메서드 등에도 적응이 필요하다.

웹 프로그래밍에서도 아직 많은 부분이 남았지만 이전의 파이썬 또한 두어번 혹은 그 이상의 복기를 목표로 두고 계획을 짜겠다.

hwanginchang

Idealist

다음 포스트

#1 Html_ 210628

대구 AI스쿨_웹프로그래밍

웹프로그래밍 이란?

웹프로그래밍의 구성

<열린태그></닫힌태그>

개발도구

독학할 수 있는 곳

유튜브

사이트

Sub site

HTML_Sublime Text

기본구성 head/head

body - a 태그

H1~6 태그

Title

Title

Title

Title

Title

Title

기업명 또는 서비스명

h태그의 하위 태그

Service

Service 부제

Comerce

Design

Security

Portfolio

p태그 span태그 mark태그

ol, ul, li 태그

butten태그

video태그

iframe 태그

audio 태그

HTML_ex2_Sublime Text

style 태그(CSS)

form 태그

label 태그

input 태그

type ="radio"

textarea 태그

select태그

option태그

table태그

header태그

main

section

article

aside

div

footer

Reviwe

#2 웹프로그래밍 설계도 210629

0개의 댓글