크롬 새 창 화면 만들기 (HTML CSS 연습용)
크롬 브라우저 실행 후 첫 화면을 기억하십니까? 지금은 버전이 많이 올라가서 스타일이 조금 바뀌었지만 그래도 기본 형태라는건 변함이 없습니다. HTML, CSS 연습도 해볼겸 한번 만들어 보았습니다. 사실 예전 직업전문학교에서 수업 과정중에서 한 번 만들어본 경험이 있었는데 오래된 기억인지라 다시 추억을 되새길 겸 작업을 해봤습니다. 완성된 모습은 아래의 코드펜에 있습니다.
미리보기
See the Pen Untitled by rgy0409 (@rgy0409) on CodePen.
그럴듯하게 만들었죠? 개인적으로도 흡족한 습작이라고 생각합니다. 참고로 크롬 새 탭에서 개발자툴을 열어서 HTML 구조를 살펴보고 만든게 아니라 그냥 화면만 보고 레이아웃은 순수하게 제가 보이는대로 느끼는대로 구성한 결과입니다. 오리지널 크롬 새탭 화면의 HTML과 제가 만든 HTML 구조는 다릅니다.
레이아웃 구성
저는 레이아웃을 구성할 때 최대한 디테일하게 꾸리는 편입니다. 이유는 사후관리 때문입니다. 영역이 디테일하고 꼼꼼하게 잡혀있을수록 레이아웃 편집이 쉬워집니다.
영역은 이렇게 잡았습니다. 영역을 구성할때는 우선 큰 덩어리를 최우선으로 고려합니다. 크롬 새 탭 화면은 크게 세 영역이죠. 구글 로고가 들어가는 영역, 바로 아래에는 검색창 영역, 그리고 맨 하단은 바로가기 아이콘들이 있는 메뉴 영역입니다. 구글 로고와 검색창은 크게 어렵지는 않습니다. 메뉴 아이콘 영역이 살짝 복잡할 수 있습니다.
검색창
이 부분은 아래의 HTML 태그 요소입니다.
<div class="searchWrap">
<i class="fa-solid fa-magnifying-glass"></i><input class="search" type="text" placeholder="Google 검색 또는 URL 입력" onfocus="this.placeholder=''" onblur="this.placeholder='Google 검색 또는 URL 입력'"><i class="fa-solid fa-microphone"></i>
</div>우선 i 태그는 폰트어썸 아이콘입니다. 따라서 input 입력창과 웹 아이콘까지 같이 위치를 정렬해야 하기에 div로 감싸주었습니다. 검색창에서 특수한 기능이라고 한다면 바로 입력창에 입력되어있는 「Google 검색 또는 URL 입력」 이라는 텍스트입니다. 클릭하면 사라지고 바탕화면 아무곳이나 클릭하면 텍스트가 다시 생깁니다. 핵심은 위에 마크업 되어있는 세 가지입니다.
placeholder="000" : 000에 입력된 텍스트가 보여짐
onfocus="this.placeholder=''" : 입력창 클릭 시 큰 따옴표 안의 텍스트로 대체됨
onblur="this.placeholder='Google 검색 또는 URL 입력'" : 입력창 외부의 아무곳이나 마우스 왼쪽 클릭 시 큰 따옴표 안의 텍스트로 대체됨
placeholder와 onblur의 텍스트가 서로 겹치게 만든 이유는 탭을 처음 열 때의 글씨 유무 때문입니다. onblur는 반드시 클릭이 선행되어야 합니다. 따라서 기본적으로 텍스트가 보여지게 하려면 placeholder가 마크업 되어있어야 합니다.
바로가기 리스트
여기에서는 display: flex; 를 사용해서 정렬했습니다. li 태그 안에 a태그를 사용해 링크 기능을 적용시켰고 a 태그 안에 div 태그들을 사용해 자연스럽게 세로 배치가 되도록 만들었습니다. div 요소는 블록요소이고 블록요소는 크기를 가지고 있으며 세로로 쌓이는 성질이 있기 때문에 가로에 대한 배치 설정만 하면 됩니다.
CSS3: 플렉시블 박스 레이아웃 (div flex 정렬) 사용법
이 두개의 글을 참고하시면 레이아웃을 구성할 때 많은 도움이 될 것입니다. 끝.
