본문 바로가기
웹 개발

8. 웹 개발을 위한 기본 CSS 태그 모음 & 요약 정리 1

by 곽정우 2024. 4. 8.

1. 인라인 스타일

<!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>

2. 내부 스타일

3. 외부 스타일

외부 CSS 파일은 웹 페이지의 HTML 파일과는 별도로 존재하는 스타일 시트 파일입니다. 이것은 HTML 문서 내에 직접 스타일을 포함하는 것이 아니라, 외부 파일에 스타일을 정의하고 HTML 문서에서 이 파일을 참조하여 스타일을 적용합니다.

외부 css 코드 사용시 장점:

  • 유지보수성 향상 
  • 로딩 속도 향상
  • 코드의 깔끔함
  • 가독성과 유지 보수성 

<!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>
        <li>인라인 스타일</li>
        <li>내부 스타일</li>
        <li>외부 스타일</li>
    </ul>
</body>
</html>

 

CSS 파일

4. 전체 선택자

<!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 { color: deeppink; font-size: 50px;}
        * { color: deepskyblue;}
    </style>
</head>
<body>
    <h2>전체선택자</h2>
    <ol>
        <li>스타일을 모든 요소에 적용</li>
        <li>기호를 사용하여 표현</li>
        <li>너무 많은 요소가 있는 HTML 문서에
            사용할 경우 부하를 줄 수 있음</li>
    </ol>
</body>
</html>

5. 요소 선택자

<!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;}
        p { color: deepskyblue;} 
    </style>
</head>
<body>
    <h2>요소 선택자</h2>
    <p>특정 요소가 쓰인 모든 요소에 스타일을 적요</p>
    <p><span>span 요소</span></p>
    <p><strong>strong 요소</strong></p>
    <p><ins>ins 요소</ins></p>
</body>
</html>

6. 상속

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>상속</title>
    <style>
        div {
            color: deeppink; /* 상속됨 */
            border: 3px dotted blue; /* 상속안됨 */
        }
    </style>
</head>
<body>
    <h2>상속</h2>
    <div>
        div 영역
        <h3>상속이란</h3>
        <p>부모 요소의 속성값이 자식 요소에게 전달되는 것</p>
    </div>
</body>
</html>

7. id 선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id선택자</title>
    <style>
        #container {
            background-color: gold;
            padding: 20px;
            width: 200px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }
        #header {
            background-color: deepskyblue;
            width: 200px;
            height: 200px;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <h2>id선택자</h2>
    <div id="container">div 첫번째 영역</div>
    <div id="header">div 두번째 영역</div>
</body>
</html>

8. class 선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>class선택자</title>
    <style>
        #bigText {font-size: 50px;}
        .smallText { font-size: 14px;}
        .redText { color: red;}
        .blueText { color: blue;}
    </style>
</head>
<body>
    <h2 id="bigText">class선택자</h2>
    <p><span class="smallText redText">특정 집단의 요소를
        한번에 스타일을 적용</span></p>
    <p><span class="smallText blueText">.기호를 사용하여
        같은 class 이름을 가진 요소에 스타일을 적용</span></p>
</body>
</html>

9. 그룹 선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>그룹선택자</title>
    <style>
        * {text-align: center;}
        h2 { font-size: 50px;}
        h3 { font-size: 30px;}
        p, li {font-size: 20px;}
        li {display: inline-block; margin-right: 40px;
         font-weight: bold; color: deeppink;}
    </style>
</head>
<body>
    <h2 id="bigText">그룹선택자</h2>
    <p>여러개의 선택자를 나열하여 스타일을 적용</p>
    <h3>선택자의 종류</h3>
    <ul>
        <li>전체 선택자</li>
        <li>요소 선택자</li>
        <li>아이디 선택자</li>
        <li>클래스 선택자</li>
        <li>그룹 선택자</li>
    </ul>
</body>
</html>

10. 자식자손 선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자식자손선택자</title>
    <style>
        ul > a { font-size: 30px;}
        ul a { color: deeppink;}
    </style>
</head>
<body>
    <h2> 자식 자손 선택자</h2>
    <ul>
        <a href="https://www.naver.com">네이버</a>
        <li><a href="https://www.google.com">구글</a></li>
        <li>다음</li>
        <li><a href="https://www.nate.com">네이트</a></li>
    </ul>
</body>
</html>

'웹 개발' 카테고리의 다른 글

과제- 뉴스기사 페이지 CSS 사용하여 꾸미기  (0) 2024.04.09
9. 웹 개발을 위한 기본 CSS 태그 모음 & 요약 정리 2  (0) 2024.04.08
7. CSS: 웹 프로그래밍의 필수 요소  (0) 2024.04.08
6. 웹 개발을 위한 기본 HTML 태그 모음 & 요약 정리 3  (0) 2024.04.05
5. HTML 요소 이해: 인라인, 블록, 시맨틱 태그  (0) 2024.04.05

관련글

티스토리툴바