1. float 속성에 대해서 깊게 알아보자 float 프로퍼티는 주로 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법이다. flexbox 레이아웃를 사용한다면 더욱 간단하게 정렬을 구현할 수도 있지만 flexbox 레이아웃을 지원하지 않는 IE를 고려해야 한다면 float 프로퍼티를 사용해야 한다. float는 말 그대로 ‘뜨다’ 라는 말임. 애초에 이미지에 텍스트를 둘러싸게 만들려는 목표로 나온 속성이 float 속성임. ‘떠 있는 요소’ 라고 생각하면 편함. * float 속성은 전체 넓이가 지정되어 있지 않으면 계속 옆으로 붙고 더이상 자리가 없으면 아래로 자리잡게 됨. 여기서 떠 있다(float)는 의미는 요소가 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이..

매번 VSC에서 html 파일에서 느낌표(!)를 누르고 tab키를 누르면 html 기본 코드가 자동완성 됐다. 항상 당연하게 쓰다가 '근데 이걸 왜 저렇게 써야하고, 왜 필요한걸까?' 라는 궁금증이 생겨 찾아보게 됐다. 이번 글에서는 맨 상단에 위치한 DOCTYPE의 의미는 무엇이며, 왜 써야하는지를 알아보자. HTML 문서의 첫 줄인 HTML(Hypertext Markup Language) 선언이며, 사용 중인 HTML 버전과 웹 페이지 표시 방법을 웹 브라우저에 알려주는 것이다. 웹 브라우저가 HTML 문서를 받으면 DOCTYPE 선언을 확인하여 사용 중인 HTML 버전을 확인한다. HTML 버전마다 규칙과 구문이 다르므로, 버전마다 적용되는 태그와 적용되지 않는 태그가 있다. 따라서, 웹 페이지가 ..