WEB UI 2주 HTML _ 수업추가

1.
HTML

2.
http://cafe.nhnnext.org/programStart/board_6/966
WEB

3. UI

4. Basic

6. |

9. 2주차

10. 목표

11. HTML으로

12. 내

13. Project

14. 의

15. 구조설계를

16. 할

17. 수

18. 있다.

19. H T M L

20.
화면을

21. 의미에

22. 맞게

23. 설계하다

24. HTML5 Semantic Tag

25. 웹

26. UI는

27. 의미적으로

29.
화면의

30. 영역을

31. 나눠야

32. 한다
출처

33.
http://www.cplx.co/articles/div-web-design-tutorial/

34. div

35. (division)는

36.
가장

37. 자주

38. 사용되는

39. block

40. element이다.

41.
!
특히

42. 화면의

43. 영역을

44. 구별할

45. 때

46. 늘

47. 사용한다.

48. div
div
/div
div
/div
div
/div
/div
전체

49. 화면의

50. 레이아웃을

51. div

52. 태그

53. 만으로

54. 구성할

55. 수도

56. 있다.

57. coupang은

58. 화면의

59. 구조를

60. 어떤

61. 태그로

62. 구성하고

63. 있지?

64. div id=‘wrap’
div id=‘header’
/div
div id=‘section’
/div
div id=‘footer’
/div
/div
div

65. 태그만으로는...그

66. 블록이

67. 의미하는

68. 것을

69. 알

70. 수가

71. 없다..

72.
div에

73. 의미를

74. 부여하기

75. 위해

76. 주로

77. id(identifier)

78. 속성을

79. 추가한다.

81. header
nav
aside
article
section
footer

82. 브라우저는

83. 이것을

84. 어떻게

85. 해석할까?

86.
!
header.../header
vs.
div id=header.../div

87. id
layout을

88. div

89. 로만

90. 구성할

91. 때

92. 구분을

93. 위한

94. 이름을

95. 부여

96.
document에서

97. 하나뿐인

98. element에

99. 유일한

100. 이름을

101. 부여할

102. 필요가

103. 있을

104. 때

106. HTML

108. Elements

109. 활용

110. 실습

111. div !
! img src=“” alt=“”!
/div

112. table!
!
! thead!
! tr!
! ! th트윗/th!
! ! ….!
! /thead!
!
! tbody!
! ! …!
! /tbody!
/table

113. div!
h1독일축구 망상봇/h1!
div@DFB_Magsangbot/div!
!
p!
독일축구….!
/p!
!
p!
! ….!
/p!
/div

116. 분석

118.
크롬개발자도구와

119. 함께하는.

120.
다른사이트는

121. 어떻게

122. 구현했을까?

124. http://www.nytimes.com/

125. HTML

126. 구조

127. 설계

128. 전략
1.

131. 레이아웃

132. 작성하고

133.
2.

135. 세부내용

136. 작성하자

137. 레이아웃

138. 부터

139. 잡기.

140.
전체부터

141. 잡고

142. 안에

143. 것을

144. 구성

149. 실습

150. 함

151. 해보기
http://goo.gl/wzJ69l

152. 구글

153. play의

154. layout

155. 잡기

157. End
;-D