CSS를 HTML에 적용하는 방법 및 설명

Dung--[CSS HTML] 2023. 4. 26. 18:45

HTML에 CSS를 적용하는 방법에는 3가지가 있습니다. 각 방법은 장단점이 있으니 상황에 맞추어 적절한 방법을 선택합니다.

- Inline Style sheet

HTML 태그의 style 속성에 CSS 코드를 넣어서 사용하는 방법

- Internal Style sheet

HTML 문서 내의 <style>과 </style> 안에 CSS 코드를 넣는 방법

- Linking Style Sheet

별도의 CSS 파일을 만들고 HTML 문서와 연결을 하는 방법

※ 일반적으로 Linking Style Sheet를 기본적으로 사용을 하고, 특정 문서에만 적용되는 스타일은 Inline Style sheet 또는 Linking Style Sheet으로 만듭니다.

1. Inline Style sheet

Inline Style sheet는 HTML 태그의 style 속성에 CSS 코드를 넣고 적용시키는 방법입니다.

해당 태그 (위 코드에서는 p)가 선택자(selecrot)가 되며, CSS코드에는 속성 (property)과 값(value)만 들어 갑니다. 따라서 꾸미는 데에는 한계가 있으며, 재사용이 불가능하다는 단점이 있습니다.

2. Internal Style Sheet

Internal Style Sheet 은 HTML 문서 안에 스타일 코드를 넣는 방법입니다. <style></style> 안에 CSS 코드를 넣습니다. 예를 들어 다음과 같은 코드를 HTML 문서에 넣으면, 문서 안의 모든 h1 요소의 글자가 파란색상이 됩니다.

이방법은 HTML 문서 안의 여러 요소를 한번에 꾸밀 수 있는 장점이 있지만 또 다른 HTML 문서에는 적용할 수 없다는 단점이 있습니다.

3. Linking Style Sheet

Linking Style Sheet 는 별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방식입니다. 예를들자면 모든 h1 요소의 글자를 빨간색으로 하시고 싶으시다면, 다음의 내용으로 style.css 파일을 만듭닏. (CSS 파일의 확장자는 CSS이다)

h1 {
color: red;
}

적용을 원하는 HTML 문서에 하단의 코드를 추가합니다.

위의 코드는 HTML 파일과 CSS 파일이 같은 폴더에 있다는 가정을 하였을 때의 코드로, 경로는 적절하게 수정을 해야 합니다. 예를 들어서 HTML 문서가 있는 폴더에 CSS폴더가 있고, 그 안에 style.css 파일이 있다면 다음과 같이 한다.

이같은 방법의 장점은 여러 HTML 문서에 활용할 수 있다는 것입니다. style.css 를 적용시키고 싶은 문서에 <link>태그로 연결만 하여주시면 됩니다.

CSS 표만들기 및 테두리 꾸미는 방법

CSS 표만들기 및 테두리 꾸미는 방법 1. CSS 테두리 만드는 속성 테두리는 border 속성으로 만듭니다. table,th,td요소에 적용하실 수 있습니다. tr요소에는 적용이 되지 않습니다. 2. 기본모양 아무런 꾸

dsmotion.tistory.com

CSS 표꾸미기, 정렬하는 방법

CSS 표꾸미기, 정렬하는 방법 1. CSS 표 관련된 정렬 방법 표에 관련된 정렬방법에는 표 정렬, 셀 안의 내용가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본적인 모양은 1)표 : 왼쪽 정렬 2)제목

dsmotion.tistory.com

CSS 테이블 꾸미기, 표 크기 설정하는 방법

CSS 테이블 꾸미기, 표 크기 설정하는 방법 1. CSS 표와 셀의 기본 크기 표와 셀의 크기는 정해져 있지가 않습니다. 내용이 짧다면 작은 크기로, 내용이 길다면 크게 표와 셀이 형성이 됩니다. 의도

dsmotion.tistory.com

만물주머니 만물주머니