개발자취/HTML과 CSS 2

[HTML/CSS] 웹 페이지 구조 잡기

평소 일할 때 컴포넌트에 대해서 스타일 수정하고 적용하는 작업은 많이 하는데 빈 페이지에 처음부터 스타일을 잡고 적용시킨 건 아주 오래 전 개인 프로젝트할 때 말곤 없어서 막상 구현하려니 헷갈리고 좀 어려웠다. 간단해보이는 웹 페이지인데도 스타일을 적용하고 지우고 또 적용하고 또 지우고를 반복했다. 뭐든 처음에 구조를 탄탄하게 잡아둬야 무너지지 않는다. 다음에 또 구현할 때 헷갈려서 구글 검색을 하게 될 게 뻔하기 때문에 웹 페이지 구조를 잡는 비법(?)에 대해 미리 정리를 해보았다. 프로그래머스 "만들면서 배우는 실전 퍼블리싱" 스터디에서 강의를 들으면서 + 과제를 해나가면서 + 구글 검색으로 이루어진 내용이다. Header, Main, Footer로 구성된 보통의 웹 사이트 구조를 예시로 구현해봤다...

[HTML 태그] label 태그와 input 태그

: label 태그는 사용자 인터페이스 항목의 설명을 나타내며, 주로 태그와 함께 사용한다. 체크박스 타입의 input 태그와 label 태그를 함께 사용하면 label을 클릭해서 input의 체크박스를 활성화/비활성화 할 수 있다. 또한, 화면 리더기에서 label을 읽어서 사용자가 입력해야 하는 텍스트가 무엇인지 쉽게 알 수 있다. 요소와 함께 사용할 수 있는 요소 , , , , , , 과 을 연결하여 사용하면 좋은 점 화면리더기는 폼 입력(input)에서 label을 읽어서 사용자가 입력해야하는 텍스트가 무엇인지 더 쉽게 이해할 수 있게 한다. 관련 label을 클릭해서 input 자체에 초점을 맞추거나 활성화 시킬 수 있다. 누를 수 있는 영역이 넓어져서 화면이 작은 스크린 사용자를 포함해 입력하..