hchan-frm 님의 블로그

이중 포인터, 쉽게 말하면 “포인터를 가리키는 포인터”일반 포인터는 변수의 메모리 주소를 저장한다면,이중 포인터는 다른 포인터 변수의 메모리 주소를 저장한다.int a = 10;int *p = &a; // p는 a의 주소를 저장int **pp = &p; // pp는 p의 주소를 저장이렇게 되면 관계가 이렇게 된다:• `a`: 실제 값 10이 저장된 변수• `p`: a의 주소를 가리키는 포인터• `pp`: p의 주소를 가리키는 이중 포인터 값에 접근하는 방법각각의 값에 접근하려면 역참조(`*`) 연산자를 써야 한다.printf("a의 값: %d\n", a); // 직접 접근: 10printf("*p의 값: %d\n", *p); // p를 통해 a에 접근: ..

static 변수, 쉽게 말해 “평생 살아남는 변수”보통 함수의 지역 변수는 함수가 끝나면 사라지지만,`static` 변수는 함수 안에 있어도 프로그램 시작부터 종료까지 쭉 살아남는다.이 변수들은 스택이 아니라 데이터(혹은 BSS, Initialized/Uninitialized Data Segment) 영역에 저장된다. ※ C 프로그램 메모리 구조• 코드(Code) 영역: 함수 자체가 저장되는 곳.• 데이터(Data) 영역: 전역 변수와 `static` 변수처럼, 프로그램 내내 살아있는 변수의 집.• 스택(Stack) 영역: 함수 실행할 때마다 잠깐 만들어지는 공간. 함수 내 지역 변수, 매개변수 저장.• 힙(Heap) 영역: 필요할 때 프로그래머가 직접 만드는 공간; 동적 할당. static 변수의 종..

SCSS에서 리스트(list)란?SCSS에는 자바스크립트의 배열(Array)처럼 생긴 게 없다.대신 리스트(List)라는 개념이 배열 역할을 담당한다.$colors: (red, green, blue);이렇게 괄호 안에 값들을 나열하면,CSS 스타일을 그룹화해서 효율적으로 관리할 수 있는 리스트가 만들어진다.SCSS는 CSS 전처리기라서 복잡한 조작보다는,스타일을 편하게 묶고 컴파일하기 쉽게 만드는 게 목적이다. 리스트의 불변성 - “값은 절대 직접 못 바꿈!”SCSS 리스트가 특이한 점은배열의 값을 직접 바꾸는 문법이 없다는 것.// 이런 건 절대 불가능!$colors[0] = yellow;대신, 값을 바꾸거나 추가하려면기존 리스트를 복사해서 새로운 리스트를 만드는 함수를 써야 한다.$colors: (r..

웹페이지 문서는 다양한 태그들로 이루어져있다. 태그는 비유하자면 집을 지을 때 사용되는 재료와 같다.집을 지을 때 설계도에는 벽돌, 창문, 문 등 다양한 재료가 어떻게 배치될지 적혀있다.웹페이지도 html 문서에 '어디에 어떤 요소가 배치될 지'가 적혀있다. 집을 지을 때는 용도와 특성에 따라 굉장히 다양한 재료들이 있다.웹페이지의 태그들도 마찬가지로 그 종류가 매우 다양하다.물론 전부 외워야 하는건 아니다.자주 사용되는 태그들은 알아두면 편한거고, 몰라도 그때그때 검색으로 찾아보면 된다. 주의할 점은 절대 암기하려고 하면 안된다는 것이다.태그 암기는 전혀 중요하지 않은 부분이기 때문에 영단어 암기하듯이 외우는건 절대 비추다.대신 태그들의 특성들을 이해하고, 분류해보고, 활용해보면서 보기 편하고 관리하기..

"call by value와 call by reference의 차이가 항상 헷갈려서 이번 기회에 정리하려고 한다.call by value vs call by reference 기본 개념call by value - "값만 복사해서 줄게"call by value는 함수에 값 자체를 복사해서 전달하는 방식이다.#include void changeValue(int x) { x = 100; // 복사된 값만 변경 printf("함수 안: %d\n", x);}int main() { int a = 50; changeValue(a); printf("함수 밖: %d\n", a); // 원본은 그대로 50 return 0;}결과:함수 안: 100함수 밖: 50함수 내에서 아무리 값을 바..

@layer간단히 말하면 `@layer`는 스타일을 역할별로 그룹화해서 우선순위를 명확히 관리할 수 있는 CSS at-rule다.• 테마 스타일이 다른 스타일에 덮여버리는 경우• 여러 CSS 파일을 쓰면서 충돌이 잦은 경우이걸 `@layer`가 해결해 준다. @layer의 사용법`@layer`는 크게 두 가지 방법이 있다.1. 레이어 미리 선언하기@layer reset, base, theme;여기서 `reset`, `base`, `theme` 세 개의 레이어를 선언하고,선언한 순서가 바로 우선순위 순서다.즉, `theme` 레이어가 가장 높고, `reset`이 가장 낮다. 2. 레이어에 스타일 묶기@layer reset { * { margin: 0; padding: 0; }}@layer t..

컨테이너 쿼리at-rule에 해당하는 컨테이너 쿼리는 요소의 컨테이너(부모 요소)의 크기나 상태에 따라 스타일을 적용하는 CSS 기능이다.미디어 쿼리가 “브라우저 전체 크기”를 기준으로 한다면, 컨테이너 쿼리는 “특정 부모 요소의 크기”를 기준으로 한다./* 미디어 쿼리: 브라우저 전체 기준 */@media (min-width: 768px) { .card { /* 모든 카드에 적용 */ }}/* 컨테이너 쿼리: 특정 컨테이너 기준 */@container (min-width: 300px) { .card { /* 해당 컨테이너 안의 카드만 */ }}이렇게 하면 컴포넌트 단위로 더 세밀한 반응형 디자인이 가능하다. 컨테이너 쿼리 사용법1단계: 컨테이너 지정먼저 부모 요소에 `container-type` 속..

함수형 셀렉터(Functional Selector)함수형 셀렉터는 괄호 `()` 안에 여러 선택자나 조건을 인자로 받아서 동적으로 요소를 선택하는 고급 CSS 선택자다.이름에서 알 수 있듯이 프로그래밍의 “함수” 개념과 비슷하다. 인자를 받아서 결과를 반환하는 형태 말이다./* 기존 방식: 반복적이고 길다 */h1 { color: red; }h2 { color: red; }.title { color: red; }/* 함수형 셀렉터: 간결하고 직관적 */:is(h1, h2, .title) { color: red;}확실히 코드가 간결해지고 의도도 명확해진다. 주요 함수형 셀렉터들:is()`:is()`는 괄호 안에 나열된 선택자 중 하나라도 일치하면 해당 요소를 선택한다.:is(header, main, fo..

scss의 기능 중 하나인 네스팅을 Native CSS에서도 지원한다. CSS 네스팅CSS 네스팅은 스타일 선택자를 계층적으로 중첩해서 작성하는 기능이다.HTML의 구조처럼 CSS도 중첩해서 쓸 수 있게 해주는 거다./* 네스팅 방식 */.card { padding: 20px; .card-title { font-size: 24px; color: #333; } .card-content { margin-top: 10px; line-height: 1.6; }}이렇게 쓰면 HTML 구조와 CSS 구조가 비슷해져서 훨씬 직관적이다.다시 말해, 가독성이 올라간다. ※ Nesting은 '둥지를 틀다'라는 의미가 있다. 부모 선택자 안에 자식 선택자가 둥지를 튼 것과 비슷한 모습이..

CSS 변수CSS 변수(커스텀 프로퍼티)는 `--변수명: 값` 형태로 선언하고, `var(--변수명)`으로 참조한다.:root { --primary-color: #3498db; --box-width: 500px;}.box { background-color: var(--primary-color); width: var(--box-width);}여기서 `:root`는 문서의 최상위 요소인 ``을 가리킨다.즉, 전역 변수처럼 어디서든 참조할 수 있는 변수를 만드는 거다. 그런데 이 변수들은 어디에 저장되는 걸까?처음에는 이런 생각을 했다. “JavaScript 변수처럼 메모리 어딘가에 저장되는 건가?”알아보니 CSS 변수는 CSSOM(CSS Object Model) 내 각 요소의 스타일 속성에 key-v..