1. css
WEB

2. UI

3. Basic

5. |

8. 4주차

9. 목표
CSS를

10. 통해서

11. Layout을

12. 구성하고

13. 중요한

14. style을

15. 적용할

16. 수

17. 있다

18. QUIZ가

19. 없습니다.

20. 질.답

21. * {!
! background-color: #e5e5e5!
}
body에만

22. 적용하는

23. 것이

24. 좋을

25. 듯

26. !
#gnb ul:nth-child(1) li a{
순서가

27. 계속

28. 고정일까?

29. color : black
기본색

30. height: 2000px;
높이는

31. 자식에

32. 의해서

33. 자동으로

34. 늘어남

35.
너비는

37. 100%

38. color: gray;
일관성을

39. 위해

40. 16진수표기법을

41. 사용

42. header #a1 form{!
! position: relative;!
! display: inline;!
! left: 50px;!
}
#a1

43. 앞에

44. header는

45. 불필요.

46. ul {!
! list-style: none;!
}
공통

47. 적용인

48. 코드는

49. 맨

50. 앞으로

51. 이동

52. line-height : 80px
중앙정렬

53. !

54.
height

55. 값과

56. line-height를

57. 같게

58. https://cdn.rawgit.com/byjo/
1402_Web_UI_Basic/week3/
googleplay.html
바깥쪽

59. 영역

60. 감싸주기

61.
width

62. 또는

63.
min-width

64. footer li{!
! display: inline;!
}
width,

65. height를

66. 차지하면서

67. 옆으로

68. 배치하려면

69.
display

70. :

71. inline-block

73. https://cdn.rawgit.com/luvgaram/
webUI/week3/apple.html#
#참고

74.
image

75. sprite

76. footer {!
font-size : 16px;!
}!
!
footer div {!
font-size : 32px;!
}
footer {!
font-size : 32px;!
}!
!
footer div {!
font-size : 2em;!
}

77. top: 0px;!
left :0;
postion

78. :

79. static

80. 인

81. 상태라면

82. 무

83. 의미

84. #fixedmenu li:hover{!
! ! background-color:rgba(243,243,243,1);!
!
! }
hover

85. 한

86. 상태에서의

87. 스타일.

88. #a {!
width : 100px;!
}!
!
#b {!
width : 100px;!
}!
!
#c {!
width : 100px;!
}
중복코드

89. 정리
#a,#b,#c {!
width : 100px;!
}

90. #a,#b,#c {!
width : 100px;!
}!
!
#a,#c,#d {!
height : 300px;!
}!
!
#a,#e {!
background-color : red;!
}!
!
….

91. #a,#b,#c {!
width : 100px;!
}!
!
#a,#c,#d {!
height : 300px;!
}!
!
#a,#e {!
background-color : red;!
}!
!
….
#WIDTH_100,!
#a,#b,#c {!
width : 100px;!
}!
!
#BOX_HEIGHT,!
a,#c,#d {!
height : 300px;!
}!
!
#BGCOLOR_RED,!
a,#e {!
background-color : red;!
}!
!
….

92. code review
https://cdn.rawgit.com/unitimes/webui_basic/
week3/week3/index.html

93. p o s i t i o n

94. CSS

95. -

96. position

98.
position은

99. element를

100. 어떻게

101. 배치할

102. 것인가를

103. 결정.

104.
!
static
absolute
relative
fixed

105. static

107.
!
모든

108. element

109. 의

110. default

111. 값이다.

113.
문서의

114. 흐름대로

115. 위치가

116. 결정된다.

117. relative

119.
!
원래

120. 위치에

121. 상대적인

122. 위치.
div:nth-child(2) {!
position : relative;!
top: 30px;!
left: 30px;!
}
30px
30px

123. absolute

125.
!
절대적인

126. 위치이며

127. 문서의

128. 흐름에서

129. 제외.

130.
기준점은

131. 상위element

132. 중

133. static

134. 속성이

135. 아닌

136. element

137.
위치설정은

138. top,

139. bottom

140. 중

141. 한

142. 개와

143. left,

144. right

145. 중

146. 한개를

147. 선택해서

148. 설정

149.
30px
30px

150. fixed

152.
!
진정한

153. 절대적인

154. 위치를

155. 차지

156.
문서의

157. 흐름에서

158. 제외.

159.
viewport(보이는

160. 화면)를

161. 기준으로

162. 위치값을

163. 가짐

164.
http://www.nhnent.com/

165. relative

166. 속성의

167. 실제

168. 사용은,

169.
absolute속성을

170. 가진

171. 자식의

172. 기준점으로

173. 더

174. 많이

175. 활용됨.

176.
absolute absolute
absolute
relative

177. 각각의

178. 속성은

179. 무엇인가?

180.
position ?
position ?

181. L a y o u t

182. layout은

184.
float

185. ,

186. position

187. 속성을

188. 중심
으로

189. 만들

190. 수

191. 있다

193. f l o a t

194. float

195. :

196. left;

197.
float

198. 속성을

199. 가진

200. element는

201. 문서의

202. 흐름에서

203. 제외되고

204. 떠

205. 있는

206. 형태로

207. 되어

208. 있게

209. 됨.

210.
출처 :
http://coding.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/

211. 2
1

212. {

215. float

216. :

217. left

218.
}
1
2
3
1
3

219. 1

220. ,2

221. {

224. float

225. :

226. left

227.
}
1
2
3
1 3 2

228. 2

229. {

232. float

233. :

234. right

235.
}
1
2
3
1
3 2

236. float는

237. 어디다가

238. 쓰나요?

239. float : left float:right

240. float : left float:right

241. 결국

242. 요런

243. 배치가

244. 되야

245. 할텐데..

246. float

247. 속성에

248. 영향을

249. 받지

250. 않도록

251. 설정해야

252. 한다.
이놈은 float속성의 영향을 받지 말아야 한다

253. clear:both
clear:both

254. float속성의

255. 영향을

256. 받고

257. 싶지

258. 않는

259. element는?

260.
clear

261. :

262. left;

264. /*

265. right

266. ,both로

267. 설정

268. */
header
section
aside
footer
section
aside
header
footer

269. 그런데,,

270.
float를

271. 적용한

272. 부분은

273. height

274. 영역에서

275. 제외되는

276. 거

277. 같다..

278.
!
float된

279. 영역도

280. 높이

281. 값을

282. 가질

283. 수

284. 있도록

285. 하려면?

286.
overflow

287. :

288. auto;

289. fixed

290. layout

292.
지금까지

293. 한

294. 것.

295.
바깥

296. 영역을

297. 고정(fixed)한

298. 형태의

299.
layout을

300. 설정한

301. 것임
1 2
1 2
1 2

302. fluid

303. layout

304.
화면의

305. 크기에

306. 따라서

307. 유동적으
로

308. 변경된다.
1 2
1 2
1 2

309. HOWTO

310. fluid

311. layout

312. ?

313.
content.... aside
60

314.
%
20

315.
%
5%
5%
100
%
10

316.
%
:

317. %

319. 미션

320. 1

321.
position으로

322. 아래

323. 비율을

324. 갖는

325. layout

326. 만들기

327.
(margin

328. 을

329. 이용해보자)
4 70 2 20 4

330. 미션

331. 2

333. float로

334. 아래

335. 비율을

336. 갖는

337. layout

338. 만들기
4 70 2 20 4

339. 미션

340. 3

341.
Three

342. columns,

343. fluid

344. layout(%

345. 기반)
비율 맘대로
간격 칼 같이 맞추기

346. z - i n d e x

347. z-index
Image : http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

348. z-index

349.
position이

350. static

351. 이

352. 아닌

353. 경우

354. 중첩

355. 될

356. 수

357. 있으며,

358.
어떤

359. 것이

360. 위에

361. 있어야

362. 할지

363. 결정되야

364. 한다.

365.
!
z-index

366. 값으로

367. 조정(숫자값)

368.
ex)

370.
z-index

371. =

372. -10;

373.
z-index

374. =

375. -1;

376.
z-index

377. =

378. 1;

379. div id=top/div
div id=middle/div
div id=bottom/div
div {
width : 100px;
height : 100px;
position: absolute;
}
!
#top {
background-color : gold;
top : 10px;
left : 10px;
}
!
#middle {
background-color : silver;
top : 30px;
left : 30px;
}
!
#bottom {
background-color : coral;
top : 50px;
left : 50px;
}

380. div id=top/div
div id=middle/div
div id=bottom/div
div {
width : 100px;
height : 100px;
position: absolute;
}
!
#top {
background-color : gold;
top : 10px;
left : 10px;
z-index : 0;
}
!
#middle {
background-color : silver;
top : 30px;
left : 30px;
z-index : 0;
}
!
#bottom {
background-color : coral;
top : 50px;
left : 50px;
z-index : 0;
}

381. div id=top/div
div id=middle/div
div id=bottom/div
div {
width : 100px;
height : 100px;
position: absolute;
}
!
#top {
background-color : gold;
top : 10px;
left : 10px;
z-index : 1;
}
!
#middle {
background-color : silver;
top : 30px;
left : 30px;
z-index : 0;
}
!
#bottom {
background-color : coral;
top : 50px;
left : 50px;
z-index : -1;
}

382. z-index 값이 순서대로 1,2,3,4 인경우
3
1 2
4
div
1
div3/div
div4/div
/div
!
div
2
/div

383. 1
2
?
3
4

384. div
1
div3/div
div4/div
/div
!
div
2
/div
z-index

385. 값을

386. 각각

387. 다르게

388. 주면서

390.
테스트해보세요.

391. stacking context
1
3
4 2

392. End
;-D