용도 font-family속성은 가장 높은 우선 순위에서 가장 낮은 우선 순위까지 글꼴 목록을 지정한다. (앞에서 => 뒤로) 기본 설정 사용한 폰트 스타일에 맞게 sans-serif, serif는 반드시 기본적으로 사용해줘야 한다. font-family: sans-serif; (고딕) font-family: serif; (명조) *sans는 없다라는 뜻을 가지고 있다. 즉, 명조의 꼬리 부분이 없기 때문에 고딕이다. Q. 한글 폰트만 작성하면 안되나요? font-family: 돋움, sans-serif (X) 비한국어 Windows (최소한 9x/ME)에서는 MS IE조차도 ‘돋음’을 인식하지 못하기 때문이다. 그래서 한글로 된 폰트명은 영문으로 된 폰트명과 함께 사용해 줘야 한다. font-fam..
OS별 시스템 폰트 Windows XP : 굴림 Windows Vista, 7, 8, 10 : 맑은 고딕 OS X 라이언 (10.8) : 애플 고딕 OS X 마운틴 라이언 (10.9) : 애플 산돌 고딕 네오 Ubuntu : 나눔고딕 Android 4.4 이전 - Droid Sans fallback (고딕) Android 4.4 이후 - 나눔고딕 iOS 5.x 이하 - 애플 고딕 iOS 6.x - 애플 산돌 고딕 네오 (일반체와 볼드체) iOS 7.x - 애플 산돌 고딕 네오 (100 ~ 900) 윈도우 폰 - 마이크로소프트 네오 고딕 Q. 어떤 폰트를 사용하면 좋을까? - 아래를 읽고, 상황에 맞게 사용한다. Window - 맑은 고딕 - 다국어 윈도우 지원을 위해서 "malgun gothic" 영문 ..
속성 속성 설명 font-family 사용할 웹 폰트의 이름을 지정한다. 이 이름은 폰트 파일의 이름과 일치하지 않아도 상관없다. 하지만 비슷하게 설정하는 것이 유지 보수에 좋다. src url에 폰트 파일의 경로를 설정하고,format에 폰트 파일의 형식을 설정한다. font-style normal / italic 설정 font-weight 보통 100~400 가는 굵기, 500~600 중간 굵기, 700~900 두꺼운 굵기로 표시된다. "normal = 400"으로 중간 굵기, "bold = 700"으로 두꺼운 굵기로 표시한다. 함수 함수 설명 local() 서버에서 다운을 받지 않고, 사용자의 컴퓨터에 "NanumBarunGothic"이 있으면, 컴퓨터에 있는 폰트를 사용하라는 것 format() ..
속성 공간 설명 translateX(x) 2차원(평면) 가로 좌표의 위치를 변경한다. translateY(y) 2차원(평면) 세로 좌표의 위치를 변경한다. translate(x) translate(x, y) 2차원(평면) [값이 단일인 경우] 가로 좌표의 위치를 변경한다. [값이 이중일 경우] 가로, 세로의 위치를 변경한다. translateZ(tz) 3차원(입체) *3D속성 필요 깊이의 좌표의 위치를 변경한다. 양수 값은 요소를 뷰어쪽으로 가깝게 이동하고, 음수 값은 더 멀리 이동한다. translate3d(tx, ty, tz) 3차원(입체) *3D속성 필요 가로, 세로, 깊이의 위치를 변경한다. *3D속성이 붙은 애들은 하드웨어 가속이 보장이 된다. (포퍼먼스가 좋다) *3D속성이란 transform..
차이 perspective perspective() 유형 속성 메서드 작성 위치 부모 자신 사용 방법 perspective: 값 transform: perspective(값) transform: perspective() - 3D 공간에서 요소와 관측 점과의 거리, 즉 원근감을 지정하는 속성이다. - 값이 작을수록 가깝게 보이고, 멀수록 멀게 보인다. perspective는 뷰어와 요소와의 거리를 나타내고, transform-style은 요소의 표현을 나타내고, perspective-origin는 뷰어가 보는 위치를 설정한다. perspective(d) d - 뷰어에서 z = 0 평면까지의 거리를 나타내는 이다. - 0 또는 음수 값은 원근 변환이 적용되지 않는다. [예제] See the Pen [CSS]..
- 2D 또는 3D 중 어떻게 표현할지를 설정한다. - 속성은 부모에게 사용하고, 적용 범위는 자식에게만 적용된다. (자손X) transform-style: flat; //기본값 transform-style: preserve-3d; transform-style flat (기본값) preserve-3d 공간 평면(=2D) 3D 작성 위치 부모 적용 대상 자식에게 적용 *도형에 마우스를 올려주세요. See the Pen preserve-3d의 적용의 차이 by mill (@millfeel) on CodePen. perspective와 transform-style은 상속X See the Pen perspective와 transform-style은 상속X by mill (@millfeel) on CodePen...
값 위치 자리 유지 크기 유지 설명 relative 상대 O O - 자신을 기준으로 배치한다. absolute 절대 X X - 부모 중에 위치 지정 요소가 있으면 상대적으로 배치한다. - 위치 지정 요소가 없는 경우: 초기 컨테이닝 블록을 기준으로 삼는다. - 요소의 속성이 inline인 경우: block이 된다. fixed 절대 X X - 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치한다. - 부모 중에 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼는다. - 요소의 속성이 inline인 경우: block이 된다. sticky 끈끈한 O O - 평소에는 상대 위치로 처리된다. - 스크롤 동작이 있어야만 "..
기본 선택자 이름 구문 설명 전체 선택자 * 모든 요소를 선택 유형 선택자 elementName 주어진 노드 이름을 가진 모든 요소를 선택 ID 선택자 #idName id 요소 선택. 문서 내에 단, 하나만 존재해야 한다. 클래스 선택자 .className 주어진 class 특성을 가진 모든 요소를 선택 특성 선택자 [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value] 주어진 특성을 가진 모든 요소를 선택 그룹 선택자 이름 구문 설명 선택자 목록 A, B ,는 선택자 그룹을 생성하는 방법으로, 모든 일치하는 노드를 선택 결합자 이름 구문 설명 자식 결합자 A > B A의 직계 자식인 노드를 선택 자..
- Total
- Today
- Yesterday
- 일치 연산자
- constructor
- 대괄포 표기법
- 객체의 프로퍼티
- outerHeight
- 동등 연산자
- property
- 링크막기 #a링크막기
- scrollTop
- clientHeight
- 점 표기법
- 동치 연산자
- clinetTop
- @font-face
- innerHeight
- scrollHeight
- 불일치 연산자
- 프로퍼티
- [[Prototype]]
- offsetHeight
- __proto__
- 부등 연산자
- prototype 프로퍼티
- javascript class
- offsetTop
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |