본문 바로가기

👩🏻‍💻STUDY

(78)

[CSS] CSS 선택자 우선순위 가장 기초적인 부분인데 그냥 넘어가는 경우가 많다. 선택자 우선순위 우선순위란, 같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법. 점수가 높은 선언이 우선 점수가 같으면 가장 마지막에 선언한 태그가 우선 Hello world! 점수로 우선순위를 나타내보자. Hello world! !important > inline > ID > Class > 태그 > 전체 > body body라는 태그에 속성을 적용하면 상속되기 때문에 점수를 계산하지 않는다. [예제] .list li.item {} .list li:hover {} .box::before {} #submit span {} header .menu li:nth-child(2) {} h1 {} :not(.box)..

[SASS] css 전처리기 컴파일러 koala(코알라) 1. 코알라 다운 2. 코알라에서 + 를 누른 후 컴파일 할 scss파일을 선택한다. 3. 폴더 지정없이 진행하려면 6번부터 보면된다. 컴파일할 css 파일을 scss와 다른 경로에 저장하려면 여기서부터 보면됨. style.scss에서 우클릭 후, [set Output Path] 선택. 4. 3번에서 scss 파일을 선택하면 같은 경로에 css파일이 저장된다. 이 css 파일을 내가 넣을 폴더에 넣고 진행만 하면 된다. 5. 그럼 경로가 아래 이미지처럼 확인됨. 6. 컴파일 된 css를 어떻게 구조화할지 선택할 수 있다. (output style 선택) nested ul { font-family: Georgia; color: #333; } ul li { display: inlne-block; } exte..

[CSS] flex 반응형에 따라 박스 떨어뜨리기 조건 flex로 1줄 6칸 만들기 768px 일 때 2줄 3칸 만들기 box box box box box box * { margin: 0; padding: 0; box-sizing: border-box; } .container { display: flex; max-width: 1200px; height: 200px; background: #eaeaea; margin: auto; } .box { width: 20%; border: 1px solid plum; } @media all and (max-width: 768px) { .container { /*flex-wrap: nowrap(default) */ flex-wrap: wrap; background: #777; } .box { width: 33.33%..

[jQuery] class 찾기 [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 등도 사용가능하다. 클래스 이름 앞에 .을 찍어서 클래스 속성임을 명..

NHN 코딩컨벤션 pdf 자료 https://nuli.navercorp.com/data/convention/NHN_Coding_Conventions_for_Markup_Languages.pdf 최신판은 아니지만 읽어보면 유용하다.

[CSS] viewport (vw, vh, vmin, vmax) 의미와 사용 [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..

[CSS] font-size를 통한 rem사용방법과 유의할 점 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..

Google HTML/CSS Style Guide 목차 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..

이전 1 2 3 4 5 6 7 ··· 10 다음

티스토리툴바