yeoullu story - 여을루의 맛집, 멋집, 꿀팁 이야기

반응형

 CSS사용법을 함께 알아볼께요. 매우 기초적인 부분입니다. CSS를 HTML에 적용시키는 방법에 대해서 이번 시간에 알아보도록 해요. 

 

웹 개발에 필수라고 하면 CSS와 HTML이 있습니다. 

 

대체로 HTML이 웹 페이지의 뼈대, 토대라고 한다면 CSS는 모양을 결정짓는 살(skin)같은 것이며 JAVASCRIPT는 그렇게 만들어진 웹 페이지의 액션을 담당합니다. 

 

이번 포스팅에선 CSS를 HTML에 어떻게 적용시키는지에 대해 알아보겠습니다.

 

포스팅-썸네일

 

CSS를 HTML에 적용시키는 3가지 방법. 지금부터 배워볼께요. 

 

 

CSS 사용법 기초 HTML 적용방법 3가지

CSS를 HTML에 적용시키는 방법은 3가지가 있습니다. 각각의 방법은 장단점이 있습니다만, 조금 더 나은 방법이라고 알려진 것도 있습니다.

 

1. Inline Style Sheet

2. Internal Style Sheet

3. Linking(External) Style Sheet

 

Inline Style Sheet

이 방법은 <a>, <p>, <div> 등과 같은 HTML 태그에 style 이라는 속성을 주어 CSS를 적용시키는 방법입니다. 

 

사용 방법은 아래와 같습니다. 

<p style="color:red; font-size:20px">Inline Style Sheet 예제</p>

위 방법은 CSS를 바로바로 적용시켜볼 수 있어 빠르다는 장점이 있지만 재사용성이 떨어집니다. 무슨 말이냐 하면 똑같은 효과를 줘야 할때 하나하나 style 속성을 추가해야 한다는 것입니다. 

 

그리고 이 효과들 중 추가를 해야 하거나 빼야 하는 것이 있게 된다면 어떻게 해야 할까요?.. 말 안해도 아시겠죠?

 

Internal Style Sheet

이 방법은 웹 페이지 HTML 코드 중 <head> 부분이나 구현부 위쪽에 <style>태그를 주어 적용을 하는 것입니다. 즉 문서 내부에 css 코드를 삽입하는 것이지요. 

 

사용 방법은 아래와 같습니다. 

<style>
    p {
        color: red;
        font-size: 20px;
</style>

 

(여기에서 p가 선택자(selector)입니다. 선택자에 대한 것은 추후 포스팅하도록 하겠습니다. )

 

Inline Style Sheet는 태그 자체에 넣는 반면, Internal Style Sheet는 문서내에서 재사용성이 높아진다는 장점은 있지만 다른 문서에서는 사용할 수 없다는 단점이 있습니다. 

 

Linking(External) Style Sheet

Linking Style Sheet 방식은 style.css 와 같은 별도의 파일을 만들고 해당 파일을 문서와 연결하여 사용하는 방식입니다. 

 

아래처럼 사용할 수 있습니다. 

 

style.css 파일

p {
    color: red;
    font-size: 20px;
}

 

css파일을 html 문서에다 연결(Linking)을 시켜주는데 적용시킬 문서에 <head>태그 사이에 아래의 코드를 추가시켜주시면 됩니다. 

 

index.html 파일

<head>
    <!-- codes -->
    <link rel="stylesheet" href="./style.css">
</head>

 

link태그의 href는 style.css파일의 경로를 입력해줍니다. 

 

Linking 방식은 규모가 어느정도 되는 대부분의 프로젝트에서 쓰이는 방식입니다. 단점보다는 장점이 훨씬 많은 방식이기도 하구요. 

 

해당 css효과가 필요한 문서에 <link> 태그로 연결만 시켜주면 되니 재사용성이 매우 뛰어난 방식입니다. 


마치며

지금까지 css의 기초인 css를 html 문서에 적용시키는 3가지 방법에 대해 알아보았습니다.~

 

비정기적으로 css, html에 대한 내용을 다루도록 하겠습니다. 감사합니다. 

 

 

해당 포스팅이 조금이나마 도움이 됐다면 ♡공감 버튼 부탁드립니다.~

 

 

이 글도 추천해요

 

 

그리드형

이 글을 공유합시다

facebook twitter googleplus kakaostory naver

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

1 2 3 4