WEB UI 3주. CSS Basic

1. css
WEB

2. UI

3. BASIC

4. |

7. 3주차

8. 목표
웹페이지에

9. style을

10. 어떻게

11. 적용하는지

12. 안다.

13.
cascading과

14. 상속을

15. 이해하고

16. 있다

17.
css의

18. 기본적인

19. selector를

20. 다룰

21. 줄

22. 안다.

23.
font,

24. background

25. 등의

26. 기본

27. 속성을

28. 적용할

29. 줄

30. 안다

31.
BOX

32. MODEL을

33. 이해한다.

34.
position

35. 으로

36. 내

37. 프로젝트의

38. 영역을

39. 만들

40. 수

41. 있다

42. Quiz

44. 1)

45. 빨간

46. 색이

47. 되는

48. 부분은

49. 무엇인가요?,

50. 그

51. 이유도

52. 적어보세요.

53.
!
div id=jisu!
spanabc/span!
spanefg/span!
p첫번째 단락/p!
p두번째 단락/p!
/div
#jisu p:nth-child(2) {!
color : red;!
}
2)

54. 다음의

55. 결과로

56. 어떤

57. 색이

58. 나올까요?

59. 이유는

60. 무엇인가요?

61.
.myClass {
color : red;
}
!
#myId {
color : blue;
}
1분반

63. 2분반

64.
1)

65. 아래를

66. 붉은

67. 색으로

68. 지정할

69. 수

70. 있는

71. CSS를

72. 작성해보세요.

73.
여러가지

74. 방법이

75. 있다면

76. 다

77. 작성합니다

78.
그렇게

79. 작성한

80. 이유도

81. 적어주세요.
body!
! section!
h2단락정보/h2!
! ! p첫번째 단락입니다./p!
! ! p두번째 단락입니다./p!
! ! p세번째 단락입니다./p!
! /section!
/body

82. 1) 다음의

83. css에는

84. 몇가지

85. 문제점이

86. 있다.

87. 모두

88. 찾아

89. 수정하고

90. 이유를

91. 적으세요

92.
결과는

93. ‘두번째

94. 단락입니다’

95. 부분만

96. 붉은색으로

97. 나와야

98. 하며

99. 다른

100. 엘리먼트와는

101. 간
격이

102. 아래

103. 숫자(10)만큼

104. 있어야

105. 합니다.
3분반

106.
HTML CSS
body!
! section!
h2단락정보/h2!
! ! p첫번째 단락입니다./p!
! ! p두번째 단락입니다./p!
! ! p세번째 단락입니다./p!
! /section!
/body
#section h2 p:nth-child(2){!
! padding : 10pt;!
background-color : red!
}

107. 숙제확인
HTML5

108. Semantic

109. TAG

110. -

111. nav,

112. section

113. 의

114. 사용

115.
ID

116. 이름

117. 공백

118.
UL

119. /

120. LI

121. 의

122. 폭넓은

123. 사용

124.
Class,

125. id

126. 무조건

127. 필요한가요?

128. c s s

131. 화면의

132. 디자인을

133. 입히다

134. CSS가

135. 없을

136. 때

137. 어떤지

138. 우린

139. 봤다.

140. C S S

141. 적 용 하 기

142. selector(선택자) property value
span { color :red; }

143. style을

144. HTML페이지에

145. 적용하는

146. 세

147. 가지

148. 방법

149.
inline

150.
internal

151.
external

153. html

154. 태그

155. 안에다가

156. inline

157.
!DOCTYPE html
html
head
meta charset=”utf-8” /
titleNEXT !/title
/head
!
body
span style=”color:red;” HELLO NEXT ! /span
/body
/html

158. style

159. 태그로

160. 지정하기

161. internal

162.
!DOCTYPE html
html
head
meta charset=”utf-8” /
titleNEXT !/title
style
span {
color :red;
}
/style
/head
!
body
span HELLO NEXT ! /span
/body
/html

163. 외부파일(.css)로

164. 지정하기

165. external

166.
span {
color :red;
}
!DOCTYPE html
html
head
meta charset=”utf-8” /
titleNEXT !/title
link rel=”stylesheet” type=”text/css” href=”main.css” /
/head
!
body
span HELLO NEXT ! /span
/body
/html
main.css

167. 어떤

168. 방법이

169. 왜

170. 더

171. 좋을까?
inline

172.
internal

173.
external

174. 내

175. 프로젝트의

176.
css

177. 파일을

178. 만들고

179. 분리해보자.
#wrap {
color : pink;
}

180. cascading

181. CSS는

182. 여러가지

183. 스타일정보를

184. 기반으로

186.
최종적으로

187. ‘경쟁’에

188. 의해서

189. 적절한

190. 스타일이

191.
반영된다.

193. span {
color : red;
}
!
span {
color : blue;
}
blue

194. span {
color : red;
}
!
span {
color : blue;
}
blue
동일하면

195. 나중에

196. 것

197. body span {
color : red;
}
!
span {
color : blue;
}
red

198. body span {
color : red;
}
!
span {
color : blue;
}
red
구체적인

199. 것이

200. 있다면

201. 먼저

202. #a {
color : red;
}
!
.b {
color : blue;
}
div id=a class=“b
text..
/div
red

203. #a {
}
!
.b {
}
div id=a class=“b
red
color : red;
color : blue;
text..
id

206. class

208. element
/div

209. Google search !
‘css specificity’

210. 미션
내

211. 프로젝트의

212.
제일

213. 바깥쪽

214. 영역의

215. 넓이,높이를

216. 지정하자,

217.
ex)width

218. :

219. 1000px;

221. 미션
중앙정렬을

222. 해보자

224. (margin을

225. 이용한

226. 중앙정렬

227. 방법

228. 검색)

229. 상속

230. css

231. 속성은

232. 하위

233. 태그에

234. 상속된다.

235.
뒤에

236. 나오는

237. box관련

238. 스타일은

239. 제외
(border,

240. padding,

241. margin)

242. body

243. {

244. color

245. :red

246. }
body

247.
div

248. id=”jisu”

250. div

257. span

258. span

259. tag

260. /span

262. /div

264. span

265. span

266. tag

267. 2

268. /span

269.
/div

270.
bod

271. CSS

272. Selector

273. WEB

274. UI

275. 개발이라는

276. 거..

277.
DOM

278. 을

279. 찾고

280. 지우고

281. 바꾸고

282. 변경하고

283. ..뭐

284. 그런거

285. 아니겠어요?

286. !

288. WEB

289. UI

290. 개발이라는

291. 거..

292.
DOM

293. 을

294. 찾고

295. 지우고

296. 바꾸고

297. 변경하고

298. ..뭐

299. 그런거

300. 아니겠어요?

301. !

302.
일단

303. 찾아야지.

305. css

306. selector

308.
HTML의

309. 요소를

311.
tag,

312. id,

313. class,

314. html

315. 태그속성등을

316. 통해

317. 쉽게

318. 찾아주는

319. 방법

321. css

322. selector

324.
기본

326. element에

327. style을

328. 지정하기

329. 위해서,

331.
3가지

332. 기본

333. 선택자를

334. 사용할

335. 수

336. 있음

337.
tag

338.
id

339.
class

341. tag로

342. 지정하기.

343.
!DOCTYPE html
html
head
meta charset=”utf-8” /
titleNEXT !/title
style
span {
color :red;
}
/style
/head
!
body
span HELLO NEXT ! /span
/body
/html

344. id로

345. 지정하기
!DOCTYPE html
html
head
meta charset=”utf-8” /
titleNEXT !/title
style
#spantag {
color :red;
}
/style
/head
!
body
span id=”spantag” HELLO NEXT ! /span
/body
/html

346. class

347. 로

348. 지정하기
!DOCTYPE html
html
head
meta charset=”utf-8” /
titleNEXT !/title
style
.spanClass {
color :red
}
/style
/head
!
body
span class=”spanClass” HELLO NEXT ! /span
/body
/html

349. 미션
내

350. 프로젝트의

351.
li에

352. 기본

353. style을

354. reset

355. 해주자.

356.
원하는

357. 영역의

358. 글자색(color)을

359. 반영해보자.

360. css

361. selector

364. 다양한

365. 활용

367. id,class

368. 요소

369. 선택자와

370. 함께

371. 활용

372.
!
#myid {color : red}
div.myclassname { color : red}

373. 그룹

374. 선택

375.
h1, span, div { color :red }
h1, span, div#id {color : red}
h1. span, div.classname { color : red}

376. 하위

377. 요소

378. 선택

379. (공백)
자식

380. 선택

381. (

383. )
#jisu span { color :red }
div id=”jisu”
div
span span tag /span
/div
span span tag 2 /span
/div
#jisu span { color :red }
div id=”jisu”
div
span span tag /span
/div
span span tag 2 /span
/div

384. n번째

385. 자식요소를

386. 선택

387. (nth-child)
#jisu

389. p:nth-child(2)

390. {

391. color

392. :red

393. }
div id=”jisu”!
h2단락 선택/h2!
p첫번째 단락입니다/p!
p두번째 단락입니다/p!
p세번째 단락입니다/p!
p네번째 단락입니다/p!
/div
어떤

394. 것이

395. 선택될까?

396. 그밖의

397. selector

399. 미션
아래

400. 접속해서,

402.
속성

403. 선택자를

404. 사용해서

406.
‘nhn’

407. 문자열을

408. 포함하는

409. link에만

410. 빨간색으로

411. 표시하게

412. 해보자.

413.
http://jsbin.com/IVopopU/1/edit

414. 미션
다음그림과

415. 같이

416. 붉은배경이

417. 나오도록

418. 해보세요.

419.
(단.

420. id

421. selector를

422. 사용할

423. 수

424. 없습니다)

425. f o n t ,

427.
c o l o r ,

428.
b a c k g r o u n d

429. font

430. style

431. 선택

432.
font-family

433. :

434. ‘sans-serif’;

435.
font-family

436. :

437. ‘굴림’,Gulim,

438. Helvetica,sans-serif;

439.
font-face라는

440. 걸

441. 사용하면

442. web

443. font를

444. 다운로드해서

445. 다양한

446. font제공도

447. 가능.
(ex

448. ‘google

449. web

450. font’)
font

451. size

452. 선택

453.
기본

454. :

456. 16px

457. (1em)

458.
font-size

459. :

460. 0.9em;

462. font의

463. 색깔을

464. 변경

466. color

467. :

468. red;

487. /*

488. color

489. name

490. (google에서

491. ‘css

492. color

493. names’

494. 를

495. 검색해보자)

496. */

498. color

499. :

500. rgb(255,

501. 255,

502. 0);

515. /*

516. red,

517. green,

518. blue

519. */

521. color

522. :

523. rgba

524. (255,

525. 255,0,0.5);

530. /*

531. red,

532. green,

533. blue,

534. alpha

535. */

537. color

538. :

539. #3344ff

567. /*

568. 16

569. 진수

570. 표기법

571. */

573. color

574. :

575. #34f

608. /*

609. 16진수

610. 축약

611. 표기법

612. */
색상의

613. 선택

614.
http://www.colorpicker.com/

615.
Chrome

616. 개발자

617. 도구

619. 미션
자신의

620. 프로젝트에

621. 임의

622. 폰트를

623. 설정하자.(ex)

624. gulim

625. 적용)

626.
body

627. 태그에

628. font

629. 크기를

630. 12로

631. 한다.

632.
하위

633. 엘리먼트에

634. em을

635. 사용해서

636. font

637. size를

638. 조정해보자

639. background

640.
배경에

641. 이미지를

642. 넣을

643. 수

644. 있다.

646.
이미지를

647. 어디에

648. 어떻게

649. 넣는지에

650. 대한

651. 속성이

652. 있음.

654.
(윈도우

655. 바탕화면을

656. 변경했던

657. 걸

658. 기억해보자!)

659.
background-color

660.
background-image

661.
background-position

662.
background-repeat

663.
!
한

664. 줄로

665. 적용할

666. 수도

667. 있음

668.
background

669. :

670. #0000ff

671. url(“.../gif”)

672. no-repeat

673. center

674. top;

676. b o x

677. Box

678. Model

679.
HTML의

680. element는

681. 사각형

682. 박스의

683. 형태를

684. 가지며,

685.
다음과

686. 같은

687. 속성을

688. 가진다
참고 : http://www.w3schools.com/css/css_boxmodel.asp

689. naver

690. 검색창의

691. box

692. 확인하기

693.
개발자

694. 도구

695. 활용

696. element에

698. 크기를

699. 지정하자.

700.
width

701. :

702. 200px;

703.
height

704. :

705. 200px;

706.
!
width

707. :

708. 50%;

709.
height

710. :

711. 50%;

712. element의

713. 테두리를

714. 부여하자.

715.
border

716. :

717. ???
border
next는 SW인재를 양성하기 위한 SW전문학교입니다. 그
곳에는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분
을 통해서 수업을 듣게 된다는 건 가슴설레는 일이죠. next
는 SW인재를 양성하기 위한 SW전문학교입니다. 그곳에
는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분을
통해서 수업을 듣게 된다는 건 가슴설레는 일이죠. next는
SW인재를 양성하기 위한 SW전문학교입니다. 그곳에는
윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해
서 수업을 듣게 된다는 건 가슴설레는 일이죠. next는 SW
인재를 양성하기 위한 SW전문학교입니다. 그곳에는 윤지
수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해서
수업을 듣게 된다는 건 가슴설레는 일이
content

718. 미션
자신의

719. 프로젝트에

720.
각

721. 영역별

722. 높이/넓이를

723. 설정하고

724.
테두리를

725. 만들자.

726. padding

728.
테두리와

729. 콘텐츠와의

730. 간격

731.
padding-top

732.
padding-right

733.
padding-bottom

735.
padding-left

736.
padding
next는 SW인재를 양성하기 위한 SW전문학교입니다. 그
곳에는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분
을 통해서 수업을 듣게 된다는 건 가슴설레는 일이죠. next
는 SW인재를 양성하기 위한 SW전문학교입니다. 그곳에
는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분을
통해서 수업을 듣게 된다는 건 가슴설레는 일이죠. next는
SW인재를 양성하기 위한 SW전문학교입니다. 그곳에는
윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해
서 수업을 듣게 된다는 건 가슴설레는 일이죠. next는 SW
인재를 양성하기 위한 SW전문학교입니다. 그곳에는 윤지
수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해서
수업을 듣게 된다는 건 가슴설레는 일이
content
border
margin

737. margin

739.
다른

740. element와의

741. 간격

742.
padding과

743. 비슷한

744. 방법으로

745. 값을

746. 설정
next는 SW인재를 양성하기 위한 SW전문학교입니다. 그
곳에는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분
을 통해서 수업을 듣게 된다는 건 가슴설레는 일이죠. next
는 SW인재를 양성하기 위한 SW전문학교입니다. 그곳에
는 윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분을
통해서 수업을 듣게 된다는 건 가슴설레는 일이죠. next는
SW인재를 양성하기 위한 SW전문학교입니다. 그곳에는
윤지수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해
서 수업을 듣게 된다는 건 가슴설레는 일이죠. next는 SW
인재를 양성하기 위한 SW전문학교입니다. 그곳에는 윤지
수교수님과 같이 참 좋은 분도 계세요. 그런 분을 통해서
수업을 듣게 된다는 건 가슴설레는 일이
content
margin
border

747. margin

748. 의

749. 특성

750.
!
인접한

751. 두

752. 개의

753. block

754. element가

755. 서로

756. 다른

757. margin을

758. 가지고

759. 있다면?

760.
큰

761. 값을

762. 가진

763. margin값이

764. 공유되어

765. 사용됨

767.
10px

768. +

769. 20px

770. =

771. 20px

772.
!
!
인접한

773. 두

774. 개의

775. inline

776. element의

777. margin은?

778.
각각의

779. margin

780. 의

781. 합으로

782. 표현된다.

784.
10px

785. +

786. 20px

787. =

788. 30px

789. margin,

790. padding의

791. 다양한

792. 축약표기법

793.
!
margin

794. :

795. 0px

796. 0px

797. 0px

798. 10px;

800. (top

801. ,

802. right

803. ,

804. bottom,

805. left)

806.
margin

807. :

808. 10px;

810. (네개의

811. 분면이

812. 모두

813. 10px)

814.
margin

815. :

816. 10px

817. 15px;

819. (top,

820. bottom

821. 은

822. 10px

823. ,

825. right,

826. left는

827. 15px)

828. 미션
자신의

829. 프로젝트에

830. 영역별로

831. margin과

832. padding을

833. 설정해보자.

834. Box

835. Model

836.
깊게

837. 보기

838. !
http://www.w3.org/TR/CSS2/visuren.html

839. p o s i t i o n

840. CSS

841. -

842. position

844.
position은

845. element를

846. 어떻게

847. 배치할

848. 것인가를

849. 결정.

850.
!
static
absolute
relative
fixed

851. static

853.
!
모든

854. element

855. 의

856. default

857. 값이다.

859.
문서의

860. 흐름대로

861. 위치가

862. 결정된다.

863. relative

865.
!
원래

866. 위치에

867. 상대적인

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

869. absolute

871.
!
절대적인

872. 위치이며

873. 문서의

874. 흐름에서

875. 제외.

876.
기준점은

877. 상위element

878. 중

879. static

880. 속성이

881. 아닌

882. element

883.
위치설정은

884. top,

885. bottom

886. 중

887. 한

888. 개와

889. left,

890. right

891. 중

892. 한개를

893. 선택해서

894. 설정

895.
30px
30px

896. fixed

898.
!
진정한

899. 절대적인

900. 위치를

901. 차지

902.
문서의

903. 흐름에서

904. 제외.

905.
viewport(보이는

906. 화면)를

907. 기준으로

908. 위치값을

909. 가짐

910.
http://www.nhnent.com/

911. relative

912. 속성의

913. 실제

914. 사용은,

915.
absolute속성을

916. 가진

917. 자식의

918. 기준점으로

919. 더

920. 많이

921. 활용됨.

922.
absolute absolute
absolute
relative

923. 각각의

924. 속성은

925. 무엇인가?

926.
position ?
position ?

927. 미션
프로젝트의

928. 영역을

929. position

930. 속성을

931. 활용해서

932. 원하는

933. 대로

934. 배치해보자.

935.
margin,

936. padding

937. 으로

938. 간격을

939. 일정하게

940. 유지하고,

941.
width,

942. height

943. 로

944. 크기를

945. 설정한다.

947. End
;-D