프론트엔드

📝웹 개발의 가장 기본이 되는 HTML과 CSS의 핵심 개념을 정리하고, 간단한 실습 문제를 풀어보았습니다. 쉽게 비유하자면 HTML은 '배우'이고, CSS는 HTML을 꾸미는 '스타일리스트', JS는 동작과 상호작용을 하게 하는 '감독'이라고 할 수 있다.

📝웹 페이지의 레이아웃을 결정하는 가장 핵심적인 속성인 display의 두 가지 성질을 비교 분석합니다. (block과 inline-block) 1. display: block 대부분의 구조 태그가 기본적으로 가지는 속성으로, 화면의 가로 전체를 차지하려는 성질이 있

📝오늘 학습한 HTML/CSS의 핵심 내용을 벨로그에 기록합니다. 웹의 뼈대를 구성하는 계층 구조와 이를 효율적으로 다루는 방법들을 정리했습니다. HTML은 요소들이 서로 감싸고 감싸지는 부모-자식 관계를 가집니다. 이를 이해해야 정확한 스타일링이 가능합니다.

📝오늘 학습한 내용은 웹 페이지의 레이아웃을 결정짓는 정렬(Alignment)과 특정 요소를 조준하는 선택자(Selector)의 상관관계입니다. 정렬의 핵심: text-align은 누구에게 주는가? text-align은 나 자신을 정렬하는 것이 아니라, 내 안에 있는

📝 마우스 오버 효과 구현하기: :hover 의사 클래스 기초 웹 페이지를 만들 때 사용자의 인터랙션에 따라 디자인이 변하도록 만드는 것은 매우 중요합니다. 오늘은 가장 대표적인 반응형 스타일 중 하나인 :hover를 활용해 예제와 실습 문제를 풀어보고 해석해보았

📝단순히  나 <br>을 사용하던 방식에서 벗어나, 요소를 컨테이너(Container)로 감싸고 CSS로 정밀하게 제어하는 방식을 정리해 보았습니다. 오늘은 CSS 박스 모델의 핵심인 padding과 margin의 개념도 실습 예제와 함께 정리해

📝HTML 요소에 별명을 붙여주는 class. 하나의 요소에 여러 개의 별명을 붙일 수도 있고, 특정 조건이 맞아야만 스타일이 적용되기도 합니다. 실습 예제를 통해 클래스 선택자의 핵심 개념을 알아봅시다.중복 가능: 하나의 클래스 이름을 여러 태그에 사용할 수 있습니

📝웹 페이지를 만들다 보면 "세 번째 박스만 색을 바꾸고 싶다"거나 "짝수 번째 줄만 배경색을 다르게 하고 싶다"는 고민을 하게 됩니다. 이때 사용하는 구원투수가 바로 :nth-child(n) 가상 선택자입니다.부모 요소 안에 있는 자식 요소들 중에서 몇 번째인지를

📝CSS에서 자식 요소는 부모 요소의 스타일을 자동으로 물려받을 수 있습니다.그리고 웹 디자이너가 가장 먼저 해야 할 일, 노멀라이즈까지 함께 알아봅니다!CSS에서 상속이란 부모 요소에 적용된 스타일이 자식 요소에게 자동으로 전달되는 것을 말합니다.부모님의 외모나 성

📝웹 페이지에서 메뉴, 순서, 목록을 표현할 때 사용하는 태그입니다.ul, ol, li 세 가지만 알면 대부분의 목록을 만들 수 있어요!그리고 실무에서 반드시 해야 하는 노멀라이즈까지 함께 정리합니다.HTML에서 제목을 표시할 때 사용하는 태그입니다.숫자가 커질수록

🎓display: inline-block, padding, hover 효과까지 — 실무에서 자주 쓰이는 네비게이션 메뉴를 단계별로 만들어봅니다.완성 결과물 미리보기(2. HTML 구조 잡기(3. CSS 단계별 스타일링(4. 핵심 학습 포인트(5. 전체 코드(회색 배경

📝div만 쓰던 습관에서 벗어나야 할 때가 왔습니다.시맨틱 태그를 사용하면 코드가 읽기 쉬워지고, 검색엔진과 스크린리더도 페이지를 더 잘 이해합니다!시맨틱(Semantic) 은 "의미 있는"이라는 뜻입니다.시맨틱 태그는 태그 이름 자체가 그 안에 어떤 내용이 들어있는

📝요소를 안 보이게 만들고 싶을 때, visibility와 opacity 중 어떤 걸 써야 할까요?비슷해 보이지만 동작 방식이 완전히 다릅니다. 차이를 제대로 알아봅시다!요소를 보이거나 숨기는 속성입니다.숨겨도 공간은 그대로 유지됩니다.💡핵심 — visibility

📝요소를 원하는 위치에 배치하고 싶을 때 사용하는 속성이 바로 position입니다.종류별 특징을 제대로 이해하면 레이아웃 작업이 훨씬 쉬워집니다!position은 요소를 문서 흐름에서 어떤 기준으로, 어떻게 배치할지 결정하는 속성입니다.💡 유령화란? — absol

📝요소를 원하는 위치로 이동시키는 방법은 크게 두 가지입니다.top·left·right·bottom으로 직접 좌표를 지정하거나, transform: translate()로 상대적으로 이동하거나!두 방법의 차이를 제대로 알아봅시다.position 속성과 함께 사용해서

📝텍스트가 컨테이너를 넘칠 때 어떻게 처리할지 결정하는 세 가지 속성을 한 번에 정리합니다.세 속성을 함께 쓰면 실무에서 자주 쓰이는 말줄임표 패턴을 완성할 수 있습니다!텍스트의 공백과 줄바꿈을 어떻게 처리할지 결정하는 속성입니다.컨테이너를 넘쳐흐르는 콘텐츠를 어떻게

📝데이터를 행과 열로 정리할 때 사용하는 table 태그.기본 구조부터 hover 효과까지, 시간표 예제로 한 번에 정리해보자!테이블은 기본적으로 th, td마다 각자 테두리를 그립니다.그러면 셀 사이의 선이 두 겹으로 겹쳐 두껍게 보입니다.

📝HTML 코드를 수정하지 않고도 요소의 앞뒤에 콘텐츠를 추가할 수 있습니다.장식, 아이콘, UI 효과까지 — ::before와 ::after의 모든 것을 정리합니다!CSS 가상 요소(Pseudo-element) 입니다.HTML에 실제 태그를 추가하지 않고, CSS만

🎓position: fixed, transition, ::after 가상 요소까지 —지금까지 배운 CSS 개념을 총동원해서 실무형 사이드바 메뉴를 만들어봅니다!평소에는 사이드바가 화면 왼쪽에 숨어있다가마우스를 올리면 스르르 나타납니다메뉴 아이템에 hover하면 하위

📝width: 200px을 줬는데 실제 크기가 200px이 아니라고?box-sizing을 이해하면 레이아웃이 훨씬 예측하기 쉬워집니다!CSS에서 요소의 총 너비(가로 크기)를 어떻게 계산할지 결정하는 속성입니다.⚠️ margin은 box-sizing에 영향받지 않습니

📝display: flex와 flex-wrap, nth-child를 함께 사용해서바둑판 모양의 격자 레이아웃을 만들어봅니다!display: flex를 적용하면 해당 요소가 Flex 컨테이너가 되고,그 안의 자식 요소들은 자동으로 Flex 아이템이 됩니다.flex 아이

🎓지난 포스팅에서 배운 Flexbox 개념을 활용해서 실무에서 자주 쓰이는 전체 페이지 레이아웃을 만들어봅니다.flex-grow, flex-basis, flex-shrink를 실제로 적용하면서 각 속성의 역할을 체득해봅시다!핵심 아이디어: container를 세로 F

📝 CSS 웹 폰트 적용하기 — 구글 폰트 & 눈누 폰트 기본 폰트만 쓰던 웹페이지, 폰트 하나만 바꿔도 분위기가 확 달라집니다. 구글 폰트와 눈누 폰트를 활용해서 원하는 폰트를 웹에 적용하는 방법을 알아봅니다. 01. 웹 폰트(Web Font)란? 🌐 웹 폰

📱처음부터 다 만들 필요 없습니다. 라이브러리를 활용하고, 반응형으로 설계하면PC · 태블릿 · 모바일을 하나의 코드로 모두 대응할 수 있습니다!자주 쓰는 기능을 미리 만들어 둔 코드 모음입니다.개발자가 직접 처음부터 만들지 않아도 되도록, 필요할 때 가져다 쓰기만

[JavaScript] 01. 변수 · 출력문 · 조건문 기초 📘Java를 배웠다면 JavaScript는 훨씬 자유롭게 느껴질 겁니다.하지만 자유로운 만큼 규칙을 정확히 알고 써야 사고가 안 납니다!JavaScript는 크게 두 가지로 이루어져 있습니다.변수 — 값

[JavaScript] 02. 반복문 — while · for 🔁특정 코드를 조건이 만족하는 동안 반복 실행하는 문법입니다."100번 절하세요"라는 말을 들었을 때,코드를 100줄 쓰는 대신 반복문 하나로 해결할 수 있습니다.조건이 true인 동안 계속 반복합니다.조

[JavaScript] 03. 4대 구성요소와 자료형 완전 정리 🗂️JavaScript는 크게 네 가지로 이루어져 있습니다.JavaScript의 값(데이터)은 실행할 수 없는 자료와 실행할 수 있는 자료로 나뉩니다.복잡한 자료를 만들 때 사용합니다.🚌 객체는 일종의

[JavaScript] 04. jQuery로 hover 이벤트 만들기 + flex 레이아웃 🎯 > 마우스를 올렸을 때 색이 바뀌고 벗어나면 원래대로 돌아오는 인터랙티브 효과를 > jQuery 한 줄로 만들 수 있습니다. flex로 가로 정렬까지 함께 적용해봐요!

[JavaScript] 05. 버튼을 클릭할 때마다 빨간색 ↔ 원래 색으로 번갈아 바뀌는 토글 효과를 만들어봅니다.% 나머지 연산자와 let 변수를 어떻게 활용하는지 개념 중심으로 정리합니다!%는 나눗셈의 나머지를 구하는 연산자입니다.💡 이 패턴이 왜 중요할까요?어떤