Programming/CSS

[CSS] CSS의 시작: HTML과 CSS 연결

Isaac S. Lee 2023. 9. 22. 11:39

🍁CSS

CSS(Cascading Style Sheets)는 스타일 시트를 의미한다.
CSS는 디자인을 담당하며, HTML 페이지의 서식을 만드는 언어이다.
독립 실행이 안 되며, 반드시 HTML 문서가 있어야 실행할 수 있다.

HTML 서식 기능에서 CSS 서식 기능으로 확장하여 사용한다.


CSS 주요 역할

1. 스타일링

HTML 요소들에 스타일을 적용하여 웹 디자인 작업을 한다.

2. 레이아웃

요소들의 배치와 크기를 조절하는 페이지 레이아웃 작업을 한다.

3. 반응형 웹

디바이스 크기에 맞춰 적절한 레이아웃과 스타일을 제공한다.

4. 웹 접근성 향상

시각 장애인을 위한 스크린 리더의 작업을 한다.

 

🍁CSS의 시작

html:5
!
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

html:5 또는 !를 Enter와 함께 입력하여 자동으로 html 초기 구성을 만들어 줄 수 있다.

 

CSS의 단축키

주석을 Ctrl + /를 입력하여 작성할 수 있다.

라인 Shift + Alt + 방향키로 코드를 복사할 수 있다.

Ctrl + X로 한 줄 지우기를 할 수 있다.

블럭을 잡고 Ctrl + Shft + P로 코드를 태그 안에 넣을 수 있다.

 

vertical select

Ctrl + Alt + 방향키로 여러 코드를 동시에 블럭 잡아 수정할 수 있다. 이를 vertical select라고 한다.

Alt와 마우스 클릭으로 구분되어 있는 코드를 동시에 수정할 수도 있다.

 

🍁CSS의 활용

<style>

하나의 파일은 하나의 언어로만 작성해야 한다.

하나의 파일에 여러 개의 언어로 프로그래밍을 하면 컴파일러가 해야 하는 일이 많아지기 때문이다.

그러나 CSS는 어쩔 수 없이 여러 파일을 붙여야 하는 성질 때문에 <style> 태그가 만들어지게 되었다.

<style> 영역은 HTML 영역이 아닌 CSS 영역으로 생각하면 된다.

 

  • 요구 사항: "안녕하세요." x 5번 출력
  • 추가 사항: 글자색을 파란색으로 변경
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
    
        /* CSS 주석 */

        div {
            color: blue;
        }

    </style>

</head>
<body>
     <h1>HTML만 사용</h1>
     <p><font color="blue">안녕하세요.</font></p>
     <p><font color="blue">안녕하세요.</font></p>
     <p><font color="blue">안녕하세요.</font></p>
     <p><font color="blue">안녕하세요.</font></p>
     <p><font color="blue">안녕하세요.</font></p>

     <hr>
     <h1>CSS 활용</h1>
     <div>안녕하세요.</div>
     <div>안녕하세요.</div>
     <div>안녕하세요.</div>
     <div>안녕하세요.</div>

</body>
</html>

같은 작업이지만 HTML만을 사용했을 때보다 CSS를 활용할 때 서식 작성을 더욱 편리하게 할 수 있다.

 

🍁HTML과 CSS 연결

HTML 문서에 CSS를 적용하는 방법을 알아보도록 하자.🍂

 

인라인 스타일 시트 (Inline Style Sheet)

우리가 사용하는 모든 태그에는 style이라는 속성값을 가지고 있다.

이 style 속성값은 인라인 스타일 시트를 위한 속성값이다.

태그 안에 직접 작성한다고 해서 인라인 스타일 시트라고 한다.

서식을 태그에 직접 적용한다는 특징이 있다.

  • 장점: 가독성이 높다.
  • 단점: 재사용이 불가능하다.
<h2>오늘의 할 일</h2>

<ul>
    <li style="color: blue">VS CODE 설치하기</li>
    <li>VS CODE 설정하기</li>
    <li style="color: orange">수업 복습하기</li>
    <li>개인 과제 제출하기</li>
</ul>

인라인 스타일 시트는 관리하기 힘들기 때문에 사용을 배제하는 게 나을 수 있다.

 

내부 스타일 시트 (Embeded Style Sheet)

<style> 태그 내에 서식을 명시하는 방법이다.

문서 내의 여러 태그를 한 번에 서식을 일괄 적용할 수 있다.

 

  • 장점: 재사용이 가능하다.
  • 단점: 가독성이 낮다.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 내부 스타일 시트 */
        li {
            font-style: italic;
        }
    </style>
</head>
<body>
    <h2>오늘의 할 일</h2>

    <ul>
        <li style="color: blue">VSCODE 설치하기</li>
        <li>VSCODE 설정하기</li>
        <li style="color: orange">수업 복습하기</li>
        <li>개인 과제 제출하기</li>
    </ul>
</body>
</html>

위 코드는 문서 전체를 통틀어서 <li> 태그를 찾아내어 이태릭체로 바꾸라는 의미이다.

해당 파일에서만 서식을 적용하려고 할 때 내부 스타일 시트를 사용하면 좋다.

 

외부 스타일 시트 (External Style Sheet)

*.css 파일에 서식을 명시하는 방법이다.

<link> 태그를 사용해서 CSS 파일을 HTML 파일에게 적용해야 한다.

HTML 파일에 종속되지 않고 문서를 별도로 분리했기 때문에 재사용성이 가장 높지만, 가독성이 가장 낮다.

 

  • 장점: 재사용성이 가장 높다.
  • 단점: 가독성이 가장 낮다.
/* ex02.css */

h2 {
    color: orange;
}
<h2>오늘의 할 일</h2>

<ul>
    <li style="color: blue">VS CODE 설치하기</li>
    <li>VS CODE 설정하기</li>
    <li style="color: orange">수업 복습하기</li>
    <li>개인 과제 제출하기</li>
</ul>

글꼴, 글자 크기 등의 페이지마다 따로 정의하지 않는 서식이 있다.

이런 서식에 외부 스타일 시트로 변경을 해 두면 페이지를 100개를 만들더라도 일괄적으로 적용할 수 있다.

저작자표시 비영리 변경금지 (새창열림)