Dev Log #1 - 6월 28일

Juhui_0304·2021년 6월 28일

Dev Log

목록 보기

1/49

오늘 학습한 내용

첫 번째, 웹을 구성하는 언어

시각적인 정보란 이미지(로고), 텍스트 모두 포함한다. 정보 영역을 담당하는 언어가 html이다. 버튼색상, 폰트색상, 공간의 특정구역을 설정하는 디자인적인 영역을 담당하는 언어는 css이다. 마우스를 올렸을 때 어떠한 효과가 나타나는 기능, 메뉴를 눌렀을 때 컨텐츠가 달라지는 기능 등, 기능을 담당하는 언어는 javascript이다.

이렇게 웹사이트를 담당하는 언어는 크게 html, css, javascript 3가지가 있다.

웹을 건축 설계도로 비교하자면, 설계도면 - html, 내부 인테리어 - css, 지문인식으로 문을 여는 것 같은 기능적인 면 - javascript로 예시를 들 수있다.

두번째, 웹 사이트 레이아웃의 종류

https://blog.teamtreehouse.com/which-page-layout

데모(Demo)라는 버튼을 클릭하면 각각의 어떤 레이아웃을 가지고 있는 지 확인할 수 있다.

✅ Static Layout Exapmles(공간에 대한 크기의 변화X, 레이아웃의 구조 변화X) 이런 류의 사이트를 정적인 웹사이트라고 한다. 과거에 만들어진 웹사이트가 다 이러한 경우이다.

✅ Liquid Layout Examples(공간의 크기가 브라우저의 크기에 맞춰서 줄어들고 있다. 레이아웃의 구조 변화X) 이런 류의 사이트를 동적인 웹사이트라고한다.

✅ Adaptive Layout Example(공간에 대한 크기의 변화O, 레이아웃의 구조 변화O) 적응형 웹사이트라고 한다. 현재는 과거와 다르게 디바이스 기기 자체가 다변화되고 있다. 다양한 기기에 맞춰서 제작이 필요해졌다. 단, ~~뚝뚝 끊기면서 공간과 레이아웃이 리사이징~~ 되고 있다.

✅ Responsive Layout Examples(자연스러운 리사이즈 효과, 특정 시점에서 모바일 버전 레이아웃으로 바뀌는 것) 반응형 웹사이트라고한다.

👉 최근에는 적응형, 반응형 섞어서 나온다. More page Layout에서 확인할 수 있다.

세 번째, 다양한 웹사이트의 종류를 접할 수 있는 사이트(레퍼런스 참고 )

디비컷 https://www.dbcut.com/bbs/index.php
지디웹 http://www.gdweb.co.kr/main/
Awwwards https://www.awwwards.com/
(웹 사이트에 평가할 수가 있다. 케이스 스터디를 할 때 위너라는 목차로 넘어가서 수상작으로 보는 편이 좋다. 해외의 다양한 케이스를 보고 싶을 때 확인하면 좋다.)
미디어 쿼리 https://mediaqueri.es/
(pc, mobile, tablet 모드 등 다양한 레이아웃을 확인할 수 있다.)
All bookmarks http://bm.straightline.jp/
(주로 일본 웹사이트가 많다.)

네 번째, 개발 용어

프론트엔드 개발자: 웹사이트, 서비스를 만들었을 때 웹사이트를 제작하고 서버와의 데이터 통신 연결작업을 진행하거나 다양한 인터랙션을 만드는 개발자
벡앤드 개발자: 사용자가 볼 수 없는 곳을 개발하며 로그인 할때 등록된 아이디 인지 체크하는 등 고객 정보를 안전하게 보관하는 개발자
크로스 브라우징: 웹사이트를 제작할 때 웹사이트가 크롬, 익스플로러, 사파리, 오페라, 엣지 등 다양한 모든 브라우저에서 동일하게 출력되게 하는 것. 여러 버전의 브라우저에 맞추어서 앞단 개발 행위를 하는 것을 크로스 브라우징이라고 한다. 모바일 버전에서도 똑같은 결과값이 나와야한다.(ios, Android)
웹 표준: 정보의 성격에 맞는 태그를 사용해야한다. 정확한 태그에 맞춰서 작성하는 과정을 웹 표준이라고 한다. 웹 표준을 잘 지켜야 구글 검색에 잘 노출이 된다.
웹 접근성: 내가 만든 사이트가 장애인분들이 사용할 때에도 문제가 없어야 한다. 시각 장애인 분들을 고려해서 사이트를 만드는 기법을 웹 접근성이라고 한다.
FTP: 웹사이트를 제작한다고 했을 때 내가 만든 결과물을 어떤 도메인 주소를 입력했을 때 페이지가 열려야 한다. 결과물을 서버에다가 올려야지만 그 서버에 올려진 페이지 정보를 확인 할 수 있다. 작업 피씨와 서버를 연결해주는 터널, 채널과 같은 역할을 담당하는 것
라이브러리: 웹사이트를 제작할 때, 콘텐츠가 바뀌는 효과, 화살표에 따라 내용물이 슬라이딩 되는 것 등과 같은 기능은 많은 개발자가 많이 만들어 놓음. 다른 사람이 만들어 놓은 기능의 결과를 라이브러리라고 한다.

다섯 번째, 개발 도구

비주얼스튜디오코드(VScode): 무료
Sublime Text: 무료
Webstom: 유료

여섯 번째, 독학으로 공부할 수 있는 채널, 웹 사이트 제작시 참고 사이트

생활코딩
얄팍한 코딩사전
thenewboston
Wes Bos : javascript30편을 보는 게 좋다.
프리코드캠프 https://www.freecodecamp.org/
w3schools https://www.w3schools.com/
모던 자바스크립트 https://ko.javascript.info/
에드위드 https://www.edwith.org/
(참고) statcounter https://gs.statcounter.com/
(참고) caniuse https://caniuse.com/
(참고) nuli https://nuli.navercorp.com/
(참고) html validator https://validator.w3.org/
(참고) 코드펜 https://codepen.io/

1. html 기본 구조

<!DOCTYPE html>

<html>
  <head>
  </head>

  <body>
  </body>

</html>

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

✔️ head 태그

<head>
	
  <meta charse="utf-8">

  <meta name="description" content="Web Tutorial">
  <meta name="keywords" content="html,css,tutorial,web">
  <meta name="author" content="Juhui Han">

  <title>HTMl, CSS Tutorial</title>

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

<열린태그 속성="속성값">
<열린태그></닫힌태그>
</닫힌태그>

속성값은 정해진 것도 있고 개발자가 임의로 넣어두는 속성값이 있다.
다양한 head 태그 참조 https://github.com/inkweon7269/HEAD
탭 요소의 이름을 변경할 때 쓰는 태그는 title 태그이다.
파비콘 넣는 법

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

✔️ body 태그

a 태그 안에 target 속성에서 _blank를 입력하면 새로운 창이 뜨고 _self값을 입력하면 기본 디폴트값으로 현재창에서 컨텐츠가 뜬다.
img 태그를 사용할 때에는 alt 속성을 무조건 넣어야 한다. 시각장애인들이 이미지 정보를 만났을 때 알 수가 있다. 스크린리더 프로그램에서는 텍스트 정보만 읽기 때문 시각장애인분들을 위해 alt값을 꼭 명시해야한다.(웹접근성)
width값, hieght 값 중 하나만 지정하면 알아서 이미지 비율에 맞게 지정해서 나타난다
width, height 값 모두 지정하면 비율이 깨져서 나온다. 단 잘려지지 않는다.
주석 처리할 때 주석 안에 주석을 넣지 못한다.
h1태그는 가장 중요한 정보를 담을 수 있는 태그이다. 중요한 태그이므로 하나의 문서에서 한번만 사용한다. 기업명 또는 서비스명으로 사용한다.
h1~h6태그는 등급 순서대로 사용해야한다. h2 바로 다음에 h4를 쓰는 등 중간 단계를 거치지 않고 쓰는 것은 안된다.
span태그는 단편적인 단어를 표기할 때가 일반적이다. 어떤 문장안에서 특정 단어에 디자인을 적용하고자 할 때 사용한다.
mark태그는 특정 단어를 강조하고자 할 때가 일반적이다. 일종의 백과사전, 국어사전과 같은 역할(특정단어를 풀이해야할 때)을 담당한다. 인용문구, 위인전 명언 자체를 이용할 때 자주 사용한다. 기본적으로 노란색인 백그라운드를 가지고 있다.
ol태그는 순서가 있는 리스트
ul태그는 순서가 없는 리스트, 순서의 영향을 받지 않는 리스트
ol, ul태그 안에는 li태그가 먼저 나와줘야한다.
button태그는 버튼을 만들고자 할 때 사용한다. 메뉴 버튼가 다른 태그이다. 팝업이 열렸을 때 확인이나 닫기 같은 버튼을 만드는 태그이다. mark태그와 같이 배경색깔이 기본적으로 그레이가 들어가있고 bordert선이 들어가 있다.
button태그 안 submit속성은 데이터 통신과 관련이 있다.
button태그 안 button속성은 데이터 통신과 관련이 없다.
웹 브라우저 안에 비디오 영상 넣는 법

<video src="sample.mp4" controls></video>

웹 브라우저 안에 비디오 자동재생 하는 법

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

autoplay만 입력해서는 자동재생이 안된다. muted를 넣으면 소리가 켜지지 않는 상태에서 자동재생된다.
웹 브라우저 안에 비디오 반복재생 하는 법 : loop 속성을 사용하면 반복재생 할 수 있다.

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

이미지 태그처럼 width와 height속성을 사용해서 넓이와 높이를 지정할 수 있다.

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

유튜브 동영상을 가져오는 법은 퍼가기를 누른 후 그대로 붙여주기를 해주면 된다. 그 안에 넓이와 높이 속성을 수정할 수 있다.
iframe태그는 보안상의 이유로 유튜브 영상을 가져올 때를 제외하고 특별하게 사용하는 경우는 없다.
오디오 태그

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

오디오 태그는 자동재생이 불가하다. 크롬 설정을 변경하거나 자바스크립트를 이용한다. 사용자가 갑작스런 사운드에 놀랄 수 있기때문에 기본적으로 막아둠. width, height값을 사용할 수 없다.

메인페이지는 index.html을 이용한다.
label, input 태그

<form method="post">

	<label for="name">이름</label>
	<input type="text" id="name" placeholder="이름을 입력하세요" required >

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

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

</form>

label 태그는 아이디, 비밀번호와 같은 입련칸을 만들게 됬을 때 입력칸을 대표하는 제목이나 이름의 역할, 라벨링
input태그는 입력칸을 만든다. type에 따라 속성 값이 달라진다.
label의 for속성과 input의 id속성을 꼭 동일하게 작성해주어야 한다. 입력 항목이 무엇인지 for와 id연결만으로 브라우저에서 체크해준다.

<label for="name">이름</label>
<input type="text" id="name">

placeholder 속성은 안내문구 같은 것이다.

<label for="mail">이메일</label>
<input type="email" placeholder="이메일을 입력하세요." id="mail">

숫자만 입력하는 input 태그

<label for="num">숫자</label>
<input type="number" id="num" placeholder="숫자만 입력">

파일 업로드만 가능한 input 태그

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

accpet는 확장명을 지정해 줄 수 있다. ex)image/png, image/jpg, image/gif
required 속성은 필수 작성해아하는 입력칸을 지정해준다. required속성은 form 태그와 함께 써줘야한다.
minlentgh, maxlength는 길이를 지정하고자 할 때 사용된다.
min, max, step는 type이 number인 곳에서 사용된다.

체크박스 만들기

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

name의 역할은 서버에게 "country라는 항목에서 한국이라는 데이터를 전달을 한거야" 라고 서버에게 알려주는 것. 일단 항목에 대한 그룹화하는 것.
value 속성 값을 꼭 지켜야한다. 입력하지 않으면 빈 값으로 서버에 저장하게 된다.

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

radio는 단일 체크만 가능하다.
checked 속성은 이미 체크되어있는 상태로 표기되어 나타내준다.

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

textarea안에서 cols와 rows속성을 이용해서 크기와 높이를 설정해줄 수 있다.
cols 한 줄에 최대 몇 글자까지 작성 가능한 지 지정
rows 보여지는 박스에 최대 몇 줄까지 작성 가능한 지 지정

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

최초의 상태에서 "직업을 선택해 주세요" 를 보여주고 싶을 때에는 selected 속성을 사용한다. 실무에서 자주 사용하는 태그이다.
선택을 할 수 없게끔 하는 장치가 disabled 속성을 이용한다.
테이블 태그로 표만들기

<table>
  <caption>상품정보</caption>
  <thead>
    <tr>
      <th>상품</th>
      <th>색상</th>
      <th>가격</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>맥북 프로 16인치</td>
      <td>그레이</td>
      <td>13000원</td>
    </tr>
    <tr>
      <td>아이패드 프로 12인치</td>
      <td>블랙</td>
      <td>10000원</td>
    </tr>
    <tr>
      <td>아이패드 프로 12인치</td>
      <td>화이트</td>
      <td>15000원</td>
    </tr>
  </tbody>
</table>

caption: table이 어떤 표를 말하고 있는 지 알려준다.(표의 정보)
thead: 테이블의 머리
tr: 하나의 라인이라고 보면 된다.
th: 각 항목의 제목
tbody: 테이블의 내용
tr: 하나의 라인
td: th와 쌍을 맞추어야 한다.
rowspan: 같은 행(세로) 목록을 병합한다.

<table>
  <caption>상품정보</caption>
  <thead>
    <tr>
      <th>상품</th>
      <th>색상</th>
      <th>가격</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>맥북 프로 16인치</td>
      <td>그레이</td>
      <td>13000원</td>
    </tr>
    <tr>
      <td rowspan="2">아이패드 프로 12인치</td>
      <td>블랙</td>
      <td>10000원</td>
    </tr>
    <tr>
      <td>화이트</td>
      <td>15000원</td>
    </tr>
  </tbody>
</table>

colspan: 같은 열(가로) 목록을 병합한다. th에 속한다.

<table>
  <caption>상품정보</caption>
  <thead>
    <tr>
      <th>상품</th>
      <th>색상</th>
      <th>가격</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>맥북 프로 16인치</td>
      <td>그레이</td>
      <td>13000원</td>
    </tr>
    <tr>
      <td>아이패드 프로 12인치</td>
      <td>블랙</td>
      <td>10000원</td>
    </tr>
    <tr>
      <td>아이패드 프로 12인치</td>
      <td>화이트</td>
      <td>15000원</td>
    </tr>
  </tbody>
  
  <tfoot>
    <tr>
      <td colspan="2">총 가격</td>
      <td>5,000원</td>
    </tr>
  </tfoot>
</table>

header태그는 네비게이션까지 같이 포함해서 가장 상단을 나타낸다. 상단 영역을 만들 때 header태그 안에 h1태그와 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태그는 익스플로러에서 공식적으로 지원해주고 있지 않기 때문에 role이라는 속성값을 지정해주어야한다.
section태그는 각각의 영역을 잡아줄 때 사용한다. 영역을 대표하는 타이틀이 있어야한다.(예를 들면, h2태그)
section태그는 main안 쪽 또는 main바깥 쪽 모두 사용할 수 있다.
실제 정보가 들어가는 공간은 article 태그 안에 사용한다. section과 마찬가지로 영역을 대표하는 타이틀 태그가 필요하다. 본문 내용이 들어가면 p태그를 사용한다.

<main role="main">
  
  <section>
    <h2>Services</h2>
  </section>

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

<aside>
</aside>

<footer>
</footer>

aside태그는 main 바깥쪽에 작성한다. 본문의 정보와 관계성이 떨어지는 내용을 담는다.
footer태그는 가장 하단에 들어가는 정보를 넣는 태그이다.
홈페이지는 크게 3가지 영역으로 나뉜다. (header, main, footer)
하지만 이런 3단 영역은 디자인에 따라 달라지기도 한다.
div태그는 큰 3가지 영역안에 또 다른 구역을 넣는 태그이다. 임의의 작은 구역들은 div태그로 처리한다.
form태그는 공간을 만들 때 사용하는 태그는 아니지만 사용자의 정보를 담아내는 것을 표현한다. form태그 안에 input, label 태그가 들어간다.
header, nav, main, section, article, footer 태그는 html5에서 새롭게 나온 태그이다.

오늘의 학습 후기(어려웠던 점, 개선할 점)

html태그를 처음 접했을 때 쉬운 느낌이 없지 않아 있었는데 지금은 공부하면 할수록, 배우면 배울수록 어렵다고 느껴진다😂.. 오늘 학습하면서 어려웠던 점은 태그들의 위치와 속성인 것 같다. 각각 큰 3가지 영역(header, main, footer)에 어떠한 태그들이 위치하고 태그와 함게 어떤 속성값을 이루는 지에 대해 어려움을 느꼈다.(예를 들면, label for의 속성과 input id속성이 같아야 한다는 점) html 태그와 속성값을 눈에 자주 익혀 헷갈림이 없이 쓸 수 있도록 노력을 해야겠다. 오늘 첫 수업임에도 불구하고 처음 알게된 태그와 속성, 기능값 그리고 html 기본 개념에 대해서 다시 복습하고 배우는 하루였다..! 내일도 열심히 강의를 듣고 벨로그에 기록하는 것을 목표로 해야겠다.🙂

Juhui_0304

하루하루 성장하는 것을 목표로 합니다🌟

다음 포스트