CSS란

 

- Cascading Style Sheets의 약어

- HTML 문서의 스타일을 지정할 때 사용하는 언어

- CSS는 HTML 요소가 화면 또는 미디어에 표시되는 방법을 설명함

- CSS을 사용하면 여러 웹페이지의 레이아웃을 한번에 제어할 수 있어 많은 작업을 줄여준다.

- 외부 스타일시트는 .css 파일로 저장

 

 

 

CSS 기본 실습 - basic01.html

 

<!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>선택자 {속성:값;}</style> -->
    <style>
        
        p{
            color:red;
            text-align:left;
        }
    </style>
    
</head>
<body>
    <p>Hello world!</p>
    <p>CSS3 스타일을 학습하자.</p>
</body>
</html>

 

basic01.html 실습 결과

 

Document

Hello world!

CSS3 스타일을 학습하자.

 

CSS 기본 실습 - basic02.html
<!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>
        #para1{
            color : red;
            text-align:center;
        }
        #para2{
            color : blue;
        }
    </style>
</head>
<body>
    <h3>ID 선택자</h3>
    <p id = "para1">hello world</p>
    <p id = "para2"> 웹 개발과정...</p>
</body>
</html>

 

basic02.html 실습 결과

 

Document

ID 선택자

hello world

웹 개발과정...

 

CSS 기본 실습 - basic03.html

 

<!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>
        .center{
            text-align : center;
            color : red;
        }
    </style>
</head>
<body>
    <!-- html 문서와 작업대상의 태그를 지정하는 의미 -->
    <!-- 선택자를 정의하는 방식-->
    <!-- 기본 방식 1) 태그 이용 2) ID 이용 3) CLASS 이용-->
    <h3>class 선택자</h3>
    <h1 class = "center">CSS3를 배우자</h1>
    <p class="center">javascript를 배우자</p>
</body>
</html>

 

basic03.html 실습 결과

 

Document

class 선택자

CSS3를 배우자

javascript를 배우자

 

CSS 기본 실습 - basic04.html

 

<!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>
        p.center {
            text-align: center;
            color: red;
        }
    </style>
</head>
<body>
    <h3>class 선택자</h3>
    <h1 class="center">css3를 배우자</h1>
    <p class="center">javascript를 배우자</p>
</body>
</html>
basic04.html 실습 결과

 

Document

class 선택자

css3를 배우자

javascript를 배우자

 

CSS 기본 실습 - basic05.html

 

<!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>
        p.center {
            text-align: center;
            color: red;
        }

        p.large {
            font-size: 300%;
        }
    </style>
</head>
<body>
    <h3>class 복합선택자</h3>
    <h3 class="center">테스트1</h3>
    <p class="center">테스트2</p>
    <p class="center large">테스트3</p>
</body>
</html>
basic05.html 실습 결과

 

Document

class 복합선택자

테스트1

테스트2

테스트3

 

외부 CSS 적용 방법 - css_inline.html
<!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>
    <h1 style="color : blue;">테스트1</h1>
    <p style="font-size: 50px">테스트2</p>
</body>
</html>

 

내부 CSS 적용 방법 - css_external.html

 

<!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>
    <h1 style="color : blue;">테스트1</h1>
    <p style="font-size: 50px">테스트2</p>
</body>
</html>
저작자표시 비영리 변경금지

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

[CSS] Box Model - 박스 모델(Margin, Border, Padding, Content)  (1) 2024.01.05
[CSS] Backgrounds - 배경색 설정  (0) 2024.01.05
[HTML] Form 태그 (2) - 전화번호 입력, 회원정보 실습  (2) 2024.01.04
[HTML] Form 태그 (1) - 이론 및 간단한 예제 실습  (0) 2024.01.04
[HTML] Tables <table> 태그, Ifames 태그 이론 및 실습  (2) 2024.01.04

티스토리툴바