4️⃣ DEV TIP
HTML & CSS: 웹의 골격과 스타일 #2
ifdevnavigator
2025. 5. 16. 12:00
웹페이지를 ‘보이게’ 만드는 가장 기본적인 기술
“나도 웹페이지 하나쯤은 만들어보고 싶다”
하지만 코드를 몰라서 망설였던 적, 있으셨죠?
그런 분들을 위해 준비했습니다.
HTML과 CSS만 알면, 웹페이지 뼈대를 직접 만들어볼 수 있어요.
오늘은 이 두 언어가 무엇을 담당하고, 어떻게 작동하는지 아주 쉽게 풀어드릴게요.
🧱 HTML: 웹페이지의 뼈대
웹사이트의 구조를 만드는 언어
HTML은 마치 건축 설계도 같아요.
버튼, 이미지, 제목, 텍스트 등…
페이지 안에 들어갈 모든 요소를 정의하는 게 HTML의 역할이죠.
예시:
html
CopyEdit
<h1>IFINITY에 오신 걸 환영합니다!</h1> <p>노코드로 빠르게 앱을 개발해보세요.</p> <button>문의하기</button>
📌 위 코드는
- 제목 1개 (h1)
- 본문 텍스트 (p)
- 버튼 1개
를 만들어주는 구조입니다.
🎨 CSS: 웹페이지에 디자인을 입히는 언어
HTML이 구조라면, CSS는 그 구조에 디자인을 입히는 도구
색상, 간격, 글씨 크기, 정렬, 애니메이션…
보는 사람의 경험을 좋게 만들어주는 역할을 합니다.
예시:
css
CopyEdit
h1 { color: #3A86FF; font-size: 32px; text-align: center; }
📌 위 코드는 제목(h1)을
- 파란색으로
- 글자 크기 32px
- 가운데 정렬
하게 만드는 스타일입니다.
🖇️ HTML + CSS = 웹의 기본
이 두 언어는 항상 함께 작동합니다.
- HTML이 “무엇을 보여줄지” 결정하고
- CSS가 “어떻게 보여줄지” 결정하죠.
💻 실제 웹페이지 예시 (HTML + CSS)
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: sans-serif; padding: 20px; }
h1 { color: #2D2D2D; }
button {
background: #3A86FF;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>IFINITY - 노코드로 시작하는 개발</h1>
<p>지금 바로 프로젝트를 시작해보세요.</p>
<button>문의하기</button>
</body>
</html>
<html>
<head>
<style>
body { font-family: sans-serif; padding: 20px; }
h1 { color: #2D2D2D; }
button {
background: #3A86FF;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>IFINITY - 노코드로 시작하는 개발</h1>
<p>지금 바로 프로젝트를 시작해보세요.</p>
<button>문의하기</button>
</body>
</html>
📌 이 코드를 그대로 복사해서 https://codepen.io 같은 사이트에 붙여넣으면,
당신만의 미니 웹페이지가 짠! 하고 나올 거예요.
🧠 비전공자를 위한 포인트 요약
구분설명
| HTML | 웹페이지 안에 들어갈 요소를 만들어요 |
| CSS | 만든 요소에 디자인을 입혀요 |
| 둘 다 | 웹의 ‘기본기’. 노코드 툴을 이해하는 데도 필수예요 |
IFINITY는 이렇게 활용합니다
노코드로 개발할 때도,
- HTML 구조 이해는 Bubble의 UI 빌딩에
- CSS 지식은 커스터마이징에
정말 큰 도움이 돼요.
우리는 '개발을 모르는 사람도 개발할 수 있게' 만드는 파트너입니다.
다음 편 예고
👉 [JavaScript: 웹에 생명을 불어넣다]
버튼을 클릭했을 때 뭔가 바뀌는 그 ‘기능’은 JS의 세계!
📩 노코드로 시작해도, 개발 감각은 꼭 필요합니다.
IFINITY와 함께라면 배우면서 만들고, 만들면서 성장할 수 있어요.
다음 편(JS)도 바로 이어서 제작할까요?
또는 이 시리즈를 PDF 리플렛/슬라이드 형태로 변환해드릴 수도 있어요!