최근 글로벌 시장 조사 기관 가트너(Gartner)에서 발표한 '2026년 전 세계 IT 지출 전망' 보고서가 업계에 큰 파장을 일으키고 있습니다. 올해 전 세계 IT 지출은 작년보다 무려 10.8% 증가할 것으로 예상되는데요.

단순히 숫자가 늘어난 것이 아니라, **'돈의 흐름'**이 완전히 바뀌고 있다는 점에 주목해야 합니다. 이번 보고서의 핵심 키워드 3가지를 정리해 드립니다.

1. AI '거품'을 넘어 '수익'의 단계로

지난 1~2년이 AI가 무엇인지 탐색하고 실험하는 시기였다면, 2026년은 **'실전 수익'**의 해입니다. 기업들은 이제 단순히 챗봇을 도입하는 수준을 넘어, 실제 비즈니스 프로세스에 AI를 깊숙이 이식하고 있습니다.

  • 데이터 센터 투자 급증: AI 모델을 돌리기 위한 인프라 구축에 막대한 예산이 편성되고 있습니다.
  • 소프트웨어보다 인프라: 당장의 서비스 이용료보다는 자체적인 AI 구동 능력을 갖추는 데 집중하는 모습입니다.

2. "예산 쏠림" 현상: 선택과 집중

전체 지출은 늘었지만, 모든 분야가 웃고 있는 건 아닙니다. 기업들은 한정된 예산 안에서 AI 관련 투자를 늘리기 위해 다른 부문의 비용을 과감히 줄이고 있습니다.

  • PC·노트북 교체 주기 연장: 일반 기기 구매나 단순 IT 서비스 예산은 상대적으로 축소되었습니다.
  • AI Only: "AI와 관련 없는 프로젝트는 결재받기 어렵다"는 말이 나올 정도로 투자의 우선순위가 AI에 쏠려 있습니다.

3. 클라우드 서비스의 진화

AI 인프라를 직접 구축하기 어려운 중소기업들은 클라우드로 몰리고 있습니다. 이로 인해 클라우드 서비스 제공업체(CSP)들의 매출은 사상 최고치를 경신할 것으로 보입니다. 이제 클라우드는 단순한 저장 공간이 아니라 **'AI 연산 공장'**으로서의 역할을 수행하게 됩니다.

💡 에디터의 한 마디

가트너의 이번 발표는 우리에게 중요한 시사점을 던집니다. 이제 기술은 '보여주기'를 넘어 **'효율과 수익'**을 증명해야 하는 시험대에 올랐습니다.

개인 투자자나 IT 종사자라면, 이제는 막연한 기대감보다는 해당 기업이 AI를 통해 실제로 얼마나 비용을 절감하거나 매출을 일으키고 있는지를 면밀히 살펴봐야 할 때입니다.

'IT뉴스' 카테고리의 다른 글

보는 AI(Generative AI)에서 행동하는 AI(Agentic AI)로의 대전환  (0) 2026.02.16
카카오-구글 AI 웨어러블 협력 발표, '카톡'은 이제 안경 속으로?  (0) 2026.02.13
"알렉사가 챗GPT를 품는다?" 아마존-오픈AI 동맹설이 IT 업계에 던진 충격  (0) 2026.02.12
AI에 1,000조 원을 태운다고? 빅테크의 거대한 도박 혹은 확신  (0) 2026.02.09

[JS 5강] 실전! 이벤트 리스너와 미니 계산기 만들기

"클릭하면 반응하는 진짜 웹사이트! 지금까지 배운 모든 기술을 하나로 합쳐봅시다."

안녕하세요! 드디어 자바스크립트 기초 시리즈의 마지막 시간입니다. 지난 4강에서 HTML 요소를 선택하고 바꾸는 법을 배웠다면, 오늘은 사용자가 클릭하거나 글을 입력할 때 그 동작을 감지하는 이벤트 리스너(Event Listener)를 배우고, 직접 작동하는 미니 계산기를 만들어보겠습니다.

1. 사용자의 동작을 감시하라: 이벤트 리스너

웹사이트에서 일어나는 모든 동작(클릭, 스크롤, 키보드 입력 등)을 '이벤트'라고 합니다. 자바스크립트는 이 이벤트를 기다리고 있다가 발생하면 특정 함수를 실행합니다.

✅ click: 요소를 클릭했을 때

✅ submit: 폼(Form) 데이터를 전송할 때

✅ keyup: 키보드에서 손을 뗐을 때

2. 이벤트 리스너 사용법 (addEventListener)

HTML 태그에 직접 onclick을 쓰는 것보다 자바스크립트 파일에서 연결하는 방식이 훨씬 깔끔하고 강력합니다.

const btn = document.querySelector('#myBtn'); // 버튼을 클릭했을 때 실행할 동작 등록 btn.addEventListener('click', function() { alert("버튼이 클릭되었습니다!"); });

3. [실습] 미니 더하기 계산기 만들기

두 개의 숫자를 입력받아 더한 결과를 보여주는 프로그램을 완성해봅시다.

<!-- HTML 구조 --> <input type="number" id="num1" placeholder="숫자 1"> <span> + </span> <input type="number" id="num2" placeholder="숫자 2"> <button id="calcBtn">계산하기</button> <p>결과: <span id="result">0</span></p> <script> const button = document.querySelector('#calcBtn'); button.addEventListener('click', () => { // 1. 입력창의 값 가져오기 const v1 = document.querySelector('#num1').value; const v2 = document.querySelector('#num2').value; // 2. 숫자로 변환하여 더하기 (입력값은 기본적으로 문자열임) const sum = Number(v1) + Number(v2); // 3. 결과 화면에 뿌려주기 document.querySelector('#result').innerText = sum; }); </script>

🎉 자바스크립트 기초 연재 완강!

HTML로 뼈대를 세우고, CSS로 옷을 입히고, JS로 생동감을 불어넣는 법까지 모두 배우셨습니다.

'Frontend > JAVASCRIPT' 카테고리의 다른 글

[JS 4강] HTML을 내 마음대로! DOM 조작 기초  (0) 2026.02.10
[JS 3강] 코드를 재사용하자! 함수(Function)의 마법  (0) 2026.02.10
[JS 2강] 똑똑한 웹사이트의 비결! 조건문과 반복문 마스터하기  (0) 2026.02.10
[JS 1강] 웹사이트가 생각하게 만들기! 자바스크립트 시작과 변수 이해하기  (0) 2026.02.10

[JS 4강] HTML을 내 마음대로! DOM 조작 기초

"자바스크립트로 웹페이지의 글자, 색상, 구조를 실시간으로 바꿔봅시다."

안녕하세요! 지난 3강에서는 함수를 통해 코드를 효율적으로 묶는 법을 배웠습니다. 오늘은 자바스크립트의 진정한 힘, 바로 웹페이지의 구성 요소들을 마음대로 주무르는 DOM(Document Object Model) 조작에 대해 알아보겠습니다.

1. DOM이란 무엇인가요?

DOM은 브라우저가 HTML 문서를 자바스크립트가 이해할 수 있는 객체(Object) 형태로 만든 지도와 같습니다. 이 지도를 통해 우리는 특정 태그를 찾고, 내용을 바꾸고, 스타일을 수정할 수 있습니다.

✅ 선택: "id가 'title'인 태그를 가져와줘"

✅ 수정: "그 태그의 글자를 '반가워요'로 바꿔줘"

✅ 스타일: "그 태그의 배경색을 노란색으로 해줘"

2. 요소를 선택하고 바꾸는 핵심 명령어

가장 자주 쓰이는 두 가지 방식만 기억해도 충분합니다.

  • 🔍 document.getElementById('아이디'): 특정 ID를 가진 요소를 하나 선택합니다.
  • 🔍 document.querySelector('.클래스'): CSS 선택자 방식으로 요소를 선택합니다.

3. DOM 조작 실습 예제

HTML에 있는 요소를 자바스크립트로 직접 제어하는 과정을 살펴보세요.

<!-- HTML 구조 --> <h1 id="main-title">원래 제목입니다</h1> <button onclick="changeText()">제목 바꾸기</button> <script> function changeText() { // 1. 요소를 찾아서 변수에 담기 const title = document.getElementById('main-title'); // 2. 내용 바꾸기 (innerText) title.innerText = "자바스크립트로 바뀐 제목!"; // 3. 스타일 바꾸기 (style) title.style.color = "#f1c40f"; title.style.backgroundColor = "#222"; title.style.padding = "10px"; } </script>

4. 클래스 제어하기 (classList)

스타일을 하나씩 바꾸는 것보다, 미리 만들어둔 CSS 클래스를 꼈다 뺐다 하는 것이 더 효율적입니다.

요소.classList.add('active'); - 클래스 추가
요소.classList.remove('active'); - 클래스 제거
요소.classList.toggle('active'); - 클래스가 있으면 제거, 없으면 추가

화면을 움직이게 하는 첫 단추!

DOM 조작을 할 줄 안다는 것은 이제 진짜 '웹 앱'을 만들 준비가 되었다는 뜻입니다.

마지막 5강에서는 클릭과 같은 사용자의 동작에 반응하는 '이벤트 리스너'를 배워볼게요!

'Frontend > JAVASCRIPT' 카테고리의 다른 글

[JS 5강] 실전! 이벤트 리스너와 미니 계산기 만들기  (0) 2026.02.10
[JS 3강] 코드를 재사용하자! 함수(Function)의 마법  (0) 2026.02.10
[JS 2강] 똑똑한 웹사이트의 비결! 조건문과 반복문 마스터하기  (0) 2026.02.10
[JS 1강] 웹사이트가 생각하게 만들기! 자바스크립트 시작과 변수 이해하기  (0) 2026.02.10

[JS 3강] 코드를 재사용하자! 함수(Function)의 마법

"반복되는 코드를 하나로 묶어 효율적으로 관리하는 방법을 배워봅시다."

안녕하세요! 지난 2강에서는 조건문과 반복문을 통해 프로그램의 흐름을 제어하는 법을 배웠습니다. 오늘은 똑같은 코드를 여러 번 복사해서 붙여넣지 않고, 필요할 때마다 꺼내 쓸 수 있게 만드는 함수(Function)에 대해 알아보겠습니다.

1. 함수란 무엇인가요?

함수는 특정한 작업을 수행하도록 설계된 코드의 묶음입니다. 한 번 만들어두면 원할 때마다 이름을 불러 실행할 수 있습니다.

✅ 재사용성: 똑같은 코드를 반복해서 쓸 필요가 없습니다.

✅ 유지보수: 함수 내용만 수정하면 사용된 모든 곳에 적용됩니다.

✅ 구조화: 코드가 읽기 쉽고 깔끔해집니다.

2. 함수의 구조 (매개변수와 반환값)

함수는 값을 받아서(Input) 처리한 뒤 결과(Output)를 돌려줍니다.

  • 📥 매개변수(Parameter): 함수 외부에서 전달받는 값
  • 📤 반환값(Return): 함수 실행 결과를 외부로 내보내는 값

3. 함수 정의와 활용 실습

전통적인 함수 방식과 최신 자바스크립트에서 많이 쓰이는 화살표 함수 방식을 모두 익혀보세요.

// 1. 기본 함수 선언식 function sayHello(name) { return "안녕하세요, " + name + "님!"; } // 함수 호출하기 console.log(sayHello("철수")); // "안녕하세요, 철수님!" console.log(sayHello("영희")); // "안녕하세요, 영희님!" // 2. 값을 계산해서 돌려주는 함수 function add(a, b) { return a + b; } let result = add(10, 20); console.log("더하기 결과:", result); // 30 // 3. 화살표 함수 (최신 문법) const multiply = (x, y) => { return x * y; }; console.log("곱하기 결과:", multiply(5, 4)); // 20

코딩의 효율성이 올라갔습니다!

함수를 잘 만드는 것이 진정한 프로그래머로 가는 지름길입니다. 작은 기능부터 함수로 만들어보세요.

다음 4강에서는 자바스크립트로 웹페이지를 직접 제어하는 'DOM 조작 기초'를 배워볼게요!

'Frontend > JAVASCRIPT' 카테고리의 다른 글

[JS 5강] 실전! 이벤트 리스너와 미니 계산기 만들기  (0) 2026.02.10
[JS 4강] HTML을 내 마음대로! DOM 조작 기초  (0) 2026.02.10
[JS 2강] 똑똑한 웹사이트의 비결! 조건문과 반복문 마스터하기  (0) 2026.02.10
[JS 1강] 웹사이트가 생각하게 만들기! 자바스크립트 시작과 변수 이해하기  (0) 2026.02.10

[JS 2강] 똑똑한 웹사이트의 비결! 조건문과 반복문 마스터하기

"상황에 따라 판단하고, 복잡한 일을 대신 반복해주는 로직을 배워봅시다."

안녕하세요! 지난 1강에서는 변수를 통해 데이터를 저장하는 법을 배웠습니다. 오늘은 그 데이터를 활용해 웹사이트가 스스로 판단(조건문)하게 만들고, 귀찮은 일을 반복(반복문)시키는 방법을 알아보겠습니다.

1. 상황에 따라 다르게 실행하기: 조건문(if)

조건문은 "만약 ~라면 A를 하고, 아니면 B를 해라"라고 컴퓨터에게 명령하는 것입니다.

✅ if: 조건이 참(true)일 때 실행

✅ else if: 앞의 조건이 아닐 때 새로운 조건 확인

✅ else: 모든 조건에 해당하지 않을 때 실행

2. 여러 번 대신 일해주는: 반복문(for)

같은 동작을 10번, 100번 반복해야 할 때 반복문을 사용하면 코드가 아주 간결해집니다.

  • 🔁 for문: 가장 대표적인 반복문으로, 반복 횟수가 정해져 있을 때 주로 사용합니다.
  • 🔁 while문: 특정 조건이 참인 동안 계속해서 반복합니다.

3. 조건문과 반복문 실습

브라우저 콘솔(F12)에서 아래 로직을 연습해 보세요. 숫자만 바꿔도 결과가 달라지는 것을 확인할 수 있습니다.

// 1. 조건문 실습: 성적 계산기 let score = 85; if (score >= 90) { console.log("등급: A"); } else if (score >= 80) { console.log("등급: B"); // 출력됨! } else { console.log("등급: C"); } // 2. 반복문 실습: 1부터 5까지 출력하기 console.log("--- 숫자를 세어보자 ---"); for (let i = 1; i <= 5; i++) { console.log("현재 숫자:", i); } // 3. 반복문으로 구구단 2단 만들기 console.log("--- 구구단 2단 ---"); for (let j = 1; j <= 9; j++) { console.log("2 x", j, "=", 2 * j); }

로직의 기초를 다지셨습니다!

조건문과 반복문은 모든 프로그래밍 언어의 심장과 같습니다. 꼭 눈으로만 보지 말고 직접 코드를 쳐보세요.

다음 3강에서는 코드를 재사용할 수 있게 만드는 '함수(Function)'를 배워볼게요!

'Frontend > JAVASCRIPT' 카테고리의 다른 글

[JS 5강] 실전! 이벤트 리스너와 미니 계산기 만들기  (0) 2026.02.10
[JS 4강] HTML을 내 마음대로! DOM 조작 기초  (0) 2026.02.10
[JS 3강] 코드를 재사용하자! 함수(Function)의 마법  (0) 2026.02.10
[JS 1강] 웹사이트가 생각하게 만들기! 자바스크립트 시작과 변수 이해하기  (0) 2026.02.10

[JS 1강] 웹사이트가 생각하게 만들기! 자바스크립트 시작과 변수 이해하기

"정적인 페이지에 생명력을 불어넣는 마법, 자바스크립트를 시작합니다."

안녕하세요! 드디어 웹 개발의 꽃이라 불리는 자바스크립트(JavaScript) 연재를 시작합니다. HTML이 뼈대이고 CSS가 옷이라면, 자바스크립트는 웹사이트의 '두뇌' 역할을 합니다.

1. 자바스크립트란 무엇인가요?

자바스크립트는 사용자와 상호작용하고, 데이터를 처리하며, 화면을 동적으로 바꾸는 프로그래밍 언어입니다.

✅ 클릭하면 색이 변하는 버튼

✅ 입력한 값에 따라 결과가 나오는 계산기

✅ 서버에서 데이터를 받아와 화면에 뿌려주는 기능

2. 데이터를 담는 바구니: 변수(Variable)

컴퓨터에게 정보를 기억시키려면 '이름이 붙은 바구니'가 필요합니다. 이것을 변수라고 부릅니다.

  • 📌 const: 한 번 담으면 바꿀 수 없는 상자 (상수)
  • 📌 let: 언제든 내용을 바꿀 수 있는 상자 (변수)
  • * 예전에는 'var'를 썼지만, 요즘은 'let'과 'const'를 권장합니다.

3. 브라우저 콘솔과 실습

브라우저(크롬 등)에서 F12를 누르고 Console 탭을 열어보세요. 아래 코드를 입력하고 엔터를 치면 결과를 확인할 수 있습니다.

// 1. 변수 선언하기 const name = "코딩천재"; // 문자형 (String) let age = 20; // 숫자형 (Number) const isHappy = true; // 불리언 (Boolean: 참/거짓) // 2. 콘솔에 출력하기 console.log("이름:", name); console.log("나이:", age); // 3. 변수 값 바꿔보기 age = 21; // let으로 선언해서 변경 가능! console.log("내년 나이:", age); // 4. 간단한 연산 const a = 10; const b = 5; console.log("더하기:", a + b);

첫 걸음을 떼셨습니다!

프로그래밍의 시작은 데이터를 정의하는 것부터입니다. 변수의 개념을 꼭 기억하세요.

다음 2강에서는 상황에 따라 판단하는 '조건문과 반복문'을 배워볼게요!

'Frontend > JAVASCRIPT' 카테고리의 다른 글

[JS 5강] 실전! 이벤트 리스너와 미니 계산기 만들기  (0) 2026.02.10
[JS 4강] HTML을 내 마음대로! DOM 조작 기초  (0) 2026.02.10
[JS 3강] 코드를 재사용하자! 함수(Function)의 마법  (0) 2026.02.10
[JS 2강] 똑똑한 웹사이트의 비결! 조건문과 반복문 마스터하기  (0) 2026.02.10

[CSS 5강] 실전! 밋밋했던 포트폴리오에 세련된 디자인 입히기

"드디어 완성! HTML 뼈대에 CSS 옷을 입혀 나만의 웹사이트를 완성해봅시다."

안녕하세요! 드디어 CSS 기초 연재의 마지막 시간입니다. 그동안 배운 박스 모델, 텍스트 스타일, 그리고 Flexbox 기술을 총동원하여, HTML 5강에서 만들었던 포트폴리오 페이지를 멋지게 변신시켜 보겠습니다.

1. 무엇이 달라지나요?

단순한 텍스트 나열이었던 페이지에 다음과 같은 디자인 요소들을 추가할 것입니다.

✨ 내비게이션: 상단에 고정된 깔끔한 메뉴바 (Flexbox 활용)

✨ 프로필 섹션: 이미지를 둥글게 만들고 중앙 정렬

✨ 버튼 효과: 마우스를 올리면 색상이 변하는 인터랙션(Hover)

✨ 반응형 레이아웃: 모바일에서도 깨지지 않는 유연한 구조

2. 완성형 CSS 코드 (실습)

아래 코드를 스타일 시트에 추가해 보세요. HTML 5강의 구조에 클래스 이름들만 적절히 매칭하면 즉시 적용됩니다.

/* 전체 공통 스타일 */ body { margin: 0; padding: 0; background-color: #f4f7f6; } /* 헤더 & 내비게이션 (Flexbox 활용) */ header { background-color: #333; color: #fff; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; position: sticky; /* 상단 고정 */ top: 0; } header nav a { color: #fff; text-decoration: none; margin-left: 20px; transition: color 0.3s; /* 부드러운 색상 변화 */ } header nav a:hover { color: #e83e8c; /* 마우스 올렸을 때 핑크색으로 변화 */ } /* 프로필 이미지 둥글게 처리 */ .profile-img { width: 150px; height: 150px; border-radius: 50%; /* 원형 이미지 */ border: 5px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); } /* 섹션 공통 디자인 */ section { padding: 60px 20px; text-align: center; background-color: #fff; margin-bottom: 20px; } /* 전송 버튼 스타일링 */ button[type="submit"] { background-color: #e83e8c; color: white; padding: 12px 24px; border: none; border-radius: 25px; cursor: pointer; font-size: 1rem; transition: transform 0.2s; } button[type="submit"]:hover { transform: scale(1.05); /* 마우스 올리면 살짝 커짐 */ background-color: #d63384; }

🎉 CSS 기초 연재 완강을 축하합니다!

이제 여러분은 스스로 구조를 잡고 디자인까지 입힐 수 있는 능력을 갖추게 되었습니다.

디자인에는 정답이 없습니다. 끊임없이 다른 사이트의 코드를 살펴보고 직접 수정해보며 여러분만의 스타일을 찾아가시길 바랍니다!

'Frontend > CSS' 카테고리의 다른 글

[CSS 4강] 이제 노가다는 끝! Flexbox로 반응형 레이아웃 마스터하기  (0) 2026.02.10
[CSS 3강] 보기 좋은 글이 읽기도 좋다! 텍스트 스타일과 색상  (0) 2026.02.10
[CSS 1강] 웹사이트에 색을 입히다! CSS 정의와 연동 방법 3가지  (0) 2026.02.10

[CSS 4강] 이제 노가다는 끝! Flexbox로 반응형 레이아웃 마스터하기

"복잡한 배치를 단 몇 줄로 해결하는 마법 같은 기술을 배워봅시다."

안녕하세요! 지난 시간에는 글자를 예쁘게 꾸미는 법을 배웠습니다. 오늘은 웹 디자인의 가장 큰 고민인 '요소 배치(Layout)'를 가장 쉽고 강력하게 해결해주는 Flexbox를 알아보겠습니다.

1. Flexbox란 무엇인가요?

Flexbox는 Flexible Box의 줄임말로, 요소들을 가로 또는 세로로 자유롭게 정렬하고 공간을 배분하기 위해 만들어진 레이아웃 모델입니다.

✅ 부모(Flex Container): 정렬을 명령하는 박스 (display: flex; 적용)

✅ 자식(Flex Item): 정렬되는 대상들

2. 꼭 알아야 할 3가지 핵심 속성

부모 요소에 아래 속성들을 추가하는 것만으로 정렬이 완성됩니다.

  • ↔️ justify-content: 메인축(가로) 정렬 (flex-start, center, flex-end, space-between)
  • ↕️ align-items: 교차축(세로) 정렬 (flex-start, center, flex-end, stretch)
  • 🔄 flex-direction: 정렬 방향 설정 (row: 가로, column: 세로)

3. 가로 메뉴바와 카드 배치 (실습)

아래 코드를 통해 메뉴바를 정중앙에 배치하거나, 카드들을 균일한 간격으로 벌리는 방법을 확인해 보세요.

/* 가로 내비게이션 바 정렬 */ .nav-container { display: flex; justify-content: space-between; /* 요소 사이 간격을 동일하게 */ align-items: center; /* 세로 중앙 정렬 */ background-color: #333; padding: 10px 20px; } /* 카드 리스트 정렬 */ .card-list { display: flex; flex-wrap: wrap; /* 공간이 부족하면 다음 줄로 넘김 */ justify-content: center; /* 가운데 정렬 */ gap: 20px; /* 요소 사이의 간격 */ } .card-item { flex: 1; /* 사용 가능한 공간을 동일하게 나눠 가짐 */ min-width: 200px; padding: 20px; border: 1px solid #ddd; }

레이아웃의 신세계를 경험하셨나요?

Flexbox만 자유자재로 다뤄도 웬만한 웹사이트의 레이아웃은 모두 만들 수 있습니다.

드디어 마지막! 다음 5강에서는 '완성형 포트폴리오 디자인' 실습으로 CSS 과정을 마무리할게요!

'Frontend > CSS' 카테고리의 다른 글

[CSS 5강] 실전! 밋밋했던 포트폴리오에 세련된 디자인 입히기  (0) 2026.02.10
[CSS 3강] 보기 좋은 글이 읽기도 좋다! 텍스트 스타일과 색상  (0) 2026.02.10
[CSS 1강] 웹사이트에 색을 입히다! CSS 정의와 연동 방법 3가지  (0) 2026.02.10

[CSS 3강] 보기 좋은 글이 읽기도 좋다! 텍스트 스타일과 색상

"웹사이트의 분위기를 결정하는 폰트와 컬러 스타일링을 마스터해봅시다."

안녕하세요! 지난 시간에는 박스 모델을 통해 레이아웃의 기초를 다졌습니다. 오늘은 웹사이트의 정보를 전달하는 가장 중요한 요소인 텍스트를 예쁘게 꾸미고, 다양한 방식으로 색상을 표현하는 방법을 알아보겠습니다.

1. 텍스트 스타일링 (Typography)

글꼴의 크기, 굵기, 정렬 등 가독성을 높여주는 핵심 속성들입니다.

✅ font-family: 글꼴 종류 설정 (예: '나눔고딕', sans-serif)

✅ font-size: 글자 크기 (px, em, rem 등 단위 사용)

✅ font-weight: 글자 두께 (normal, bold 또는 100~900 숫자)

✅ line-height: 줄 간격 (가독성에 매우 중요! 보통 1.5~1.8 추천)

✅ text-align: 텍스트 정렬 (left, center, right, justify)

2. CSS에서 색상을 표현하는 3가지 방법

색상을 지정할 때는 단순히 'red' 같은 이름 외에 정밀한 코드를 사용합니다.

  • 🎨 Hex Code: 16진수 표현법 (예: #ff4757) - 가장 많이 사용됨
  • 🌈 RGB / RGBA: 빛의 3원색 (예: rgba(255, 0, 0, 0.5)) - 투명도 조절 가능
  • 🔡 Color Name: 미리 정의된 이름 (예: skyblue, tomato)

3. 텍스트와 색상 적용 예제 (실습)

아래 코드를 스타일 시트에 적용하여 본문의 가독성을 직접 개선해 보세요.

/* 본문 텍스트 스타일링 */ .post-content { font-family: 'Noto Sans KR', sans-serif; font-size: 16px; line-height: 1.8; /* 줄 간격을 넓혀 가독성 확보 */ color: #2f3542; /* 완전한 검정색보다는 진한 회색이 눈에 편함 */ } /* 강조 텍스트 스타일링 */ .highlight { color: #2ecc71; /* 포인트 컬러 적용 */ font-weight: bold; text-decoration: underline; /* 밑줄 추가 */ } /* 제목 중앙 정렬 */ h2 { text-align: center; letter-spacing: -1px; /* 자간을 살짝 좁혀 세련되게 표현 */ }

디자인의 절반은 타이포그래피!

폰트와 줄 간격만 잘 조절해도 웹사이트의 퀄리티가 2배 이상 좋아 보입니다.

다음 4강에서는 레이아웃의 꽃, 'Flexbox 레이아웃'에 대해 배워볼게요!

'Frontend > CSS' 카테고리의 다른 글

[CSS 5강] 실전! 밋밋했던 포트폴리오에 세련된 디자인 입히기  (0) 2026.02.10
[CSS 4강] 이제 노가다는 끝! Flexbox로 반응형 레이아웃 마스터하기  (0) 2026.02.10
[CSS 1강] 웹사이트에 색을 입히다! CSS 정의와 연동 방법 3가지  (0) 2026.02.10

[CSS 2강] 누구를 꾸밀까요? 선택자와 박스 모델 완벽 이해

"원하는 요소를 선택하고 크기를 조절하는 CSS의 핵심을 배워봅시다."

안녕하세요! 지난 1강에서는 CSS를 연결하는 법을 배웠습니다. 오늘은 내가 원하는 부분만 콕 집어서 스타일을 입히는 선택자(Selector)와, 웹사이트의 모든 요소를 사각형 박스로 이해하는 박스 모델(Box Model)을 알아보겠습니다.

1. 기본 선택자 (누구를 꾸밀 것인가?)

CSS에서 가장 많이 쓰이는 세 가지 선택자입니다. 상황에 맞게 골라 쓰는 것이 중요합니다.

✅ 태그 선택자: 특정 태그 전체 (예: h1 { ... })

✅ 클래스 선택자(.): 여러 번 재사용할 그룹 (예: .box { ... })

✅ 아이디 선택자(#): 단 하나뿐인 고유 요소 (예: #logo { ... })

2. 모든 요소는 박스다! 박스 모델

웹사이트의 모든 태그는 사각형 박스로 이루어져 있습니다. 이 박스의 크기를 결정하는 4가지 요소를 기억하세요.

  • 📦 Content: 텍스트나 이미지가 들어가는 실제 내용 영역
  • 📏 Padding: 테두리와 내용 사이의 안쪽 여백
  • 🖼️ Border: 요소의 테두리(선)
  • 🚀 Margin: 다른 요소와의 간격인 바깥쪽 여백

3. 선택자와 박스 모델 예제 (실습)

아래 코드를 통해 클래스 선택자를 사용하고 박스의 여백을 조절하는 법을 확인해 보세요.

/* 클래스 선택자로 꾸미기 */ .my-box { width: 300px; /* 가로 너비 */ background-color: #ffffff; border: 2px solid #3498db; /* 파란색 테두리 */ /* 박스 모델 설정 */ padding: 20px; /* 안쪽 여백 */ margin: 30px; /* 바깥쪽 여백 */ /* 꿀팁: 테두리까지 크기에 포함하기 */ box-sizing: border-box; } /* 태그 선택자로 글자 꾸미기 */ p { color: #555; line-height: 1.5; }

레이아웃의 기본기 완료!

Margin과 Padding의 차이만 명확히 알아도 디자인이 훨씬 깔끔해집니다.

다음 3강에서는 페이지를 더욱 아름답게 만드는 '폰트와 텍스트 스타일'을 알아볼게요!

+ Recent posts

티스토리툴바