< Code diaries />

css - overflow 관련속성 총 정리

ejey — Tue, 4 Mar 2025 08:58:30 +0900

CSS Overflow 관련 속성 정리 (표)

속성설명주요 값비고

overflow	넘친 콘텐츠 처리 방식	visible, hidden, scroll, auto	기본값 visible
overflow-x	가로(수평) 방향 오버플로우	visible, hidden, scroll, auto	수평 스크롤 여부 결정
overflow-y	세로(수직) 방향 오버플로우	visible, hidden, scroll, auto	수직 스크롤 여부 결정
overflow-wrap	단어가 넘칠 경우 줄 바꿈 처리	normal, break-word, anywhere	word-wrap과 유사
overflow-anchor	스크롤 위치 자동 조정 방지	auto, none	레이아웃 변경 시 자동 스크롤 방지
text-overflow	텍스트가 넘칠 때 표시 방식	clip, ellipsis	overflow: hidden;과 함께 사용해야 적용됨
overflow-clip-margin	넘친 콘텐츠를 숨길 때 여유 공간 지정	length, auto	clip을 대체하는 최신 속성
block-overflow	블록 요소의 넘침 처리	clip, visible	최신 브라우저 지원
inline-overflow	인라인 요소 넘침 처리	clip, visible, ellipsis	inline-size와 함께 사용 가능
contain-intrinsic-size	내부 콘텐츠 크기를 정의	auto, length	레이아웃 최적화

PascalCase vs camelCase 차이점 정리

ejey — Sun, 2 Mar 2025 17:12:56 +0900

PascalCase vs camelCase 차이점 정리

✅ 둘 다 여러 단어를 이어 붙여 네이밍할 때 사용하는 방식이지만, 첫 글자의 대소문자가 다름
✅ 사용되는 곳이 다름 (클래스 vs 변수, 함수 등)

✅ PascalCase란?

✅ 각 단어의 첫 글자를 대문자로 시작하는 표기법
✅ 공백 없이 모든 단어를 연결
✅ 주로 클래스(Class), 생성자 함수(Constructor), 타입(Type)에서 사용됨

class Person {}       // ✅ 클래스 이름
function Animal() {}  // ✅ 생성자 함수
type UserData = {}    // ✅ TypeScript 타입

✅ camelCase란?

✅ 첫 단어는 소문자로 시작하고, 이후 단어의 첫 글자만 대문자로 작성
✅ 일반적인 변수, 함수 이름 등에 사용

const myVariable = 10;       // ✅ 변수
function getUserName() {}    // ✅ 함수
const userProfile = {};      // ✅ 객체

차이점 비교

스타일첫 글자사용 예제주로 사용되는 곳

PascalCase	대문자	PersonClass, UserProfile	클래스, 생성자 함수, TypeScript 타입
camelCase	소문자	myVariable, getUserName	변수, 함수, 메서드, 인스턴스 객체

✅ 올바른 예제

1️⃣ PascalCase (클래스 & 생성자 함수)

class Animal {}      // ✅ 클래스
function Person() {} // ✅ 생성자 함수

const dog = new Animal();  // ✅ 인스턴스는 camelCase 사용

2️⃣ camelCase (변수 & 함수)

const userName = "Alice";    // ✅ 변수
function getUserAge() {}     // ✅ 함수
const userProfile = {};      // ✅ 객체 변수

결론

클래스 & 생성자 함수 → PascalCase
변수, 함수, 메서드, 객체 → camelCase
혼용하지 않도록 주의해야 코드의 가독성이 좋아짐

즉, PascalCase는 객체를 정의할 때, camelCase는 값을 담는 변수나 함수를 만들 때 사용합니다!

data-* 속성을 css로 불러들이기

ejey — Sun, 2 Mar 2025 15:08:23 +0900

오늘

HTML 소스에서 data-* 속성을 적는다.

<h1 data-title="hello">text</h1>

CSS에서 attr() 을 이용하여 불러들일 수 있다.

attr()은 content에서만 사용할 수 있으며, 동적으로 요소의 속성 값을 가져올 수 있음.

h1::after {
  content: attr(data-title);
  color: red;
  font-size: 16px;
}

// 결과 hello


h1::before {
  content: "Prefix - " attr(data-title);
  font-weight: bold;
  color: blue;
}

// 결과 "Prefix - hello"

h1::after {
  content: " (" attr(data-title) ")";
  font-size: 14px;
  color: gray;
}

// 결과 (hello)

attr()의 한계점

주의할 점:

- attr()은 color, background, width 등의 속성에서는 사용할 수 없음.
- 예를 들어, 아래 코드는 동작하지 않음. ❌content 속성에서만 사용 가능

h1 { color: attr(data-title); /* 동작하지 않음 */ }

CSS에서 직접 데이터 변경 불가능

data-* 값은 CSS에서 변경할 수 없으며, JavaScript로만 변경 가능.

서버 port 이슈

ejey — Sat, 30 Nov 2024 16:56:25 +0900

1. 현재 포트 점유상태 확인
8080포트를 사용중인 프로세스를 확인한다. 결과에서 PID값을 확인하여 종료시킬 수 있다.

lsof -i :8080

2. 위에서 확인한 PID 숫자를 적어서 해당 프로세스를 종료하여 포트를 비워줄 수 있다.

kill -9 [PID]

// 예를들어 PID 가 381이면 
// kill -9 381 하면된다.

[ git ] 이슈 해결

ejey — Sat, 30 Nov 2024 16:52:01 +0900

1. 방금 한 커밋 취소(push 이전)

git reset --soft HEAD

git log로 커밋이 존재할 때에만 삭제 가능

git log
git reset --soft <commit_id>

git log로 커밋아이디를 확인 후, 원하는 것만 삭제 가능

2. git 저장소 삭제

rm -rf .git

rm : remove
-r : 폴더와 하위 파일까지 삭제

-f : 강제실행

.git : 삭제할 폴더

HTML Quiz - 01

ejey — Thu, 7 Nov 2024 17:37:44 +0900

1. 다음중 설명과 맞는 것을 모두 고르시오 ( A, C )

A. 제목을 나타내는 태그는 총 6가지가 있으며, <h1> ~ <h6> 까지 이다.
B. 문단을 나타내는 태그는 <paragraph> 이다.
C. 문서의 제목을 나타내는 <title> 태그는 <head>안에 있다
D. <b>, <i> 태그는 내용중 중요하거나 경고하는 것의 역할을 하는 태그이다.

2. 제목을 나타내는 헤딩요소들에 대한 설명으로 바르지 않은 것을 모두 고르시오. (C, D)

A. 블럭레벨 요소 이다.
B. 내부에 인라인레벨 요소를 컨텐츠 요소로 포함 할 수 있다.
C. 내부에 블럭레벨 요소를 컨텐츠 요소로 포함 할 수 있다.
D. 계층구조를 지키지 않아도 무방하며, 제목이 필요시 언제든지 사용할 수 있다.

3. VS code 문제입니다. HTML template을 불러오는 단축키는? ! + Tab key

4. 현재 가장 최신버전의 HTML을 지칭하는 말은? ( C ) HTML은 더이상 버전이 존재하지 않는 살아있는 웹표준입니다.

A. HTML5
B. HTML5.3
C. Living Standard HTML
D. XHTML

5. 아래의 HTML 마크업 중 틀린 것은? 이유도 적어주세요 ( B, img는 EmptyElement이므로 종료태그를 적지않는다. )

A. <a href="#">링크</a>
B. <img src="./images/apple.jpg" alt="apple"></img>
C. <p>Hello world <b>HTML</b></p>
D. <h1>TItle</h1><p>Summary</p>

[ 정답은 위에 검은 블럭을 복사해서 보세요 ]

다 풀었다~~!!

CSS - Sizing 관련 속성과 메소드

ejey — Tue, 29 Oct 2024 18:18:51 +0900

fit-content()는 CSS에서 사용하는 함수로, 요소의 크기를 컨텐츠의 크기에 맞게 조정할 수 있는 방법을 제공합니다. 이 함수는 주로 레이아웃을 다루는 데 유용하며, 특히 CSS Grid와 Flexbox에서 많이 사용됩니다.

주요 특징

컨텐츠 기반 크기 조정:
- fit-content()는 요소의 크기를 그 안에 포함된 컨텐츠에 맞추어 조정합니다.
- 이를 통해 컨텐츠의 크기가 변할 때 요소의 크기도 동적으로 조정될 수 있습니다.
최대 크기 제한:
- fit-content()는 최대 크기를 설정할 수 있으며, 이 최대 크기를 초과하지 않는 범위 내에서 컨텐츠 크기에 따라 요소의 크기를 결정합니다.
- 예를 들어, fit-content(300px)와 같이 설정하면, 요소는 컨텐츠 크기에 따라 300px까지 커질 수 있습니다.
단위:
- 이 함수는 픽셀(px), 퍼센트(%), em 등 다양한 단위를 사용할 수 있습니다.

사용 예시

.container {
    width: fit-content(300px); /* 최대 너비를 300px로 설정하고, 컨텐츠에 맞게 너비를 조정 */
    background-color: lightblue;
}

.item {
    width: fit-content(100%); /* 부모 요소의 너비에 맞게 조정 */
}

동작 방식

요소의 내용물이 적을 때는 fit-content()가 요소의 크기를 줄이고, 내용물이 많아질 경우 최대 크기 제한 내에서 요소의 크기를 증가시킵니다.
따라서, 이 메소드는 레이아웃을 유연하게 조정할 수 있도록 도와줍니다.
fit-content()는 인자와 최소 및 최대 크기를 비교하여, 주어진 조건에 맞게 요소의 크기를 조정합니다.
예를 들어, fit-content(200px)와 같이 사용하면:
- 최대 크기가 200px로 설정되며,
- 최소 크기는 사용자가 지정할 수 있고,
- 인자 값이 최소 및 최대 크기 사이에 위치하게 됩니다.

사용 예시 1 : Flexbox와 Grid에서

.grid {
    display: grid;
    grid-template-columns: fit-content(150px) 1fr; /* 첫 번째 열은 컨텐츠에 맞게 크기 조정 */
}

사용 예시 2 : width에서

.container {
    width: fit-content(300px); /* 최대 크기를 300px로 설정 */
}

/* 이 경우, .container의 크기는 컨텐츠에 따라 조정되지만, 300px를 초과하지 않습니다. */

결론

fit-content() 메소드는 웹 레이아웃을 유연하게 조정하고, 컨텐츠에 기반한 크기 조정을 가능하게 하는 유용한 CSS 함수입니다. 특히 반응형 디자인에서 요소가 자동으로 크기를 조정해야 할 때 매우 유용합니다.

CSS Filter

ejey — Tue, 29 Oct 2024 16:33:50 +0900

CSS의 filter 속성을 사용하면 요소에 다양한 시각적 효과를 적용할 수 있습니다. 다음은 filter에 사용할 수 있는 주요 CSS 함수 목록입니다:

1. Blur

blur(radius): 요소를 흐리게 합니다.
- 예: filter: blur(5px);

2. Brightness

brightness(factor): 요소의 밝기를 조정합니다. 값이 1일 때 원래 밝기, 0보다 작으면 어두워지고, 1보다 크면 밝아집니다.
- 예: filter: brightness(1.5);

3. Contrast

contrast(factor): 요소의 대비를 조정합니다. 값이 1일 때 원래 대비, 0이면 회색으로 변하고, 1보다 크면 대비가 높아집니다.
- 예: filter: contrast(200%);

4. Drop Shadow

drop-shadow(offsetX offsetY blurRadius color): 요소에 그림자를 추가합니다.
- 예: filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));

5. Grayscale

grayscale(factor): 요소를 흑백으로 변환합니다. 값이 0이면 원래 색상, 1이면 완전한 흑백입니다.
- 예: filter: grayscale(100%);

6. Hue-Rotate

hue-rotate(degrees): 요소의 색상을 회전시킵니다. 0°에서 360°까지의 값을 사용할 수 있습니다.
- 예: filter: hue-rotate(90deg);

7. Invert

invert(factor): 요소의 색상을 반전시킵니다. 값이 0일 때 원래 색상, 1일 때 반전된 색상입니다.
- 예: filter: invert(100%);

8. Opacity

opacity(factor): 요소의 불투명도를 조정합니다. 값이 0이면 완전 투명, 1이면 완전 불투명입니다.
- 예: filter: opacity(0.5);

9. Saturate

saturate(factor): 요소의 채도를 조정합니다. 값이 1일 때 원래 채도, 0이면 회색, 1보다 크면 채도가 높아집니다.
- 예: filter: saturate(150%);

10. Sepia

sepia(factor): 요소에 세피아 효과를 적용합니다. 값이 0일 때 원래 색상, 1일 때 완전 세피아입니다.
- 예: filter: sepia(100%);

사용 예시

여러 필터를 조합하여 사용할 수도 있습니다:

img {
    filter: blur(5px) brightness(1.2) grayscale(50%);
}

위의 함수들을 사용하여 다양한 시각적 효과를 만들어낼 수 있으며, CSS 필터는 특히 이미지, 비디오, 텍스트 등에 유용하게 활용됩니다.

CSS function - env() - UI 측면에서 꼭 필요한 함수

ejey — Tue, 29 Oct 2024 16:00:40 +0900

CSS의 env() 함수는 브라우저 또는 기기에서 제공하는 환경 변수를 참조하는 함수로, 화면 안전 영역이나 특정 기기의 특성에 맞춰 레이아웃을 동적으로 조정할 때 유용합니다. env() 함수는 특히 모바일 기기에서 노치, 하단바 등으로 인해 안전 영역이 필요한 경우 여백을 설정할 때 자주 사용됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS env() 예제</title>
  <style>
    body {
      margin: 0;
      padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
      background-color: #f0f0f0;
    }

    .content {
      padding: 20px;
      background-color: #fff;
      max-width: 600px;
      margin: auto;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    h1 {
      color: #333;
      font-size: 1.5em;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="content">
    <h1>CSS env() 함수 예제</h1>
    <p>이 페이지는 브라우저의 안전 영역을 자동으로 감안하여 여백을 설정합니다.</p>
  </div>
</body>
</html>

주요 env() 변수를 사용한 예

기본적으로 아래와 같은 safe-area-inset-* 변수를 제공합니다:

safe-area-inset-top: 화면 상단의 안전 영역 여백
safe-area-inset-right: 화면 오른쪽의 안전 영역 여백
safe-area-inset-bottom: 화면 하단의 안전 영역 여백
safe-area-inset-left: 화면 왼쪽의 안전 영역 여백

그리고, env() 함수는 아이폰에만 한정된 명령이 아닙니다. 이 함수는 여러 플랫폼과 장치에서 사용할 수 있으며, 특히 모바일 환경에서 안전 영역을 조정할 때 유용합니다.

주요 사항:

다양한 플랫폼에서 사용 가능: env() 함수는 CSS 환경 변수 사양을 지원하는 브라우저에서 구현됩니다. 아이폰의 노치와 같은 화면 특징으로 인해 많이 알려졌지만, 안드로이드 장치 및 다른 플랫폼에서도 사용할 수 있습니다.
안전 영역 인셋: 가장 일반적으로 사용되는 환경 변수인 safe-area-inset-*는 콘텐츠가 화면의 노치나 둥근 모서리에 의해 가려지지 않도록 여백을 제공하는 데 사용됩니다.
브라우저 호환성: 특정 장치에서 env()가 제대로 작동하는지 확인하려면 브라우저 호환성을 확인해야 합니다.

따라서, env()는 아이폰과 같은 iOS 장치에 특히 유용하지만, 해당 CSS 사양을 구현한 모든 브라우저에서 활용할 수 있습니다.

env()에 사용할 수 있는 주요 환경 변수는 다음과 같습니다. 이 변수들은 주로 모바일 환경에서 안전 영역이나 UI 요소에 따라 레이아웃을 조정하는 데 유용합니다.

1. Safe Area Insets

safe-area-inset-top: 화면 상단의 안전 영역 여백
safe-area-inset-right: 화면 오른쪽의 안전 영역 여백
safe-area-inset-bottom: 화면 하단의 안전 영역 여백
safe-area-inset-left: 화면 왼쪽의 안전 영역 여백

2. Title Bar Area Insets

titlebar-area-inset-top: 타이틀 바가 차지하는 화면 상단의 영역
titlebar-area-inset-right: 타이틀 바가 차지하는 화면 오른쪽의 영역
titlebar-area-inset-bottom: 타이틀 바가 차지하는 화면 하단의 영역
titlebar-area-inset-left: 타이틀 바가 차지하는 화면 왼쪽의 영역

3. 기타 환경 변수 (브라우저에 따라 다름)

status-bar-inset-top: 상태 표시줄이 차지하는 화면 상단의 영역
status-bar-inset-right: 상태 표시줄이 차지하는 화면 오른쪽의 영역
status-bar-inset-bottom: 상태 표시줄이 차지하는 화면 하단의 영역
status-bar-inset-left: 상태 표시줄이 차지하는 화면 왼쪽의 영역

body {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) 
    env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.header {
    margin-top: env(titlebar-area-inset-top);
}

참고 사항

위에서 언급한 환경 변수들은 지원하는 브라우저와 기기에 따라 다를 수 있습니다. 특정 변수의 지원 여부를 확인하기 위해서는 사용하려는 브라우저의 문서를 참조하는 것이 좋습니다.
환경 변수를 사용할 때는 항상 실제 디바이스에서 테스트하여 각 변수의 동작을 확인하는 것이 중요합니다.

https://developer.mozilla.org/ko/docs/Web/CSS/env

env() - CSS: Cascading Style Sheets | MDN

env() CSS 함수는 var() 함수나 사용자 정의 속성과 비슷한 방법으로 환경 변수에 정의된 값을 CSS에 삽입할 때 사용할 수 있습니다. 환경 변수와 사용자 정의 속성의 차이점은 환경 변수는 작성자가

developer.mozilla.org

웹문서 로딩 상태 실시간으로 체크하기 - document.readyState

ejey — Wed, 18 Sep 2024 19:36:51 +0900

 

function stateCheck(e) {
	let status = e.target.readyState;
    let msg = '';
    switch (status) {
    	case 'loading':
        msg = '웹문서 로딩중';
        break;
        
        case 'interactive' :
        msg = '웹문서 로딩완료, 리소스 로딩중';
        break;
        
        case 'complete' :
        msg = '모든 리소스 로딩 완료'
        break;
        
        default :
        msg = '상태를 체크할 수 없습니다.'
    
    }
    
    console.log(`now : ${msg}`)

}
document.addEventListener('readystatechange', stateCheck );

https://developer.mozilla.org/ko/docs/Web/API/Document/readyState

Document.readyState - Web API | MDN

Document.readyState 속성을 통해 document의 로딩 상태를 확인할 수 있다.

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/API/Document/readystatechange_event

Document: readystatechange event - Web API | MDN

readystatechange 이벤트는 현재 페이지의 readyState 속성값이 변할 때 발생한다.

developer.mozilla.org