✅ 기본으로 돌아가서
HTML CSS를 어느정도 배우고나니 어떤 페이지를 레이아웃을 잡고자 할 때 너무 디자인적인 요소만을 고려했던것 같다. 사실 HTML작성은 흰 종이에 검은 글씨만 쓰는 것이 전부인데 그 부분을 잠시 잊고 있었다. HTML은 마크업 언어라는 것을 명심.
✅ 손은 눈보다 빨라야 하기에
처음 개발공부를 시작하면 다들 마음속에 '코더가 아닌 디벨로퍼'가 되리라는 마음이 있을 것이다. 나 또한 그렇지만 지금 완전 입문 단계에서 할 말이 아닌 것 같음을 다시 한번 느낀다. 개발 공부의 소목적 끝에는 항상 '이런게 어려웠는데 누군가가 쉽게 쓰기 위해 만든 무언가'를 발견하게 된다. 생산성 향상에는 항상 고효율을 위한 익숙해짐이 필요한 것 같다. 그렇기에 아는 코드와 내용이더라도 반복하여 두들겨보고 ol>li*3 , h1{content} 등과 같은 emmet을 의식적으로 사용해야겠다.(이제껏 .class로 div만 만들었는데..)
<!-- h1 -->
<h1></h1>
<!-- h1{hello world} -->
<h1>hello world</h1>
<!-- h1+p -->
<h1></h1>
<p></p>
<!-- h1{hello}*10 -->
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<!-- h1#id -->
<h1 id="id"></h1>
<!-- h1.class -->
<h1 class="class"></h1>
<!-- table>(tr>(tr*4))*3 -->
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<!-- lorem -->
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Eligendi deleniti id earum enim soluta. Cupiditate accusantium necessitatibus
nulla reprehenderit rem veritatis molestiae, natus vel illo temporibus,
ea quia adipisci quam!
<!-- lorem*3 -->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, adipisci error tempore quae laborum dignissimos laboriosam vel, libero molestiae illum, est consequuntur quis? Nisi laboriosam, fugit tempora rem quis incidunt.
Sequi id placeat voluptatem quasi, dolorum totam fugiat impedit facilis accusamus eos pariatur tempore! Dolor, labore earum dolores nobis perferendis atque perspiciatis. Itaque omnis a excepturi, ex voluptas ut adipisci?
Ipsum voluptatum vitae quos cumque dignissimos atque similique soluta facilis incidunt voluptas consectetur fugiat laboriosam facere exercitationem dolores quisquam, perspiciatis vero dicta fuga sed accusantium. Aliquid praesentium corrupti repellendus voluptate?
<!-- lorem5 -->
Lorem ipsum dolor sit amet.
<!-- img -->
<img src="" alt="">
<!-- img:z -->
<img src="" alt="" sizes="" srcset="">
<!-- a -->
<a href=""></a>
<!-- a[href='www.naver.com'] -->
<a href="www.naver.com"></a>
<!-- h1.one.two#three -->
<h1 class="one two" id="three"></h1>
<!-- p[a="value1" b="value2" c=1] 약간의 수정사항있음-->
<p a="value1" b="value2" c="1"></p>(덩어리로 묶은 채) ctrl + [ ] 들여쓰기 내어쓰기
✅ 희미하게 남아있던 쓸만한 태그들
<!-- anchor -->
<!-- 현재페이지에서 바로 넘어간다 : 절대경로-->
<a href="https://www.lorem.com">click</a>
<!-- target="_blank" 새탭에서 열기 -->
<a href="https://www.naver.com" target="_blank">click</a>
<!-- 상대경로 -->
<a href="./002.html">click</a>
<!-- 페이지 내에서 어딘가로 이동한다 : 페이지 내 id로 이동 -->
<a href="#three">click</a>
<!-- 다운로드 -->
<a href="./test.png" download>click</a>targe="_blank" 와 페이지 내 이동의 경우 사용자에게 편-안한 사용감을 주는 녀석들이라 생각하는데 잊고있었다. 기록으로 까먹지 않아야겠다.
<!-- iframe -->
<h2>동영상 가져오기</h2>
<iframe width="720" height="360" src="youtubesource"></iframe>
<h2>페이지 자체를 가져오기</h2>
<iframe width="1280" height="960" src="http://www.lorem.co.kr"></iframe>약간의 시나리오를 상상하자면, 새로운 서비스나 제품의 런칭 때 꼭 필요할 것 같은 동영상 가져오기나 페이지 자체를 가져오는 작업이 필요할 것 같은데 그럴 때 iframe 을 쓴다.
✅ 끝으로
서두에서도 말했지만 급하게 후다닥 배웠어서 기본기가 부족하다는 것을 느꼈다. 결국 남들만큼 하기 위해서는 남들이 들인 시간을 쏟아야 한다는 것을 잊지 말자. 그리고 아직 공부 루틴을 설정하질 못하였다. FE스쿨의 내용과 '나만의 공부'를 어떻게 병행해야 할지 고민이 필요하다.
