🖥️Google logo
이번에는 구글 웹사이트의 하이라이트인 로고 이미지를 추가해보겠습니다. 우선 구글에서 Google Logo Image라고 검색하셔서 여러분이 원하는 구글 로고 이미지를 컴퓨터에 저장해주세요.
저장 경로는 반드시 index.html
파일과 같은 경로에 저장해주세요.
그리고 기존에 있던 h1
요소는 삭제하고, 다음과 같이 HTML에 이미지 관련 태그 코드를 추가해보겠습니다.
이미지 파일 저장 경로와 파일 이름에 특별히 주의하세요!
이미지 파일은 index.html
파일과 같은 경로에 위치해야 합니다
여러분의 경우에도 비슷하겠지만, 이미지의 사이즈와 위치가 아마 우리가 원하는 곳은 아닌것 같습니다. 😤
상당히 화가 나네요. 아, 평정심을 유지해야 합니다.
페이지 구조 설계하기
모든 HTML 문서의 흐름은 위에서 아래로, 그리고 좌측에서 우측으로 진행됩니다.
저는 보통 아래와 같이 페이지 구조를 수평선 상에서 분할하는 작업을 우선적으로 합니다.
그리고 분할한 빨간 박스의 모양들대로 틀을 우선 만들어 놓습니다.
기존에 header
라는 태그를 활용해 상단의 링크들을 모두 묶어준 것 또한 수평선 상에서 박스를 배치하고 그 박스 내부에 링크들을 모아놓기 위함이었습니다.
블럭요소인 div
태그를 활용하여 기본적인 구조를 잡아주었습니다. 이제 이미지의 스타일을 먼저 조정해보겠습니다.
div
라는 태그는 무슨 용도일까요? 직접 한번 리서치 해보세요!
우리가 조정해야 할 내용은 크게 두 가지인데요.
이미지의 위치
이미지의 사이즈
Inline 요소 가운데 정렬하기
img
태그는 기본적으로 inline의 성질을 갖습니다. (참고자료)
Inline 요소는 부모 요소의 CSS 속성을 활용하여 가운데 정렬이 가능합니다. 부모 요소에게 text-align: center;
를 설정하면 Inline 자식 요소들은 모두 가운데로 정렬하게 됩니다.
한번 적용해볼까요?
우선 HTML 상에서 img
태그의 부모 요소인, div
태그에게 class를 지정해주도록 하겠습니다.
그리고 CSS에서 해당 div
요소를 선택하여 아래와 같이 설정합니다.
결과를 한번 또 잠시 확인해볼까요?
90년대 로고 이미지를 사용해서 조금 창피하지만, 어쨋든 지금 우리가 원했던 결과는 이미지가 가운데로 정렬되는 것이었고 우리의 목적은 이루어졌습니다.
이미지 사이즈 조정하기
이 부분은 꽤 간단합니다. CSS에 있는 width
속성을 활용해 아래와 같이 사이즈를 조정해볼 수 있습니다.
이미지 파일은 좌우 비율이 정해져 있기 때문에, 너비나 높이 둘 중 한 가지만 설정해도 사이즈 조정이 가능합니다만, 원할 경우 두 가지 모두 활용할 수도 있습니다.
결과물이 조금씩 다듬어져 가는 과정이 눈에 보이시나요? 😏
width와 height 속성은 block, inline-block 요소에게만 적용 가능합니다. 너비와 높이를 변경하고 싶은데, 원하는 대로 잘 되지 않는다면, 여러분이 목표한 요소가 block 혹은 inline-block 요소인지 다시 한번 꼭 확인하세요!
Last updated