티스토리 뷰

수업/└HTML&CSS

[2022.01.03]CSS_selector

onlyun 2022. 1. 5. 00:16

 

1. work_01 : selector

(1) 결과 출력

 

(2) 소스 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2022.01.03_Insert title here</title>
    <link type="text/css" rel="stylesheet" href="0103_css_sel2.css">
    <style>
        body {
            background-color:rgb(247, 247, 144);
        }
    </style>
</head>
<body>
    <h1>가벼운 마음으로 배우는-녹색</h1>
        <P text="g">Healing green</P>
    <h1 class="ccoma1">가벼운 마음으로 배우는-파란색</h1>
        <p text="b">Relaxing blue</p>
    <h1 class="ccoma2">가벼운 마음으로 배우는-빨간색</h1>
        <p text="r">Passion red</p>
</body>
</html>

(+) 참조된 외부 스타일 시트 코드

#main {
   background-color:yellow; 
}
.s1, .s2 {
    color:white; background-color:brown;
}
div > ul > li {
    font-size:20px; font-weight:bold;
}
.att {
    font-size:16px; color:green; 
}
.s3 {
    font-size:24px; 
    font-style:italic; font-weight:bold;
    color:blue;
}
p.s2 + ul > li {
    color:white; background-color:rgb(71, 13, 13);
    margin-top:5px; margin-bottom:5px;
    padding-top:2.5px; padding-bottom:2.5px;
}
ul {
    list-style-type:square;
}

 

2. work_02 : selector_list

(1) 결과 출력

 

(2) 소스 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2022.01.03 CSS Selector</title>
    <link type="text/css" rel="stylesheet" href="0103_css_sel.css">
</head>
<body>
    <p>Div 요소의 아이디 #main </p>
    <p class="s1">선택자_1</p>
    <p id="main">아이디 #main 하위의 div 요소 1</p>
        <div>
            <ul>
                <li>클래스 선택자</li>
                <li>아이디 선택자</li>
                <li class="att">속성 선택자</li>
            </ul>
        </div>
    <p class="s2">선택자_2</p>
    <ul>
        <li>클래스 선택자_2</li>
        <li>아이디 선택자_2</li>
        <li>속성 선택자_2</li>
    </ul>
    <p class="s3">선택자_3</p>
</body>
</html>

(+) 참조된 외부 스타일 시트 코드

h1 {
    color:green;
}
.ccoma1 {
    color:blue;
}
.ccoma2 {
    color:red;
}
p[text] {
    color:white;
}
p[text="g"] {
    background-color:green;
}
p[text="b"] {
    background-color:blue;
}
p[text="r"] {
    background-color:red;
}

 

 

 

※ 소스 코드 파일 ※

0103_css_sel.css
0.00MB
0103_css_slector.html
0.00MB

-(구분선)-

0103_css_sel2.css
0.00MB
0103_css_selctor_2.html
0.00MB

저작자표시 (새창열림)

'수업 > └HTML&CSS' 카테고리의 다른 글

함수 : 선언, 리턴,  (0) 2022.01.06
과제 : 조건문, 반복문, 함수  (0) 2022.01.06
[2022.01.04]JavaScript_document.write(), typeof  (0) 2022.01.05
[2022.01.04]Javascript_산술, 비교 연산자  (0) 2022.01.05
[JavaScript]태그에 직접 정의해보기  (0) 2022.01.04
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/01   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함