5일차 - 이미지 추가 및 CSS 기초, 파일 이름의 규칙
HTML문서에 이미지 추가하기
이미지를 추가하는 것은 굉장히 간단하다.
img 태그를 사용하면 되는데, 이 img 태그는 콘텐츠가 없고 속성으로만 구성되어 있다.
위 이미지처럼 img 태그에는 src 속성에 이미지의 이름 및 경로가 들어가고, alt 속성에 해당 이미지에 대한 내용을 넣는다.
위 이미지의 크기가 작은 이유와 모서리가 부드러운 것은 css 파일에서 규칙을 정해줬기 때문이다.
해당 이미지에 너비와 높이, 모서리를 깎는 정도를 적용했다.
만약 border-radius를 50%을 주게 되면 완전히 동그란 이미지가 된다.
또한, 이 세개의 속성은 자주 사용하게 되므로 잘 익혀두는 것이 좋다.
CSS를 종속 스타일 시트로 불리는 이유
CSS가 Cascading Style Sheets의 약자인 것은 지난 시간에 다뤄봤다. 그런데 이렇게 불리는 이유가 무엇일까?
CSS를 인라인 스타일로 적용하면 한번에 하나의 부분에만 적용되지만, 일반적으로 사용하는 글로벌 CSS 방식을 사용하면 두 개 이상의 CSS 규칙이 동일한 요소에 적용될 수 있다.
위 이미지는 a 태그와 p 태그에 폰트를 어떤 것을 쓸 것인지 규칙을 정하는 모습을 보여주고 있다.
이렇게 적용하면 앞으로 HTML 문서에서 다루는 a태그와 p태그에는 모두 맑은 고딕 글꼴이 적용된다.
파일 이름 규칙에 대해서
파일 이름은 자기 마음대로 짓는 것이 보통이지만, 개발자에게는 어느정도 지켜야 하는 규칙이 있다.
사용자가 들어갔을 때 뜨는 첫 화면의 웹페이지는 보통 index.html로 짓게 된다.
그리고 웹사이트의 관련 전화번호나 이메일 등을 알려주는 웹페이지는 contact.html, 회원가입 페이지는 signin.html 등으로 짓게 된다.
위 이미지처럼 CSS 파일도 일반적으로 style.css를 쓰게 된다.
그러나 해당 웹페이지에만 스타일을 적용하는 CSS 파일에는 해당 웹페이지가 어떤 것인지 알려주는 이름을 쓰게 된다.
그리고 전체적인 CSS 규칙을 적은 파일은 global.css 같은 이름을 짓기도 한다.
