├── README.md
└── s_150104_dxd_seminar
├── index.html
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | #dxd_study
2 | 코딩하는 디자이너 2기 수업자료
3 | HTML과 CSS를 기초부터 공부한다.
4 |
5 | ###첫번째 시간
6 | HTML 기초 및 CSS 기초 자료
7 | - HTML : [https://github.com/transbot/dxd_study/blob/master/s_150104_dxd_seminar/index.html](https://github.com/transbot/dxd_study/blob/master/s_150104_dxd_seminar/index.html)
8 | - CSS : [https://github.com/transbot/dxd_study/blob/master/s_150104_dxd_seminar/style.css](https://github.com/transbot/dxd_study/blob/master/s_150104_dxd_seminar/style.css)
9 |
--------------------------------------------------------------------------------
/s_150104_dxd_seminar/index.html:
--------------------------------------------------------------------------------
1 |
2 |
30 |
33 |
39 |
40 |
43 |
44 |
45 |
46 |
47 |
48 | NAVER
52 |
53 |
54 | HTML
65 |
66 |
67 |
68 |
69 | HTML 은 Hyper Text Markup Language의 약자이다. 현재 HTML5 가 가장 최신 버전이다
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
80 |
--------------------------------------------------------------------------------
/s_150104_dxd_seminar/style.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | /*
3 | CSS는 selector(h1), 여는 중괄호({), 닫는 중괄호(})로 구성한다.
4 | selector안의 h1은 현재 에제에서 사용하는 것이 h1이고, 실제 사용시 여러가지를 사용할 수 있다.
5 | 예를 들어 지금 html파일에 있는 요소가, , , , , , 이고, 이 각각에 스타일을 지정하는 것이 가능하다.
6 | 안에 있는 요소들에는 CSS로 스타일을 주는 것이 불가능하기 때문에 CSS에서 설명을 하지 않았다.
7 | 이는 아래로 이어지는 코드를 참고하도록 하자.
8 | */
9 | font-family: 'helvetica neue', 'APPLE SD Gothic Neo', 'malgun gothic', sans-serif;
10 | /*
11 | 속성명 (font-family)과 속성값('helvetica neue', 'APPLE SD Gothic Neo', 'malgun gothic', sans-serif) 사이에 띄어쓰기는 해주어도 되고 안해주어도 된다.
12 | 콜론(:)이 있어야 한다는 것만 늘 기억하자.
13 | 속성명과 속성값을 모두 기입한 후에는 반드시 세미콜론(;)을 작성하여야 한다.
14 | */
15 | /*
16 | font-family는 해당 요소에서 사용할 폰트를 지정한다.
17 | 지정하는 각 폰트 이름은 작은 따옴표(') 사이에 입력하며, 폰트의 구분을 쉼표(,)로 한다.
18 | 사용자가 사용하는 OS(맥은 Machintosh, 대부분의 PC는 Windows, 간혹 Linux)에 해당하는 폰트가 없다면, 뒤로 넘어가서 체크한다.
19 | 예를 들어, windows에는 'helvetica neue' 폰트와 'APPLE SD Gothic Neo'폰트가 없다.
20 | 이 경우에는 windows에 포함되어있는 폰트인 'malgun gothic'으로 폰트를 보여주게 된다.
21 | APPLE SD Gothic Neo는 한글과 영문을 둘 다 표현하기 때문에, 위 코드와 같이 영문 폰트를 먼저 작성하고 한글 폰트를 작성하게 되면, 영문은 helvetica neue 한글은 APPLE SD Gothic neo로 보여지게 된다.
22 | sans-serif는 고딕체를 의미하는 고유명사이다.
23 | 명조체를 보여주고 싶다면 serif를 가장 마지막에 지정하면 된다.
24 | OS별로 사용하는 기본 폰트는 아래에 써져 있다.
25 | 가장 이상적인 셋은 위의 코드이다.
26 | */
27 | font-weight: 400;
28 | /*
29 | font-weight는 폰트의 굵기를 표현한다.
30 | 폰트 굵기는 100부터 900까지로, 100단위로 올라간다.
31 | 즉 단위는 100,200,300,400,500,600,700,800,900이다.
32 | 일반적으로 100이 얇은 폰트, 400이 보통, 700이 굵은 폰트이다.
33 | 아래는 OS별 기본 폰트가 지원하는 굵기 현황이다. (사이트 : http://techhtml.org/lab/fonts/)
34 | 작업할 때 참고하도록 하자.
35 | [Windows]
36 | - Dotum (돋움)(다른 폰트를 지정하지 않고, sans-serif로 할 경우 기본 폰트)
37 | Normal : 400
38 | Bold : 700
39 | - Gulim (굴림)
40 | Normal : 400
41 | Bold : 700
42 | - Malgun Gothic (맑은 고딕)
43 | Normal : 400
44 | Bold : 700
45 | [Mac]
46 | - APPLE SD GOTHIC NEO (애플 SD 고딕 네오)(다른 폰트를 지정하지 않고, sans-serif로 할 경우 기본 폰트)
47 | Thin : 100
48 | UltraLight : 200
49 | Light : 300
50 | Regular : 400 (Default)
51 | Medium : 500
52 | SemiBold : 600
53 | Bold : 700
54 | Heavy : 800
55 | - Helvetica Neue (헬베티카 뉴)
56 | UltraLight : 100
57 | Light : 300
58 | Regular : 400
59 | Medium : 500
60 | Bold : 700
61 | */
62 | font-size: 28px;
63 | /*
64 | font-size는 글자의 크기를 지정하는 CSS 속성이다.
65 | font-size등을 지정할 때는 반드시 px등을 명시해야한다.
66 | 주로 쓰는 단위가 몇가지 있다. 2번째 수업에서 상세히 다루자
67 | */
68 | line-height: 32px;
69 | /*
70 | line-height는 행간을 의미한다.
71 | 기본 값은 브라우저별로 다르기 때문에 font-size를 지정해줬다면 line-height를 항상 함께 사용하도록 하자.
72 | 이 경우는 단위가 여러가지가 있지만, 기본적인 단위는 역시 px을 주로 사용한다.
73 | */
74 | color: #555;
75 | /*
76 | color 속성은 글자의 색상을 지정한다.
77 | 해쉬코드(#555)값이나 rgb(0,0,0) 혹은 rgba(0,0,0,1), 혹은 예약어(black, white) 등을 사용할 수 있다.
78 | rgb는 아시는 바와 같이 Red, Green, Blue이며, a는 alpha값이다.
79 | alpha값은 0에서 1까지의 사이로 100% 기준이고, 0.1은 opacity : 10%이다. 즉 0.01은 opacity:1%라 생각하면 된다.
80 | 이는 모든 색상 관련된 코드에서 동일하게 사용할 수 있다.
81 | * 최근에는 hsl, hsla도 지원한다. hsl은 아는 바와 같이 (hue-saturation-lightness)이다.
82 | */
83 | font-size: 32px;
84 | /*
85 | css는 위에서 아래로 읽는 방식이기 때문에, 만약 같은 속성을 아래에 다시 작성했을 경우 위의 속성이 묻힌다.
86 | 즉 h1의 font-size는 32px이 된다.
87 | */
88 | }
89 | html {/* html 요소에 스타일을 지정한다 */
90 |
91 | }
92 | body {/* body 요소에 스타일을 지정한다 */
93 |
94 | }
95 | h1 {/* h1 요소에 스타일을 지정한다 */
96 |
97 | }
98 | p {/* p 요소에 스타일을 지정한다 */
99 |
100 | }
101 | abbr {/* abbr 요소에 스타일을 지정한다 */
102 |
103 | }
104 | a {/* a 요소에 스타일을 지정한다 */
105 |
106 | }
107 |
--------------------------------------------------------------------------------