[jQuery] class 찾기 hasClass() is() length apple banana orange 1.hasClass() 선택자 태그에 해당 조건이 class 이여야 한다. 태그는 안되는 것 같다. // jQuery $('.wrap > div').each(function() { if($(this).hasClass('apple')) { // true $(this).css({color: 'red'}); } else { // false $(this).css({color: 'yellow'}); } }) 2.is() 특정 클래스를 포함하고 있는지, class외에 id, name 등도 사용가능하다. 클래스 이름 앞에 .을 찍어서 클래스 속성임을 명..

https://nuli.navercorp.com/data/convention/NHN_Coding_Conventions_for_Markup_Languages.pdf 최신판은 아니지만 읽어보면 유용하다.

[CSS] vw / vh를 알아보자 정리한 이유 vw, vh가 부모의 넓이에 영향을 받는 줄 알았지만, 화면의 너비에 영향을 받는다는 점에서 정리를 통해 다시 알아보고자 한다. 먼저 말하자면 vw, vh 는 부모의 넓이에 영향을 받지 않는다!!! 단위와 의미 vw / Viewport Width viewport 너비에 근거. 1vw는 viewport의 넓이 1%와 같다. vh / Viewport Height viewport 높이에 근거. 1vh는 viewport의 높이 1%와 같다. vmin / Viewport Minimum viewport의 (높이와 너비 중) 작은 쪽의 치수로 기준. viewport 높이가 더 작은 경우, 1vim = viewport 높이 1% viewport 너비가 더 작은 경우, 1..

HEADING Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit possimus necessitatibus natus a ipsam, voluptate dolores, optio quibusdam doloribus architecto obcaecati, eveniet magni ex veniam dolorum blanditiis tempora exercitationem ea! Voluptatem voluptate nulla recusandae debitis tempora rem maxime provident nobis minus neque quod excepturi molestiae sapiente, fuga ducimus sint qui..

목차 1 배경 2 일반 2.1 일반 스타일 규칙 2.2 일반 서식 규칙 2.3 일반 메타 규칙 3 HTML 3.1 HTML 스타일 규칙 3.2 HTML 형식 규칙 4 CSS 4.1 CSS 스타일 규칙 4.2 CSS 서식 규칙 4.3 CSS 메타 규칙 1 배경 이 문서는 HTML 및 CSS에 대한 형식 및 스타일 규칙을 정의한다. 협업, 코드 품질을 개선하고 지원 인프라를 활성화하는 것을 목표로 한다. 2 일반 2.1 일반 스타일 규칙 2.1.1 프로토콜(Protocol) 리소스에 HTTPS를 넣는 것이 좋다. HTTPS(https:) 는 이미지 및 기타 미디어 파일, 스타일 시트 및 스크립트에 붙이는 것이 좋다. /* 권장하지 않음 : 프로토콜 생략 */ @import '//fonts.google..

메뉴 | 메뉴 | 모양의 바모양을 가상선택자로 만드는 방법 LOGO menu1 menu2 menu3 menu4 * { margin: 0; padding: 0; box-sizing: border-box; } li { list-style: none; } a { text-decoration: none; color: inherit; } nav { width: 800px; height: 40px; margin: 0 auto; background: #e1e1e1; display: flex; } nav h1 { align-self: center; font-size: 14px; } nav ul { margin-left: auto; display: flex; justify-content: center; align-ite..

css nth-child(n)에 대해 확실히 알아보자. /* 3,6,9.. 번째(3의배수) 적용 */ li:nth-child(3n) {} /* 5번째 이후 부터 모든 리스트 적용 */ li:nth-child(n+5) {} /* 첫번째부터 5번째까지 적용 */ li:nth-child(-n+5) {} /* 5번째부터 10번째까지 적용 */ li:nth-child(n+5):nth-child(-n+10) {} /* 끝에서 3번째만 적용 */ li:nth-last-child(3) {} /* 홀수만 적용 */ li:nth-child(odd) {} /* 짝수만 적용 */ li:nth-child(even) {} Reference https://hohoya33.tistory.com/99

작업을 하면서 한글은 notoSans, 숫자는 Montserrat으로 설정하고 싶었다. 내가 시도한 방법 중 하나는 body { font-family: 'NotoSansKR' }로 먼저 적용한 후, 숫자 클래스를 따로 만들어서 .mont { font-family: 'Montserrat' } 클래스를 적용했는데 후에 유지보수할 때 html을 건드려야해서 추천하고 싶지 않은 방법이다. 이에 국문, 영문은 notoSans로 숫자만 montserrat으로 적용하는 방법을 찾던 중, unicode-range 란 방법이 있어 소개하고자 한다. 국문과 영문만 Noto Sans KR 입니다. 숫자 12345678910 Montserrat 유니코드 범위 전체 : U+0020-007E 특수문자 : U+0020-002F, ..