RAE-CODE

바다로 떠나고 싶다.

래코드 — Sat, 17 Jan 2026 22:00:20 +0900

동남아는 좋다.

new event!

래코드 — Sat, 17 Jan 2026 19:45:05 +0900

이벤트 내용입니다.

더 나은 미래를 만드는 나의 블로그 일지

래코드 — Sat, 17 Jan 2026 10:16:38 +0900

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non urna et eros lobortis elementum. Donec eu nisl leo. Fusce maximus pretium euismod. Aliquam cursus erat libero, ac molestie lacus ornare id. Maecenas consectetur egestas nisl a condimentum. Donec lacinia accumsan orci sit amet facilisis. Aliquam id accumsan purus, eget maximus libero. Ut ut turpis lorem. Phasellus euismod elementum vehicula. Quisque ultricies vulputate ipsum vestibulum malesuada. Aliquam placerat laoreet massa, eu vehicula risus condimentum ut. Sed sagittis et lorem eget auctor.

Mauris id tempus ligula, eget porta enim. Aliquam ultrices orci faucibus justo vestibulum, sit amet molestie orci tempor. Maecenas facilisis congue maximus. Maecenas bibendum nibh at sem malesuada, vel faucibus ante facilisis. Nullam porta dignissim sodales. Sed vel nisi id erat aliquam convallis. Nullam quis urna tempus, porttitor nisi non, ornare mauris. Donec sit amet mauris dui. Vestibulum pharetra nec purus sit amet feugiat. Fusce semper metus orci, id cursus purus malesuada sed. Mauris sodales sed risus ut ultricies. Curabitur tristique sit amet libero eu malesuada. Fusce tincidunt volutpat felis, nec rutrum mi commodo in. Nam urna diam, dictum pretium diam vitae, dignissim commodo lorem. Aenean volutpat sit amet nulla ut dignissim.

Integer aliquet dolor at placerat aliquet. Curabitur in dolor massa. Phasellus finibus quis orci ac venenatis. Phasellus tincidunt urna ut interdum tempor. Sed nec dui non justo laoreet gravida id non magna. Mauris pretium pellentesque lorem in ullamcorper. Integer condimentum, nunc sed vehicula vulputate, neque urna consequat sem, nec rutrum neque dui vel mi. Maecenas lobortis elit ac euismod bibendum. Nulla ut scelerisque libero. Nulla id pharetra lacus. Curabitur leo est, rutrum sit amet volutpat nec, semper commodo odio.

Integer sed condimentum nibh. Maecenas eu dui porta, venenatis ante lobortis, facilisis lacus. Donec quis molestie neque, in sollicitudin metus. Nulla pellentesque quam turpis, a porta dolor convallis sit amet. Integer consequat nibh nec nisl varius, nec eleifend nibh tempus. Curabitur congue est ligula, vitae posuere est malesuada sed. Quisque vulputate cursus ligula eget pharetra. Praesent felis justo, ultricies et ex id, lobortis varius erat. Praesent pulvinar diam in quam tempor, a elementum nisi venenatis. Suspendisse vitae ex dignissim nulla tincidunt condimentum sed tincidunt mauris. Quisque tristique urna eu mi convallis, vulputate elementum sem auctor. Suspendisse luctus non sem non laoreet.

Vestibulum ultricies ex non turpis ultricies, ac malesuada augue porta. Aenean hendrerit, ipsum eget euismod iaculis, augue nisl dapibus nibh, ac euismod lectus dui vel velit. Ut lacus turpis, consequat blandit lacinia ut, placerat in ex. Praesent orci orci, feugiat ac dapibus id, tempor eu dui. Curabitur bibendum eu mauris eu vehicula. Etiam rutrum elementum cursus. Suspendisse ac pellentesque massa. In sed diam sed tellus efficitur ullamcorper. Quisque ut lorem tortor. Morbi pulvinar tincidunt nibh nec mattis. Pellentesque eget erat vehicula, placerat tortor a, commodo odio. Fusce in tortor in quam pellentesque eleifend. Mauris eget urna in justo auctor euismod a eget nisi. Sed lacinia et nunc id maximus. Pellentesque at urna orci.

Lorem ipsum dolor sit amet

래코드 — Fri, 16 Jan 2026 22:40:45 +0900

수직 margin 병합 제외 경우

래코드 — Tue, 16 Jan 2024 19:43:07 +0900

최상위 요소 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 네이밍 기법 사용하기 - 오답노트

래코드 — Wed, 10 Jan 2024 17:59:14 +0900

1. position: absolute 의 부모가 되는 기준 : relative, fixed, transform

2. CSS 특이성 점수

특이성 점수	선택자	예시
1000	인라인 스타일	<div style="...">
100	ID 선택자	#myElement
10	클래스 선택자, 속성 선택자, 가상 클래스 선택자	.myClass, [class="menu"], :hover
1	요소 선택자, 가상 요소 선택자	p, :before

020 점수를 유지하는 것이 가장 바람직하다.

3. 아토믹 CSS 방법론은 UI를 작은 단위의 구성 요소로 분해하여 설계하는 방법론. UI 요소들을 재사용 가능한 작은 모듈로 만들고, 이 모듈들을 조합하여 확장 가능하고 일관성 있는 디자인 시스템을 구축하는 것을 목표로 한다.

ex) .btn, .search-bar, .product-card, .main-layout, .home-page, mt-10 등

CSS BEM 네이밍 기법 사용하기

래코드 — Sat, 6 Jan 2024 19:33:36 +0900

BEM 네이밍 기법 특징

1. 의미론 작명법으로 읽고 이해하기 쉽다.

2. 생소한 이름에 약어를 사용하지 않는다.

3. 특이성을 낮게 '020' 이하로 유지한다. (중첩 클래스, id 사용 남발 X)

4. 선택자 이름은 전역에서 유일하다.

5. HTML/CSS 병렬 개발 가능

예시 html

<nav class="menu">
  <ul class="menu__list">
    <li class="menu__item">
      <a href="#" class="menu__link">Home</a>
    </li>
    <li class="menu__item menu__item--active">
      <a href="#" class="menu__link">About</a>
    </li>
    <li class="menu__item">
      <a href="#" class="menu__link">Services</a>
    </li>
  </ul>
</nav>

예시 CSS

.menu {
  // 블록 스타일
  background-color: #f0f0f0;
  // 블록 내의 요소들의 스타일
  &__list {
    padding: 0;
    list-style: none;
  }

  &__item {
    display: inline-block;
    margin-right: 10px;

    &--active {
      font-weight: bold;
      // 활성 아이템 스타일
    }
  }

  &__link {
    text-decoration: none;
    color: #333;

    &:hover {
      color: #ff0000;
      // 링크에 호버 효과
    }
  }
}

BEM도 많이 쓰지만 최근에는 tailwindcss를 주로 쓰는데, 소규모 팀 또는 단일 엔지니어 개발에 적합하다고 하는데 나도 그렇게 생각한다.

빨리 빨리 개발하기에는 tailwind만한 것이 없는 것 같다 ㅎㅎ

출처 : The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명

CSS 기타 오답노트

래코드 — Sat, 6 Jan 2024 16:47:30 +0900

1. 형제/부모 노드의 사이의 수직 마진은 중첩된다.

음수 마진 바텀 값을 주면 해당 요소가 내려가는 것이 아니라, 아래 요소들을 위로 끌어올리는 것처럼 보인다.

2. border-color값은 background-color값이 아닌, color값으로부터 상속된다.

3. <img> 요소에서 넓이 우선 순위 : css > inline width

4. position (absolute, fixed), 또는 float속성을 주면 default값이 block으로 변한다.

5. vertical-align 속성은 inline 레벨 또는 테이블 셀 요소에만 적용 가능하다.

비디오에 <tract> 사용해서 embeded 자막 넣기

래코드 — Fri, 5 Jan 2024 20:43:40 +0900

tract 태그를 사용하면 video 요소에 자막을 넣을 수 있다.

<video controls>
  <!-- 비디오 소스 -->
  <source src="video.mp4" type="video/mp4">
  
  <!-- 자막 트랙 -->
  <track src="subtitles_kr.vtt" kind="subtitles" srclang="ko" label="한국어 자막" default>
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English Subtitles">
</video>

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

래코드 — Fri, 5 Jan 2024 20:23:06 +0900

picture 태그는 이미지의 타입, 해상도, 해상력을 분기할 수 있다.

용량이 큰 jpg, png 파일은 사용자 경험에 안좋은 영향을 줄 수있다.

최신 브라우저가 지원하는 확장자인 avif, webp를 사용하면 저용량 고화질 이미지를 표시할 수 있다.

    <picture>
      <source srcset="small.avif" type="image/avif" media="(max-width:960px)" />
      <source srcset="large.avif" type="image/avif" />
      <source srcset="small.webp" type="image/webp" media="(max-width:960px)" />
      <source srcset="large.webp" type="image/webp" />
      <source srcset="small.jpg" media="(max-width:960px)" />
      <img src="large.jpg" alt />
    </picture>

위의 예시를 보면 모든 확장자 source가 없을 경우에만 마지막 옵션인 jpg 이미지를 표시하고 있다.

많은 옵션을 코딩한다고 해서 사용자가 모든 버전을 다운로드 받는 것은 아니니 데이터 관리에도 용이하다.

레티나 디스플레이에 최적화 시킬 수 있는 분기법도 있다.

    <picture>
      <source srcset="2x.webp 2x, 1x.webp" type="image/webp" />
      <img    srcset="2x.jpg 2x" src="1x.jpg" alt />
    </picture>

출처 : The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명