HTML, CSS

<img width="930" height="620" alt="" loading="lazy" data-src="https://cdn.shortpixel.ai/client/q_glossy,ret_img,w_930,h_620/http://hleecaster.com/wp-content/uploads/2020/07/html-930x620.jpg" class="attachment-neve-blog size-neve-blog wp-post-image lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /><noscript><img width="930" height="620" alt="" loading="lazy" data-src="https://cdn.shortpixel.ai/client/q_glossy,ret_img,w_930,h_620/http://hleecaster.com/wp-content/uploads/2020/07/html-930x620.jpg" class="attachment-neve-blog size-neve-blog wp-post-image lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /><noscript><img width="930" height="620" src="https://cdn.shortpixel.ai/client/q_glossy,ret_img,w_930,h_620/http://hleecaster.com/wp-content/uploads/2020/07/html-930x620.jpg" class="attachment-neve-blog size-neve-blog wp-post-image" alt="" loading="lazy" />

CSS 쉽게 이해하기 (폰트, 배경, 박스모델, 레이아웃)

HTML, CSS
2020년 7월 29일2020년 7월 29일

웹 문서를 제대로 스타일링 하려면 CSS로 별도의 스타일 시트를 작성해 사용하는 게 좋다. 스타일링 기법은 다양하지만, 일단 기초 속성들부터 알아보자. (폰트, 배경, 박스모델, 레이아웃)

<img width="930" height="620" alt="" loading="lazy" data-src="https://cdn.shortpixel.ai/client/q_glossy,ret_img,w_930,h_620/http://hleecaster.com/wp-content/uploads/2020/07/html-930x620.jpg" class="attachment-neve-blog size-neve-blog wp-post-image lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /><noscript><img width="930" height="620" alt="" loading="lazy" data-src="https://cdn.shortpixel.ai/client/q_glossy,ret_img,w_930,h_620/http://hleecaster.com/wp-content/uploads/2020/07/html-930x620.jpg" class="attachment-neve-blog size-neve-blog wp-post-image lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /><noscript><img width="930" height="620" src="https://cdn.shortpixel.ai/client/q_glossy,ret_img,w_930,h_620/http://hleecaster.com/wp-content/uploads/2020/07/html-930x620.jpg" class="attachment-neve-blog size-neve-blog wp-post-image" alt="" loading="lazy" />

CSS reset 과 CSS normalize 쉽게 이해하기

HTML, CSS
2020년 7월 23일2020년 7월 23일

다양한 브라우저에서 통일된 화면을 볼 수 있도록 CSS 기본값을 초기화/수정하는 전략으로 CSS reset 과 normalize의 차이점을 간략히 남겼다.

<img width="930" height="620" alt="" loading="lazy" data-src="https://cdn.shortpixel.ai/client/q_glossy,ret_img,w_930,h_620/http://hleecaster.com/wp-content/uploads/2020/07/html-930x620.jpg" class="attachment-neve-blog size-neve-blog wp-post-image lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /><noscript><img width="930" height="620" alt="" loading="lazy" data-src="https://cdn.shortpixel.ai/client/q_glossy,ret_img,w_930,h_620/http://hleecaster.com/wp-content/uploads/2020/07/html-930x620.jpg" class="attachment-neve-blog size-neve-blog wp-post-image lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /><noscript><img width="930" height="620" src="https://cdn.shortpixel.ai/client/q_glossy,ret_img,w_930,h_620/http://hleecaster.com/wp-content/uploads/2020/07/html-930x620.jpg" class="attachment-neve-blog size-neve-blog wp-post-image" alt="" loading="lazy" />

HTML 사용자 입력을 위한 폼
요소 정리

HTML, CSS
2020년 7월 23일2020년 7월 23일

HTML

요소는 사용자로부터 정보를 수집하는 역할을 하는데, 다양한 입력 양식을 적용할 수 있다. 사용법을 최대한 쉽게 정리해봤다.

<img width="930" height="620" alt="" loading="lazy" data-src="https://cdn.shortpixel.ai/client/q_glossy,ret_img,w_930,h_620/http://hleecaster.com/wp-content/uploads/2020/07/html-930x620.jpg" class="attachment-neve-blog size-neve-blog wp-post-image lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /><noscript><img width="930" height="620" alt="" loading="lazy" data-src="https://cdn.shortpixel.ai/client/q_glossy,ret_img,w_930,h_620/http://hleecaster.com/wp-content/uploads/2020/07/html-930x620.jpg" class="attachment-neve-blog size-neve-blog wp-post-image lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /><noscript><img width="930" height="620" src="https://cdn.shortpixel.ai/client/q_glossy,ret_img,w_930,h_620/http://hleecaster.com/wp-content/uploads/2020/07/html-930x620.jpg" class="attachment-neve-blog size-neve-blog wp-post-image" alt="" loading="lazy" />

HTML 태그 쉽게 이해하기

HTML, CSS
2020년 7월 16일2020년 7월 23일

HTML 문서 작성에 사용되는 기본적인 태그의 개념과 사용법만 간단히 요약했다.