짜잔, 벌써 10분의 1이 지나갔다.
한 강 한 강 들으면서 차오르는 퍼센티지를 보며 조금씩 완강을 향하는구나를 느낀다 😀😀
2주차부터 본격적으로 HTML 진도를 나갔다.
그럼 무엇을 공부했을까?
01. [HTML] 마크업 언어에 대한 소개
1 2 | <p>p 태그입니다.</p> <h1>h1 태그입니다.</h1> | cs |
Visual Studio 확장 플러그인 탭에서 Live Server 를 검색하여 다운로드 받으면 된다.
그리고 다시 HTML 파일로 넘어가 Command + Shift + P ( 윈도우는 아마 Command 대신 Control 일 것이다. ) 를 눌러 실행창을 띄운다.
Live Server: Open With Live Server 를 입력하여 엔터를 누르면, 웹브라우저로 해당 HTML 파일이 열리게 된다! 'Live' 만 쳐도 위 명령이 나올 것이다.
코드를 한 번 바꿔보자!
1 2 | <h1>p 태그일까?</h1> <h1>h1 태그입니다.</h1> | cs |
p 태그를 h1 태그로 바꿨습니다. 내용도 마음껏 바꿀 수 있다!
에디터에서 저장을 누른 순간 웹브라우저가 바로 새로고침을 해 수정된 내역을 보여준다.
HTML은 많은 버전을 거듭하며 올라왔다.
그렇다면 현재 많이 쓰이는 최신 버전은 무엇이고 또 브라우저가 그것을 어떻게 알까?
현재 많이 쓰이는 HTML 최신 버전은 'HTML5' 이다.
브라우저가 저절로 알 리는 없고 HTML 페이지를 만드는 사람이 브라우저에게 알려줘야 한다.
바로 아래 코드로 알려준다. 웬만한 홈페이지의 소스에서 맨 위를 보면 아래와 같이 적혀있다.
1 | <!doctype html> | cs |
네이버와 다음 모두 <!doctype html> 이 적혀있다!
과제 1. HTML 템플릿 구성하기
강사님이 주신 링크를 참고하여 HTML 템플릿을 작성해보는 과제다.
1 2 3 4 5 6 7 8 9 10 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>제목</title> </head> <body> <!-- 엘리먼트 작성 --> </body> </html> | cs |
기본적으로 html, head, body 태그 정도는 숙지했다. html 태그 안에 head 태그와 body 태그가 있어야 한다!
meta 태그는 당장 모르겠지만 나중에 설명해주실 것 같다.
02. [HTML] HTML 구조
역시 과제에서 작성한 코드를 한 줄 한 줄 설명해주신다!
html 태그는 HTML 코드 작성을 명시하는 태그다.
head 태그는 웹페이지에 사용된 요소들의 정보를 미리 선언하는 태그다.
뭔가 head 태그의 설명이 복잡한걸 보니 더 깊이 알아야 할 것들이 많나 보다.
meta 태그도 간략하게 설명해 주신다. 한 마디로 웹페이지에 나오는 콘텐츠들을 어느 형식으로 표현해줄 지 정해주는 태그다.
body 태그 안에 들어가는 정해진 태그들을 배우고 실습했다.
굉장히 자주 사용되는 두 가지 태그를 소개해주셨다.
<h1></h1> 태그는 header 즉 제목과 관련된 태그이다. h1 ~ h6 까지 존재한다.
<p></p> 태그는 paragraph 문단 태그이다.
그 다음에 HTML 관계를 설명했다.
1 2 3 4 5 | <div> <p>p태그1</p> <p>p태그2</p> <p>p태그3</p> </div> | cs |
코드가 이렇게 주어졌을 때 div 가 부모 요소 태그가 된다. div 부모 태그는 세 개의 p 자식 요소 태그를 갖는다.
세 개의 p 태그 끼리는 형제 요소 태그다.
강사님이 이런 퀴즈 문제도 내 주셨다. 근데 왜 두 번째 방법이 권장되지 않는지 궁금해졌다.
위 사진은 HTML 코드 실행 결과다. 겉보기에도 똑같다.
그 이유를 스택오버플로우에서 찾을 수 있다.
요약하자면, p 태그는 오직 inline 태그라고 불리는 것들만 허용이 된다고 한다.
추측컨데, div 태그는 inline 태그가 아닌 block 태그이기 때문인 것 같다.
inline 태그, block 태그? 무슨 소린지 하나도 모르겠다.
이 이야기는 좀이따 다시 하게 된다!
신기한 점을 발견했다. 웹페이지 소스 코드를 한 번 봐보자.
p 태그 안에 있는 div 태그에서 <p></p>를 작성하지도 않았는데 생겼다.
위 스택오버플로우를 읽어보니 <p> 태그 안에 <div> 태그를 집어넣으면,
<div> 태그가 시작하기 전에 자동으로 p 태그가 닫힌다고 써있다.
과제 2. 태그 위치 바꿔보기
03. [HTML] HTML 속성(Attribute)
1 | <a href="https://www.google.com">구글로 넘어가기</a> | cs |
위 코드를 실행하고 '구글로 넘어가기' 를 누르면 구글 웹페이지로 이동합니다!
다음으로 Empty 태그를 소개했다.
Empty 태그는 쌍을 이루지 않는 태그를 뜻한다.
예를 들어 <br> (Line Break)태그가 있다. 이는 HTML 페이지에서 줄바꿈을 해준다.
1 2 | <a href="#">a태그입니다.</a> <a href="#">a태그입니다.</a> | cs |
1 2 3 | <a href="#">a태그입니다.</a> <br> <a href="#">a태그입니다.</a> | cs |
위 두 코드를 실행하며 어떤 결과가 나올까?
두 번째 소스 코드에서는 한 줄 띄워 깔끔하게 나왔다!
다음으로 알아볼 태그도 빈 태그다!
바로 <img> 태그다. 이미지 파일을 표현해주는 태그다.
어떻게 이미지 파일을 표현해주냐면, src 속성에 이미지 파일 주소를 넣어주면 된다!
1 | <img src="https://www.python.org/static/opengraph-icon-200x200.png"> | cs |
짠, 웹페이지에 이미지 파일이 나타난다.
마지막으로 태그에 식별자를 속성으로 넣어줄 수 있다.
식별자는 구분하기 쉽게 어떤 이름을 붙여준다는 의미다.
첫 번째 id 속성은 하나의 페이지에 유일한 요소의 '식별자' 역할을 해준다.
<태그 id="아이디">콘텐츠</태그>
두 번째 class 속성은 하나의 페이지의 다중 요소 '식별자' 역할을 해준다.
<태그 class="클래스">콘텐츠</태그>
직접 실습해보자!
1 2 3 4 | <p id="p_1">p_1 아이디를 갖고 있는 p 태그 입니다.</p> <p class="pclass">pclass 클래스를 갖고 있는 p 태그 입니다.</p> <p class="pclass">pclass 클래스를 갖고 있는 p 태그 입니다.</p> <p class="pclass">pclass 클래스를 갖고 있는 p 태그 입니다.</p> | cs |
과제 3. 이미지 태그에 a태그 속성 적용하기
1 2 3 | <a href="http://www.fasstcampus.co.kr"> <img src="https://cdn.www.fastcampus.co.kr/wp-content/uploads/2017/11/fastcampus_logo_positive-1.png" width="300"> </a> | cs |
로고를 누르면 홈페이지로 바로 이동하게 만들었다!
04. [HTML] 블록, 인라인 요소(엘리먼트)
앞서 봤던 block, inline 을 여기서 자세하게 알려준다.
div 태그는 블록 요소이다. 그렇다면 블록 요소는 어떤 특징을 갖고 있을까?
- 줄 바꿈 속성이 있다.
- 블록 요소를 포함할 수 없다. (예외 존재)
- 인라인 요소를 포함할 수 있다.
첫 번째 속성을 바로 확인할 수 있다. 둘 사이에 <br> 태그 없이 줄바꿈이 일어났다.
이는 p 태그와 h1 태그가 블록 요소임을 의미한다.
그렇다면 inline 요소의 특징은 무엇일까?
- 줄 바꿈 속성이 없다.
- 블록 요소를 포함할 수 없으며, 인라인 요소는 포함할 수 있다.
과제 4. 화면 설계 기초 시작하기
강사님이 주신 링크를 참고해 웹 목업툴을 이용해 프로토타입, 청사진을 만들어보는 실습이다.
목업툴로는 무료로 쓸 수 있는 카카오 오븐을 추천해주셨다.
내가 만든 자기소개 목업 페이지다. 강사님이 주신 링크대로 따라해서 최대한 비슷하게 만들어봤다.
이대로만 강의를 듣는다면 실제로 위 페이지를 만들 수 있을 것 같다. 😄😄
05. [HTML] 자주 사용되는 태그 (table, ul, ol)
소스가 갑자기 길어졌지만 따라해보니깐 별거 아니다.
<table></table> 태그는 표를 만드는 태그다.
<thead></thead> 태그는 테이블 태그의 제목 태그를 표현하기 위해 사용되는 태그다.
<th></th> 태그는 제목 행의 하나의 열을 나타내기 위해 사용되는 태그다.
<tr></tr> 태그는 테이블에서 하나의 행을 나타내기 위해 사용되는 태그다.
<td></td> 태그는 테이블에서 내용 행의 하나의 열을 나타내기 위해 사용되는 태그다.
테이블의 행과 열은 다음과 같다.
그 밖에 여러가지 태그들도 있다.
<tfoot></tfoot> 태그는 테이블 태그의 요약 태그를 표현하기 위해 사용되는 태그다.
<caption></caption> 태그는 테이블의 제목을 표현하기 위해 사용되는 태그다.
다음 예제 코드는 테이블 태그 총 정리한 코드다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <table> <thead> <tr> <th>제목1</th> <th>제목2</th> </tr> </thead> <tbody> <tr> <td>내용1</td> <td>내용2</td> </tr> <tr> <td>내용1</td> <td>내용2</td> </tr> </tbody> <tfoot> <tr> <td>요약1</td> <td>요약2</td> </tr> </tfoot> <caption> 캡션 </caption> </table> | cs |
캡션은 테이블 바로 위에 나타나는 것을 확인할 수 있다.
ul 태그와 ol 태그는 콘텐츠를 목록 형태로 표현하기 위해 사용되는 태그다.
ul은 unordered list, 즉 순서가 없는 목록을 뜻한다. ol은 ordered list, 순서가 있는 목록이다.
위 쪽이 ul 태그고 아래 쪽이 ol 태그다.
과제 5. 성적 테이블 만들어보기
처음에 rowspan과 colspan 이해를 못했었는데 영어 단어 의미를 살려서 이해했다.
row는 행이니깐 행끼리 붙여주는거고, 반대로 col(umn)은 열이니깐 열끼리 붙여주는거로 이해했다.
내가 만든 멋진 성적 테이블이다! 형식은 학교 홈페이지를 참고했다.
소스 코드는 다음과 같다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <table> <thead> <tr> <th>년도</th> <th>학기</th> <th>이수구분</th> <th>교과목-분반</th> <th>과목명</th> <th>학점</th> <th>등급</th> <th>평점</th> </tr> </thead> <tbody> <tr> <td rowspan="3">2019</td> <td rowspan="3">1</td> <td>전공필수</td> <td>10000-1</td> <td>프로그래밍 첫걸음 올인원패키지</td> <td>3</td> <td>A+</td> <td>4.5</td> </tr> <tr> <td>전공</td> <td>10000-1</td> <td>컴퓨터공학 올인원패키지</td> <td>3</td> <td>A+</td> <td>4.5</td> </tr> <tr> <td>전공필수</td> <td>10000-1</td> <td>디자인툴 올인원 패키지</td> <td>2</td> <td>A+</td> <td>4.5</td> </tr> </tbody> </table> | cs |
2주차 진도가 지나갔다!
이해하지 못하는 부분이 있어 분량이 많아졌는데, 앞으로는 많이 요약을 해봐야겠다!
- 패스트캠퍼스 서포터즈 1기 다람쥐
'자유 > 대외 활동' 카테고리의 다른 글
| 패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #6.4주차 학습후기 (0) | 2019.04.26 |
|---|---|
| 패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #5.3주차 학습후기 (0) | 2019.04.24 |
| 패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #3. 생활코딩! HTML+CSS+JAVASCRIPT 도서 수령 (0) | 2019.04.15 |
| 패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #2. 웹에 대한 이해 및 환경 설정 (0) | 2019.04.14 |
| 패스트캠퍼스 프로그래밍첫걸음 학습후기 ) #1. 프로그래밍첫걸음 첫 수강 (0) | 2019.04.05 |
댓글