[html, css 기초] 12. 파일 병합 및 id

파일병합

이전 실습에서 유지보수 및 가시성, 편리함 등을 위해 html 파일과 css파일은 분리해서 관리하도록 분할하였다.

하지만 브라우저에게 html을 전달 해 줄때 css 파일이 병합 되어야 한다. 이 동작은 어떻게 이루어질까?

개발자도구( F12 )에서 network부분을 보자 ( F5로 새로고침 하면 나옴 )

처음 html이 파일이 브라우저에 의해 자동 요청되고 외부파일 (css, js, 이미지, etc..)은 이후 별도로 요청된다.

즉, 맨 처음 html파일이 로드될 때 link등으로 지정된 파일들을 브라우저가 자동으로 요청하여 병합된다.

이전에 실습한 내용은 여러 html 요소들의 style 과 같은 css 코드들을 포괄적으로 작성한 뒤 css파일을 별도로 분리까지 하였다.

그럼 일부 요소들만 style을 변경하고 싶은 경우는 어떨까? 다시 open tag에 css코드를 삽입할까? 아니다!

기껏 분리를 해놓았는데 의미가 없어진다. 또한, 코드가 난잡해 질 수 있으며 유지보수에도 좋지 않다.

이럴때 해결책이 바로 id 이다! id 값을 사용자가 지정한 뒤 css 파일에서 그 id에 속성과 값을 별도로 설정하는 것이다.

이러면 메타데이터를 가진 css의 취지에도 잘 맞고 html 코드도 간결해진다.

id를 사용자에 맞게 설정한다. 하지만, 공백은 "-"로 대체하고 소문자를 사용해야 한다.

그리고 css 파일에서 "#id"를 동해 속성과 값을 설정할 수 있다.

참고로 px는 화면의 픽셀을 뜻하고 html의 기본단위이다.