코밍이의 하루

[CSS3] CSS(Cascading Style Sheets) 기초 본문

웹언어 공부/CSS3

[CSS3] CSS(Cascading Style Sheets) 기초

코밍이 2021. 8. 26. 12:07

1. 개발 환경

구분 내용
사용 언어 HTML5, CSS3
개발환경 Visual Studio Code
참고 도서 [Do it] HTML5 + CSS3 웹 표준의 정석
웹브라우저 Chrome

 

2. 스타일과 스타일 시트

1) 스타일(style)

- HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 방법 등 문서의 겉모습을 결정짓는 내용들

 

2) 웹 문서 구성

- HTML : 웹 사이트의 내용 나열

- CSS : 웹 문서의 디자인 구성

 

3) 스타일 형식

기본형
①p { ②text-align : ③center; } /* 텍스트 단락을 중앙에 정렬하는 스타일 규칙 */
① 선택자 : 앞으로 만들 스타일 규칙을 어디에 적용할 것인지 나타냄, 셀렉터라고도 불림
② 스타일 속성
③ 속성 값

4) 스타일 표기 방법

① 스타일 규칙

- 세미콜론(;)으로 구분해 중괄호({,}) 안에 나열

- 개발자가 읽기 쉽고 유지보수가 쉽게 하기 위해 여러 줄에 걸쳐 작성

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

5) 스타일 주석

- 설명을 덧붙일 때 사용

- 주석을 표시할 때는 /*와 */ 사이에 내용 입력

- 한 줄 및 여러 줄 입력 가능

 

6) 스타일 시트

- 스타일 규칙들을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도록 한 군데 묶어 놓은 것

- 문서 안에서 사용할 스타일 규칙들을 정의한 '내부 스타일 시트'와 별도의 스타일 파일을 만등러 연결해 사용하는 '외부 스타일 시트'로 나뉨

① 내부 스타일 시트

- 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것

- 모든 스타일 정보는 <head> 태그와 </head> 태그 안에서 정의해야 하고 <style> 태그와 </style> 태그 사이 작성

② 외부 스타일 시트

- 따로 저장해 놓은 스타일 정보를 '외부 스타일 시트'라고 하고 '.css'라는 파일 확장자 사용

- 외부 스타일 시트 연결 시 <link> 태그를 사용해 연결한다.

 

7) 인라인 스타일

- 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시하는 방식

기본형
<link rel="stylesheet" href="외부 스타일 파일 경로">

3. 소스 코드 및 실행 화면

- css-comment.html

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS 적용해 보기</title>
    <style>
      /* h2 제목과
        텍스트 단락의 
        스타일을 조절해 보자
      */
      h2{
        font-size:20px;  /* 글자 크기 20픽셀 */
        color:orange;  /* 글자색 오렌지 */
      }
      p {
        color:blue;   /* 글자색 파랑 */
      }
    </style>
	</head>
	<body>
		<h1>CSS</h1>
		<h2>웹 문서의 디자인과 내용을 분리합니다</h2>
		<p>웹 표준에 의한 웹 문서는 디자인과 내용이 분리되어 있습니다.</p>
		<p>내용은 HTML을 이용해 구성하고, 디자인은 CSS를 이용해 꾸미는 것입니다.</p>
	</body>
</html>

css-comment.html

- internal.html

<!doctype html>
<html lang="ko">
    <head>
        <title>온라인 프로필</title>
        <meta charset="utf-8">
        <style>
            section {
                width:500px;  /* 너비 */
                padding:15px;  /* 테두리와 내용 사이의 여백 */
                border:5px solid gray;  /* 테두리 스타일 */
            }
        </style>
    </head>
    <body>
        <div id="container">
        <!-- 자기 소개 -->
            <section>
                <h2>Who am I?</h2>
                <p>프런트엔드 웹 기술(Front-end Web Tech.)에 관심이 많습니다.<br>
                현재 제주의 한 시골 마을에서 코딩 중입니다.</p>
            </section>
        </div>
    </body>
</html>

internal.html

- external.html

<!doctype html>
<html lang="ko">
    <head>
        <title>온라인 프로필</title>
        <meta charset="utf-8">
        <style>
            section {
                width:500px;  /* 너비 */
                padding:15px;  /* 테두리와 내용 사이의 여백 */
                border:5px solid gray;  /* 테두리 스타일 */
            }
        </style>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div id="container">
        <!-- 자기 소개 -->
            <section>
                <h2>Who am I?</h2>
                <p>프런트엔드 웹 기술(Front-end Web Tech.)에 관심이 많습니다.<br>
                현재 제주의 한 시골 마을에서 코딩 중입니다.</p>
            </section>
        </div>
    </body>
</html>

- style.css

h2 {
  color:blue; /* 글자 색 */
}
p {
  font-size:0.9em;  /* 글자 크기 */
  line-height: 2.0;  /* 줄간격 */
}

external.html

-inline.html

<!DOCTYPE html>

<html lang="ko">
  <head>
      <meta charset="utf-8">
      <title>인라인스타일</title>
  </head>
  <body>
    <h1>블루베리와 항산화 효능</h1>
    <p style="color:blue;"> 블루베리는 항산화제인 안토시아닌과 폴리페놀을 다량 포함하고 있습니다.</p>
    <p> 매사츄세츠 보스톤에 있는 USDA 노화에 관한 인류 영양 연구센터 (the USDA Human Nutrition Research Center on Aging) 의 자료에 의하면
    블루베리는 과일 중에서 가장 항산화 작용이 뛰어난 과일이라고 합니다.  </p>
  </body>
</html>

inline.html

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

'웹언어 공부 > CSS3' 카테고리의 다른 글

[CSS3] 브라우저 접두사  (0) 2021.08.26
[CSS3] 스타일 우선순위와 상속  (0) 2021.08.26
[CSS3] 주요 선택자  (0) 2021.08.26
'웹언어 공부/CSS3' Related Articles more