├── 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 | 49 | 50 | 51 | NAVER 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 |

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 | --------------------------------------------------------------------------------