본문 바로가기
웹 개발

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

by 곽정우 2024. 4. 8.

11. 형제 선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>형제선택자</title>
    <style>
        p + span {color: gold; background-color: deepskyblue;}
        h3 + p {background-color: deeppink;}
        h3 ~ p {color: green;}
    </style>
</head>
<body>
    <h2>형제 선택자</h2>
    <div>
        <h3>첫째</h3>
        <p>둘째</p>
        <a href="#">셋째</a>
        <h4>넷째</h4>
        <p>다섯째</p>
        <span>여섯째</span>
    </div>
</body>
</html>

12. 속성 선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>속성선택자</title>
    <style>
        [href] {text-decoration: none; color: deeppink; }
        [title] { text-align: center; font-size: 50px;} 
        .attr {background-color: gold;}
        [class='attr'] { font-size: 30px;}
    </style>
</head>
<body>
    <h2 title="h2 요소의 title 속성">속성 선택자</h2>
    <p><a href="https://www.naver.com" target="_blank">네이버</a></p>
    <p class="attr">속성명과 속성값이 모두 일치하는 요소를 선택자로 지정</p>
</body>
</html>

13. 가상 선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>가상선택자</title>
    <style>
        .list > li:first-child {color: deeppink;}
        .list > li:nth-child(2) {color: gold;}
        .list > li:nth-child(odd) {background-color: greenyellow;} 
        .list > li:nth-child(even) {background-color: blueviolet;} 
        .list > li:last-child {color: wheat;} 
    </style>
</head>
<body>
    <h2>가상 선택자</h2>
    <ul class="list">
        <li>첫번째</li>
        <li>두번째</li>
        <li>세번째</li>
        <li>네번째</li>
    </ul>
</body>
</html>

14. 스타일링 링크

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스타일링링크</title>
    <style>
        a:link { text-decoration: none; color: greenyellow;}
        a:visited { text-decoration: none; color: deepskyblue;}
        a:hover { text-decoration: underline;}
        a:active { text-decoration: underline; color: red;}
    </style>
</head>
<body>
    <h2>스타일링 링크</h2>
    <p><a href="https://python.org">파이썬 공식 사이트</a></p>
</body>
</html>

15. CSS텍스트1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css텍스트1</title>
    <style>
        .letter { letter-spacing: 5px; color: #3d80eb;}
        .word  { word-spacing: 7px; color: rgb(227, 27, 113);}
    </style>
</head>
<body>
    <h2>css 텍스트1</h2>
    <p>letter-spacing</p>
    <p class="letter">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, error blanditiis veritatis quo hic dicta obcaecati enim aperiam eos ipsam quisquam qui ea illum doloribus debitis, omnis ex, necessitatibus beatae.</p>
    <p>word-spacing</p>
    <p class="word">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic rem exercitationem accusantium sequi at tempore ex architecto aliquid consequatur tempora distinctio, eaque voluptatem mollitia id accusamus velit assumenda possimus totam!</p>
</body>
</html>

16. CSS텍스트2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css텍스트2</title>
    <style>
        p { border: 3px solid red; padding: 10px;}

        #align-left { text-align: left;}
        #align-right { text-align: right;}
        #align-center { text-align: center;}
        #align-justify { text-align: justify;}

        #indent1 { text-indent: 20px;}
        #indent1 { text-indent: 5%;}

        .small-line {line-height: 0.7;}
        .big-line {line-height: 3;}
        .px-line {line-height: 30px;}
        .per-line {line-height: 50%;}
    </style>
</head>
<body>
    <h2>css 텍스트2</h2>
    <p id="align-left" class="small-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, error blanditiis veritatis quo hic dicta obcaecati enim aperiam eos ipsam quisquam qui ea illum doloribus debitis, omnis ex, necessitatibus beatae.</p>
    <p id="align-right" class="big-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, error blanditiis veritatis quo hic dicta obcaecati enim aperiam eos ipsam quisquam qui ea illum doloribus debitis, omnis ex, necessitatibus beatae.</p>
    <p id="align-center" class="px-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, error blanditiis veritatis quo hic dicta obcaecati enim aperiam eos ipsam quisquam qui ea illum doloribus debitis, omnis ex, necessitatibus beatae.</p>
    <p id="align-justify" class="per-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, error blanditiis veritatis quo hic dicta obcaecati enim aperiam eos ipsam quisquam qui ea illum doloribus debitis, omnis ex, necessitatibus beatae.</p>
    <p id="indent1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, error blanditiis veritatis quo hic dicta obcaecati enim aperiam eos ipsam quisquam qui ea illum doloribus debitis, omnis ex, necessitatibus beatae.</p>
    <p id="indent2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, error blanditiis veritatis quo hic dicta obcaecati enim aperiam eos ipsam quisquam qui ea illum doloribus debitis, omnis ex, necessitatibus beatae.</p>
</body>
</html>

17. CSS텍스트3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css텍스트3</title>
    <style>
        .variant { font-variant: small-caps; }
        .under { text-decoration: underline;}
        .through {text-decoration: line-through;}

        a:link { text-decoration: none;}
        a:visited { text-decoration: none;}
        a:hover { text-decoration: underline;}
        a:active { text-decoration: underline;}
</style>
</head>
<body>
    <h2>HTML(<span class="variant">Hyper Text Markup Language</span>)</h2>

    <p>웹사이트의 모습을 기술하기 위한 마크업 언어.</p>

    <p><span class="under">프로그래밍 언어가 아니라 마크업 정보를 표현하는 마크업 언어로[1] 문서의 내용 이외의 문서의 구조나 서식 같은 것을 포함한다.</span> 보면 알겠지만 애초에 이름 HTML의 ML이 마크업 언어라는 뜻이다. 웹사이트에서 흔히 볼 수 있는 htm이나 html 확장자가 바로 이 언어로 작성된 문서다.</p>

    <p>최초 제안자는 CERN의 물리학자 티머시 J. 버너스리이다. URL, HTTP, WWW의 전신인 Enquire 등도 그가 세트로 개발하고 제안했다. TCP/IP 통신규약을 만든 빈턴 G. 서프(Vinton Gray Cerf)와 함께 인터넷의 아버지로 불린다.</p>

    <p><span class="through">나무위키에서는 아래와 같이 내용을 집어넣어 HTML을 적용시킬 수 있지만 도움말은 권장하지 않는 문법이고, 지원 종료 가능성이 있는 문법이므로 나무위키에서는 HTML 태그를 사용하지 않는 것을 추천한다.</span></p>

    <p><a href="https://namu.wiki/w/HTML">출처: 나무위키</a></p>
    
</body>
</html>

18. CSS텍스트4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css텍스트4</title>
    <style>
        h1 {font-size: 100px}
        .shadow1 { text-shadow: 10px 10px;}
        .shadow2 { text-shadow: 10px 10px 5px red;}
        .shadow3 { color: #fff; text-shadow: 10px -10px 5px #000;}
        .shadow4 { color: #fff; text-shadow: 0px 0px 8px #000;}
    </style>
</head>
<body>
    <h2>css 텍스트4</h2>
    <h1 class="shadow1">CSS Text-Shadow 속성1</h1>
    <h1 class="shadow2">CSS Text-Shadow 속성2</h1>
    <h1 class="shadow3">CSS Text-Shadow 속성3</h1>
    <h1 class="shadow4">CSS Text-Shadow 속성4</h1>
    <h1 class="shadow5">CSS Text-Shadow 속성5</h1>
</body>
</html>

19. CSS텍스트5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css텍스트5</title>
    <style>
        p {display: inline-block; width: 200px; border: 1px solid red;}
        .txt1 {white-space: nowrap; overflow: hidden; text-overflow: clip;}
        .txt2 {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}        
        .txt3 {height: 150px; overflow: scroll;}    
        .txt4 {height: 150px; overflow-x: hidden; overflow-y: scroll;}    
        .txt5 {
            border: 3px dottend deeppink;
            width: 400px;
            padding: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

        }   
        .txt5:hover {overflow: visible;} 
    </style>
</head>
<body>
    <h2>css 텍스트5</h2>
    <p class="txt1">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta impedit ullam facere, nam sed ea velit minus delectus ipsa corporis, at ad explicabo ut, dolor numquam vero doloribus? Provident, adipisci?</p>
    <p class="txt2">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta impedit ullam facere, nam sed ea velit minus delectus ipsa corporis, at ad explicabo ut, dolor numquam vero doloribus? Provident, adipisci?</p>
    <p class="txt3">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta impedit ullam facere, nam sed ea velit minus delectus ipsa corporis, at ad explicabo ut, dolor numquam vero doloribus? Provident, adipisci?</p>
    <p class="txt4">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta impedit ullam facere, nam sed ea velit minus delectus ipsa corporis, at ad explicabo ut, dolor numquam vero doloribus? Provident, adipisci?</p>
    <p class="txt5">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta impedit ullam facere, nam sed ea velit minus delectus ipsa corporis, at ad explicabo ut, dolor numquam vero doloribus? Provident, adipisci?</p>
</body>
</html>

20. CSS텍스트6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css텍스트5</title>
    <style>
        @font-face {
        font-family: 'TTLaundryGothicB';
        src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2403-2@1.0/TTLaundryGothicB.woff2') format('woff2');
        font-weight: 700;
        font-style: normal;
    }
    .fontface { font-family:'TTLaundryGothicB' ;}
    </style>
</head>
<body>
    <h2>css 텍스트6</h2>
    <p>옷에서는 아무 냄새가 나지 않는게 좋아</p>
    <p class="fontface">옷에서는 아무 냄새가 나지 않는게 좋아</p>

</body>
</html>

21. CSS텍스트7

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css텍스트7</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Sunflower:wght@300;500;700&display=swap" rel="stylesheet">
    <style>
        .sunflower-light {
    font-family: "Sunflower", sans-serif;
    font-weight: 300;
    font-style: normal;
    }
    .sunflower-medium {
    font-family: "Sunflower", sans-serif;
    font-weight: 500;
    font-style: normal;
    }
    .sunflower-bold {
    font-family: "Sunflower", sans-serif;
    font-weight: 700;
    font-style: normal;
    }
    </style>
</head>
<body>
    <h2>css 텍스트7</h2>
    <p >인권에 대한 무시와 경멸이 인류의 양심을 격분시키는 만행을 초래하였으며 인간이 언론과 신앙의 자유 그리고 공포와</p>
    <p class="sunflower-light">인권에 대한 무시와 경멸이 인류의 양심을 격분시키는 만행을 초래하였으며 인간이 언론과 신앙의 자유 그리고 공포와</p>
    <p class="sunflower-medium">인권에 대한 무시와 경멸이 인류의 양심을 격분시키는 만행을 초래하였으며 인간이 언론과 신앙의 자유 그리고 공포와</p>
    <p class="sunflower-bold">인권에 대한 무시와 경멸이 인류의 양심을 격분시키는 만행을 초래하였으며 인간이 언론과 신앙의 자유 그리고 공포와</p>
</body>
</html>

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

10. CSS 배경과 박스 모델  (0) 2024.04.09
과제- 뉴스기사 페이지 CSS 사용하여 꾸미기  (0) 2024.04.09
8. 웹 개발을 위한 기본 CSS 태그 모음 & 요약 정리 1  (0) 2024.04.08
7. CSS: 웹 프로그래밍의 필수 요소  (0) 2024.04.08
6. 웹 개발을 위한 기본 HTML 태그 모음 & 요약 정리 3  (0) 2024.04.05

관련글

티스토리툴바