[WEB UI BASIC] CSS_1

1.
CSS3

2.
1탄 [WEB

3.
Basic

4.
Study] 본

5.
slide는

6.
NHN

7.
NEXT

8.
윤지수

9.
교수님의

10.
강의

11.
자료를

12.
바탕으로

13.
제작했습니다.

14.
오늘은…⋯

19.
일단

20.
HTML부터

21.
살펴봅시다!

22.
1.

23.
UTF-8 UTF-8로

24.
안

25.
쓰면

26.
특수문자나

27.
한글이

28.
깨집니다!!

29.
head에

30.
넣어줍시다. meta

31.
http-equiv=Content-Type

32.
content=text/html;

33.
charset=UTF-8

34.
2.

35.
보이지

36.
않는

37.
너 지금

38.
당장

39.
보이지

40.
않는

41.
부분도

42.
잊지

43.
않고

44.
코딩을

45.
꼭

46.
해줘야

47.
합니다! --

48.
ul로

49.
만들어

50.
줍니다. form에

51.
있는

52.
input으로

53.
만들어

54.
줍니다.

55.
3.

56.
태그

57.
순서 adivHello/div/a divaHello/a/div 이

58.
둘의

59.
차이는?

60.
4.

61.
주석처리 !--

66.
--

67.
오늘의

68.
학습

69.
목표 거지같은

70.
HTML을

71.
이쁘게

72.
꾸며보자!

73.
레이아웃(layout)은

74.
오늘

75.
못

76.
할

77.
것

78.
같으니

79.
다음

80.
시간으로…⋯ CSS(Cascading

81.
Style

82.
Sheets)

83.
CSS가

84.
없을

85.
때

86.
어떤지

95.
우리는

96.
봤다.

97.
CSS를

98.
적용하는

99.
방법

100.
1 style을

101.
html

102.
tag에

103.
직접

104.
적용하는

105.
방법 -

106.
inline

107.
방식 body

112.
div

121.
span

122.
style=“color:red;”

127.
/div

128.
/body

129.
CSS를

130.
적용하는

131.
방법

132.
2 style

133.
tag를

134.
이용하여

135.
html에

136.
넣는

137.
방식 -

138.
internal

139.
방식 head

144.
titlehello,

145.
world/title

154.
style

167.
span

168.
{

169.
color:

170.
red;

171.
}

180.
/style

181.
/head

182.
CSS를

183.
적용하는

184.
방법

185.
3 외부

186.
파일

187.
(.css)로

188.
지정하기 -

189.
external

190.
방식 span

191.
{

192.
color:red;

193.
} head

198.
link

199.
rel=“stylesheet”

200.
type=“text/css”

201.
href=“main.css”

202.
/head main.css main.html

203.
inline,

204.
internal,

205.
external

206.
중

207.
어떤

208.
방법이

209.
좋은

210.
걸까?

211.
+ 개발자

212.
도구에서는

213.
스타일이

214.
어떻게

215.
적용될까?

216.
시작하기

217.
전에

218.
reset! Google

219.
“css

220.
reset”

221.
검색하기

222.
시작하기

223.
전에

224.
추천

225.
프로그램!

226.
Sip 원하는

227.
색깔을

228.
pick!!!

229.
CSS

230.
냠냠

231.
먹이기

232.
1 div

234.
{

239.
width:

240.
100px;

245.
height:

246.
200px;

247.
} -

248.
tag로

249.
먹이기 span

251.
{

256.
font-size:

257.
3em;

262.
color:

263.
#f332de

264.
}

265.
CSS

266.
냠냠

267.
먹이기

268.
2 div

269.
id=“menu_container”menu/div -

270.
id로

271.
먹이기 #menu_container

273.
{

278.
width:

279.
500px;

284.
background-color:

285.
yellow;

286.
}

287.
CSS

288.
냠냠

289.
먹이기

290.
3 div

291.
class=“card_list”card/div -

292.
class로

293.
먹이기 .card_list

295.
{

300.
width:

301.
500px;

306.
background-color:

307.
yellow;

308.
}

309.
CSS

310.
냠냠

311.
먹이기

312.
4 div

313.
class=“css_good”

318.
spanhello/span

323.
divspanbye/span/div

324.
/div -

325.
하위에

326.
먹이기 .css_good

328.
span

329.
{

334.
width:

335.
500px;

340.
background-color:

341.
yellow;

342.
}

343.
CSS

344.
냠냠

345.
먹이기

346.
5 div

347.

352.
spanhello/span

357.
divspanbye/span/div

358.
/div -

359.
바로

360.
밑에

361.
애들만

362.
먹이기 .css_good

366.
span

367.
{

372.
width:

373.
500px;

378.
background-color:

379.
yellow;

380.
}

381.
CSS

382.
냠냠

383.
먹이기

384.
6 ul

389.
li1/li

394.
li2/li

399.
li3/li

400.
/ul -

401.
서수로

402.
잡아오기 li:first-child

403.
{

404.
color:

405.
blue;

406.
} li:nth-child(2)

407.
{

408.
color:

409.
red;

410.
} li:last-child

411.
{

412.
color:

413.
yellow;

414.
} li:nth-child(odd)

415.
{

416.
color:

417.
green;

418.
} li:nth-child(even)

419.
{

420.
color:

421.
pink;

422.
}

423.
CSS는‘경쟁’을

424.
좋아합니다.

425.
CSS

426.
원칙

427.
1 -

428.
최종적으로

429.
작성된

430.
CSS가

431.
먹는다. span

432.
{

433.
color:

434.
red;

435.
}

436.
span

437.
{

438.
color:

439.
blue;

440.
} span?

441.
CSS

442.
원칙

443.
2 -

444.
더

445.
구체적인

446.
CSS가

447.
먹는다. span

448.
{

449.
color:

450.
blue;

451.
}

452.
body

454.
span

455.
{

456.
color:

457.
red;

458.
} span?

459.
CSS

460.
원칙

461.
2-1 -

462.
CSS

463.
속성은

464.
하위에

465.
상속

466.
된다 ※

467.
주의

468.
–

469.
box관련

470.
스타일은

471.
상속

472.
제외(margin,

473.
padding,

474.
border)

487.
얘네들은

488.
다음

489.
시간에

490.
더

491.
자세히

492.
배울게요

493.
☺ div

494.

499.
spanhello/span

504.
divspanbye/span/div

505.
/div .css_good

507.
span

508.
{

513.
width:

514.
500px;

519.
background-color:

520.
yellow;

521.
} CSS

522.
냠냠

523.
먹이기

524.
4

525.
참고!!!

526.
CSS

527.
원칙

528.
3 -

529.
id

531.
class

533.
element div

534.
id=“a”

535.
class=“b”

536.
hello

537.
/div hello? #a

538.
{

539.
color:

540.
red;

541.
}

542.
.b

543.
{

544.
color:

545.
blue;

546.
}

547.
div

548.
{

549.
color:

550.
yellow;

551.
}

552.
근데

553.
폰트가

554.
너무

555.
구려요ㅠ

556.
괜찮아,

557.
우리에겐

558.
웹폰트가

559.
있잖아 http://www.google.com/fonts http://www.google.com/fonts/earlyaccess

560.
웹폰트

561.
사용법 1. css

562.
파일에

563.
폰트를

564.
import

565.
해준다.

566.
(html

567.
head에서도

568.
가능)

573.
@import

574.
url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); 2. css에서

575.
font-family에

576.
해당

577.
폰트를

578.
사용하면

579.
된다.

580.
끝!

587.
body

588.
{font-family:

589.
'Nanum

590.
Gothic',

591.
serif;

592.
} 참고)

593.
가끔

594.
이런

595.
font-family를

596.
발견할

597.
수

598.
있는데

605.
body

606.
{font-family:

607.
'Nanum

608.
Gothic',

609.
arial,

610.
verdana,

611.
serif;

612.
}

619.
폰트를

620.
로드하지

621.
못할

622.
경우를

623.
대비해서

624.
대체할

625.
후보들을

626.
여러

627.
개

628.
써둔

629.
것이다.

630.
신기한

631.
CSS

632.
효과ㅋ

633.
:hover 마우스가

634.
오버되면

635.
해당

636.
CSS를

637.
추가해준다!! p:hover

638.
{background-color:

639.
blue;}

640.
:active 해당

641.
태그가

642.
클릭되면

643.
해당

644.
CSS를

645.
추가해준다!! p:active

646.
{background-color:

647.
blue;}

648.
CSS

649.
selector

650.
참고 http://www.w3schools.com/cssref/css_selectors.asp

651.
CSS

652.
애니메이션도

653.
가능한데

654.
나중에

655.
배우기로

656.
합시다ㅋ

657.
다음

658.
시간까지!!!

659.
레이아웃은

660.
상관

661.
없이

662.
text에만

663.
CSS

664.
style을

665.
먹여옵니다. 어렵지는

666.
않지만

667.
손이

668.
많이

669.
가는

670.
작업이니

671.
끈기를

672.
가지고

673.
합시다!

674.
질문

675.
및

676.
건의사항 ex)

677.
GOOD

678.
홈페이지

679.
너무

680.
어려운

681.
거

682.
아니냐,

683.
진도

684.
너무

685.
빠르다

686.
등등

[WEB UI BASIC] CSS_1

More Related Content

What's hot

Viewers also liked

More from Jae Woo Woo

Recently uploaded

[WEB UI BASIC] CSS_1