한 번에 끝내는 파이썬 웹 개발 초격차 패키지 78일차

웹 &  프론트엔드 기본

월요일이라서 피곤한걸까? 아님 점심 먹고 피곤이 밀려오는걸까? 졸음과 엄청나게 싸웠던 것 같다. 예전에 신청했던 한국인터넷진흥원에서 주최하는 [KISA] '21년 민간분야 주요 정보통신기반시설 관리자 정보보호 교육 수강 승인을 받고 영상을 보게 된다. 소리 없이 주야장천 보려니 졸리기도 했었다. 결국은 영상 3개 보고 지쳐버린 것이다. 소리도 없고 내용은 딱딱한 느낌마저 들 정도였으니까 이후에는 VMWare를 통하여 Linux Setup부터 Setting까지 끝내버렸다. 매번 유닉스 진단할 때마다 소스가 없어서 답답해서 Ubuntu를 설치 이후 점검하는 게 좋을 것 같았기 때문이다. 교육도 듣고 리눅스도 설치하고 인프라 진단 시 DB가 가장 걸리는 부분이 많아 동기분을 통해 다시 한번 점검하는데 역시나 다른 점이 마구마구 보이는 것이다. 이미 제출은 해버려서 수정은 못 하는 상황 난리가 날 것이다.

 

---

글자와 상자

요소가 화면에 출력되는 특성, 크게 2가지로 구분

 

인라인(Inline) 요소 : 글자를 만들기 위한 요소들

<!-- 
<span></span>
대표적인 인라인 요소!
본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도 
-->

<span>Hello</span>
<span>World</span>

<!--
Hello World
------------------> 요소가 수평으로 쌓임

너비 : 포함한 콘텐츠 크기만큼 자동으로 줄어듬!
높이 : 포함한 콘텐츠 크기만큼 자동으로 줄어듬!
-->

<span style="width: 100px;">Hello</span>
<span style="height: 100px;">World</span>

<!-- 
width : 요소의 가로 너비를 지정하는 CSS 속성
height : 요소의 세로 너비를 지정하는 CSS 속성
-->

<span style="margin: 20px;">Hello</span>
<span style="padding: 20px;">World</span>

<!--
margin : 요소의 외부 여백을 지정하는 CSS 속성
padding : 요소의 내부 여백을 지정하는 CSS 속성
-->

<span><div></div></span> <!-- <span>: 인라인 요소, <div>: 블록 요소 | 사용 불가 -->
<span><span></span></span> <!-- <span>: 인라인 요소, <div>: 블록 요소 | 사용 가능 -->

 

블록(Block) 요소 : 상자(레이아웃)를 만들기 위한 요소들

<!-- 
<div></div>
대표적인 블록 요소!
본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도 
-->

<div>Hello</div>
<div>World</div>

<!--
Hello |
World | 요소가 수직으로 쌓임

너비 : 부모 요소의 크기만큼 자동으로 늘어남!
높이 : 포함한 콘텐츠 크기만큼 자동으로 줄어듬!
-->

<div style="width: 100px;">Hello</div>
<div style="height: 40px;">World</div>

<!-- 
width : 요소의 가로 너비를 지정하는 CSS 속성
height : 요소의 세로 너비를 지정하는 CSS 속성
-->

<div style="margin: 10px;">Hello</div>
<div style="padding: 10px;">World</div>

<!--
margin : 요소의 외부 여백을 지정하는 CSS 속성
padding : 요소의 내부 여백을 지정하는 CSS 속성
-->

<div><div></div></div> <!-- <span>: 인라인 요소, <div>: 블록 요소 | 사용 가능 -->
<div><span></span></div> <!-- <span>: 인라인 요소, <div>: 블록 요소 | 사용 가능 -->

 

오늘은 글자와 상자에 대해서 학습해 보는 시간을 가졌다. 제목만 봐서는 무슨 내용일까 고민했는데 막상 강의를 들으면서도 혼란이 오다가 처음부터 끝까지 필기 없이 듣다 보니 이해가 되는 부분이 생겨났던 것 같다. 인라인 요소와 블록 요소의 차이점을 살펴볼 수 있었으면 블록은 자유자재면 인라인은 한계가 있고 벗어나지 못하는 점을 볼 수 있었다. 그렇다고 많은 부분이 달라 보이는 것도 아니었으며 실질적으로 이미지를 보면서 이해하는 게 좋은 듯하지만 차마 그림을 그려서 기록할 수가 없기에 생략을 진행하고 글로써 최대한 알아들을 수 있게 작성해보았다.
78일 차는 여기서 마무리하고자 합니다.

패스트캠퍼스 링크 :https://bit.ly/37BpXi

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