[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