6.28 웹프로그래밍

김민지·2021년 6월 28일
대구AI스쿨웹프로그래밍웹프로그래밍1일차
0

개발일지

목록 보기
1/13

학습 중 어려웠던 점 & 해결방법

ai스쿨을 시작 하기 전에 웹프로그래밍을 4개월간 배웠기 때문에 크게 어려웠던 점은 없었다.

학습소감

전에 배웠던 곳에서는 header와 main, footer를 태그로 따로 코딩하지않고
div class로 도배를 했었고, 웹디자인기능사 시험 또한 모든 html구조를 div로 짰었다.
모든 것을 div로 코딩하는 것이 아니라 header,main,footer라는 태그를 사용하니,
좀 더 체계적으로 홈페이지를 구성할 수 있다는 생각이 들었다.
그리고 제대로 알지 못했던 label과 input요소를 자세히 알 수 있어서 좋았다.
녹화된 강의라서 라이브로 질문을 할 수 없는점은 조금 아쉽지만,
내가 잘 아는 내용은 배속으로 조금 빠르게 넘기거나, 헷갈리는 부분은 다시 복습을
할 수 있다는 점은 좋은 것 같다.
그리고 개발일지를 매일 작성하면서 그날 그날 배운것을 리마인드시키고, 나중에 헷갈리는 부분은 다시 일지를 찾아보면서 공부를 할 수 있다는 점이 매우 좋은 것 같다!!

1.웹프로그래밍이란?

*참고사이트

            디비컷 <https://www.dbcut.com/bbs/index.php> 
            지디웹 <http://gdweb.co.kr/>  
            어워즈 <https://www.awwwards.com/>  
            미디어쿼리 <https://mediaqueri.es/>  (pc웹,모바일버전)
            <http://bm.straightline.jp/all>  
            프리코드캠프
            <w3schools.com>  
            모던 자바스크립트 튜토리얼
            <edwith.org>  네이버 무료 코딩교육
            <statcouner.com>  전세계 브라우저 점유율확인
            can i use - 프론트엔트 용어 - 크로스브라우징 체크 
            NULI - 웹사이트 제작 노하우 (네이버)
            html validator - 웹표준,웹접근성 코드 체크 
            코드펜 <codepen.io>  
            <helbak.com>

프론트엔드 개발이란?

사용자가 보는 모든 화면의 구성,기능,페이지를 개발. 앞단영역

백엔드 개발이란?

사용자가 보지 못하는 프로그램영역 개발. 뒷단영역

크로스 브라우징

제작한 웹사이트가 여러 종류의 브라우저에 동일하게 동작 및 구현.
웹 - 파이어폭스, 마이크로 엣지, 크롬, 오페라 등등
모바일 - 안드로이드, 아이폰

웹표준

정보의 성격에 맞는 태그를 맞추어 작성
적절한 태그를 사용하여 코딩해야 구글 검색엔진에 노출될 확률이 올라간다.

웹접근성

비장애인뿐만 아니라 장애인도 사용할 수 있어야한다.

FTP

내가 만든 결과물을 서버에 올려야 다른 사람이 확인할 수 있다.
내 pc와 서버를 연결해주는 터널 역할.

라이브러리

슬라이드, 탭 기능 등 이미 만들어진 기능들.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>

</body>
</html>

HTML 태그

h1태그는 한번만 사용한다. (기업명 또는 서비스명, 로고)

h1~h6 숫자는 순서대로 적어야한다. 

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

Title

Title

Title

Title

Title
Title

span : 특정단어의 디자인 정정

mark 특정단어의 강조 (사전,인용,명언 등)

<p><mark>사과</mark>는 사과 나무에서 나는 열매이다.</p>

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

ol/ul(unordered list)

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>
  1. 메뉴1
  2. 메뉴2
  3. 메뉴3
  • 메뉴1
  • 메뉴2
  • 메뉴3

button - type: button/submit (submit은 데이터를 전달)

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

닫기 확인

video - controls(비디오 컨트롤 ui) autoplay 자동재생 muted(음소거) loop(반복재생)

<video src="sample.mp4" controls autoplay muted loop></video>
<audio src="audio.mp3" controls muted loop></audio>

2.HTML

label

input(type:text/checkbox/radio)

  • for & name 속성값 동일하게(label,input연결해줌)
  • required : 필수로 입력

input

  • name : 서버에 전달할 때 좌표 역할
  • value : 서버에 전달하는 데이터
  • checked : 처음에 선택되어 있음

article 실제 정보가 들어가는 공간

aside 본문 정보와 관계없는 내용

div 임의의 작은 공간

form 사용자가 입력하는 정보를 받아내는 공간

header, main, footer는 익스프로러 9이상에서만 허용
*사이트 제작전에 크로스브라우징 범위 (기획) 확인하고 제작하기

 
	<form method="post">

	<label for="name">이름</label>
	<input type="text" 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="6" maxlength="12">

	<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, image/gif">

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

	</form>
 
<label for="name">이름</label>
<input type="text" 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="6" maxlength="12">

<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, image/gif">

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

</form>
    <form method="post">
    <label for="n1">한국</label>
	<input type="checkbox" id="n1" name="country" value="한국">
	<label for="n1">일본</label>
	<input type="checkbox" id="n1" name="country" value="일본">
	<label for="n1">중국</label>
	<input type="checkbox" id="n1" name="country" value="중국">
한국 일본 중국 
	<label for="n1">한국</label>
	<input type="radio" id="n1" name="country" value="한국" checked>
	<label for="n1">일본</label>
	<input type="radio" id="n1" name="country" value="일본">
	<label for="n1">중국</label>
	<input type="radio" id="n1" 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>

문의내용

직업을 선택해 주세요 학생 회사원 기타 
     <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 rowspan="2">1,000원</td>
			</tr>
			<tr> 
				<td>블루</td> 
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="2">총 가격</td>
				<td>5,000원</td> 
			</tr>
		</tfoot>
	</table>

	<header>
		<h1>
			<a href="#">
				<img src="">
			</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" 속성값 넣어야함* 

       <main role="main">
		<section>
			<h2>Service</h2>
		</section>
		<section>
			<h2>Portfolio</h2>
		</section>

		<article>
			<h2>Article title</h2>
			<p>Nice to meet you</p>
		</article>
	</main>


	

	<aside></aside>

	<footer></footer>

	<div></div>
	<form>
		<label></label>
		<input type="" name="">
	</form>
</body>
</html>
profile
김민지
프론트엔드개발자 지망생
다음 포스트

6.29 웹프로그래밍

0개의 댓글