Notice
Recent Posts
Recent Comments
Link
«   2026/03   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

AI와 데이터 사이언스의 이론과 실전

CSS - HTML에 적용하는 법, 글씨 컬러 변경 본문

HTML과 CSS/CSS

CSS - HTML에 적용하는 법, 글씨 컬러 변경

큐트아리 2023. 10. 15. 14:27 
선택자{ 속성명1:속성값2; 속성명2:속성값; ... }

1. CSS란?

CSS(Cascading style Sheets)는 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어입니다. CSS를 사용하면 웹 페이지의 디자인 및 레이아웃을 효과적으로 제어할 수 있으며, 웹 페이지의 내용과 구조(HTML)를 분리하여 디자인을 변경하거나 개선하는 데 도움을 줍니다. 디자인(색넣기,글자크기조정,이미지넣기)과 관련된 역할을 합니다. 이전에 HTML 기초에 대해 포스팅 했는데 오늘부터는 HTML을 꾸며주는 CSS에 대해 배워보겠습니다.

 

2. css 문법

선택자{ 속성명1:속성값2; 속성명2:속성값; ... }

HTML 문서요소 안에 < style > 요소를 사용하여 css 문법을 적용하는 것이 원칙입니다

p {text-align: center;} /* p태그 안에 text-align(정렬)을 사용해서 center로 가운데 정렬 */
p {color: blue;} -/*글자 컬러 블루로 변경*/

2.1. 선택자란?

html에서 어떤 녀석에게 속성을 줄것인지 알려주는 것입니다

 

2.2. 주석문

/*주석*/

HTML의 주석은 <!---->이였는데요. css는 /**/ 입니다. CSS와 HTML 모두 코드에 문제가 있어도 에러가 뜨지 않음으로 주석문과 같은 것을 혼동하여 사용하면 원하는 결과값이 나오지 않을 수 있습니다. 또한 HTML과 마찬가지로 타인이 확인 가능함으로 보안과 관련된 내용을 작성하지 않도록 주의합니다.

 

3. css 적용하는 방법

HTML에 CSS를 적용하는 방법은 . css 확장자를 가진 별도의 CSS 파일을 생성하는 법과 HTML의 head 안에 작성하는 법, 요소 내부에 style을 주는 법이 있습니다.

3.1. 인라인 스타일

HTML 요소 내부에 style 속성을 사용하여 적용하는 방법입니다. 심플하고 직관적으로 해석이 가능하다는 장점이 있습니다.

<문법>

<p style="text-align: center;color: blue;">안녕</p> #안녕이라는 글자가 파란색으로 가운데정렬

<예시코드>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>인라인 스타일</title>
</head>
<body>
    <h2 style="text-align: center; font-size: 50px;">인라인 스타일</h2>
    <p style="text-align: center; font-size: 20px; color: deepskyblue;">HTML요소 내부에 style속성을 사용하여 적용하는 방법</p>
</body>
</html>

<결과>

3. 2. 내부 스타일

두번째로 HTML 문서의 <head> </head> 사이에 <style></style> 요소를 사용하여 적용하는 방법인 내부 스타일 방법이 있습니다. 많은 양의 CSS를 작성할 때 내부스타일로 넣을 경우 유지보수에 어려움이 있기 때문에 이러한 방법이 더 자주 쓰입니다.

 

<문법>

    <head>
        <style>
            p {text-align: center;color: blue;}
        </style>
    </head>

<예시 코드>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>내부 스타일</title>
    <style>
        h2 {font-size: 50px;}
        ul {list-style: none;} /*목록 스타일 없애기*/
        li {display: inline-block; margin-right: 50px; font-weight: bold; color: deeppink;} /*블록이긴한데 한줄로 출력 면의 속성을 가졌기 때문에 margin을 줘 간격을 둘 수 있음 */
    </style>
</head>
<body>
    <h2>css를 적용하는 방법</h2>
    <ul> <!--순서가 없는 목록 만드는 ul -->
        <li>인라인 스타일</li>
        <li>내부 스타일</li>
        <li>외부 스타일</li>
    </ul>
</body>
</html>

<결과>

3.3. 외부 스타일

외부 스타일은 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 적용하는 방법입니다. 별도의 .css 확장자를 가진 CSS 파일을 만들어서 사용하면 유지보수에 장점이 있습니다. 또한 CSS의 특성상 코드가 굉장히 길어지는데 HTML 파일과 별도로 관리하면 가독성에 좋습니다. 특히, 외국과는 달리 웹 퍼블리셔라는 CSS를 전문으로 하는 직업과 프론트 앤드 개발자가 구분되어 있는 한국에서는 주로 외부 스타일을 사용합니다. 또한 다양한 HTML 파일에 재사용이 가능하다는 장점이 있습니다. 다만 html문법을 css 파일에 적용 불가능함으로 유의해야 합니다. 또한 HTML에서 작성한 ID, CLASS와 같은 것들이 CSS 파일내에서 자동완성이 되지않아 불편함이 있는데, 이는 이전에 설명드린 Extentions에서 확장기능을 사용하면 해결 가능합니다. 다양한 Extentions를 다음번에 포스팅하겠습니다.

<문법>

<head>
        <link rel='stylesheet' href='css 파일 경로'>
</head>

<!-- rel = 현재 문서와 링크된 문서 사이의 연관관계를 명시 -->

<예시코드 - HTML>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>외부 스타일</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <h2>css를 적용하는 방법</h2>
    <ul> <!--순서가 없는 목록 만드는 ul -->
        <li>인라인 스타일</li>
        <li>내부 스타일</li>
        <li>외부 스타일</li>
    </ul>
    <h2>다른 h2 태그도 적용됨</h2>
</body>
</html>

<예시코드 - CSS>

/* style.css
    작성일 : 2023-10-10
    작성자 : 아리큐트
    내용 : 외부 스타일 적용 방법
    주의사항 : css 파일 안에는 html문법 사용 불가 <style></style>같은 거 사용 불가능
    

*/
h2 {font-size: 50px;}
ul {list-style: none;} /*목록 스타일 없애기*/
li {display: inline-block; margin-right: 50px; font-weight: bold; color: deeppink;}

<결과>

4. CSS의 컬러

CSS는 16진수로 이루어진 색상을 표현할 수 있습니다. 코드에 작성할 때는 크게 세가지 방법이 있습니다.

 

  • 색상 이름으로 표현
        red, yellow, blue, salmon, ....

 

  • RGB 색상값으로 표현
     rgb(0~225,0~225,0~225)
          red  green  blue

     rgba(0~225,0~225,0~225,0.0~1.0)
           red  green  blue  alpha(투명도)

 

  • 16진수 색상값으로 표현
        #0000FF 혹은 #00F

        00 00 FF
         r  g  b

 

'HTML과 CSS > CSS' 카테고리의 다른 글

CSS - display 속성, 폼 태그  (1) 2023.10.20
CSS - 박스 모델(내용, 패딩, 마진, 테두리) , 박스 사이징  (0) 2023.10.19
CSS - 배경 색 설정, 배경 이미지 삽입, 위치, 사이즈 조절  (1) 2023.10.18
CSS - 텍스트 간격, 정렬, 효과, 설정, 글꼴 선택  (1) 2023.10.17
CSS - 선택자(전체, 요소, 상속, id, class, 그룹, 자식, 자손, 형제, 인접형제, 속성, 가상 선택자)  (0) 2023.10.16
'HTML과 CSS/CSS' Related Articles more