6월 28일 개발일지

김우성·2021년 6월 28일

html

대구AI스쿨

목록 보기

9/26

1. 학습내용

실습내용

학습 및 상기 내용

웹사이트의 레이아웃 (4가지)

1. Static Layout (정적인 website)

공간크기의 변화가 없고 레이아웃 구조자체도 변하지않음. 항상 원래 형태의 틀을 유지하고 있음

과거에 만들어진 사이트 대부분이 정적인 웹사이트임

2. Liquid Layout (동적인 website)

어떤 브라우저 크기에 맞춰 공간크기 자체가 줄어들거나 늘어나는 웹사이트. 레이아웃의 구조 자체는 변하지않음

3. Adaptive Layout (적응형 website)

'뚝뚝 끊어지며' 공간크기가 달라지고 최종적으로는 레이아웃 구조자체도 변함

pc뿐만 아니라 노트북, 스마트폰 등 다양한 기기에 맞춰 website를 제작해야할 필요성이 생겨서 등장

4. Responsive Layout(반응형 website)

공간이 '자연스럽게' resize되고 특정지점에서 적응형과 마찬가지로 레이아웃 구조자체가 변함.

html 기본골격구조 및 head에 대한 구글 검색 알고리즘

html을 배운다는 것은 태그가 무엇이고 그에 대응하는 속성이 무엇인지 아는 것이고 속성값을 내가 커스텀 할 수 있는지 아니면 정해진 규칙대로 따라야하는지 암기하는 언어이다.

<열린태그>
	<열린태그>
    	 	 (content)
	</닫힌태그>
</닫힌태그>

예시

<a herf = "naver.com"></a>

여기서 a는 열린태그, /a는 닫힌태그, herf는 속성, naver.com은 속성값이다.

DOCTYPE html = html5(최신html문법)으로 작성하겠다

head는 요약정보를 담는 곳이며 meta는 요약, 정보, 기타 등을 담아낼때 쓰는 태그

charset = utf-8 은 문자를 세팅하는 것이다(기본적으로 들어감)

1. description은 웹사이트의 간단한 한줄요약을 뜻하고 구글검색엔진에 뜰 확률 UP

2. keyword는 웹사이트와 관련된 단어정보, 블로그 태그역활 즉, 구글검색엔진 확률 UP

3. author은 사이트소유자 or 만든이

meta태그의 3가지 속성은 구글검색에 잘 걸리기 위해서 설정하는것(낚시성 사이트로 인해 최근에 바뀜)

마지막은 홈페이지이름 옆에 아이콘을 생성하고 싶을 때 사용 - 같은 공간에 있어서 입력(상대주소), 주소입력(절대주소)

<!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="Woosung Kim">
    
	<title>HTML, CSS Tutorial</title>
	<link rel="shortcut icon" type="image/icon" sizes="32x32" href="favicon.ico">
</head>

a

a 태그는 문서를 링크시키는 태그이다. 타겟의 속성값에 '-blank' 넣으면 새탭, '-self'나 속성값이 없으면(기본값) 현재탭

img

img 태그는 이미지삽입 태그

width와 height 한쪽만 입력시 비율이 이미지에 맞게 자동으로 조정되고 둘다 조정하여 이미지 크기변동시 비율은 달라지지만 이미지가 잘리진 않는다.

alt는 웹접근성과 관련된 부분

시각장애인이 사이트를 이용할 때 스크린리더를 사용하는데 텍스트만 인식하기 때문에 alt로 이미지 정보를 알려줄수있다. 그리고 간혹 이미지를 못 불러오는 경우 그곳에 어떤 이미지가 있는지 알려줄 수 있다.

<a href="https://www.naver.com/" target="_self">네이버</a>	
<img src="apple.png" alt="사과이미지" width="150px" height="100px">
<img src="" alt="apple image">

h

h1~h6는 타이틀 정보를 입력하는 틀

h1은 가장 중요한 정보를 담고있다(보통 기업명이나 서비스명)

동급의 정보는 서비스내에 존재하지않음 (1번만 사용)

<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://img.icon8.com/emoji/452/red-apple.png" alt="apple">
    	</a>
</h1>

예시(Service와 Portfolio는 동급정보)

h3 다음 나오는건 h4, 바로 h5 이렇게 작성못함, 글자크기는 css로 변경가능

<h3>Service</h3>
<h4>Service 부제</h4>
<h5>Commerce</h5>
<h5>Design</h5>
<h5>Security</h5>

<h3>Portfolio</h3>

p

p는 본문정보를 담는 태그

글자정보를 입력할 때 규칙 : 아무리 띄워써도 공백 한줄만 인식

span

span은 단편적인 단어를 표기해야하는 상황, 문장안에서 특정단어를 디자인하고자 할때

mark

mark는 특정단어를 강조하고싶을때 사용(인용문구나 백과사전에서 특정단어를 풀이해야하는 상황에서 단어를 강조하고싶을때)

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

<style>
	p span {
		color:  red;
		font-size: 20px;
		background-color: pink;
	}
	mark {
		background-color: gray;
	}
</style>

ol, ul, li

ol, ul은 리스트를 보여주는 태그

차이점은 ol은 순서가 있는 리스트, ul은 순서가 없는(서로간 동급) 리스트

정해진 값이 없을 때는 디폴트값으로 #을 넣어줌

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>

video 삽입

video 재생이 안되면 controls넣기 (속성값 넣어도 되는데 비디오태그 사용시 굳이 속성값을 쓰지않고 속성만으로 사용)

autoplay - 접속시 자동play (구글에서 제약을 걸어놔서 재생안됨)

소리를 mute시 동작이됨

loop - 반복재생

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

유튜브 삽입

iframe은 유튜브 영상 삽입시 사용.

실무에선 보안상 이슈로 잘안쓰이나 유튜브넣을려면 이것 밖에 없다.

페이지내에 별도로 페이지가 생성되는 방식

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

오디오 삽입

audio는 자동재생을 크롬에서 막아놈(mute해도 안됨)

할려면 자바나 크롬설정 변경해야함(엣지는 됨)

크기값 변경안됨

<audio src="sampleaudio.mp3" controls=""
	autoplay="" 
	muted="" 
	loop="" 
	>	 
</audio>

button

팝업 생성시 닫기, 확인 등을 만들때 사용한다.

button타입은 데이터통신과 상관없이 단순히 팝업닫는용

submit타입은 입력하는칸이 있고 버튼클릭시 입력한 정보를 백엔드개발자(서버)에게 전달할때 사용됨

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

form, label, input

form은 공간을 만드는 태그(required의 역할을 알기위해 - form태그와 결합해서 사용해야되서)

label은 아이디나 비밀번호를 입력하는 칸을 만들었을때 입력칸을 대표하는 제목이나 이름

for 사용이유 이름(글자) 클릭시 그 영향을 받는 입력항목이 무엇인지 확인해줌 - for과 id의 연결망으로 사용자 정보를 입력하는 태그를 작성 (for속성값과 id 속성값이 동일해야함)

type에 적히는 속성값에 따라 나타내는 형태와 사용법이 달라짐

minlength(최소글자), maxlength(최대글자) - 보통 비밀번호길이 지정시 사용

placeholder은 칸안에 글자가 뜸(안내문구를 넣는것)

required : 필수적으로 입력하게 설정

입력칸의 크기는 css로 조정가능

<form method="post">
	<label for="name">이름</label>
	<input type="text" placeholder="이름을 입력하세요" id="name" required="" minlength="2" maxlength="8">
		
	<label for="email">이메일</label>
	<input type="email" placeholder="이메일을 입력하세요" id="email" required="">
		
	<label for="pw">패스워드</label>
	<input type="password" placeholder="최소 6글자, 최대 12글자" id="pw" required=""
			   minlength="10" maxlength="15" 
	>

min : 10에서부터 시작(시작점)

max : 40까지만 증가(최대점)

step : 올리거나 내릴시 5씩증가 5씩감소

accept : 적힌 확장자만 올릴 수 있음

	<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 tpye='submit'>제출</button>
</form>

checkbox

checkbox는 여러항목을 선택할 수 있고 사용시 name을 넣어야한다 - 서버에다가 전달할 때 일종의 좌표역활(grouping)

한국서버 체크시 country라고 하는 체크박스 항목에 한국이라고 하는 데이터를 전달한거야 라고 서버한테 보내주는것

value는 실질적으로 서버에 보내는 데이터. value에 속성값이 없다면 빈문자가 전달된것이나 다름없음

checked는 처음부터 체크가 되도록 할때 사용 (예시에는 한국이 체크되있도록)

<label for="n1">한국</label>
<input type="checkbox" id="n1" name="country" value="한국" checked="">
<label for="n2">일본</label>
<input type="checkbox" id="n2" name="country" value="일본">
<label for="n3">중국</label>
<input type="checkbox" id="n3" name="country" value="중국">

radio

radio는 단일체크

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

textarea

네모박스안에 장문의 글을 적을 수 있다 (회사지원시 자기소개작성칸)

css로 공간 크기 조절가능, cols와 rows로도 조절이가능하다.

row - 최대 몇줄, cols 텍스트 - area의 너비

예시에는 한줄에 40자까지가능

네모상자 크기를 넘어가면 공간크기는 유지한 상태로 스크롤바가 생겨 더 긴문장 작성가능

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

select

정해진 option값 중에서 고르는것

disabled를 추가하면 그 항목은 선택 할 수 없다

select에 들어가는 태그로는 option만 존재해야한다.

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

table

표를 만들때 사용하는 태그

table에 대한 caption은 제목을 나타내고 thead(table의 머리), tr은 하나의 라인

항목명은 th, 보통 thead에 tr을 두개쓰는 경우는 드물다

항목에 대응하는 구체적인 값들은 tbody(table의 몸) 나타내고 th와 td는 쌍을 맞춰야한다 (3개면 3개)

행 병합은 rowspan(rowspan = '2' : 두줄까지 병합), 열병합은 colspan

테이틀 하단에 정보 기입시 tfoot(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">아이패드 프로 16인치</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>

홈페이지의 몸,가슴,배 구조 및 자주쓰이는 태그

회사로고는 가장 중요한 정보라 h1, 클릭시 메인화면이동 a, 보통 이미지로 되어있어서 img

요즘 ul,li 태그 사용하는 곳에 제품정보 넣는 경우가 자주 생김. 그래서 리스트 정보가 메뉴인지 제품정보인지 나타내줄 필요가 생김. 그래서 등장한 것이 nav태그(메뉴)

<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태그 자주사용, 지금 단계에선 main은 하나의 문서에 한번만 사용된다고 알아두자. main태그는 익스플로러에서 지원이 되지않아서 role 속성을 넣어서 익스플로러에게 main이라고 알려주어야한다.

section 태그 사용시 그 영역을 태표하는 타이틀이 있어야한다(h2로 작성, 이것이 section을 사용할 때 규칙), main 태그 바깥쪽과 안쪽 둘다 활용가능

article은 신문을 보시면 정보를 담고 있는 영역이 나누어져있다. 실제 정보가 들어가는 공간자체를 나타낼때 사용(공간을 대표하는 타이틀이 필요(h2)), 본문 내용은 p로 넣음

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

aside는 본문내용과 관계성이 떨어지는 정보를 넣는다라고 생각

aside를 제외하고 머리(header)-가슴(main)-배(footer) 곤충의 3요소처럼 3가지 영역으로 분리가된다(디자인에 따라 달라지기도함 - ex)디자이너가 footer을 안넣는 경우도 있음)

<aside></aside>

<footer></footer>

div

어떤 공간구조를 설계할 때 임의의 공간을 만들어야 할때가 있음(큰구역 안에 작은영역)

예시로 설계도면에 거실이나 주방같은 큰구역들(header,nav,main,section,article,footer)은 나타나있으나 장롱자리, 식탁자리 같은 공간은 설계도면에 표시하기 힘듬.

설계도면에 표시하기 힘든 구역들은 div태그로 표시한다. (가장 많이 사용)

<div></div>

2. 어려운점

강의 듣는 도중엔 이해했으나 막상 수업이 끝나고 저녁시간이 되니 어떤 내용이였는지 이해가 잘되지않았음.

그리고 각종 용어에 대한 이해도 부족

3. 해결방법

이해가 안가는부분 강의시청 및 구글검색 그리고 직접 다시 입력해봄으로써 제대로 이해함

용어는 그때 그때 필요한 용어를 연습장에 적어놓고 수업이나 개발중 필요하다싶을 경우 다시 꺼내 익힐 예정

4. 소감

html을 예전에 접해본적 있어서 조금 익숙한 감은 있었으나 몇년전이라 감만 있었을뿐 새롭게 배우는 느낌이였다.

그리고 처음이라 개발자 노트 작성과 복습을 같이하다보니 시간이 굉장히 많이 들었는데 다음번 작성때는 효율적으로 내가 진짜 어려웠고 이해가 안갔는 부분이나 이부분은 적어놓으면 좋겠다 싶은 것 위주로 간략하게 적어놓는 방식을 써보아야겠다.

김우성

매우 긍정적인 개발자

이전 포스트

7월 29일 개발일지

다음 포스트

7월 30일 개발일지

0개의 댓글

6월 28일 개발일지

대구AI스쿨

1. 학습내용

실습내용

학습 및 상기 내용

웹사이트의 레이아웃 (4가지)

1. Static Layout (정적인 website)

공간크기의 변화가 없고 레이아웃 구조자체도 변하지않음. 항상 원래 형태의 틀을 유지하고 있음

과거에 만들어진 사이트 대부분이 정적인 웹사이트임

2. Liquid Layout (동적인 website)

어떤 브라우저 크기에 맞춰 공간크기 자체가 줄어들거나 늘어나는 웹사이트. 레이아웃의 구조 자체는 변하지않음

3. Adaptive Layout (적응형 website)

'뚝뚝 끊어지며' 공간크기가 달라지고 최종적으로는 레이아웃 구조자체도 변함

pc뿐만 아니라 노트북, 스마트폰 등 다양한 기기에 맞춰 website를 제작해야할 필요성이 생겨서 등장

4. Responsive Layout(반응형 website)

공간이 '자연스럽게' resize되고 특정지점에서 적응형과 마찬가지로 레이아웃 구조자체가 변함.

최근에는 적응형 + 반응형 섞어가며 website를 만드는 경우가 대부분 (예시로 header부분은 적응형으로 해서 자연스럽게 resize되는 효과를 없애거나 특정 영역만 resize를 주는 등)

html 기본골격구조 및 head에 대한 구글 검색 알고리즘

html을 배운다는 것은 태그가 무엇이고 그에 대응하는 속성이 무엇인지 아는 것이고 속성값을 내가 커스텀 할 수 있는지 아니면 정해진 규칙대로 따라야하는지 암기하는 언어이다.

예시

여기서 a는 열린태그, /a는 닫힌태그, herf는 속성, naver.com은 속성값이다.

DOCTYPE html = html5(최신html문법)으로 작성하겠다

head는 요약정보를 담는 곳이며 meta는 요약, 정보, 기타 등을 담아낼때 쓰는 태그

charset = utf-8 은 문자를 세팅하는 것이다(기본적으로 들어감)

1. description은 웹사이트의 간단한 한줄요약을 뜻하고 구글검색엔진에 뜰 확률 UP

2. keyword는 웹사이트와 관련된 단어정보, 블로그 태그역활 즉, 구글검색엔진 확률 UP

3. author은 사이트소유자 or 만든이

meta태그의 3가지 속성은 구글검색에 잘 걸리기 위해서 설정하는것(낚시성 사이트로 인해 최근에 바뀜)

마지막은 홈페이지이름 옆에 아이콘을 생성하고 싶을 때 사용 - 같은 공간에 있어서 입력(상대주소), 주소입력(절대주소)

a

a 태그는 문서를 링크시키는 태그이다. 타겟의 속성값에 '-blank' 넣으면 새탭, '-self'나 속성값이 없으면(기본값) 현재탭

img

img 태그는 이미지삽입 태그

width와 height 한쪽만 입력시 비율이 이미지에 맞게 자동으로 조정되고 둘다 조정하여 이미지 크기변동시 비율은 달라지지만 이미지가 잘리진 않는다.

alt는 웹접근성과 관련된 부분

시각장애인이 사이트를 이용할 때 스크린리더를 사용하는데 텍스트만 인식하기 때문에 alt로 이미지 정보를 알려줄수있다. 그리고 간혹 이미지를 못 불러오는 경우 그곳에 어떤 이미지가 있는지 알려줄 수 있다.

h

h1~h6는 타이틀 정보를 입력하는 틀

h1은 가장 중요한 정보를 담고있다(보통 기업명이나 서비스명)

동급의 정보는 서비스내에 존재하지않음 (1번만 사용)

예시(Service와 Portfolio는 동급정보)

h3 다음 나오는건 h4, 바로 h5 이렇게 작성못함, 글자크기는 css로 변경가능

p

p는 본문정보를 담는 태그

글자정보를 입력할 때 규칙 : 아무리 띄워써도 공백 한줄만 인식

span

span은 단편적인 단어를 표기해야하는 상황, 문장안에서 특정단어를 디자인하고자 할때

mark

mark는 특정단어를 강조하고싶을때 사용(인용문구나 백과사전에서 특정단어를 풀이해야하는 상황에서 단어를 강조하고싶을때)

ol, ul, li

ol, ul은 리스트를 보여주는 태그

차이점은 ol은 순서가 있는 리스트, ul은 순서가 없는(서로간 동급) 리스트

정해진 값이 없을 때는 디폴트값으로 #을 넣어줌

ol, ul 태그안에 들어가는 요소는 li 태그가 먼저나와야함 (약속)

video 삽입

video 재생이 안되면 controls넣기 (속성값 넣어도 되는데 비디오태그 사용시 굳이 속성값을 쓰지않고 속성만으로 사용)

autoplay - 접속시 자동play (구글에서 제약을 걸어놔서 재생안됨)

소리를 mute시 동작이됨

loop - 반복재생

유튜브 삽입

iframe은 유튜브 영상 삽입시 사용.

실무에선 보안상 이슈로 잘안쓰이나 유튜브넣을려면 이것 밖에 없다.

페이지내에 별도로 페이지가 생성되는 방식

오디오 삽입

audio는 자동재생을 크롬에서 막아놈(mute해도 안됨)

할려면 자바나 크롬설정 변경해야함(엣지는 됨)

크기값 변경안됨

button

팝업 생성시 닫기, 확인 등을 만들때 사용한다.

button타입은 데이터통신과 상관없이 단순히 팝업닫는용

submit타입은 입력하는칸이 있고 버튼클릭시 입력한 정보를 백엔드개발자(서버)에게 전달할때 사용됨

form, label, input

form은 공간을 만드는 태그(required의 역할을 알기위해 - form태그와 결합해서 사용해야되서)

label은 아이디나 비밀번호를 입력하는 칸을 만들었을때 입력칸을 대표하는 제목이나 이름

for 사용이유 이름(글자) 클릭시 그 영향을 받는 입력항목이 무엇인지 확인해줌 - for과 id의 연결망으로 사용자 정보를 입력하는 태그를 작성 (for속성값과 id 속성값이 동일해야함)

type에 적히는 속성값에 따라 나타내는 형태와 사용법이 달라짐

minlength(최소글자), maxlength(최대글자) - 보통 비밀번호길이 지정시 사용

placeholder은 칸안에 글자가 뜸(안내문구를 넣는것)

required : 필수적으로 입력하게 설정

입력칸의 크기는 css로 조정가능