CSS Archives - icodebroker

[CSS/CSS3] 기본 구조에 CSS 디자인 적용하기

■ 기본 구조에 CSS 디자인을 적용하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            body
            {
                background-color : #5b5c58;
                font-family      : Calibri, Verdana, Arial, sans-serif;
                font-size        : 14px;
            }
            header, footer, nav, article, section, aside
            {
                width         : 100%;
                margin-top    : 2px;
                margin-bottom : 2px;
                display       : inline-block;
            }
            header
            {
                background        : url(sunset.jpg);
                background-repeat : no-repeat;
                background-size   : 100% 100%;
            }
            header, footer
            {
                -moz-border-radius    : 12px;
                -webkit-border-radius : 12px;
                border-radius         : 12px;
                background-color      : #d2ffda;
            }
            nav
            {
                background-color : #f0f8ff;
            }
            aside
            {
                height           : 130px;
                background-color : #7b7c78;
            }
            section
            {
                background-color : white;
            }
            section p
            {
                margin : 0px 20px 0px;
            }
            footer
            {
                height     : 30px;
                text-align : center;
            }
            #menu
            {
                font : 13pt Arial;
            }
            #navigation_bar li
            {
                list-style : none;
                float      : left;
            }
            #navigation_bar li a
            {
                padding         : 3px 8px;
                text-decoration : none;
                display         : block;
            }
            #navigation_bar li:hover .submenu
            {
                position : absolute;
                margin   : 0;
                padding  : 0;
                display  : block;
            }
            #navigation_bar li:hover li
            {
                float            : none;
                background-color : #ffff99;
            }
            .submenu
            {
                display : none;
            }
            .submenu a:hover
            {
                background-color : #ccff99;
            }
            #gallery ul li
            {
                list-style : none;
                display    : inline-table;
                padding    : 10px;
            }
            #gallery ul li .big_image
            {
                position           : absolute;
                width              : 0px;
                opacity            : 0;
                -o-transition      : all 0.6s linear;
                -webkit-transition : all 0.6s linear;
            }
            #gallery ul li:hover .big_image
            {
                position : absolute;
                width    : 320px;
                opacity  : 1;
                float    : right;
            }
        </style>
    </head>
    <body>
        <header>
            <hgroup>
                <h1 style="margin:5px;">헤더 1</h1>
                <h2 style="margin:5px; color:white;">서브 헤더 2</h2>
            </hgroup>
        </header>
        <nav>
            <div id="menu">
                <ul id="navigation_bar">
                    <li>
                        <a href="#">메뉴 1</a>
                        <ul class="submenu">
                           <li><a href="#">메뉴 1-1</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">메뉴 2</a>
                        <ul class="submenu">
                           <li><a href="#">메뉴 2-1</a></li>
                           <li><a href="#">메뉴 2-2</a></li>
                        </ul>
                    </li>
                    <li><a href="#">메뉴 3</a></li>
                </ul>
            </div>
        </nav>
        <aside>
            <div id="gallery">
                <ul>
                    <li>
                        <img class="big_image" src="apple.jpg" />
                        <img class="small_image" width="80" height="100" src="apple.jpg" />
                    </li>
                    <li>
                        <img class="big_image" src="rocks.jpg" />
                        <img class="small_image" width="80" height="100" src="rocks.jpg" />
                    </li>
                </ul>
            </div>
        </aside>
        <section>
            <h1>섹션 1</h1>
            <article>
                <p>
신경정신과 치료차, 시골에 내려온 '프램턴 너틀'은 누이의 소개로 새플턴 부인을 기다리고 있었다.
새플턴 부인을 기다리는 동안 그녀의 조카, '베라'는 이모에 대한 비극적인 이야기를 시작했다.
3년 전, 베라의 이모부와 삼촌 두 명이 도요새 사냥을 떠났다가 늪에 빠져 실종되었다.
같이 갔던 갈색 스패니얼(새 사냥용 개)도 역시 돌아오지 않았다.
그날 이후, 이모는 그들이 돌아오기를 기다리며 매일 유리문을 열어놓았다.
소녀는 이따금 그들이 열린 유리문으로 들어올까 봐 두려워했다.
소녀의 말에 너틀은 이 집에 방문한 것을 후회했다.
잠시 후 '새플턴 부인'이 나왔고, 부인은 너틀에게 유리문을 열어두어도 괜찮겠냐고 물었다.
그녀는 남편과 동생들이 사냥을 나갔는데, 이제 돌아올 때가 됐다고 말했다.
                </p>
            </article>
        </section>
        <section>
            <h1>섹션 2</h1>
            <article>
                <p>
신경정신과 치료차, 시골에 내려온 '프램턴 너틀'은 누이의 소개로 새플턴 부인을 기다리고 있었다.
새플턴 부인을 기다리는 동안 그녀의 조카, '베라'는 이모에 대한 비극적인 이야기를 시작했다.
3년 전, 베라의 이모부와 삼촌 두 명이 도요새 사냥을 떠났다가 늪에 빠져 실종되었다.
같이 갔던 갈색 스패니얼(새 사냥용 개)도 역시 돌아오지 않았다.
그날 이후, 이모는 그들이 돌아오기를 기다리며 매일 유리문을 열어놓았다.
소녀는 이따금 그들이 열린 유리문으로 들어올까 봐 두려워했다.
소녀의 말에 너틀은 이 집에 방문한 것을 후회했다.
잠시 후 '새플턴 부인'이 나왔고, 부인은 너틀에게 유리문을 열어두어도 괜찮겠냐고 물었다.
그녀는 남편과 동생들이 사냥을 나갔는데, 이제 돌아올 때가 됐다고 말했다.
                </p>
            </article>
        </section>
        <footer>
            대표전화 : 02-1234-5678 | 팩스 02-1234-5678 | 이메일 : abc@abcd.com
        </footer>
    </body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

<!DOCTYPE html>

<html>

<head>

<style>

body

{

background-color : #5b5c58;

font-family : Calibri, Verdana, Arial, sans-serif;

font-size : 14px;

}

header, footer, nav, article, section, aside

{

width : 100%;

margin-top : 2px;

margin-bottom : 2px;

display : inline-block;

}

header

{

background : url(sunset.jpg);

background-repeat : no-repeat;

background-size : 100% 100%;

}

header, footer

{

-moz-border-radius : 12px;

-webkit-border-radius : 12px;

border-radius : 12px;

background-color : #d2ffda;

}

nav

{

background-color : #f0f8ff;

}

aside

{

height : 130px;

background-color : #7b7c78;

}

section

{

background-color : white;

}

section p

{

margin : 0px 20px 0px;

}

footer

{

height : 30px;

text-align : center;

}

#menu

{

font : 13pt Arial;

}

#navigation_bar li

{

list-style : none;

float : left;

}

#navigation_bar li a

{

padding : 3px 8px;

text-decoration : none;

display : block;

}

#navigation_bar li:hover .submenu

{

position : absolute;

margin : 0;

padding : 0;

display : block;

}

#navigation_bar li:hover li

{

float : none;

background-color : #ffff99;

}

.submenu

{

display : none;

}

.submenu a:hover

{

background-color : #ccff99;

}

#gallery ul li

{

list-style : none;

display : inline-table;

padding : 10px;

}

#gallery ul li .big_image

{

position : absolute;

width : 0px;

opacity : 0;

-o-transition : all 0.6s linear;

-webkit-transition : all 0.6s linear;

}

#gallery ul li:hover .big_image

{

position : absolute;

width : 320px;

opacity : 1;

float : right;

}

</style>

</head>

<body>

</hgroup>

</header>

<nav>

<li>

</ul>

</li>

<li>

</ul>

</li>

</ul>

</div>

</nav>

<aside>

<ul>

<li>

</li>

<li>

</li>

</ul>

</div>

</aside>

<p>

신경정신과 치료차, 시골에 내려온 '프램턴 너틀'은 누이의 소개로 새플턴 부인을 기다리고 있었다.

새플턴 부인을 기다리는 동안 그녀의 조카, '베라'는 이모에 대한 비극적인 이야기를 시작했다.

3년 전, 베라의 이모부와 삼촌 두 명이 도요새 사냥을 떠났다가 늪에 빠져 실종되었다.

같이 갔던 갈색 스패니얼(새 사냥용 개)도 역시 돌아오지 않았다.

그날 이후, 이모는 그들이 돌아오기를 기다리며 매일 유리문을 열어놓았다.

소녀는 이따금 그들이 열린 유리문으로 들어올까 봐 두려워했다.

소녀의 말에 너틀은 이 집에 방문한 것을 후회했다.

잠시 후 '새플턴 부인'이 나왔고, 부인은 너틀에게 유리문을 열어두어도 괜찮겠냐고 물었다.

그녀는 남편과 동생들이 사냥을 나갔는데, 이제 돌아올 때가 됐다고 말했다.

</p>

</article>

</section>

<p>

신경정신과 치료차, 시골에 내려온 '프램턴 너틀'은 누이의 소개로 새플턴 부인을 기다리고 있었다.

새플턴 부인을 기다리는 동안 그녀의 조카, '베라'는 이모에 대한 비극적인 이야기를 시작했다.

3년 전, 베라의 이모부와 삼촌 두 명이 도요새 사냥을 떠났다가 늪에 빠져 실종되었다.

같이 갔던 갈색 스패니얼(새 사냥용 개)도 역시 돌아오지 않았다.

그날 이후, 이모는 그들이 돌아오기를 기다리며 매일 유리문을 열어놓았다.

소녀는 이따금 그들이 열린 유리문으로 들어올까 봐 두려워했다.

소녀의 말에 너틀은 이 집에 방문한 것을 후회했다.

잠시 후 '새플턴 부인'이 나왔고, 부인은 너틀에게 유리문을 열어두어도 괜찮겠냐고 물었다.

그녀는 남편과 동생들이 사냥을 나갔는데, 이제 돌아올 때가 됐다고 말했다.

</p>

</article>

</section>

대표전화 : 02-1234-5678 | 팩스 02-1234-5678 | 이메일 : abc@abcd.com

</footer>

</body>

</html>

apple.jpg rocks.jpg sunset.jpg

[CSS/CSS3] CSS 이행(transition) 속성 사용하기

■ CSS 이행(transition) 속성을 사용하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            #image1
            {
                -webkit-transition : all 1s ease;
                -o-transition      : all 1s ease;
            }
            #image1:hover
            {
                transform         : rotate(30deg);
                -webkit-transform : rotate(30deg);
                -moz-transform    : rotate(30deg);
                -o-transform      : rotate(30deg);
            }
            #image2
            {
                width              : 120px;
                height             : 200px;
                -webkit-transition : all 1s linear;
                -o-transition      : all 1s linear;
            }
            #image2:hover
            {
                width  : 240px;
                height : 400px;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>CSS3 이행 속성</h1>
        </header>
        <div>
            <img id="image1" src="apple.jpg"  />
            <img id="image2" src="rocks.jpg"  />
        </div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

#image1

{

-webkit-transition : all 1s ease;

-o-transition : all 1s ease;

}

#image1:hover

{

transform : rotate(30deg);

-webkit-transform : rotate(30deg);

-moz-transform : rotate(30deg);

-o-transform : rotate(30deg);

}

#image2

{

width : 120px;

height : 200px;

-webkit-transition : all 1s linear;

-o-transition : all 1s linear;

}

#image2:hover

{

width : 240px;

height : 400px;

}

</style>

</head>

<body>

</header>

<div>

</div>

</body>

</html>

apple.jpg rocks.jpg

[CSS/CSS3] CSS 변환(transform) 속성 사용하기

■ CSS 변환 속성(transform)을 사용하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            #image1
            {
                position          : absolute;
                left              : 30px;
                top               : 30px;
                transform         : translate(200px, 100px);
                -webkit-transform : translate(200px, 100px);
                -moz-transform    : translate(200px, 100px);
                -o-transform      : translate(200px, 100px);
                opacity           : 0.5;
            }
            #image2
            {
                transform         : rotate(30deg) scale(0.5, 0.5);
                -webkit-transform : rotate(30deg) scale(0.5, 0.5);
                -moz-transform    : rotate(30deg) scale(0.5, 0.5);
                -o-transform      : rotate(30deg) scale(0.5, 0.5);
            }
            #image3
            {
                transform         : skew(10deg, 10deg);
                -webkit-transform : skew(10deg, 10deg);
                -moz-transform    : skew(10deg, 10deg);
                -o-transform      : skew(10deg, 10deg);
            }
        </style>
    </head>
    <body>
        <header>
            <h1>CSS3 변환 속성</h1>
        </header>
        <div>
            <img id="image1" src="apple.jpg"  />
            <img id="image2" src="rocks.jpg"  />
            <img id="image3" src="sunset.jpg" />
        </div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

#image1

{

position : absolute;

left : 30px;

top : 30px;

transform : translate(200px, 100px);

-webkit-transform : translate(200px, 100px);

-moz-transform : translate(200px, 100px);

-o-transform : translate(200px, 100px);

opacity : 0.5;

}

#image2

{

transform : rotate(30deg) scale(0.5, 0.5);

-webkit-transform : rotate(30deg) scale(0.5, 0.5);

-moz-transform : rotate(30deg) scale(0.5, 0.5);

-o-transform : rotate(30deg) scale(0.5, 0.5);

}

#image3

{

transform : skew(10deg, 10deg);

-webkit-transform : skew(10deg, 10deg);

-moz-transform : skew(10deg, 10deg);

-o-transform : skew(10deg, 10deg);

}

</style>

</head>

<body>

</header>

<div>

</div>

</body>

</html>

apple.jpg rocks.jpg sunset.jpg

[CSS/CSS3] CSS 멀티 컬럼 속성 사용하기

■ CSS 멀티 컬럼 속성을 사용하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            div
            {
                margin  : 20px;
                display : inline-block;
            }
            #multi
            {
                -webkit-column-count : 3;
                -webkit-column-gap   : 20px;
                -webkit-column-rule  : 1px dashed black;
                -moz-column-count    : 3;
                -moz-column-gap      : 20px;
                -moz-column-rule     : 1px dashed black;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>CSS3 멀티 컬럼 속성</h1>
        </header>
        <div>
신경정신과 치료차, 시골에 내려온 '프램턴 너틀'은 누이의 소개로 새플턴 부인을 기다리고 있었다.
새플턴 부인을 기다리는 동안 그녀의 조카, '베라'는 이모에 대한 비극적인 이야기를 시작했다.
3년 전, 베라의 이모부와 삼촌 두 명이 도요새 사냥을 떠났다가 늪에 빠져 실종되었다.
같이 갔던 갈색 스패니얼(새 사냥용 개)도 역시 돌아오지 않았다.
그날 이후, 이모는 그들이 돌아오기를 기다리며 매일 유리문을 열어놓았다.
소녀는 이따금 그들이 열린 유리문으로 들어올까 봐 두려워했다.
소녀의 말에 너틀은 이 집에 방문한 것을 후회했다.
잠시 후 '새플턴 부인'이 나왔고, 부인은 너틀에게 유리문을 열어두어도 괜찮겠냐고 물었다.
그녀는 남편과 동생들이 사냥을 나갔는데, 이제 돌아올 때가 됐다고 말했다.
        </div>
        <div id="multi">
신경정신과 치료차, 시골에 내려온 '프램턴 너틀'은 누이의 소개로 새플턴 부인을 기다리고 있었다.
새플턴 부인을 기다리는 동안 그녀의 조카, '베라'는 이모에 대한 비극적인 이야기를 시작했다.
3년 전, 베라의 이모부와 삼촌 두 명이 도요새 사냥을 떠났다가 늪에 빠져 실종되었다.
같이 갔던 갈색 스패니얼(새 사냥용 개)도 역시 돌아오지 않았다.
그날 이후, 이모는 그들이 돌아오기를 기다리며 매일 유리문을 열어놓았다.
소녀는 이따금 그들이 열린 유리문으로 들어올까 봐 두려워했다.
소녀의 말에 너틀은 이 집에 방문한 것을 후회했다.
잠시 후 '새플턴 부인'이 나왔고, 부인은 너틀에게 유리문을 열어두어도 괜찮겠냐고 물었다.
그녀는 남편과 동생들이 사냥을 나갔는데, 이제 돌아올 때가 됐다고 말했다.
        </div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

div

{

margin : 20px;

display : inline-block;

}

#multi

{

-webkit-column-count : 3;

-webkit-column-gap : 20px;

-webkit-column-rule : 1px dashed black;

-moz-column-count : 3;

-moz-column-gap : 20px;

-moz-column-rule : 1px dashed black;

}

</style>

</head>

<body>

</header>

<div>

신경정신과 치료차, 시골에 내려온 '프램턴 너틀'은 누이의 소개로 새플턴 부인을 기다리고 있었다.

새플턴 부인을 기다리는 동안 그녀의 조카, '베라'는 이모에 대한 비극적인 이야기를 시작했다.

3년 전, 베라의 이모부와 삼촌 두 명이 도요새 사냥을 떠났다가 늪에 빠져 실종되었다.

같이 갔던 갈색 스패니얼(새 사냥용 개)도 역시 돌아오지 않았다.

그날 이후, 이모는 그들이 돌아오기를 기다리며 매일 유리문을 열어놓았다.

소녀는 이따금 그들이 열린 유리문으로 들어올까 봐 두려워했다.

소녀의 말에 너틀은 이 집에 방문한 것을 후회했다.

잠시 후 '새플턴 부인'이 나왔고, 부인은 너틀에게 유리문을 열어두어도 괜찮겠냐고 물었다.

그녀는 남편과 동생들이 사냥을 나갔는데, 이제 돌아올 때가 됐다고 말했다.

</div>

신경정신과 치료차, 시골에 내려온 '프램턴 너틀'은 누이의 소개로 새플턴 부인을 기다리고 있었다.

새플턴 부인을 기다리는 동안 그녀의 조카, '베라'는 이모에 대한 비극적인 이야기를 시작했다.

3년 전, 베라의 이모부와 삼촌 두 명이 도요새 사냥을 떠났다가 늪에 빠져 실종되었다.

같이 갔던 갈색 스패니얼(새 사냥용 개)도 역시 돌아오지 않았다.

그날 이후, 이모는 그들이 돌아오기를 기다리며 매일 유리문을 열어놓았다.

소녀는 이따금 그들이 열린 유리문으로 들어올까 봐 두려워했다.

소녀의 말에 너틀은 이 집에 방문한 것을 후회했다.

잠시 후 '새플턴 부인'이 나왔고, 부인은 너틀에게 유리문을 열어두어도 괜찮겠냐고 물었다.

그녀는 남편과 동생들이 사냥을 나갔는데, 이제 돌아올 때가 됐다고 말했다.

</div>

</body>

</html>

※ 크롬과 파이어폭스는 지원하나 오페라와 인터넷 익스플로러는 지원하지 않는다.

[CSS/CSS3] CSS 테두리(border) 속성 사용하기

■ CSS 테두리 속성(border)을 사용하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            div
            {
                margin           : 20px;
                width            : 300px;
                height           : 20px;
                border           : thin double #cccc99;
                padding          : 20px;
                background-color : #ffff99;
            }
            #div1
            {
                -webkit-border-radius : 30px;
                -moz-border-radius    : 30px;
                border-radius         : 30px;
            }
            #div2
            {
                -webkit-border-top-left-radius  : 30px;
                -webkit-border-top-right-radius : 30px;
                -moz-border-radius-topleft      : 30px;
                -moz-border-radius-topright     : 30px;
                border-top-left-radius          : 30px;
                border-top-right-radius         : 30px;
            }
            #div3
            {
                -webkit-border-bottom-left-radius  : 30px;
                -webkit-border-bottom-right-radius : 30px;
                -moz-border-radius-bottomleft      : 30px;
                -moz-border-radius-bottomright     : 30px;
                border-bottom-left-radius          : 30px;
                border-bottom-right-radius         : 30px;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>CSS3 테두리 속성</h1>
        </header>
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

div

{

margin : 20px;

width : 300px;

height : 20px;

border : thin double #cccc99;

padding : 20px;

background-color : #ffff99;

}

#div1

{

-webkit-border-radius : 30px;

-moz-border-radius : 30px;

border-radius : 30px;

}

#div2

{

-webkit-border-top-left-radius : 30px;

-webkit-border-top-right-radius : 30px;

-moz-border-radius-topleft : 30px;

-moz-border-radius-topright : 30px;

border-top-left-radius : 30px;

border-top-right-radius : 30px;

}

#div3

{

-webkit-border-bottom-left-radius : 30px;

-webkit-border-bottom-right-radius : 30px;

-moz-border-radius-bottomleft : 30px;

-moz-border-radius-bottomright : 30px;

border-bottom-left-radius : 30px;

border-bottom-right-radius : 30px;

}

</style>

</head>

<body>

</header>

</body>

</html>

[CSS/CSS3] CSS 배경 속성 사용하기

■ CSS 배경 속성을 사용하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            #div1
            {
                float             : left;
                margin            : 20px;
                width             : 100px;
                height            : 250px;
                border            : 10px dotted;
                background        : url(sunset.jpg);
                background-repeat : no-repeat;
                background-size   : 80% 80%;
                background-origin : border-box;
                background-clip   : border-box;
                padding           : 20px;
                display           : block;
            }
            #div2
            {
                float             : left;
                margin            : 20px;
                width             : 100px;
                height            : 250px;
                border            : 10px dotted;
                background        : url(sunset.jpg);
                background-repeat : no-repeat;
                background-size   : 80% 80%;
                background-origin : border-box;
                background-clip   : padding-box;
                padding           : 20px;
                display           : block;
            }
            #div3
            {
                float             : left;
                margin            : 20px;
                width             : 100px;
                height            : 250px;
                border            : 10px dotted;
                background        : url(sunset.jpg);
                background-repeat : no-repeat;
                background-size   : 80% 80%;
                background-origin : border-box;
                background-clip   : content-box;
                padding           : 20px;
                display           : block;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>CSS3 배경 속성</h1>
        </header>
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

#div1

{

float : left;

margin : 20px;

width : 100px;

height : 250px;

border : 10px dotted;

background : url(sunset.jpg);

background-repeat : no-repeat;

background-size : 80% 80%;

background-origin : border-box;

background-clip : border-box;

padding : 20px;

display : block;

}

#div2

{

float : left;

margin : 20px;

width : 100px;

height : 250px;

border : 10px dotted;

background : url(sunset.jpg);

background-repeat : no-repeat;

background-size : 80% 80%;

background-origin : border-box;

background-clip : padding-box;

padding : 20px;

display : block;

}

#div3

{

float : left;

margin : 20px;

width : 100px;

height : 250px;

border : 10px dotted;

background : url(sunset.jpg);

background-repeat : no-repeat;

background-size : 80% 80%;

background-origin : border-box;

background-clip : content-box;

padding : 20px;

display : block;

}

</style>

</head>

<body>

</header>

</body>

</html>

sunset.jpg

[CSS/CSS3] CSS 스타일 설정하기

■ CSS 스타일을 설정하는 방법을 보여준다. 1. 인라인 스타일을 설정한다. ▶ 예제 코드 (HTML)


<p style="background-color:blue;">

2. <style> 태그를 사용해 페이지 스타일을 설정한다.

[CSS/CSS3] 구조적 가상 선택자 사용하기

■ 구조적 가상 선택자를 사용하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            input:nth-of-type(2)
            {
                margin : 10px;
                border : 2px solid red;
            }
            p:nth-child(odd)
            {
                background-color : #aaaaaa;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>CSS3 구조적 가상 선택자</h1>
        </header>
        <div class="selectortest">
            성명 : <input id="name" type="text" /><br />
            아이디 : <input id="id" type="text" /><br />
            전화번호 : <input id="phone" type="text" /><br />
        </div>
        <p>구조적 가상 클래스 선택자는 다양한 방식으로 구조화된 페이지에서 특정 요소를 선택할 수 있다.</p>
        <p>이 중 :nth-of-type(n)는 동일 유형 중 n번째 요소를 선택하는 의미이다.</p>
        <p>2n, 2n+1과 같이 수식으로 짝홀수를 선택하도록 할 수 있다.</p>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

input:nth-of-type(2)

{

margin : 10px;

border : 2px solid red;

}

p:nth-child(odd)

{

background-color : #aaaaaa;

}

</style>

</head>

<body>

</header>

성명 : <input id="name" type="text" /><br />

아이디 : <input id="id" type="text" /><br />

전화번호 : <input id="phone" type="text" /><br />

</div>

<p>구조적 가상 클래스 선택자는 다양한 방식으로 구조화된 페이지에서 특정 요소를 선택할 수 있다.</p>

<p>2n, 2n+1과 같이 수식으로 짝홀수를 선택하도록 할 수 있다.</p>

</body>

</html>

[CSS/CSS3] 가상 선택자 사용하기

■ 가상 선택자를 사용하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            input:hover
            {
                background-color : #ffff00;
            }
            a:visited
            {
                color : #00ffff;
            }
            p:first-line
            {
                font : 20pt Arial;
            }
            #paragraph1:first-line
            {
                color : blue;
            }
            #paragraph2:active
            {
                background-color : #dddddd;
                font-size        : 150%;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>CSS3 가상 선택자</h1>
        </header>
        <div class="selectortest">
            <ul>
                <li><a href="#test1">test1</a></li>
                <li><a href="#test2">test2</a></li>
            </ul>
            <p id="paragraph1">
                pseudo class select에 대해 테스트를 하고 있습니다.<br />
                :first-line 선택자를 이용하면 문단의 첫번째 문장을 선택할 수 있습니다.
            </p>
            <p id="paragraph2">
                이곳을 클릭하면 배경색상과 폰트가 변경됩니다.
            </p>
            <input type="text"></input>
        </div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

input:hover

{

background-color : #ffff00;

}

a:visited

{

color : #00ffff;

}

p:first-line

{

font : 20pt Arial;

}

#paragraph1:first-line

{

color : blue;

}

#paragraph2:active

{

background-color : #dddddd;

font-size : 150%;

}

</style>

</head>

<body>

</header>

<ul>

</ul>

pseudo class select에 대해 테스트를 하고 있습니다.<br />

:first-line 선택자를 이용하면 문단의 첫번째 문장을 선택할 수 있습니다.

</p>

이곳을 클릭하면 배경색상과 폰트가 변경됩니다.

</p>

</div>

</body>

</html>

[CSS/CSS3] 속성 선택자 사용하기

■ 속성 선택자를 사용하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            a[href^="http://"]
            {
                color : red;
            }

            p[id$="hello"]
            {
                color : green;
            }

            div[class*="test"]
            {
                color : blue;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>CSS3 속성 선택자</h1>
        </header>
        <div class="selectortest">
            CSS3 속성 선택자를 테스트합니다. <a href="https://www.google.com">구글</a>
            <p id="id1_hello">p 태그 1</p>
            <p id="id2_hello">p 태그 2</p>
            <p id="id3_hello">p 태그 3</p>
        </div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

a[href^="http://"]

{

color : red;

}

p[id$="hello"]

{

color : green;

}

div[class*="test"]

{

color : blue;

}

</style>

</head>

<body>

</header>

CSS3 속성 선택자를 테스트합니다. <a href="https://www.google.com">구글</a>

</div>

</body>

</html>

[HTML/HTML5] style 태그 : CSS 사용하기

■ style 태그에서 CSS를 사용하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            p
            {
                width            : 200px;
                height           : 200px;
                background-color : #cccc00;
            }
        </style>
    </head>
    <body>
        <p>CSS3 테스트</p>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

{

width : 200px;

height : 200px;

background-color : #cccc00;

}

</style>

</head>

<body>

</body>

</html>

[C#/MAUI/.NET6] StyleSheet 엘리먼트 : Source 속성을 사용해 CSS 파일 로드하기

■ StyleSheet 엘리먼트의 Source 속성을 사용해 CSS 파일을 로드하는 방법을 보여준다. ▶ App.xaml


<Application x:Class="TestProject.App"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Application.Resources>
        <StyleSheet Source="/Resources/styles.css" />
    </Application.Resources>
</Application>

<Application x:Class="TestProject.App"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

<Application.Resources>

</Application.Resources>

</Application>

[C#/MAUI/.NET6] 대소문자 구분없는 엘리먼트>엘리먼트 선택기를 사용해 시각적 트리의 직접 자식 엘리먼트 선택하기

■ 대소문자 구분없는 엘리먼트>엘리먼트 선택기를 사용해 시각적 트리의 직접 자식 엘리먼트를 선택하는 방법을 보여준다. ▶ style.css


stacklayout>image
{
    width: 200;
    height: 200;
}

stacklayout>image

{

width: 200;

height: 200;

}

▶ MainPage.xaml


<StackLayout
    HorizontalOptions="Center"
    VerticalOptions="Center">
    <Image Source="dotnet_bot.png" />
</StackLayout>

<StackLayout

HorizontalOptions="Center"

VerticalOptions="Center">

</StackLayout>

※ StackLayout

[C#/MAUI/.NET6] 대소문자 구분없는 엘리먼트 엘리먼트 선택기를 사용해 시각적 트리의 자식 엘리먼트 선택하기

■ 대소문자 구분없는 엘리먼트 엘리먼트 선택기를 사용해 시각적 트리의 자식 엘리먼트을 선택하는 방법을 보여준다. ▶ style.css


listview image
{
    width: 60;
    height: 60;
}

listview image

{

width: 60;

height: 60;

}

▶ MainPage.xaml


<StackLayout>
    <ListView ...>
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid>
                        ...
                        <Image ... />
                        ...
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

<ListView.ItemTemplate>

<Grid>

...

...

</Grid>

</ViewCell>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

</StackLayout>

※ ListView

[C#/MAUI/.NET6] 대소문자 구분하는 .class 선택기를 사용해 특정 클래스 속성을 가진 엘리먼트 선택하기

■ 대소문자 구분하는 .class 선택기를 사용해 특정 클래스 속성을 가진 엘리먼트를 선택하는 방법을 보여준다. ▶ style.css


.detailPageTitle
{
    text-align: center;
    font-size: 14;
    font-style: italic;
}

.detailPageSubtitle
{
    text-align: center;
    font-style: italic;
}

.detailPageTitle

{

text-align: center;

font-size: 14;

font-style: italic;

}

.detailPageSubtitle

{

text-align: center;

font-style: italic;

}

▶ MainPage.xaml


<ScrollView>
    <StackLayout>
        <Label ... StyleClass="detailPageTitle"   />
        <Label ... StyleClass="detailPageSubtitle"/>
    </StackLayout>
</ScrollView>

</StackLayout>

</ScrollView>

[C#/MAUI/.NET6] 대소문자 구분하는 #id 선택기를 사용해 시각적 트리의 개별 엘리먼트 선택하기

■ 대소문자 구분하는 #id 선택기를 사용해 시각적 트리의 개별 엘리먼트를 선택하는 방법을 보여준다. ▶ style.css


#listView
{
    background-color: lightgray;
}

#listView

{

background-color: lightgray;

}

▶ MainPage.xaml


<StackLayout>
    <ListView x:Name="listView">
        ...
    </ListView>
</StackLayout>

...

</ListView>

</StackLayout>

[C#/MAUI/.NET6] 대소문자 구분없는 엘리먼트 선택기를 사용해 시각적 트리의 엘리먼트를 타입별로 선택하기

■ 대소문자 구분없는 엘리먼트 선택기를 사용해 시각적 트리의 엘리먼트를 타입별로 선택하는 방법을 보여준다. ▶ 예제 코드 (CSS)


stacklayout
{
    margin: 20;
}

stacklayout

{

margin: 20;

}

※ 스타일 시트를 사용하는

[C#/MAUI/.NET6] 대소문자 구분없는 ^base 선택기를 사용해 기본 클래스에서 시각적 트리의 엘리먼트 선택하기

■ 대소문자 구분없는 ^base 선택기를 사용해 기본 클래스에서 시각적 트리의 엘리먼트를 선택하는 방법을 보여준다. ▶ 예제 코드 (CSS)


^contentpage
{
    background-color: lightgray;
}

^contentpage

{

background-color: lightgray;

}

※ 스타일 시트를

[C#/MAUI/.NET6] StyleSheet 클래스 : FromReader 정적 메소드를 사용해 스타일 시트 설정하기

■ StyleSheet 클래스의 FromReader 정적 메소드를 사용해 스타일 시트를 설정하는 방법을 보여준다. ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Margin="10">
        <Button
            HorizontalOptions="Center"
            Margin="10"
            Text="테스트" />
        <Button
            Margin="10"
            HorizontalOptions="Center"
            Text="테스트" />
        <Button
            Margin="10"
            HorizontalOptions="Center"
            Text="테스트" />
    </StackLayout>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

<StackLayout

HorizontalOptions="Center"

VerticalOptions="Center"

Margin="10">

<Button

HorizontalOptions="Center"

Margin="10"

Text="테스트" />

<Button

Margin="10"

HorizontalOptions="Center"

Text="테스트" />

<Button

Margin="10"

HorizontalOptions="Center"

Text="테스트" />

</StackLayout>

</ContentPage>

▶ MainPage.xaml.cs


using Microsoft.Maui.Controls.StyleSheets;

namespace TestProject;

/// <summary>
/// 메인 페이지
/// </summary>
public partial class MainPage : ContentPage
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - MainPage()

    /// <summary>
    /// 생성자
    /// </summary>
    public MainPage()
    {
        InitializeComponent();

        string css = @"
^contentpage
{
    background-color: blue;
}

^stacklayout
{
    background-color: red;
}
";

        using(StringReader reader = new StringReader(css))
        {
            Resources.Add(StyleSheet.FromReader(reader));
        }
    }

    #endregion
}

using Microsoft.Maui.Controls.StyleSheets;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : ContentPage

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

string css = @"

^contentpage

{

background-color: blue;

}

^stacklayout

{

background-color: red;

}

using(StringReader reader = new StringReader(css))

{

Resources.Add(StyleSheet.FromReader(reader));

}

#endregion

}

TestProject.zip

[C#/MAUI/.NET6] StyleSheet 엘리먼트 : CDATA 섹션을 사용해 스타일 시트 설정하기

■ StyleSheet 엘리먼트의 CDATA 섹션을 사용해 스타일 시트를 설정하는 방법을 보여준다. ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <ContentPage.Resources>
        <StyleSheet>
<![CDATA[
^contentpage
{
    background-color: blue;
}

^stacklayout
{
    background-color: orange;
}
]]>
        </StyleSheet>
    </ContentPage.Resources>
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Margin="10">
        <Button
            HorizontalOptions="Center"
            Margin="10"
            Text="테스트" />
        <Button
            Margin="10"
            HorizontalOptions="Center"
            Text="테스트" />
        <Button
            Margin="10"
            HorizontalOptions="Center"
            Text="테스트" />
    </StackLayout>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

<ContentPage.Resources>

<![CDATA[

^contentpage

{

background-color: blue;

}

^stacklayout

{

background-color: orange;

}

]]>

</StyleSheet>

</ContentPage.Resources>

<StackLayout

HorizontalOptions="Center"

VerticalOptions="Center"

Margin="10">

<Button

HorizontalOptions="Center"

Margin="10"

Text="테스트" />

<Button

Margin="10"

HorizontalOptions="Center"

Text="테스트" />

<Button

Margin="10"

HorizontalOptions="Center"

Text="테스트" />

</StackLayout>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] StyleSheet 엘리먼트 : Source 속성을 사용해 스타일 시트 설정하기

■ StyleSheet 엘리먼트의 Source 속성을 사용해 스타일 시트를 설정하는 방법을 보여준다. ▶ Resources/style.css


^contentpage
{
    background-color: blue;
}

^stacklayout
{
    background-color: yellow;
}

^contentpage

{

background-color: blue;

}

^stacklayout

{

background-color: yellow;

}

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <ContentPage.Resources>
        <StyleSheet Source="/Resources/style.css" />
    </ContentPage.Resources>
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Margin="10">
        <Button
            HorizontalOptions="Center"
            Margin="10"
            Text="테스트" />
        <Button
            Margin="10"
            HorizontalOptions="Center"
            Text="테스트" />
        <Button
            Margin="10"
            HorizontalOptions="Center"
            Text="테스트" />
    </StackLayout>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

<ContentPage.Resources>

</ContentPage.Resources>

<StackLayout

HorizontalOptions="Center"

VerticalOptions="Center"

Margin="10">

<Button

HorizontalOptions="Center"

Margin="10"

Text="테스트" />

<Button

Margin="10"

HorizontalOptions="Center"

Text="테스트" />

<Button

Margin="10"

HorizontalOptions="Center"

Text="테스트" />

</StackLayout>

</ContentPage>

TestProject.zip