패스트캠퍼스 환급챌린지 7일차 미션 (2월 7일) : 프론트엔드개발 강의 후기

오늘의 목표

오늘 5 HTML 개요 중 마지막 글자와 상자를 추가로 마무리 하고,  챕터 6를 시작했다.

기본적으로 많이 쓰이는 태그들 위주로 살펴봤다.

 

생각보다 많이 보긴했는데 이전에 내가 제대로 본 게 아니구나 싶었다.

 

글자로 쓰이는 태그이면서 그게 수평으로 자동정렬되는 태그인 인라인 태그인 것을..

그리고 글자가 아닌 상자 개념으로 이해하고 있으면서, 그건 또 수직으로 정렬이 된다는 것이다.

 

사실 괜히 돈주고 강의듣지 말고, 그냥 일하면서, 디자인하면서 실무에서 옆에 건너건너 배우는 게 나을까 하는 마음도 들어왔는데

오늘 배우면서는.. 아 기초부터 제대로 배우는 건 너무너무 중요한 일이라는 걸 깨달았다.

 

이해가 된다. 이해가 되니까 코드 입력하는 것도 더 쉽게 입력하게 되고, 

이전에 도대체 왜..>>!!! 안써지는 거지? 왜 마진 값이 입력되지 않는 거지...?? 하는 내용들이 모조리 이해가 되었다.

 

그래서 정말 배우는 게 중요하고, 무엇보다 기초일 때는 실무에서 부딪혀보는 것도 너무 중요하지만, 이론, 누가 정리해준 내용도 정말... 봐야한다는 말을 하고 싶다.

\지금 내가 너무 잘 느끼고 있으니까.

암튼 실무와 가깝게 자주 쓰이는 태그를 배우니까 이해가 너무 잘 되고, 진짜 공부하는 느낌이 나서 너무너무 좋다.

기대된다. 다음 강의가><

 

 

오늘은 패드로 정리하면서 공부했다.

왕 뿌듯

 

 

간단하게 글로 정리해보는_

 

블록(상자) 요소

 

<div> </div>

특별한 의미가 없는 영역 구분을 위한 요소 (Division)
어떠한 개념을 하나로 묶을 때 많이 사용함

 

<h1> </h1>

제목을 의미하는 요소(Heading)
글자로 이루어져긴하지만 블록 요소
h1 ~ h6 까지 존재함
(숫자가 낮을수록 중요, 페이지의 제목이 전체 페이지 내 중요도가 어느 정도인지 생각해보고 적절하게 사용)

 

<p> </p>

문장을 의미하는 요소(Paragraph)
div사용 안하고 p태그로 사용하면 p태그 안에 묶여있는 것이 어떠한 문장임을 이해할 수 있음

- 문장이지만 p태그로 구분하기 애매한 경우, div태그 사용 가능함

- 글자를 다루고 있지만 글자들이 모여 문장을 이루고 있기 때문에 인라인 요소가아니라 블록 요소임

 

<ul> </ul>

순서가 필요없는 목록의 집합을 의미(Unordered List)
순서가 주관적인 경우 순서가 필요없다고 가정
ul태그의 자식으로 li태그가 무조건 1개 이상 들어있어야 함

 

<li> </li>

목록 내 각 항목 (List Item)
항목이 모여 목록을 만든다. (목록: List / 항목: Item)
li 태그는 무조건 ul태그로 감싸져 있어야 함

 

 

-

인라인 요소

 

<img />

이미지를 삽입하는 요소 (Image)
src, alt 는 필수 속성이다.

 

<a> </a>

다른 or 같은 페이지로 이동하는 하이퍼링크를 지정하는 요소
Anchor: 닻을 의미. 배에서 닻을 내려 배를 고정시키는 것 처럼 앵커 태그를 통해 주소를 건다는 의미

자주쓰이는 속성 target: "_blank"는 새로운 탭에 페이지를 열 수 있음

 

<span> </span>

특별한 의미가 없는 구분을 위한 요소
"ABC"라는 글자에만 스타일을 특별하게 지정해주고 싶을 때 span태그로 특정한 글자 부분을 묶어낼 수 있음

 

<br/>

줄바꿈 요소 (Break)
흔히 줄바꿈 할때 사용하는 엔터키는 코드에서 바꿈이 되지 않음

 

<input/>

사용자가 데이터를 입력하는 요소

input 요소는 인라인이라서 왼쪽에서 오른쪽으로 수평으로 쌓이는 특징이 있으나 블록요소처럼 가로 세로 여백도 쓸 수 있는 특징 있음
이처럼 글자 요소이긴하지만, 상자 요소가 가지고있는 특성을 몇 가지 쓸 수 있어서 Inline-block 이라고도 함

 

 

후하

글로 정리하니까 또 이해가 잘 되네

아유 오늘 공부 끝

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
#패스트캠퍼스 #직장인자기계발 #직장인공부 #환급챌린지 #패스트캠퍼스후기 #오공완 #프론트엔드

https://bit.ly/48sS29N

패스트캠퍼스 [직장인 실무교육]