html 로고를 넣어봅시다

지난 시간 html 공간분할에 이어서 오늘은 헤더영역 왼쪽 상단에 로고를 넣어보도록 하겠습니다. 홈페이지를 제작하시려는 분은 개인도 있겠지만 아무래도 업체가 많겠지요. 그렇다면 회사를 상징하는 로고는 선택이 아니라 필수입니다. 저는 그전에 쓰던걸 가져왔지만 회사 홈페이지를 직접 제작하신다면 로고를 직접 제작해보심을 추천드립니다. 

html 로고는 주로 헤더영역 왼쪽 상단 혹은 헤더영역 센터영역에 많이들 넣으십니다. 우리가 알고 있는 유튜브라던지 네이버 같은 큰 회사 역시 왼쪽 상단에 회사의 로고를 삽입해놓았으니 우리도 일단 한번 따라해보도록 하겠습니다. 

일단 html 로고가 들어갈 영역 즉 공간을 만들어보겠습니다. 헤더영역을 960*150px로 잡았으니 로고의 높이를 150px로 잡고 넓이 width는 250px로 설정하겠습니다. 그리고 또하나의 중요한 개념인 float라는 속성을 left로 설정해보았습니다. float는 위치를 설정하는 것으로 오른쪽 왼쪽을 설정할수 있습니다. 단 센터는 없습니다. 

그럼 화면에 직접 보여질 html파일에서도 역시 헤더영역 안에 css에서 만들어두었던 logo 클래스를 가져오겠습니다. logo의 a href 즉 a 태그를 설정한 이유는 보통 홈페이지의 로고를 누르면 메인화면으로 돌아가게 되어있습니다. 그리고 img src를 이용하여 이미지가 저장되어있는 폴더에서 이미지를 가져와야합니다. 저는 따로 폴더를 설정하지 않았기 때문에

"여행가이드1.png" 라는 이름의 파일을 가져오겠습니다. 만약 images라는 폴더안에 넣어두셨다면 images/여행가이드1.png가 될것입니다. 많은 학생들이 주로 이부분에서 이미지를 가져오지 못해 엑박이 뜨는경우가 많습니다.

짠 ~ 제가 설정한데로 float를 이용하여 왼쪽상단에 여행가이드 로고가 들어갔습니다. 로고영역의 크기를 눈으로 확인할수 있게끔 border를 이용하여 검정색 선을 넣어봤습니다. 우리는 이처럼 로고영역에 이미지를 마음대로 넣을수 있습니다. 

html 로고삽입 기능을 이용하여 우리는 맥도날드의 로고도 넣을수 있으며,

마크 저커버그가 되어 페이스북 홈페이지도 만들수 있습니다. 다음 이시간에는 홈페이지 헤더영역 상단 오른쪽 부분에 네비게이션 바를 넣어보도록 하겠습니다. 그리고 시간 나는데로 float의 개념을 제가 아는 한 쉽게 알려드릴 예정입니다.