[패스트캠퍼스] 웹퍼블리싱 강의 1주차 학습일지 - 기본 HTML5, CSS3 문법 활용 예제

 

 패스트캠퍼스 사이트를 통해 들은 웹퍼블리싱 강의에 대한 블로그를 처음 업로드한다. 내일배움카드로 거의 공짜와 다름없을 정도로 양질의 강의를 들을 수 있다는 것을 알고, 나름 심사숙고해서 고른 강의였다.

 내가 원하던 대로 실습 예제가 많은 편이었고, 강사님께서도 자세히 알려주셔서 어려운 내용도 어렵지 않게 들을 수 있었다. 

 다음은 내가 처음 실습해보면서 필기했던 내용을 토대로 작성한 글이다. 

---

요약

 이번 주차에는 기본적인 HTML5, CSS3 문법을 통해 3가지 웹페이지를 만들어보았다. 

012

실습 결과물(1~3)

 첫 번째는 인물 프로필카드로, Font Awesome으로 아이콘을 넣고 HTML 내의 링크를 통해 페이지를 이동할 수 있게 제작하였다.

 두 번째는 웹페이지 전체 Background를 동영상으로 하는 fullscreen 동영상 UI이다.

 세 번째는 CSS의 Animation과 keyframe을 사용하여 낮과 밤이 바뀌는 마을 애니메이션을 제작하였다.

 

 

 

 

---

새로 알게 된 개념

HTML

1) 이미지나 링크 등의 작성할 때, alt 값은 이미지가 보이지 않을 때 대체 텍스트로 사용되거나 시각 장애인 분들이 웹페이지를 이용할 때 해당 요소에 대한 설명이 되므로 웹접근성을 위해 써주는 것이 좋다.

 

2) vscode(비쥬얼 스튜디오 코드) Emmet 단축키

- 하위 요소 생성 ">"

// div>p>span
<div>
   <p>
      <span></span>
   </p>
</div>

- 형제 요소 생성 "+"

// section > article > h2 + p
<section>
   <article>
      <h2></h2>
      <p></p>
   </article>
</section>

- 반복 태그 생성 "*"

// ul > li*3
<ul>
   <li></li>
   <li></li>
   <li></li>
</ul>

- class, id 설정 ".", "#"

// .active 
<div class = "active"></div>

// #item
<div id = "item"></div>

- 속성 [attribute] 설정 "[]"

// td[title="name" colspan="5"]
<td title="name" colspan="5"></td>

- 태그의 텍스트 설정 "{}"

//p.text{text}
<p class="text">text</p>

- 증가하는 숫자 설정 "$"

// ul.list>li.item$*5>{$}
<ul class="list">
   <li class="item1">1</li>
   <li class="item2">2</li>
   <li class="item3">3</li>
   <li class="item4">4</li>
   <li class="item5">5</li>
</ul>

3. a 태그에 링크를 걸어 html 파일 이동 방법

        <nav class="others">
            <a href="member1.html" class="on"></a>
            <a href="member2.html"></a>
            <a href="member3.html"></a>
            <a href="member4.html"></a>
        </nav>

 

(vscode emmet 단축키 모음)

https://docs.emmet.io/cheat-sheet/

Cheat Sheet

 

4. ID는 중요한 요소에 사용, 또는 a 태그를 통해 페이지 내를 이동할 때 사용

5. 단축어 뜻

   - gnb = Global Navigation Bar

   - lnb = Local Navigation Bar

 

CSS

1) 요소를 화면 가운데 위치 시키는 공식

// 요소를 띄운 뒤
// 요소의 좌표 (0, 0)를 기준으로 부모 요소의 세로 길이 50%, 가로 길이 50%로 이동
// 요소의 길이의 가로 50%, 세로 50%만큼 이동하여 중앙에 위치
position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%);

 

2) 자식 요소가 float되면 부모 요소가 자식 요소의 높이를 알 수 없게 됨.

// 부모 요소에 ::after 요소를 만들어 
// 다음과 같은 코드를 작성하면 자식 요소의 높이를 알 수 있음
content: ""; 
display: block; 
clear: both;

 

3) font-awesome 아이콘 크기는 font-size, 색상은 color로 지정

4) width 값을 주고 height 값을 주지 않으면 자동으로 auto로 됨

5) block 요소는 margin: 0 auto를 통해 가운데 정렬이 가능,

    block 요소 내의 inline 요소는 block 요소에 text-align: center를 통해 가운데 정렬이 가능함.

    이 때 inline 요소는 글 뿐만 아니라 이미지 등도 포함됨.

6) line-height를 해당 요소의 높이값과 같게 설정하면 글자가 세로 중앙 배치 됨.

7) 버그성의 인라인요소 간격은 부모 요소에 font-size: 0px를 주면 사라짐

8) flex는 요소들을 인라인 요소로 바꾸는 원리

9) 대부분의 화려한 폰트는 font-weight를 normal로 바꿔야 디자인이 깨지지 않음

10) transform-origin -> transform의 기준점 설정

11) keyframe이 이어지려면 0%와 100%가 같아야함

 

JS

 

기타

1) 현존하는 가장 작은 스마트폰 너비는 350px

2) VSCode 내에서 fontAwesome을 미리 보고 자동 완성할 수 있는 익스텐션(extention)

3) 구글 폰트 사용 방법

4) 반응형 웹을 만들 때는 모바일 메뉴와 웹 메뉴를 분류하여 제작, 모바일에서 웹 메뉴가 작동하지 않는 경우가 많아서

 

부족한 점

웹페이지를 만들 때, 코드나 설명을 들으면 이해가 가지만 아예 처음부터 혼자 만들 때는 막막한 경우가 많다. 그러므로 여러 실습과 경험을 통해 배경지식들을 쌓고 그것들이 익숙해질 때까지 연습하는 것이 답이라고 생각한다.