[WEB UI BASIC] CSS_2
6 likes608 views
WEB UI BASIC CSS 2편입니다. 레이아웃 잡는 법에 대해 작성해봤습니다.
[WEB UI BASIC] CSS_2
- 1. CSS
- 2. 2탄 WEB UI BASIC 본 자료는 NHN NEXT 윤지수 교수님의 자료를 바탕으로 제작했습니다.
- 3. 이제
- 4. 스타일은
- 5. 나온다!
- 6. 남은
- 7. 것은
- 8. 레이아웃!!!
- 9. Layout은
- 10. 크게
- 11. position과
- 12. float를
- 13. 이용합니다.
- 14. Layout
- 15. 기본
- 16. 1
- 17. position으로
- 18. 정렬하기
- 19. position의
- 20. 종류 1.
- 21. static
- 22. 2.
- 23. relative
- 24. 3.
- 25. absolute
- 26. 4.
- 27. fixed
- 28. 1.
- 29. position:
- 30. static; 모든
- 31. element의
- 32. 기본
- 33. 정렬
- 34. 문서의
- 35. 흐름대로
- 36. 위치가
- 37. 결정된다.
- 38. 2.
- 39. position:
- 40. relative; 원래
- 41. 위치에서
- 42. 상대적인
- 43. 위치
- 44. position:
- 45. relative;
- 46. top:
- 47. 30px;
- 48. left:
- 49. 30px;
- 50. 3.
- 51. position:
- 53. 아닌
- 54. 상위
- 55. position을
- 56. 기준으로
- 57. 함
- 58. 기준에서
- 59. 절대적인
- 60. 위치!
- 61. 문서의
- 62. 흐름과는
- 63. 상관없이
- 64. 박아넣음 position:
- 65. absolute;
- 66. top:
- 67. 30px;
- 68. left:
- 69. 30px;
- 70. 4.
- 71. position:
- 72. fixed; 문서에서
- 73. 항상
- 74. 지정된
- 75. 위치에
- 76. 고정
- 77. ex)
- 78. 페이스북
- 79. 상단메뉴는
- 80. 스크롤을
- 81. 내려도
- 82. 고정!
- 83. 실제
- 84. 사용은... relative를
- 85. 기준으로
- 86. absolute를
- 87. 빡!빡!빡!!! 첨부한
- 88. position.html
- 89. 코드를
- 90. 참고하세요~!
- 91. Layout
- 92. 기본
- 93. 2
- 94. float로
- 95. 정렬하기
- 96. float:
- 97. ?? 네이버
- 98. 사전
- 99. 1. (물
- 100. 위나
- 101. 공중에서)떠가다
- 102. 2. (가라앉지
- 103. 않고
- 104. 물에)뜨다
- 105. 3. (액체
- 106. 위에)띄우다 float는
- 107. element를
- 108. 떠,
- 109. 뜨,
- 110. 띄
- 111. float:
- 112. left,
- 113. right 문서의
- 114. 흐름과
- 115. 상관없이
- 116. 갑자기
- 117. 뜬다!!!
- 118. 첨부한
- 119. float.html과
- 120. float.css를
- 121. 수정하면서
- 122. 직접
- 123. 코딩해봅시다!
- 124. float는
- 125. 어디에
- 126. 쓰나요? 쉽게
- 127. 말씀
- 128. 드리면
- 129. 한땀한땀
- 130. position:
- 131. absolute를
- 132. 하다가
- 133. 빡칠
- 134. 때
- 135. 쓰면
- 136. 됩니다. 메뉴를
- 137. 정렬할
- 138. 때
- 139. li
- 140. 전체에
- 141. float를
- 142. 먹이면
- 143. 줄줄줄~! float.html과
- 144. float.css에
- 145. 있는
- 146. li를
- 147. 수정해봅시다.
- 148. 나는
- 149. 밑에
- 150. 혼자
- 151. 있고
- 152. 싶어
- 153. clear:
- 154. both; float.html과
- 155. float.css에
- 156. 있는
- 157. footer를
- 158. 수정해봅시다.
- 159. 이렇게
- 160. 하면
- 161. 큰
- 162. 틀을
- 163. 잡는
- 164. 일은
- 165. 끗!
- 166. 이제부터는
- 167. element
- 168. 세부
- 169. 정렬입니다!
- 170. 는
- 171. 일단
- 172. 쉬는
- 173. 시간
- 174. ㅋ
- 175. element
- 176. 정렬
- 177. 개노답
- 178. 삼형제
- 179. Margin
- 180. /
- 181. Border
- 182. /
- 183. Padding
- 184. Margin
- 185. /
- 186. Border
- 187. /
- 188. Padding Box
- 189. Model이라고
- 190. 합니다.
- 191. Margin
- 192. /
- 193. Border
- 194. /
- 195. Padding 내부 외부 첨부된
- 196. MBP.html
- 197. 코드를
- 198. 참고하면서
- 199. 살펴보세요~
- 200. Margin과
- 201. Padding
- 202. 주는
- 203. 법 1.
- 204. margin:
- 205. 10px; -
- 206. 상하좌우
- 207. 모두
- 208. 10px씩
- 209. margin
- 210. 추가 2.
- 211. margin:
- 212. 10px
- 213. 15px; -
- 214. 상하는
- 215. 10px,
- 216. 좌우는
- 217. 15px
- 218. margin
- 219. 추가 3.
- 220. margin:
- 221. 5px
- 222. 10px
- 223. 15px
- 224. 20px; -
- 225. 상(5px),
- 226. 우(10px),
- 227. 하(15px),
- 228. 좌(20px)
- 232. 시계방향으로
- 233. margin
- 234. 추가 Padding도
- 235. 같은
- 236. 방법으로
- 237. 추가
- 238. 가능
- 239. Margin
- 240. /
- 241. Border
- 242. /
- 243. Padding Block
- 244. Element Inline
- 245. Element Margin
- 246. OK
- 247. /
- 248. Border
- 249. OK
- 250. /
- 251. Padding
- 252. OK Margin
- 253. left,
- 254. right
- 255. /
- 256. Border
- 257. OK
- 258. /
- 259. Padding
- 260. OK
- 261. px
- 262. VS
- 263. % margin에
- 264. %를
- 265. 주고
- 266. 창크기를
- 267. 조정해봅시다 width에도
- 268. %를
- 269. 주고
- 270. 창크기를
- 271. 조정해봅시다 width:
- 272. 100%는
- 273. 어떤
- 274. 의미를
- 275. 가질까요? height:
- 276. 100%는
- 277. 또
- 278. 뭘까요?
- 279. block
- 280. element
- 281. 가운데
- 282. 정렬에는
- 283. margin:
- 284. 0
- 285. auto;
- 286. inline
- 287. element
- 288. 가운데
- 289. 정렬에는
- 290. text-align:
- 291. center;
- 292. line-height:(div
- 293. height);
- 294. margin값은
- 295. 마이너스(-)도
- 296. 가능하다는
- 297. 사실!!!
- 298. Margin
- 299. Collapse 부모
- 300. 또는
- 301. 형제의
- 302. 마진을
- 303. 잡아
- 304. 먹는
- 305. 현상
- 308. -
- 309. 패딩으로
- 310. 조정해주면
- 311. 되겠...죠?
- 312. 박쥐
- 313. 같은
- 314. 녀석
- 315. display:
- 316. inline-block; block
- 317. element처럼
- 318. 공간을
- 319. 차지하지만
- 320. inline
- 321. element처럼
- 322. 다룰
- 323. 수
- 324. 있다.
- 325. display
- 326. VS
- 327. visibility display:
- 328. none;과
- 329. visibility:
- 330. hidden;을
- 331. 비교해봅시다.
- 332. z-index 각
- 333. 레이어의
- 334. 층위
- 335. 순서를
- 336. 지정할
- 337. 수
- 338. 있어요~
- 339. 숫자가
- 340. 높을
- 341. 수록
- 342. 위로
- 343. 튀어나와요
- 344. :)
- 345. 이제
- 346. 남은
- 347. 것은
- 348. Javascript!
- 349. JS,
- 350. 그는
- 351. 만만치
- 352. 않지만
- 353. 요즘
- 354. 대세남!!!
- 355. 그래서
- 356. 다음
- 357. 주까지는
- 358. GOOD
- 359. 홈페이지와
- 360. 비슷하게
- 361. 작성해옵니다
- 362. 왼쪽에
- 363. 있는
- 364. 메뉴는
- 365. 일단
- 366. 만들고
- 367. display:
- 368. none
- 369. 해두시고,
- 370. 나머지는
- 371. 어떻게든
- 372. 해오는걸로!
- 373. 힘들겠지만
- 374. 화이띵입니다
- 375. :)