210628 개발일지

JANE Jeong·2021년 6월 28일

html 개발언어 개발용어 대구AI스쿨 웹사이트레이아웃 웹프로그래밍

대구 AI 스쿨

목록 보기

1/51

📌 학습한 내용

1. 개발 언어의 종류

HTML - 정보 영역
CSS - 디자인 영역
Java Script - 기능 영역

2. 웹사이트 레이아웃의 종류

(참고 사이트 : https://blog.teamtreehouse.com/which-page-layout)
(1) Static Layout (정적인 웹사이트)
: 창 크기(브라우저 크기)에 관계 없이 항상 원래 형태의 틀을 유지하는 웹사이트 (과거 웹사이트의 대부분의 형태)

(2) Liquid Layout (동적인 웹사이트)
: 브라우저 크기에 따라 공간의 크기가 줄어드는 웹사이트(레이아웃의 구조가 바뀌는 것은 아니지만 공간의 크기가 유동적)

(3) Adaptive Layout (적응형 웹사이트)
: 브라우저 크기에 따라 공간의 크기가 줄어드는 웹사이트 + 레이아웃의 구조 자체도 달라짐 (웹 사이트에 접근하는 기기가 다양해짐에 따라 등장)

(4) Responsive Layout (반응형 웹사이트)
: 자연스러운 resize 효과와 특정 지점에서 모바일 버전 레이아웃으로 변화하는 웹사이트 -> 최근에는 적응형과 반응형을 섞어쓰는 것이 일반적)

3. 참고 사이트

다른 사용자들이 만든 웹사이드 디자인들을 참고할 수 있다.

국내
DB컷, 지디웹
국외
Awwwards - 각 디자인에 대한 평가 가능, 수상작 위주로 체크
Mediaqueri.cs - PC+ 테블릿 + 모바일 버전 한눈에 확인 가능
bm.straightline.jp - 주로 일본웹사이트 위주

4. 기본 개발 용어

프론트 엔드
사용자가 보는 모든 화면의 페이지를 제작
백엔드
사용자가 보지 못하는 뒷단의 개발 (고객정보 보호, 관리, 보관, 로그인 관리 등)
크로스 브라우징
여러 버전의 브라우저에 맞춰 앞단 작업을 하는 것(익스플로러, 사파리, 크롬 등에 맞춰 다 작동할 수 있도록 하는 것)
웹 표준
정확한 태그에 맞춰서 작성하는 과정 그 자체
웹 접근성
장애인분들도 웹사이트를 사용할 수 있도록 하는 것
FTP
File Transfer Protocol, 내 PC와 서버를 연결해주는 채널(터널)
라이브러리
다른 사람이 만들어 둔 결과물(기능)을 이용 가능

5. HTML(1)

html 시작과 `<head>` 태그

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf=8">
    <meta name="description" content="Web Tutrial">
    <meta name="keywords" content="html, css, tutorual, web">
    <meta name="author" content="Jane Jeong">

    <title>HTML, CSS Tutorial</title>

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

<!DOCTYPE html> : html5 버전 문서를 사용한다는 것을 선언.
html은 <열린태그>주요 텍스트 정보 / 하위 <열린태그></닫힌태그></닫힌태그>로 구성된다.

<head>는 작성된 문서와 관련된 간단한 요약 정보를 보여준다.
그 내용으로는 <meta> 태그 내에 '속성 = "속성값"'을 담는다. (meta 태그는 닫힌태그가 없다.)

<meta name="description"> 속성은 웹사이트의 간단한 한 줄 요약을 만든다.
<meta name="keywords"> 속성은 웹사이트와 관련된 간단한 단어 정보(태그)를 만든다.
<meta name="author"> 속성은 해당 사이트의 소유주 혹은 제작자를 담고있다.

<title> : 브라우저의 탭창에 나타나는 제목을 지정해준다.
<link> : <meta> 태그와 동일하게 닫힌 태그를 가지고 있지 않으며 브라우저 탭창에 나타나는 사이트 아이콘을 설정할 수 있다.

`<body>` 태그

`<a>` 태그, `<img>` 태그

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

<img src="" alt="사과 이미지" width="150px" height="80px">
<img src="https://img.icons8.com/emoji/452/red-apple.png" alt="사과 이미지" width="150px" height="180px">

<a> : 속성값에 작성된 링크로 이동
target속성에 _blank 속성값을 넣어주게 되면 해당 탭이 아닌 빈탭으로 이동해 링크가 열리게 된다. 반면 _self 혹은 target 속성값을 입력하지 않으면 해당 페이지를 기준으로 열리게 된다.
<img> : src의 속성값에 해당하는 이미지를 로컬/웹에서 불러온다.
alt :
-이미지가 정상적으로 나타나지 않을 경우
-시각장애인들을 위한 screen reador 기능에 사용
width & height : 이미지의 크기를 변경
(이때, 비율은 달라지지만 이미지가 잘리지는 않는다.)

`<h>` 태그

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

<h>는 항상 순차적으로 사용해야 한다. h1 태그 다음에 바로 h3, h4, h5, h6 태그가 올 수 없다.
주로 가장 중요한 정보를 담고 있으므로 하나의 문서에서 한 번만 사용한다.

<h1>기업명 또는 서비스명</h1>
	<h1>
		<a href="https://www.naver.com/">
			<img src="https://img.icons8.com/emoji/452/red-apple.png" alt="애플">
		</a>
	</h1>

일반적으로 <h>와 <a>, <img>를 함께 쓰는 경우가 많다. (사이트에서 기업의 로고를 누르면 홈페이지의 기본 페이지로 넘어가는 것이 그 예)

(위의 애플 이미지를 누르면 a 태그의 속성값으로 이동한다.)

`<p>` 태그

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

<p> : 본문을 입력할 때, 주로 이용. 글자간 공백이 많이 입력되어도 한 칸으로 출력된다.

(<p> 안에서)
<span> : 단순히 단어를 표기할 때 혹은 글자에 디자인을 적용하고 싶을 때 이용
<mark> : 특정 단어를 강조하고자 할 때(사전과 같은 역할을 부여하고 싶을 때, 단어에 대한 풀이를 진행하고자 할 때)이용 (<mark> 태그는 디폴드 값으로 노란색이 적용된다.)

`<ol>` 태그와 `<ul>`태그

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

<ol> : 순서가 있는 리스트 정보를 표현
<ul> : 순서가 상관없는 리스트 정보를 표현
둘 다 <li>를 반드시 포함해야 하며, <li> 로 시작해야 한다.

(href="#" 은 임의의 속성값)

`<button>` 태그

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

<button> 태그의 type 의 속성값중

button : 백엔드와의 데이터 통신을 위한 속성값
submit : 단순히 팝업창 등을 닫을 때 사용

(그레이 색상과 검정색 테두리는 디폴트 값)

video 태그

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

    ></video>

src : 파일 불러오기
autoplay : muted와 결합해서 사용해야 함(chrom의 제약)
loop : 비디오 반복 재생
img와 마찬가지로 width와 height 변경 가능

`<iframe>` 태그

: 유튜브 등의 웹사이트 영상을 가져올 때 사용

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

이때 별도의 페이지가 현재 HTML 문서 안에 만들어져 있는 것.
<video> 와는 다르게 autoply muted 와 width, height를 이용할 수 없다.
controls와 loop는 사용 가능

6. HTML(2)

`<head>` 태그

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>2회차 HYML 강의</title>
</head>

`<body>` 태그

`<label>` 태그와 `<input>` 태그

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

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

	</form>

for과 id는 항상 동일하게 지정해준다.
<<input> (<form>과 함께 써야함)의 속성>

type="text" : 텍스트 값 입력
placeholder : 일종의 notice, 입력이 시작되면 사라짐
minlength="" : 최소한의 글자 수
maxlength="" : 최대한의 글자 수
required : 필수적으로 입력받아야 하는 정보에 대해 지정
type="mail" : @를 넣어서 작성해야 한다.
type="password" : 입력된 글자를 보이지 않게 표기
type="number" : 숫자만 입력 가능
type="file" : 파일 첨부 가능
accept="" : 업로드할 파일의 확장자를 지정 가능

checkbox 속성과 radio 속성

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

checkbox : 중복 선택이 가능하다.

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

radio : 하나만 선택 가능

name : 서버에 전달시 좌표의 역할, 항목들을 그룹으로 묶어줌
value : 앞단으로 부터 서버에 전달되는 데이터

`<textarea>` 태그

: 장문을 입력받을 때 사용

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

cols="" : 너비, 한 줄에 들어가는 글자수를 제한
rows="" : 박스 내에 한 번에 보여지는 줄의 수, 초과할 시 스크롤로 나타남.

`<select>` 태그와 `<option>` 태그

: 콤보상자 형태로 출력할 때 사용

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

<slect>에는 <option>이 반드시 포함되어야 한다.

selected : 해당 문구가 처음에 선택된 상태로 나타남
disable : 재선택을 불가하게 함

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

<caption> : 도표에 대한 제목
rowspan="" : 행 병합
colespan="" : 열 병합

(사진에 나타난 표 테두리는 head 태그에서 style 태그를 지정한 것)

공간을 만드는 태그

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

<footer></footer>

<div></div>

<form></form>

<header> 안에는 웹 사이트 상단에 들어가는 부분을 포함. 상단로고를 구성하는 <h1> 와 <a>, <img> 등이 이에 속한다. 또한 <nav> 안에는 <ul> 그리고 <la>, <a> 등이 존재

본문 영역에는 여러 종류의 태그가 사용될 수 있다.

<main>를 사용할 때, role을 반드시 지정해줘야 한다. (익스플로러에서 main태그를 지원하지 않기 때문이다.)
<section> 에서는 영역을 대표하는 타이틀이 반드시 있어야 한다. 따라서 <h2>를 반드시 써줘야 한다.
<article> : 실제 정보가 들어가는 공간, section 태그와 동일하게 영역을 대표하는 타이틀이 있어야 하므로 <h2>가 있어야 한다.
<aside> 는 본문 내용과는 관계성이 떨어지는 내용을 기입
<footer> : 웹사이트에서 가장 밑단에 들어가는 정보(사업자 정보, 주소 등)
`
: 임의의 작은 구역들, 웹사이트 제작시 가장 많이 쓰임
<form> : (사용자에게 정보를 입력받는 공간)

그 외 태그 종류

(참조) https://www.w3schools.com/tags/default.asp

Inline & Block 요소

<span>Inline</span>
<span>Inline</span>
<span>Inline</span>

<h1>Block</h1>
<h1>Block</h1>
<h1>Block</h1>

Inline : 글자가 한 줄로 출력되는 것
(공간에 대한 크기 설정 x, 상하 배치작업 x)
Block : 줄 바꿈이 일어나면서 y축으로 정렬되는 것
(공간에 대한 크기 설정 o, 상하 배치작업 o)

📌 학습내용 중 어려웠던 점

p 태그 안에 span 태그와 mark 태그의 차이점이 여전히 모호하다.
table 태그와 그 외의 태그들의 사용
Inline과 Block의 요소
velog 사용법

📌 해결방법

아무래도 시간에 쫓기다 보니 집중해서 듣지 못한 부분이 있는 것 같다. table 태그와 페이지 구성 태그, 그리고 중요하다고 말씀하신 Inline과 Block의 요소에 대해서는 다시 한 번 인강을 듣고 복습을 해야할 것 같다. table에 대한 대략적인 이해는 했지만, 보다 자세한 학습을 위해 유튜브와 다른 사용자들의 velog를 참조할 예정이다.

📌 학습소감

우선 HTML문법을 생전 처음 접해봤지만 Python과 비교했을 때 코드가 훨씬 간단하고 직관적으로 이루어져 있어 이해하는데 큰 어려움은 없었다. 다만 강의 뒷부분으로 갈수록 수준의 높아지는 반면 시간에 쫓겨 집중력은 떨어졌기에 뒷 부분을 다시 수강해야 한다. 특히 오늘은 수업 내용의 어려움 보다는 velog에 나의 기록을 남기는 부분이 더욱 힘들었다.😅

JANE Jeong

늘 새로운 배움을 추구하는 개린이 🌱

다음 포스트

210628 개발일지

대구 AI 스쿨

1. 개발 언어의 종류

2. 웹사이트 레이아웃의 종류

3. 참고 사이트

4. 기본 개발 용어

5. HTML(1)

html 시작과 `<head>` 태그

`<body>` 태그

`<a>` 태그, `<img>` 태그

`<h>` 태그

`<p>` 태그

`<ol>` 태그와 `<ul>`태그

`<button>` 태그

video 태그

`<iframe>` 태그

6. HTML(2)

`<head>` 태그

`<body>` 태그

`<label>` 태그와 `<input>` 태그

checkbox 속성과 radio 속성

`<textarea>` 태그

`<select>` 태그와 `<option>` 태그

`<table>` 태그

공간을 만드는 태그

header 태그

그 외 태그 종류

Inline & Block 요소

210629 개발일지

0개의 댓글

210628 개발일지

대구 AI 스쿨

1. 개발 언어의 종류

2. 웹사이트 레이아웃의 종류

3. 참고 사이트

4. 기본 개발 용어

5. HTML(1)

html 시작과 <head> 태그

<body> 태그

<a> 태그, <img> 태그

<h> 태그

<p> 태그

<ol> 태그와 <ul>태그

<button> 태그

video 태그

<iframe> 태그

6. HTML(2)

<head> 태그

<body> 태그

<label> 태그와 <input> 태그

checkbox 속성과 radio 속성

<textarea> 태그

<select> 태그와 <option> 태그

<table> 태그

공간을 만드는 태그

header 태그

그 외 태그 종류

Inline & Block 요소

210629 개발일지

0개의 댓글

html 시작과 `<head>` 태그

`<body>` 태그

`<a>` 태그, `<img>` 태그

`<h>` 태그

`<p>` 태그

`<ol>` 태그와 `<ul>`태그

`<button>` 태그

`<iframe>` 태그

`<head>` 태그

`<body>` 태그

`<label>` 태그와 `<input>` 태그

`<textarea>` 태그

`<select>` 태그와 `<option>` 태그

`<table>` 태그