전체 글 37
CSS BEM 네이밍 기법 사용하기 - 오답노트

1. position: absolute 의 부모가 되는 기준 : relative, fixed, transform 2. CSS 특이성 점수 특이성 점수 선택자 예시 1000 인라인 스타일 100 ID 선택자 #myElement 10 클래스 선택자, 속성 선택자, 가상 클래스 선택자 .myClass, [class="menu"], :hover 1 요소 선택자, 가상 요소 선택자 p, :before 020 점수를 유지하는 것이 가장 바람직하다. 3. 아토믹 CSS 방법론은 UI를 작은 단위의 구성 요소로 분해하여 설계하는 방법론. UI 요소들을 재사용 가능한 작은 모듈로 만들고, 이 모듈들을 조합하여 확장 가능하고 일관성 있는 디자인 시스템을 구축하는 것을 목표로 한다. ex) .btn, .search-bar,..
공부/퍼블리싱 2024.01.10

CSS BEM 네이밍 기법 사용하기

BEM 네이밍 기법 특징 1. 의미론 작명법으로 읽고 이해하기 쉽다. 2. 생소한 이름에 약어를 사용하지 않는다. 3. 특이성을 낮게 '020' 이하로 유지한다. (중첩 클래스, id 사용 남발 X) 4. 선택자 이름은 전역에서 유일하다. 5. HTML/CSS 병렬 개발 가능 예시 html Home About Services 예시 CSS .menu { // 블록 스타일 background-color: #f0f0f0; // 블록 내의 요소들의 스타일 &__list { padding: 0; list-style: none; } &__item { display: inline-block; margin-right: 10px; &--active { font-weight: bold; // 활성 아이템 스타일 } } &..
카테고리 없음 2024.01.06

CSS 기타 오답노트

1. 형제/부모 노드의 사이의 수직 마진은 중첩된다. 음수 마진 바텀 값을 주면 해당 요소가 내려가는 것이 아니라, 아래 요소들을 위로 끌어올리는 것처럼 보인다. 2. border-color값은 background-color값이 아닌, color값으로부터 상속된다. 3. 요소에서 넓이 우선 순위 : css > inline width 4. position (absolute, fixed), 또는 float속성을 주면 default값이 block으로 변한다. 5. vertical-align 속성은 inline 레벨 또는 테이블 셀 요소에만 적용 가능하다.
공부/퍼블리싱 2024.01.06

<picture> 태그 사용해서 avif, webp, jpg 이미지 최적화 하기

picture 태그는 이미지의 타입, 해상도, 해상력을 분기할 수 있다. 용량이 큰 jpg, png 파일은 사용자 경험에 안좋은 영향을 줄 수있다. 최신 브라우저가 지원하는 확장자인 avif, webp를 사용하면 저용량 고화질 이미지를 표시할 수 있다. 위의 예시를 보면 모든 확장자 source가 없을 경우에만 마지막 옵션인 jpg 이미지를 표시하고 있다. 많은 옵션을 코딩한다고 해서 사용자가 모든 버전을 다운로드 받는 것은 아니니 데이터 관리에도 용이하다. 레티나 디스플레이에 최적화 시킬 수 있는 분기법도 있다. 출처 : The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명
공부/퍼블리싱 2024.01.05
1 2 3 4
더보기

티스토리툴바