Study/HTML & CSS
-
Learn HTML & CSS. 6.Styling with CSS(Fonts)Study/HTML & CSS 2016. 12. 1. 21:21
Review what I learned 폰트 서체는 font-family 속성을 이용하여 바꿀 수 있다. Serif 폰트는 대문자 I 나 소문자 l 같은 같은 활자에서 아래・위에 가로로 가는 선이 나있는 서체이며, Sans-Serif 는 그렇지 않은 서체이다. (I I, l l) 아이와 아이, 엘과 엘, Serif와 Sans-Serif Fallback 폰트는 혹시 방문자의 컴퓨터에 CSS에서 설정한 서체가 설치되어 있지 않을 때 대신 적용되는 서체이다. 구글 폰트는 free fonts 이며, HTML파일에 link 태그로 연결하여 사용할 수 있다. 폰트의 크기는 font-size 속성을 이용하여 바꿀 수 있으며, pixels(px), ems(em), percentages(%) 를 단위로 사용한다. 각 줄..
-
Learn HTML & CSS. 5.Styling with CSS(Colors)Study/HTML & CSS 2016. 11. 30. 16:55
Review what I learned Foreground Color는 해당 태그의 실제 보이는 내용의 색을 뜻한다. 이는 color 속성으로 설정할 수 있다. Background Color는 해당 태그의 보이는 내용 뒷 배경의 색을 뜻한다. 이는 background-color 속성으로 설정할 수 있다. 편하게 사용할 수 있는 named color가 147 가지 있다. (Red, Blue, Aqua 등) RGB(Red, Green, Blue 빛의 3원색) 또는 16진법(예. #B2325D)으로 색을 표현할 수 있는데, 이는 16,000,000(16백만) 가지의 색이 가능하다. HSL(Hue, Saturation, Lightness)은 CSS3에서 색을 정의하는 새로운 방법이다. (설명) RGBa 또는 H..
-
Learn HTML & CSS. 4.CSS Basic Structure & SyntaxStudy/HTML & CSS 2016. 11. 28. 13:37
Review what I learned CSS 셀렉터(selector)의 대상은 HTML의 태그이다. CSS 는 HTML 태그의 style을 정의한다. 이 정의는 반드시 두가지를 포함해야 한다. property - style을 정하기 원하는 속성 (예. 색, 글자 크기 등등) value - 해당 속성의 값 (예. Red, 12px 등등) CSS 정의의 마지막엔 반드시 세미콜론(;)이 있어야 한다. (C, JAVA 등 과 동일) (예. color : Blue; ) CSS 로 만든 규칙은 셀렉터와 셀렉터 내부의 정의들로 구성된다. (중괄호 { } 로 구성) 여러개의 태그를 동시에 style 할 때에는 한번에 셀렉터를 여러개 사용할 수 있다. 예. h1, p { 정의~ } 주석은 유지보수를 쉽게 할 수 있도록..
-
Learn HTML & CSS. 3.CSS SetupStudy/HTML & CSS 2016. 11. 25. 18:08
Review what I learned 코드의 유지보수를 더 편하게 하기 위해 HTML과 CSS 파일은 나누어서 저장한다. (C++에서 코드와 헤더를 나누듯이) HTML파일 내부에 태그를 이용하여 CSS코드를 쓸 수 있다. CSS 파일은 태그를 통해 HTML 파일과 연결되어 사용할 수 있다. 그리고 세가지 속성들이 필요하다. href - CSS파일의 경로(예. /style.css)를 넣어주어야 한다. 상대경로 or 절대경로 type - text/css 를 넣으면 된다. (타입이 text로 이루어진 css 라는 뜻) rel - sytlesheet 를 넣으면 된다. (해당 파일은 현재 파일의 stylesheet 라는 뜻) 출처 : codecademy(HTML & CSS)
-
Learn HTML & CSS. 2.Common HTML ElementsStudy/HTML & CSS 2016. 11. 24. 17:03
Review what I learned 여러 크기의 heading을 쓸 수 있는데, 태그 부터 태그 까지 사용 가능하다. 크기는 h1이 제일 크며, h6로 갈수록 크기가 작아진다.. 단락(Paragraph)들은 태그로 주가할 수 있다. (나는 단락보단 문단으로 생각하는 편이다.) 순서가 정해지지 않은 리스트는 태그로 사용할 수 있다. (unordered list) 순서가 정해진 리스트는 태그로 사용할 수 있다. (ordered list) 각 리스트들의 목록들은 태그로 추가할 수 있다. 링크들은 태그로 이동하게 할 수 있는데, href 속성이 꼭 필요하다. (href = html reference) 이미지는 태그로 추가할 수 있다. src 속성이 꼭 필요하다. (src = source) 이미지가 엑박이 되..