TODAY
HTML 인강
-6월 1일부터 2주 MS AZ-900 취득, 2주동안 머신러닝관련 수업,
이번주부터 프론트엔드 진도가 시작되었다. 앞선, 4간의 공부내용은 시간날때 틈틈히 올려야 겠다.
학습한 내용
1.1회차 인강_웹프로그램밍이란 무엇인가?
-
Web site를 구성하는 언어
웹사이트는 HTML, CSS, JS 이 3가지로 구성한다
- HTML : 시각적인 정보를 담당하는 '개발언어'
건출물에 비교 - 설계도면
- css : 버튼의 색상, 폰트 색상 등 공간의 특정구역을 설정하는 '디자인적 언어'
건축물에 비교 - 내부 인테리어
- JS : 마우스를 올렸을 때, 동작이 다라지는 등 '기능을 담당'하는 언어
건출물에 비교 - 지문인식도어, IoT조명 등 기능적 측면담당
-
Web site 레어어 아웃의 종류
구글에서 treehouse which layout static~ 검색(레이어 아웃 종류
- tatic Page Layout 정적인 웹사이트
브라우저 폭을 줄였을 때, 공간에 대한 크기 변화없음. 레이어아웃 변화없음.
과거 대부분 이 종류에 해당
- Liquid Page Layout 동적인 웹사이트
양쪽 끝까지 전체 다 차지함.
브라우저 사이즈에 맞춰서 유동적으로 리사이즈. 레이어아웃 변화 없음.- Adaptive Page Layout 적응형 웹사이트
브라우저 폭을 특정시점에서 뚝뚝 끊어지면서 공간의 크기가 변홤. 레이어아웃 변화 있음.
과거 pc기반이 다양한 브라우저 접근 기기(핸드폰, 태블릿 등)가 나오는 환경에 맞춰 나온 종류 - Responsive Page Layout 반응형 웹사이트
공간이 자연스럽게 리사이즈. 특정 지점에서 모바일버전으로 레이어아웃이 변화함.
요즘은 특정구역에 때라 적응형/반응형을 섞어서 제작하는 경우가 많음
- Adaptive Page Layout 적응형 웹사이트
-
개발용어
-프론트엔드 : 사용자가 보는 모든 페이지를 제작하는 사람
-백엔드 : 사용자가 보지 못하는 뒷단의 영역을 제작하는 사람
-
Web site를 만들 때 고려해야되는 요소
- 크로스브라우징
: 다양한 브라우저(엣지, 크롬, 사파리등) 동일한 출력/화면/기능을 해야됨
여러 가지의 브라우저, 여러 버전에 맞춰 앞단 작업을 하는 행위자체.
웹사이트 제작시, 고요할 첫 번째 요소. 모바일 버전도 같은 결과값이 나와야됨.
- 웹표준
: html 정보의 성격에 맞는 태그를 작성해야됨. 정확한 태그에 맞춰서 작성하는 자체
- 웹접근성
: 만든 사이트가 장애인등 다양한 사람들을 고려해서 제작해야됨.
- FTP
: 계발자가 웹사이트 제작시, 가지고 있는 기기로 제작 > 서버로 올림 > 사용자가 만든결과물을 확인
기기와 서버와 연결하는 터널
- 라이브러리
:다른사람이 만든 기능의 결과물
보통 웹사이트를 제작시, 이미지 변화, 클릭시 변화등 다른사람이 만들어 놓은 기능을 사용하는 기능 가져와서 씀.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="wed Tutorial"> <meta name="keyword" content="html,css, Tutorial,wed"> <meta name="author" content="Minjung Lee"> <title>HTML, CSS TUTORIAL</title> <link rel="shortcut icon" type="image/icon" size = "32*32" href="favicon.ico"> </head> <body> </body> </html>
- **HTML**
- 아래의 코드들은 HTML 작성시, 디폴트로 작성해야되는 태그와 속성들
<열린테그 속성 ="속성값">주요 텍스트 정보 or <열린태그></닫힌태그></단힌태그>
- <!DOCTYPE html>
**html 5 최신 문법으로 작성하겠다**라고 선언하는 것. 버전 5이하의 문법은 적용되지 않음.
- html></html
이 태그안에서 html를 작성하면 됨
- Head 부분
-head></head
간단한 요악영역을 받는 부분. 출력화면에 나오지않는다. 잘 작성해야 구글 검색 엔질에 잘 걸림.
-meta
-meta charset="utf-8"
문자를 셋팅. 한글이 깨지지 않도록 해준다
-meta name="description" content="wed Tutorial
간단한 웹사이트 관련 한줄 요약
-meta name="keyword" content="html,css, Tutorial,wed
블로그태그 같은 것. 웹사이트와 관련된 간단한 단어정보.
-meta name="author" content="Minjung Lee"
사이트의 제작자 또는 소유자
-title /title'
타이틀의 정보를 넣음. 탭의 사이트명을 입력.
- link rel="shortcut icon" type="image/icon" size = "32*32" href="favicon.ico"
탭의 파비콘을 넣을 때, 사용되는 코드
- Body 부분
- body></body
눈에 보이는 정보를 담아내느 영역
```html
<a href="https://www.naver.com/" target="_blank">네이버</a>
<img src="apple.png" alt="사과 이미지" width="100px" height="80px">
<img src="https://img.pixers.pics/pho_wat(s3:700/FO/72/69/75/30/700_FO72697530_e201a9a0211e7b9f5e819ae4c788d023.jpg,700,700,cms:2018/10/5bd1b6b8d04b8_220x50-watermark.png,over,480,650,jpg)/posters-red-apple.jpg.jpg" alt="사과 이미지">
- a></a
다른(특정)페이지로 이동하는 버튼을 만들고자 할때.
- a href="#" target="_blank/self">#</a
- href="이동하고 자하는 페이지의 주소"
- target="_blank(새탭으로 이동)/self(현탭에서 이동)" - img
이미지를 넣을때 사용하는 태그
-img src="#" alt="#" width="#" height="#"
- src="이미지주소"
- alr="웹접근성을 위한 간단한 이미지에 대한 내용"
- width="넚이" heght="높이"
둘 중 하나만 설정시. 원본비율에 맞춰, 다른 속성이 설정됨. 둘 다 동시에 설정할 수 있음. 그렇게 되면 원본비율이 깨질 수 있음. 이미지 비율이 변경.<h1>Title</h1> <h2>Title</h2> <h3>Title</h3> <h4>Title</h4> <h5>Title</h5> <h6>Title</h6>
-h></h
헤드라인의 약자, 문서안에서 타이틀역활을 담당하는 글짜를 넣고 싶을 때 사용 / 글자의 크기가 큰게 중요(숫자가 작을수록 중요한 정보를 담고 있다/ 우선순위, 등급이 있음. )
동급인 h3 넣고 또 그의 서브타이틀 하위섹션을 넣을 때 순서대로 넣는다 순서가 등급을 나타냄
숫자를 하나하나씩 줄여가야됨. 갑자기 3>5>6이 안됨.
- h1></h1
문서에서 가장 중요한 정보를 담음.기업명 또는 서비스명(로그명).
다른 h1 있는것은 기업명과 동급이라는 것과 같음.
하나의 문서에서 한 번만 사용이 됨.
```html
<h1>
<a href="#">
<img src="#" alt="#">
</a>
</h1>
<h3> servics</h3>
<h4>servics 부제</h4>
<h5>commercs</h5>
<h5>design</h5>
<h5>security</h5>
<h3>portfolio</h3> <p>
<span>동해물과</span>과 백두산이 마르고 닳도록
</p>
<p><mark>사과</mark>는 사과나무에서 나는 열매이다</p>- Body부분(2)
-p></p
본문 내용을 담음. 안에 스페이스는 아무리 많이 쳐도 공백은 하나만 인식함.
-'span>동해물과</span'
단편적인 단어만 표기해야될 때, 눈에 뛰는 효과없음 일반적.어떤 문장안에서 특정 단어의 디자인을 넣어야 할때 사용 (온니 단어로써 사용할 때 노타이틀/).스펜으로만 문자를 감싸면 css로 디자인이 가능.
-'mark>사과</mark'
정단어를 강조하고 싶을 때, 여기에서의 강조는 일종의 백과사전,국어사전의 역할.어떤 단어에 대해 강조하고 싶음. 인용문구, 국어사전,백과사전처럼 단어풀이때 강조하고 싶을 때
디폴트가 노랑색. 변강하고 싶을 때 css로 디자인하면됨.
<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>- Body부분(2)
- 'ol></ol'
순서가 있는 리스트정보를 기입할 때 사용,숫자로 표현- 'ul></ul'
순서가 없는 리스트/순서를 바꿔도 문제가 없는 경우. 점으로 표현
뉴정보를 만들 때 각각의 리스트의 성격을 띄고 있음. 우선순위가 없다.(서로간의 등급이 없다)
기본 태그의 형테에 구속되지말기 / 다양하게 활용
ol/ul 안에 들어가는 내용물은 무조건 li가 들어가야됨 (이건 약속임!!!!)
- 'ul></ul'
<button type="button">닫기</button>
<button type="submit">열기</button>- Body부분(3)
- 마트처럼 기본디자인 있음. css로 변경
- type="button"
데이터와 상관없음 그냥 팝업을 닫기...- type="submit"
입력하는 정보를 백엔드 서버에게 전달을 할 때 사용 > 데이터 전송
- type="submit"
<video src="sample.mp4" controls autoplay muted loop width="300px" height="300px"> </video>- 비디오 넣기
-controls
속성값을 안 넣어도 무관. 플레이버튼, 음향조절 등
-autoplay
페이지 출력시 바로 비디오 재생. 크롬에서는 제어하기 때문에 반드시 muted랑 같이 써야됨.
-muted
페이지 출력시 바로 음소거되는 속성
-loop
영상이 끝나면 반복재생이 됨.
<iframe width="300" height="" src="https://www.youtube.com/embed/G8GaQdW2wHc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> - 유튜브영상 넣기
유튜브 공유<>퍼가기를 클릭하면 관련 위와 같은 관련 태그를 제공. 붙이면 됨
- 사이즈 조절가능- 'iframe></iframe'
동영상 경로, 웹사이트 링크주소 넣으면 페이지내의 별도의 페이지를 형성해서 작동이 됨.
보안상의 이슈로 잘 사용하지 않음. 유튜브말고는 사용을 잘 안함.
- 'iframe></iframe'
<audio src="sample_au.mp3" controls autoplay muted loop ></audio>- 오디오 넣기
-controls&loop
기능은 비디오와 동일, 오디오태그에 가능한 속성
-autoplay&muted
비디오와 다르게 크롬 브라우저에서 오디오관련 태그로 실행할 수 없음.
2.HTML?
<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글자 최대 10글자" 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">
<button type="submit">제출</button>
</form>- ''(1)
입력칸을 만들게 되었을때, 그 입력칸의 제목이나 이름을 담당-라벨링 - ''
타입에 들어가는 속성이 어떠한 종류인지 따라서 나타나는 형태와 사용법이 달라짐.
-' & '
라벨의 for 와 인풋의 id를 동일하게 속성값을 넣어야함.
-type="text"
글자만 입력
-minlength="2" maxlength="8" 글자수를 제한.
-type="email"
이메일형태를 입력
-type="password"
입력시 텍스트가 안보이고 암호화되서 보임.
- minlength="10" maxlength="15"
-type="number"
숫자만입력
- min="10" max="40" step="5" 최소 10부터시작 최대40까지 입력, 옆버튼으로 증가하는 단위는 5.
-type="file"
-accept="image/png, image/jpg" 확장자를 제한
-type="submit"
-required
반드시 입력을 해야되는 경우 넣는태그. 해당영역에 입력값을 넣지않으면, 안내문이 나오면서 입력이 안된다.
-placeholder
안내문구를 넣는 역활.글자를 입력하는 순간 사라지고, 빈값이되면 다시 나타남. 사용자에게 일종의 노틱스. 글자가 많으면 짤리는 데 그떈 css로 길이 조절이 가능함.
<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="중국"> -->
<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="중국">
- 'label><input</label'(2)
-input type="checkbox"
-name="country" value="한국"
네임 = 서버에게 전달을 할 때 일종의 좌표의 역할을 함. 벨류 = 화면에 보이지는 않으나 서버에 보낼 때 컨튜리:한국 이라는 정보를 보내줌. 네임 국가를 선택하는 체크박스> 벨류 실질적으로 서버에게 전달되는 데이터 안하면 빈문자가 전될되는 것과 같기 때문에 꼭 벨류에 전달하기.
-type="radio"
당일체크만 가능하게
-checked
처음부터 체크가 되어있음.
<label for="content">문의내용</label>
<textarea id='content' cols="40" rows="8"></textarea>
- label></label(3)
- textarea></textarea
조금 더 작문의 글을 사용자에게 받고자 할 때 사용. 더 크게 만들고 싶으면 cols(텍스트에어리어의 넓이(글자수로 크기를 정할수 있음/rows(글자를 기준으로 몇줄을 넣을 수 있다. 넘어가면 자동으로 스크리률이 만들어짐.) 또는 css로 가능
직업을 선택해주세요. 학생 회사원 기타```html
-select></select'
일종의 드롭다운메뉴를 만듬. <옵션>과 묶어서 작성. 옵션의 벨류(서버에게 데이터를 보낼 때 데이터의 값이 벨류의 값)
-option value="#"></option'옵션(
젤 앞에 직업을 선택해주세요. 사용자에게 용도 알림
재선택이 안되게 selected disabled 후자만 넣으면 학생으로 디폴트값으로 정해짐(재선택을 못하게 함) 설렉팅을 넣어서 젤 앞에 나오게 함.
-기본적으로 안에들어가는 태그는 옵션만 존재해야됨 (ul.ol이 li와 셋트인 것처럼!!) 꼭 주의
```HTML
<table>
<caption>상품정보</caption>
<thead>
<tr>
<th>상품</th>
<th>색상</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td>맥북</td>
<td>그레이</td>
<td>3000</td>
</tr>
<tr>
<td rowspan="2">아이패드</td>
<td>레드</td>
<td>10000</td>
</tr>
<tr>
<td>222</td>
<td>22222</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">총가격</td>
<td>5000</td>
</tr>
</tfoot>- 표만들기
-'상품정보'
어떠한용도인지 사용자에게 알려쥼
-''
<header>
<h1>
<a href="#">
<img>
</h1>
<nav>
<ul>
<li><a href="#"></a>메뉴1</li>
<li><a href="#"></a>메뉴2</li>
<li><a href="#"></a>메뉴3</li>
</ul>
</nav>
</header>
<main role='main'>
<section>
<h2>Service</h2>
</section>
<section>
<h2>portfolid</h2>
</section>
<article>
<h2>Article title</h2>
<p>dkaldsja;dsjfla;kfl;askfal;djf</p>
</article>
</main>
<aside></aside>
<footer></footer>
<div></div>- 공간을 만드는 테그
홈페이지 구성 -<상단- 본문-하단>
- 상단영역의 태그
' header></header'
-들어가는 요소 상단네비게이션
-ul/li/a 메뉴버튼 /제품정보인지 구분필요
-상단에 네비테그사용 >로고가 들어감 > h1 넣음- 본문에 해당되는 태그
-'main role='main'></main'
하나의 문서안에서 한번만 사용(지금의 단계).익스프로어가 인지를 못하기 때문에 속성role을 삽입하여 메인인아는 역할을 줌( 꼭 넣어야함)
-'section></section'
영역을 대표하는 타이틀
-'article></article'
제정보가 들어가는 공간, 대표하는 타이틀이 필요>h2입력 본문내용을 입력하고 싶으면 태그는 넣는다.
-aside></aside'
문의 내용과 관계성을 떨어지는 내용을 넣음
-하단영역의 태그
'footer></footer'
웹사이트에서 가장 하단에 들어가는 정보(주소, 전화번호등) -그 외
'div></div'
구조설계할 때 임의의 공간을 만들어야하는 경우가 있음
임의의 공간이란? 큰 구역 상단의 태그외 작은 영역이 있음(거실>소파,티비를 놓을 자리를 설계도면에 표현하기 힘든 임의의 작은 구역을 해당태그로 설정
- 본문에 해당되는 태그
학습한 내용 중 어려웠던 점 또는 해결못한 것들
- HTML이라 학습내용자체는 어렵지 않았다. 하지만 개발일지작성에 많은 시간을 사용해서 제대로된 복습을 하지 못한 것 같다.
- 해당 언어의 구조화가 아직 익숙하지 않아 인식이 잘 되지 않는다.
- 학습내용은 난이도는 낮지만, 생소한 분야라 이해를 하기 위해서 같은 개념을 반복해서 본다고 진도가 느리다.
- 태그-속성의 연관성에 대한 이해가 낮은 상태이다.
-section></section'에 대한 계념이 잘 되지 않았다.
해결방법 작성
- 개발일지를 좀 더 간단하게 작성해서 복습시간과 그외 공부시간을 확보할 것이다.
- 해당 언어를 자주 코딩하여 구조화에 익숙해 질 것이다.
- 연관성에 대해 구글링을 하여 이해했다.
- 이해도가 낮은 속성에 대해서는 사전에 구매한 교재로 이해하였다.
학습소감
첫 날이여서 그런지ㅜㅜㅜㅜ 진도가 너무 늦게 나갔다. 내일 매니저님께 문의해서 개발일지에 관해 문의를 구해서 시간단축을 해야겠다. 인강에 5시간, 개발일지에 3시간 이상을 소요했다... 게다가 velog작성이 마크업형식이라 작성법을 알아보는데도 따로 시간이 걸려서ㅜㅜ내일에는 부디 개발일지에 시간을 단축하기를!! 앞선 한 달간의 수업으로 내가 소화할 수 있을까고민이였는데, 오늘 HTML이라서 그런지 모르겠지만. 학습자체는 즐겁게 해서 관련 걱정은 조금 해결되었다. 다른 공부꺼리도 많은데... 시간과 체력이 너무 없다...
예상과 같이 출간하니 완전 구조가 개판이였다..''로 급하게 수정했는데.... 내일은 욕심내지 말고 심플하게 잘해봐야지 + 몇 번을 수정했는 지모른다...
잘하고, 잘하고 싶고, 잘해야되는 사람