Frontend/CSS

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

미니임 2026. 2. 10. 01:03

2026. 2. 10. 01:03

[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로 반응형 레이아웃 마스터하기

미니임 2026. 2. 10. 01:00

2026. 2. 10. 01:00

[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강] 보기 좋은 글이 읽기도 좋다! 텍스트 스타일과 색상

미니임 2026. 2. 10. 00:54

2026. 2. 10. 00:54

[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 1강] 웹사이트에 색을 입히다! CSS 정의와 연동 방법 3가지

미니임 2026. 2. 10. 00:32

2026. 2. 10. 00:32

[CSS 1강] 웹사이트에 색을 입히다! CSS 정의와 연동 방법 3가지

"뼈대 위에 예쁜 옷을 입혀볼 시간입니다."

안녕하세요! 지난 HTML 시리즈를 통해 웹사이트의 뼈대를 세우는 법을 배우셨나요? 이제는 그 밋밋한 뼈대에 색을 입히고 디자인을 더해줄 CSS(Cascading Style Sheets)를 배울 차례입니다.

1. CSS란 무엇인가요?

CSS는 HTML로 만든 문서의 스타일(디자인)을 담당하는 언어입니다. 배경색, 글꼴, 크기, 위치 등을 조절하여 사용자에게 보기 좋은 화면을 만들어줍니다.

✅ HTML: "여기에 제목과 본문을 배치해줘" (구조)

✅ CSS: "제목은 파란색으로, 본문은 나눔고딕체로 해줘" (디자인)

2. CSS를 적용하는 3가지 방법

HTML 문서에 CSS를 입히는 방법은 크게 세 가지가 있습니다.

① 인라인 스타일(Inline Style): 태그 안에 직접 씀 (추천하지 않음)
<h1 style="color: red;">
② 내부 스타일 시트(Internal Style): <head> 안에 <style> 태그로 작성
- 한 페이지에만 스타일을 적용할 때 유용
③ 외부 스타일 시트(External Style): 별도의 .css 파일을 만들어 연결 (가장 추천!)
- 여러 페이지에 동일한 디자인을 적용할 때 필수

3. 외부 스타일 시트 연결하기 (실습)

가장 실무적인 방법인 **외부 스타일 시트 연결법**을 실습해 봅시다. HTML 파일의 <head> 섹션에 아래 코드를 추가하세요.

<!-- HTML 파일 (index.html) -->
<head>
    <link rel="stylesheet" href="style.css">
</head>

<!-- CSS 파일 (style.css) -->
body {
    background-color: #f0f2f5; /* 배경색 변경 */
}

h1 {
    color: #ff4757; /* 제목 색상 변경 */
    text-align: center; /* 가운데 정렬 */
}

p {
    font-size: 18px; /* 글자 크기 변경 */
    color: #333;
}

CSS 공부의 시작!

CSS를 연결할 줄 안다면 이제 웹 디자이너의 길에 들어선 것입니다.

다음 2강에서는 원하는 요소만 골라서 꾸미는 '선택자와 박스 모델'을 배워볼게요!

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

[CSS 5강] 실전! 밋밋했던 포트폴리오에 세련된 디자인 입히기 (0)	2026.02.10
[CSS 4강] 이제 노가다는 끝! Flexbox로 반응형 레이아웃 마스터하기 (0)	2026.02.10
[CSS 3강] 보기 좋은 글이 읽기도 좋다! 텍스트 스타일과 색상 (0)	2026.02.10

PREV 이전 1 NEXT 다음

MinStudio

Frontend/CSS