[패스트캠퍼스] 웹퍼블리싱 강의 1주차 학습일지

Etc./[Fastcampus] 웹퍼블리싱 완전 정복 학습 일지

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

임성장 2023. 6. 25. 13:57

728x90

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

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

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

요약

이번 주차에는 기본적인 HTML5, CSS3 문법을 통해 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

Download cheat sheet as printable PDF A5

docs.emmet.io

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) 반응형 웹을 만들 때는 모바일 메뉴와 웹 메뉴를 분류하여 제작, 모바일에서 웹 메뉴가 작동하지 않는 경우가 많아서

부족한 점

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

728x90