키보드와 하루

1. 개념 font - 글꼴 속성을 한꺼번에 표현 font는 font-style,font-wiehgt,font-size/line-height,font-family 와 같은 속성들을 한꺼번에 간단하게표현할 수 있는 속성 또 특정 키워드를 이용해 그것과 어울리는 글꼴 스타일을 표시 속성 설명 caption 캡션에 어울리는 글꼴 스타일 icon 아이콘에 어울리는 글꼴 스타일 menu 드롭다운 메뉴에 어울리는 글꼴 스타일 message-box 대화상자에 어울리는 글꼴 스타일 small-caption 작은 캡션에 어울리는 글꼴 스타일 status-bar 상태 표시줄에 어울리는 글꼴 스타일 2. 태그 font html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20..

1. 개념 font-style - 글자 스타일 지정 font-style는 글자 스타일 지정하는 속성 속성 설명 normal 일반적인 형태 italic 이탤릭체로 표시(기울어진 글꼴이 처음부터 디자인) oblique 이탤릭체로 표시(원래 글꼴을 기울어지게 표시) 2. 태그 font-style html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 DOCTYPE html> 1 normal 스타일 2 italic 스타일 3 oblique 스타일 결과 화면 코드 설명 1 font-style : normal ; 기울임이 없는 일반적인 형태입니다. 보통 일반적인 글꼴에는 font-style 선언을 하지 않겠죠. 만약에 전체 기..

1. 개념 font-weight - 글자 굵기 지정 font-weight는 글자 굵기를 지정하는 속성 속성 설명 normal 일반적인 형태(기본값) lighter 일반 형태의 굵기보다 더 가늘게 bold 일반 형태보다 굵게 bolder 일반 형태보다 더 굵게 100~900 숫자 값을 통해 더 세밀하게 굵게 조절(400=normal , 700=bold) 2. 태그 font-weight html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 DOCTYPE html> 1 lighter 굵기의 텍스트 2 normal 굵기의 텍스트 3 bold 굵기의 텍스트 4 bolder 굵기의 ..

1. 개념 font-size - 글자 크기 조절 font-size는 글자 크기를 조절하는 속성 속성 설명 절대 크기 브라우저에서 지정한 크기 (xx-small , x-small , small , medium, large,x-large,xx-large) 상대 크기 부모 요소의 글자 크기 기준으로 더 크거나 작게 표시(larger,smaller) 크기 브라우저와 상관없이 글자 크기 직접 지정 em 해당 글꼴 대문자 M의 너비를 기준으로 크기 조절 ex 해당 글꼴의 소문자 x의 높이를 기준으로 크기 조절 px 모니터에 따라 상대적 크기 pt 일반 문서에서 많이 사용되는 단위 백분율 부모 요소의 글자 크기 기준으로 %를 계산해 표시 2. 태그 font-size html5 코드 1 2 3 4 5 6 7 8 9 1..

1. 개념 font-family - 텍스트에 글꼴 지정 font-family는 웹 페이지에서 텍스트 글꼴을 원하는 글꼴로 나오도록 함 글꼴을 지정하는 방법은 3가지 ① 시스템에 설치되어 있는 기본 글꼴을 사용 ② @font-face를 이용하여 웹폰트를 import 한 후에 사용 ③ 직접 다운을 받거나 작업한 폰트를 @font-face로 설정한 후에 사용 2. 태그 font-family html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 DOCTYPE html> 1번 적용 body에 해당하는 나눔명조를 적용 ..

1. 개념 prefixfree.min.js - CSS3에서 쓰이는 브라우저 접두사 자동 생성 CSS는 1,2,3까지 해서 지속적으로 발전해 왔고 지금도 새로운 규악을 기준으로 만들어지고 있음 그러다 보니 브라우저별 표준으로 지원이 되는 기능과 그렇지 않는 기능이 생김 그래서 표준으로 지원이 되지 않는 기능은 브라우저 접두사를 붙여서 사용해 주기도 해야 함 하지만 prefixfree.min.js라는 이용하면 브라우저 접두사를 붙이지 않고도 사용이 가능 다운로드 주소 https://projects.verou.me/prefixfree/ 위 사이트에 접속하여서 아래 그림과 같이 클릭해 주면 다운로드가 됨 2. 태그 prefixfree.min.js html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 ..

1. 개념 !important - 인라인 스타일보다 높은 우선 순위 스타일 적용 스타일을 적용할 때 여러 스타일 적용으로 인해 충돌이 날 경우에는 우선 순위가 높은 것 부터 적용을 하게 됨 스타일 우선순위 ① 인라인 스타일 - 태그 안에서 style로 지정한 스타일 ② id 스타일 - id로 지정한 태그에 한번만 적용하는 스타일 ③ 클래스 스타일 - class로 지정한 태그에 여러 번 적용하는 스타일 ④ 태그 스타일 - 특정 태그에 적용되는 스타일 클래스에서 !important를 사용할 때는 우선순위가 인라인 스타일보다 더 높게 적용됨 2. 태그 !important html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 ..

1. 개념 ID 선택자 - 특정 부분에 한번만 스타일 적용 클래스 선택자 같은 경우에는 여러 태그에 적용이 가능하지만 ID 선택자는 한번만 적용이 가능함 ID를 여러 군데에 쓰면 똑같이 class 처럼 적용이 되지만 ID는 중복해서 사용할 수가 없는 것이기에 한 ID 에서는 한 스타일만 적용 ID에 스타일을 주고자 할 경우에는 샵(#)을 붙여서 스타일을 선언 2. 태그 ID 선택자 html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 DOCTYPE html> 1번 적용 ID가 p_style인 P 태그의 요소에 스타일 적용 2번 적용 class가 p_style_class인 P 태그의 요소에 스타일 적용 결과 화..

1. 개념 클래스 선택자 - 특정 부분에만 스타일 적용 같은 태그로 선언된 요소라고 할지라도 다른 스타일을 적용하고자 할 경우에 사용 즉 태그에 상관없이 특정 부분에 스타일을 적용 class를 선언하기 위해서는 마침표(.)를 먼저 쓰고 다음에 사용하고자 하는 클래스명을 선언 2. 태그 클래스 선택자 html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 DOCTYPE html> 1번 적용 textcolor_blue 클래스 적용된 요소 4번만 적용 클래스 적용이 없는 순수한 h2 요소 2,3,4,5번 적용 tex..

1. 개념 * , tag - 전체 선택자와 태그 선택자 * - 모든 요소에 적용할 때 사용함 주로 모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용 기본 스타일을 초기화 해서 설정할 때 사용 tag - 특정 태그가 쓰인 모든 요소에 스타일 적용 2. 태그 * , tag html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 DOCTYPE html> p 태그에 적용될 요소 h1태그에 적용될 요소 결과 화면 코드 설명 1 * {..............} * 태그로 모든 요소에 2가지를 적용해 보았습니다. 하나는 margin-left 라고 해서 왼쪽 여백을 30으로 주었고 , 전체 모든 글자를 굵게 하는 font-weight:bold..