설계도면 실습

💻학습내용

1. 이미지를 임시로 채워넣는 방법을 배웠다

https://via.placeholder.com/150
뒤에 숫자 150은 크기를 설정하는 부분

<img src ="https://via.placeholder.com/150">

2.Inline, Block 속성

html에서 사용되는 태그가 Inline 속성인지 Block 속성인지 구분해서알아둬야 한다
Inline : x축으로 나란히 배열되며 공간에 대한 크기 설정이 되지 않음

<sapn>Inline</span>
<sapn>Inline</span>
<sapn>Inline</span>

Block : 줄 바꿈이 일어남

<h2>Inline</h2>
<h2>Block</h2>
<h2>Block</h2>

3. section/article 태그는 h태그와 함께

section, article 태그는 대표하는 타이틀 정보가 필수적으로 있어야 함
그래서 h태그와 무조건 함께 사용 해야 함

4. div + ul + li + a

설계도면을 구상할 때 왼쪽에서부터 순서대로 작성하는 것이 암묵적인 약속
div로 왼쪽, 중앙, 오른쪽을 큰 틀로 묶은 후,
왼쪽 div, 중앙 div, 오른쪽 div를 작성함
div 안에 ul과 li,a 태그를 작성함

<div>
<!-- left -->
<div>
<ul>
<li><a href=""><img src=""><p></p></a></li>
</ul>
</div>
<!-- middle -->
<div>
<ul>
<li><a href=""><img src=""><p></p></a></li>
</ul>
</div>
<!-- right -->
<div>
<ul>
<li><a href=""><img src=""><p></p></a></li>
</ul>
</div>			

5. 그외

주석 처리 쉽게 하는 법 : command + / 누르기
웹사이트 html 코드를 보고 싶을 때 좌클릭 - 검사

2강 실습 깃허브 링크

학습한 내용 중 어려웠던 점

웹 화면을 보고 구성요소를 분석하는게 헷갈렸습니다.
div 태그를 사용하여 상단 중앙 하단을 나눈뒤 또 다시 div를 사용하여
왼쪽 중앙 오른쪽을 구분할 때 div가 중복적으로 보여 실수가 있었습니다.

해결방법 작성

강의를 듣고 여러번 따라하고 코드들을 손으로 복기하면서 작성을 해보니
큰 틀을 잡은 후 세세하게 접근 하는 방법이 익숙해지기 시작했습니다.

학습 소감

웹 사이트에서 큰 것들을 먼저 구상하고 잡은 뒤 작은 부분들로 접근을 해야 한다는 것을 배웠습니다.
또한 꼭 필요한 요소들이 무엇인지 div, ul, li, a 태그들이 익숙해 지기 시작했습니다.
어느 부분이 강조할 부분인지를 구분하는 연습은 꾸준히 할 것입니다.