landmark란? 구역을 나타내는 요소(=시멘틱 태그)들을 landmark라고 한다. role role이라는 속성으로 landmark를 정의한다. role 속성 중에 role 값으로 landmark가 존재하기 때문이다. (그러므로 role을 사용한다고 무조건 landmark가 되는 것은 아님) role은 어떤 곳에 사용하느냐에 따라 aria속성이 추가 될 수 있으므로 MDN role를 보고 참고해서 사용하도록 하자. [주의] 내비게이션 내비게이션 혼용해서 사용해서는 안된다. 구역을 나타내는 요소를 사용할 수 있으면 사용하는게 좋다. [공부 좌표] WAI-ARIA Roles
See the Pen [인터랙션 CSS] 햄버거 메뉴 만들기 by mill (@millfeel) on CodePen. 접근성 이슈 tab 사용시 포커스 되지 않는 이슈를 해결하기 위해서 "tabindex"를 사용해야 하고, role과 aria-label을 선언하여 해당 ‘div’ 영역에 대한 설명을 제공해야한다. label의 기본 속성은 포커스가 되지 않는다. input[id='menuicon'] {display: none;} input[id='menuicon'] + label { position: relative; display: block; width: 60px; height: 40px; cursor: pointer; /* 포인터가 label에 설정돼 있다. */ background-color: #d..
font 축약 CSS 속성 font-family (필수) font-size (필수) font-stretch (선택) font-style (선택) font-variant (선택) font-weight (선택) line-height (선택) 사용 방법 body { font: 1.6rem/1.5 '맑은 고딕', 'malgun gothic', sans-serif; } - 속성은 띄어쓰기로 구분한다. - line-height는 font-size 바로 다음에 와야하고, "/"로 구분해야한다. (ex. 16px/3) - font-family는 마지막 값이어야한다. [공부 좌표] MDN [참고] font-family Q. font-family 기본 폰트는 어떤 것을 설정해야 할까? Q. line-height는 어떤 단..
용도 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() ..
01. 클래스 생성자는 new와 함께 호출하지 않으면 에러가 발생한다. // class 생성 class ClassName{ constructor(){} } // 생성자 함수 생성 function ConsName(){} // 호출 ClassName(); // VM20:1 Uncaught TypeError: Class constructor ClassName cannot be invoked without 'new' at :1:1 ConsName(); 02. 클래스 메서드는 열거할 수 없다. 클래스의 prototype 프로퍼티에 추가된 메서드 전체의 enumerable 플래그는 false이다. - enumerable플래그는 for...in으로 객체 순환을 할 때, key의 값의 반환 유무를 뜻한다. - for...
문법 class ClassName{ constructor(){ ... } method1(){ ... } method2(){ ... } method3(){ ... } } let test = new ClassName(); - class 선언을 통해서 class를 만든다. - new와 함께 className()을 호출하지 않으면 에러가 발생한다. - class는 함수다. - 객체의 기본 상태를 설정해주는 constructor()는 new에 의해 자동으로 호출되므로, 특별한 절차 없이 객체를 초기화 할 수 있다. - class가 호출되면, 내부에서 정의한 메서드가 들어 있는 객체가 생성된다. - method 사이에 쉼표를 사용하지 않는다. [예시] class User { constructor(name) { th..
# 02:27 좌측 코드 리뷰 시작 # 03:03 생성자 함수가 하는 일 객체를 만든다. 객체의 초기 설정을 한다. # 03:22 class 설명 시작 class는 객체를 만드는 공장이다. class Person{ } let kim = new Person(); # 04:17 생성자 함수는 객체가 만들어지는 깔끔한 객체가 아니라, 그 객체가 기본적으로 가지고 있어야할 기능들을 셋팅해주는 기능도 생성자 함수가 해야하는 일이었다. function Person(){ this.name= name; this.first= first; this.second= second; } # 00:22 class에서 메서드를 만들 때, function을 사용하지 않는다. class Person{ function sum(){} //..
property name(=key) 제약사항 이름의 첫 문자는 숫자로 시작할 수 없다. $와 _를 제외한 특수 문자가 없어야 한다. 이름에 공백이 있을 경우, 따옴표를 사용한다. 예약어를 사용할 수 없다. 문자형이나 심볼형에 속하지 않은 값은 문자열로 자동형 변환한다. let fruits = { apple: 'ok', 1banana: '첫번째 문자에는 숫자가 있으면 안돼요', // -------------------------- 에러 water_melon: 'ok', orange$: 'ok', korean-melon: '특수문자는 _, $ 외에는 쓸 수 없어요.', // --------------------- 에러 sweet grape: '공백이 있을 경우, 따옴표를 사용해야 한다.', // ------..
- Total
- Today
- Yesterday
- clinetTop
- 객체의 프로퍼티
- property
- clientHeight
- 일치 연산자
- 불일치 연산자
- prototype 프로퍼티
- offsetTop
- innerHeight
- [[Prototype]]
- outerHeight
- __proto__
- 부등 연산자
- constructor
- scrollTop
- 점 표기법
- scrollHeight
- 링크막기 #a링크막기
- 프로퍼티
- javascript class
- @font-face
- 대괄포 표기법
- offsetHeight
- 동등 연산자
- 동치 연산자
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |