Seyoung Joo - freeCodeCamp.org

HTML에 외부 CSS 스타일 시트를 적용하는 방법

Seyoung Joo — Wed, 07 Dec 2022 07:19:36 +0000

기사 원문: External CSS Stylesheets – How to Link CSS to HTML and Import into Head

CSS를 HTML에 적용하는 여러 방법 중 외부 스타일 시트를 사용하는 방법이 가장 일반적인 방법입니다. 그럼 어떻게 CSS파일을 HTML과 연결할 수 있을까요?

외부 CSS 파일을 연결하는 것은 그 어떤 HTML 템플릿에서도 중요한 부분입니다. 그럼 지금부터 이 글을 통해 어떻게 외부 CSS 파일을 연결하는지에 대해 알아보겠습니다.

CSS 파일을 HTML 파일과 연결하기

CSS 파일을 HTML 파일에 연결하기 위해서 HTML 파일의 head 요소 안에 link 요소를 추가합니다.

link 요소는 다양한 용도로 사용됩니다. 그리고 외부 CSS 스타일시트를 연결하기 위해서는 알맞은 속성을 사용하는 것이 중요합니다. 그럼 몇 가지 중요한 속성들을 살펴보도록 하겠습니다.

`rel` 속성

두 가지 필수 속성 중 첫 번째인 rel 속성입니다. 이 속성을 사용하여 브라우저에 현재 문서와 링크된 문서 사이의 연관 관계를 알려줄 수 있습니다.

rel="stylesheet"를 사용해 브라우저에 어떤 스타일시트를 사용할 것인지 알려줍니다.

`href` 속성

두 번째 필수 속성인 href는 가져올 파일을 지정하는 역할을 합니다.

보통의 경우에 CSS 파일과 HTML 파일은 같은 폴더 안에 있습니다. 이럴 때 href="style.css"를 사용할 수 있습니다.

만약 CSS 파일과 HTML 파일이 다른 폴더에 있다면 HTML 파일에서 CSS 파일로 가는 올바른 경로를 적어야 합니다.

예를 들어, CSS 파일이 HTML 파일의 형제 폴더 안에 있는 아래와 같은 상황입니다.

project --- index.html
            css ---------- style.css

이 경우에는 "css/styles.css" 를 경로로 적으면 됩니다.

`type` 속성

type 속성을 사용하여 연결할 리소스의 타입을 정의합니다. 스타일시트의 경우 text/css 가 타입이 됩니다. 그러나 css가 웹에서 사용되는 유일한 스타일시트 언어이기 때문에, 타입은 포함하지 않는 것이 일반적입니다.

`media` 속성

media 속성은 선택적 속성으로, 언제 특정 스타일시트를 불러올지 지정하는 데에 사용합니다. 이 속성의 값은 반드시 미디어타입 / 미디어 쿼리여야 합니다.

이 속성은 다른 스크린 사이즈와 장치에 각각 다른 스타일을 적용하고자 할 때 유용합니다.
이것을 위해서는 각각의 CSS파일을 자체 link 요소와 함께 가져와야 합니다.

아래 문서들을 통해 미디어 쿼리를 위해 어떤 속성값들을 사용할 수 있는지 더 알아볼 수 있습니다.

결론

이 글에서는 link 요소와 href, src 속성을 사용하여 외부 스타일시트를 웹 페이지에 추가하는 방법을 배웠습니다.

또한 여러 개의 스타일시트를 불러오고 media 속성을 사용하여 언제 어떤 스타일시트를 적용할지에 대해 배웠습니다.

그럼 재밌게 웹 페이지를 만드세요!

HTML 폰트 크기 - CSS 인라인 스타일을 이용해서 폰트 크기를 변경하는 방법

Seyoung Joo — Wed, 07 Dec 2022 07:03:29 +0000

기사 원문: HTML Font Size – How to Change Text Size Using Inline CSS Style

HTML의 폰트는 웹 페이지의 모양과 전체적인 분위기에 있어서 중요한 역할을 합니다.

여러분은 폰트의 색상, 굵기, 크기 등을 고를 수 있습니다.
그리고 이 기능들은 여러분의 웹사이트와 앱을 더 나아 보이게 하고 유저에게 더 잘 받아들여지게 할 것입니다.
CSS에서 font-size 속성을 사용하여 웹 페이지에서 글자 크기를 크게 또는 작게 변경할 수 있습니다. 또한 외부 스타일, 내부 스타일, 또는 인라인 스타일 등 어떤 종류의 CSS에서도 font-size 속성을 사용할 수 있습니다.

인라인 CSS란 무엇일까요?

인라인 CSS는 HTML 요소를 스타일링하는 데 사용할 수 있는 세 가지 방법 중 하나입니다.

class나 id를 속성값으로 가진 요소를 선택하거나, 요소 자체를 선택자로 정의해서 스타일링을 적용하는 대신에, 모든 CSS 스타일들을 열린 태그에 넣는 것을 말합니다.

더불어 모든 스타일링 속성 값들은 style 속성 안에 들어가야 합니다. style 속성은 모든 HTML 태그에서 허용하는 수많은 속성 중 하나입니다.

아래 예제에서 저는 인라인 CSS를 사용하여 글자의 배경 색을 진홍색으로, 글자 색을 #f1f1f1 (연회색)으로, 그리고 글자 굵기는 bold로 변경했습니다.


  Hello Campers...

그나저나, 모든 것이 크게 보이는 이유는 제 브라우저가 400% 확대되어 있기 때문입니다. 저는 어떠한 추가 스타일링도 하지 않았습니다 :)

인라인 CSS를 사용하여 폰트 사이즈를 변경하는 방법

인라인 CSS에서 폰트 사이즈를 변경하기 위해서는, style 속성 값을 사용해야 합니다. font-size속성을 입력한 다음, 값을 지정합니다.

내장 값들로는 large, larger, medium, small, x-large 등이 있습니다.

아래의 코드에서, 저는 “Hello Campers…” 글자 크기를 font-size속성의 내장 값 중 하나인 x-large로 변경했습니다.

Hello Campers...

또한 픽셀(px), rem 혹은 em과 같은 단위와 숫자를 함께 사용하여 font-size 속성의 값을 설정할 수도 있습니다.

숫자 값을 사용하면 원하는 폰트 크기를 자유롭게 선택할 수 있으므로 숫자 값을 사용하는 것이 좋습니다.

아래의 코드에서, 저는 인라인 CSS를 사용하여 글자 크기를 30px로 변경했습니다.

Hello Campers...

결론

이 글에서 인라인 CSS를 사용하여 폰트 크기를 변경하는 방법과 font-size의 속성에 대해서 배웠습니다.

하지만 참고로 말하자면, 인라인 CSS는 스타일링에는 좋지만 여러분이 팀으로 일하고 있는 경우라면 HTML 코드를 읽기 어렵게 만들 수도 있습니다. 그래서 인라인 CSS 스타일링에 너무 의지해서는 안 됩니다. 여러분이 쓴 코드를 이해할 수 있는 사람이 오직 여러분 혼자이기를 원하지는 않을 테니까요.

또한 인라인 스타일은 내부 스타일과 외부 스타일보다 우선시 되어 코드를 덮어쓴다는 것에 주의하세요. 가독성을 위해서 HTML과 CSS 코드가 분리되는 외부 스타일이나 내부 스타일을 대신 사용해야 합니다.

font-size속성에 값을 할당할 때에는 px 대신 rem 단위를 사용하는 것이 좋습니다. rem을 사용하면 사용자가 화면을 확대하거나 축소할 때 브라우저가 글자 크기를 조정할 수 있는 데에 반해, px을 사용하면 그럴 수 없기 때문입니다.

읽어주셔서 감사합니다. 계속해서 코딩하세요.