본문 바로가기
💻 1. 웹개발_Front end/1-3 CSS

[CSS] 01-2. 스타일과 스타일 시트

by 달님🌙 2021. 9. 5.
반응형

 

1. 스타일과 스타일 시트

 

① 스타일(style) : HTML 문서에서 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 문서의 겉모습을 결정짓는 내용

② 스타일 시트(style sheet) : 스타일을 관리하기 쉽도록 한 곳에 모아놓는 것

 

2. 왜 스타일을 사용할까?

 

① 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있습니다.

- HTML로는 웹 문서의 내용을 나열하고 CSS로는 웹 문서의 디자인을 구상하는 것이 웹 표준의 시작

- 웹 문서의 내용과 디자인을 독립적으로 수정 가능

- CSS Zen Garden 사이트 참고

CSS Zen Garden: The Beauty of CSS Design

 

CSS Zen Garden: The Beauty of CSS Design

So What is This About? There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into thi

www.csszengarden.com

 

② 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있습니다.

- CSS를 사용하면 내용은 그대로 두고 대상 기기에 맞게 레이아웃 설계 가능

- CSS로 기기별 레이아웃을 설계하는 것이 반응형 웹의 기본

ex) 스타벅스 홈페이지

 

 

3. 스타일 형식

 

①

   p   { text-align: center; }
 선택자   스타일 속성  속성 값

- 선택자 : {  } 사이에 정의한 스타일 규칙이 적용될 대상

- 속성과 속성 값 : ‘속성 : 속성 값‘ 형태로 표시하며, 속성과 속성 값 쌍이 여러 개일 경우 세미콜론(;)으로 구분

②

p { color:blue; font-size: 16px } /* 텍스트 단락의 글자 색 파란색, 글자 크기 16px */

③

h2 { font-size: 20px; color: orange;} /* 2단계 제목의 글자 크기 20px, 글자 색상 주황색 */
p {color: blue;} /* 텍스트 단락의 글자 색 파란색 */

 

4. 스타일 표기 방식

 

① 스타일 규칙은 세미콜론(;)으로 구분하여 중괄호 안에 나열함

② 공백을 최소화하여 파일 크기를 줄이려면 한 줄로 표기하지만 대부분 개발자나 유지보수 인력이 읽기 쉽게 여러 줄로 표기

h2 { 
	font-size: 20px;
	color: orange;
}

 

5. 스타일 주석

 

① /*와 */ 사이에 스타일 규칙에 대한 설명을 주석으로 입력

② 주석은 한 줄 또는 여러 줄로 입력 가능

 

<예제 – css-001.html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 적용해보기</title>
    <style>
        /* h2 제목과 
           텍스트 단락의
           스타일을 조절해보자
           */
           h2 {
               font-size: 20px; /* h1 글자 크기 20px */
               color: orange; /* h1 글자 색상 orange */
           }
           p {
               color: blue; /* p 글자 색상 blue */
           }
    </style>
</head>
<body>
    <!--h1+h2+p*2-->
    <h1>CSS</h1>
    <h2>웹 문서의 디자인과 내용을 분리합니다.</h2>
    <p>웹 표준에 의한 웹 문서는 디자인과 내용이 분리되어 있습니다.</p>
    <p>내용은 HTML을 이용해 구성하고, 디자인은 CSS를 이용해 꾸미는 것입니다.</p>
</body>
</html>

 

6. 내부 스타일 시트

 

① 스타일 시트는 웹 문서 내에 정의하거나 외부 css파일에 정의하여 참조하여 사용할 수 있음

② 웹 문서 내에 정의된 스타일 시트를 내부 스타일 시트라고 함

③ 스타일 정보는 웹 문서를 브라우저 화면에 표시하기 전에 결정되어야하기 때문에 <head>안에서 정의해야 하고 <style>를 이용해 작성

 

7. 외부 스타일 시트

 

① 대부분의 경우 한 홈페이지에서 디자인의 일관성을 주기 위해 여러 웹 문서에서 동일한 스타일을 적용하는데 그 때 마다 여러 웹 문서에 똑같은 내부 스타일 시트를 만드는 것은 차지하는 서버 저장공간이나 다운로드 시간까지 비효율적임

② 여러 웹 문서에서 사용할 스타일 시트를 별도의 파일로 저장하고 필요할 때마다 웹 문서에서 사용하는 것이 일반적임

③ 이 때 별도로 저장해서 관리하는 스타일 시트를 외부 스타일 시트라고 하며, .css 확장자를 사용

④ <link> 태그를 이용해서 외부 스타일 시트 파일 연결

 

8. 인라인 스타일

 

① 간단한 스타일 정보는 스타일 시트를 사용하지 않고 적용할 태그에 직접 표시하는데, 이걸 인라인 스타일이라고 함.

② 스타일을 적용하고 싶은 해당 태그에 style 속성을 이용해 설정

③ style=“속성: 속성 값;” 형태로 사용

 

* 스타일 적용 순서

① 스타일 적용 시 내부 스타일 시트나 외부 스타일 시트 또는 인라인 스타일에 동일한 대상에 대한 스타일이 정의되어 있을 경우가 있다.

② 그 때 스타일이 적용되는 순서는 다음과 같다.

인라인 스타일 > 내부 스타일 시트 > 외부 스타일 시트

 

<예제 – internal-css-001.html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>내부 스타일 시트</title>
    <style>
        ul {
            color: blue; /* 목록의 글자색 */ 
            list-style-type: square; /* 불릿 형태 : 사각형 */
        }
    </style>
</head>
<body>
    <!--img+h1+ul>li*3-->
    <img src="images/sydney.png" alt="시드니 오페라 하우스">
    <h1>세계 3대 미항</h1>
    <ul>
        <li>시드니(Syeney), 호주</li>
        <li>리우데자네이루(Rio de Janeiro), 브라질</li>
        <li>나폴리(Naples), 이탈리아</li>
    </ul>
</body>
</html>

 

<예제 – style.css, external-css-001.html>

ul {
    color: blue; /* 목록의 글자색 */
    list-style-type: square; /* 불릿 형태 : 사각형 */
}

p {
    color: orange;
}
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>외부 스타일 시트</title>
    <!--css폴더내의 style.css파일을 외부 스타일 시트로 참조-->
    <!--href속성 : 링크할 외부 리소스 URL이나 파일경로 지정-->
    <!--rel속성 : 현재 문서와 외부 리소스 사이의 연관 관계 명시, 필수 속성-->
    <!--type속성 : 링크된 외부 리소스의 미디어 타입 명시. href 속성이 설정되어 있어야만 사용 가능-->
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <!--img+h1+ul>li*3-->
    <img src="images/sydney.png" alt="시드니 오페라 하우스">
    <h1>세계 3대 미항</h1>
    <ul>
        <li>시드니(Syeney), 호주</li>
        <li>리우데자네이루(Rio de Janeiro), 브라질</li>
        <li>나폴리(Naples), 이탈리아</li>
    </ul>
</body>
</html>

 

<예제 – inline-css-001.html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>인라인 스타일</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <!--h1+p*2-->
    <h1>블루베리와 향산화 효능</h1>
    <p style="color: blue;"> 블루베리는 향산화제인 안토시아닌과 폴리페놀을 다량 포함하고 있습니다.</p>
    <p>매사츄세츠 보스톤에 있는 USDA 노화에 관한 인류 영양 연구센터의
        자료에 의하면 블루베리는 과일 중에서 가장 항산화 작용이 뛰어난 과일이라고 한다.
    </p>
    <p>
        블루베리의 안토시아닌과 폴리페놀의 항산화 작용으로 인해 노화예방에 도움이 된다.
    </p>
</body>
</html>

 

반응형
저작자표시 비영리 변경금지

'💻 1. 웹개발_Front end > 1-3 CSS' 카테고리의 다른 글

[CSS] 02-1 글꼴 관련 스타일  (0) 2021.09.05
[CSS] 01-5 CSS3와 CSS 모듈  (0) 2021.09.05
[CSS] 01-4 캐스캐이딩 스타일 시트 (CSS : Cascading Style Sheet)  (0) 2021.09.05
[CSS] 01-3 주요 선택자  (0) 2021.09.05
[CSS] 01-1 CSS 기초  (0) 2021.09.05

관련글

댓글

티스토리툴바