본문 바로가기

전체 글

(33)
수직 margin 병합 제외 경우 최상위 요소 body의 수직 마진 부모의 display: flow-root 부모의 overflow: hidden | auto | scroll 부모의 padding-top /bottom이 0이 아닌 부모의 border-top/bottom이 0이 아닌 display: inline | inline-* float: left, rigth 출처 : The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명
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,..
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; // 활성 아이템 스타일 } } &..
CSS 기타 오답노트 1. 형제/부모 노드의 사이의 수직 마진은 중첩된다. 음수 마진 바텀 값을 주면 해당 요소가 내려가는 것이 아니라, 아래 요소들을 위로 끌어올리는 것처럼 보인다. 2. border-color값은 background-color값이 아닌, color값으로부터 상속된다. 3. 요소에서 넓이 우선 순위 : css > inline width 4. position (absolute, fixed), 또는 float속성을 주면 default값이 block으로 변한다. 5. vertical-align 속성은 inline 레벨 또는 테이블 셀 요소에만 적용 가능하다.
비디오에 <tract> 사용해서 embeded 자막 넣기 tract 태그를 사용하면 video 요소에 자막을 넣을 수 있다.
<picture> 태그 사용해서 avif, webp, jpg 이미지 최적화 하기 picture 태그는 이미지의 타입, 해상도, 해상력을 분기할 수 있다. 용량이 큰 jpg, png 파일은 사용자 경험에 안좋은 영향을 줄 수있다. 최신 브라우저가 지원하는 확장자인 avif, webp를 사용하면 저용량 고화질 이미지를 표시할 수 있다. 위의 예시를 보면 모든 확장자 source가 없을 경우에만 마지막 옵션인 jpg 이미지를 표시하고 있다. 많은 옵션을 코딩한다고 해서 사용자가 모든 버전을 다운로드 받는 것은 아니니 데이터 관리에도 용이하다. 레티나 디스플레이에 최적화 시킬 수 있는 분기법도 있다. 출처 : The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명
HTML 상요작용 태그 적절히 사용하기 1. vs a a 태그 사용할 때는 URL링크가 있을 경우 사용 a 태그에는 target="_blank" 가 많이 사용되는데, 해킹 방지를 위해 rel="noopener noreferrer"을 함께 사용 권장 (최신 브라우저에는 자동 탑재) button url 변경이 없을 경우 사용 pointer 변경은 하지 않는 것을 권장 (손모양 x) 2. , 아코디언 구조를 코딩할 때, javascript의 도움 없이도 HTML 태그만으로 만들 수 있다. details에 open 속성을 주면, open 값을 default로 사용할 수 있음 "what is Lorem?" Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis accusantium q..
HTML 헤딩 작성 시 유의할 점 - Sectioning Root Sectioning Root란? Sectioning Root는 '최상위 Section을 의미 HTML5에서 새롭게 추가 된 명세 섹셔닝 루트 외부에서는 내부 개요에 접근 불가 문맥 아닌 콘텐츠를 전체 개요에서 격리하는 역할 중요한 점은 비록 HTML에 명시가 되어 있지만, 브라우저 제조사가 오랜기간 해당 알고리즘을 구현하지 않았기 때문에 이 개념을 실무에서 적용하는 것은 권장하지 않는다. Sectioning Root의 종류 가급적 섹셔닝 루트 요소 안에는 헤딩을 작성하지 않는 것이 좋다. 출처 : The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명