데이터 사이언스 아카데미 (Data Science Academy)

✨ 들어가며지금까지 HTML로 웹페이지의 구조를 만들어봤습니다. 하지만 구조만 있는 페이지는 마치 색도 없는 도화지와 같습니다.웹페이지에 색상, 글꼴, 간격, 레이아웃 등 시각적인 표현을 더하려면 CSS가 필요합니다.이 글에서는 CSS가 무엇인지, 어떻게 HTML에 적용하는지, 그리고 기본 스타일 속성부터 실습해보며 "디자인의 첫걸음"을 함께 시작합니다.✨ 1. CSS란 무엇인가요?CSS (Cascading Style Sheets)는 HTML 요소의 스타일을 지정하는 언어입니다. 💡 Cascading은 "폭포처럼 흐르는"이라는 뜻으로, 스타일이 위에서 아래로 적용되는 특성을 말합니다.HTML이 구조라면, CSS는 표현입니다. 구조 위에 색과 모양을 입히는 역할을 합니다. ▲ CSS ..

프로그래밍 언어/Front-End 2025. 6. 26. 11:54

✅ 들어가며웹페이지에 보이는 콘텐츠 중, 블로그 글·뉴스 기사·포럼 게시글처럼 독립적으로 배포 가능하고 재사용 가능한 콘텐츠는 태그로 감쌉니다.HTML 구조를 기준으로 RSS를 생성하는 경우로 감싼 콘텐츠가 RSS의 핵심 단위가 되기 때문입니다. -->이번 글에서는 Feedly를 통해 RSS피드를 구독하는 방법을 안내하고, 동시에 태그의 개념과 실용성을 함께 이해해 보겠습니다.📘 RSS란 무엇인가요?위와 같은 로고를 본 적이 있는 사람도, 본 적이 없는 사람도 있을 것입니다. 블로그를 즐겨 보던 시절, 매일 자주 가는 웹사이트를 일일이 방문하지 않아도, 새 글이 올라오면 자동으로 내 구독함에 들어오던 그 기능… 기억나시나요?티스토리, 네이버 블로그, 언론사 홈페이지까지 왼쪽 아래 구..

프로그래밍 언어/Front-End 2025. 6. 16. 14:54

div로만 짜는 HTML은 이제 그만! 의미 있는 구조로 바꿔보자 ✅ 시맨틱 태그란?HTML에서 시맨틱(Semantic)이란 말은 "의미 있는"이라는 뜻입니다.즉, 시맨틱 태그란 태그 자체가 콘텐츠의 역할이나 구조를 설명해 주는 태그를 말합니다.예를 들어 는 페이지의 머리말 영역을, 는 바닥글을 의미하죠.반면 는 아무 의미도 없이 단지 "구역을 나누는 용도"일 뿐입니다.✅ 시맨틱 태그를 사용하면:접근성이 좋아지고, SEO(검색엔진 최적화)에 유리하며,코드 가독성도 향상됩니다.🧩 시맨틱 태그 예시 모음태그설명사용 예시페이지나 섹션의 머릿말사이트 로고, 상단 메뉴 등내비게이션 영역링크 모음, 메뉴바 등페이지의 주요 콘텐츠 영역본문 전체관련 있는 콘텐츠 구역소개, 취미, 연락처 등 개별 영역독립적인 콘텐츠 ..

프로그래밍 언어/Front-End 2025. 6. 9. 10:57

HTML의 기본 개념을 배웠다면, 이제 가장 중요한 단계는 '직접 써보는 것'입니다. 단순히 머릿속으로 이해한 것과 손으로 입력해보며 체득하는 감각은 완전히 다릅니다. 실습을 통해 감을 잡고, "웹페이지가 이렇게 만들어지는구나!"라는 감각을 익혀보세요. 이 글에서는 최대한 간단한 방식으로 HTML 파일을 만들고, 그 안에 내용을 채워보고 브라우저에서 확인하는 과정을 단계별로 진행해보겠습니다. 복잡한 이론보다는 "따라하면서 이해하기"에 집중했습니다.🛠️ 준비물: 메모장과 브라우저만 있으면 OKHTML을 작성하기 위해 특별한 프로그램이 필요하지 않습니다. 윈도우의 메모장, 맥의 텍스트 편집기만 있어도 충분해요!💡 더 편한 도구들VS Code (무료, 추천!) : Visual Studio Code는 입..

프로그래밍 언어/Front-End 2025. 6. 2. 18:03

웹 개발을 시작하는 초심자들이 가장 처음 마주치는 벽은 '낯선 용어'입니다. 이 글에서는 HTML 문서를 이해하고 작성하는 데 필수적인 기본 개념들을 쉽고 명확하게 설명합니다. 복잡한 이론보다는 실제 문서를 만들며 마주치는 용어 위주로 정리했습니다.✅ 문서 구조와 관련된 기본 용어📌 태그 (Tag)예시: , , 태그는 HTML에서 정보를 표현하기 위한 기본 단위입니다. 꺾쇠괄호()로 감싸며, 어떤 정보인지 브라우저에게 알려줍니다. 📌 여는 태그 / 닫는 태그 (Opening / Closing Tag) / 태그는 대부분 시작과 끝이 있으며, /가 있는 것이 닫는 태그입니다. 이 구조가 HTML 문서를 정확하게 구성합니다. 📌 자체 닫는 태그 (Self-Closing Tag)예시: , , , 내용이 ..

프로그래밍 언어/Front-End 2025. 5. 30. 16:01

🔗 이전 글…[Web UI 기초 #1] 웹사이트는 어떻게 만들어질까? HTML부터 시작하는 이유 [Web UI 기초 #1] 웹사이트는 어떻게 만들어질까? HTML부터 시작하는 이유🟡 [시작하기 전에] 웹사이트는 어떻게 만들어질까?“웹 개발을 배운다는데… HTML이 도대체 뭔데?”처음 접하는 사람이라면 누구나 가질 수 있는 의문입니다.웹사이트가 어떻게 만들어지는지,sesoc.tistory.com 📌 먼저 알아둘 용어- 태그(Tag): 처럼 열고 닫는 꺾쇠 기호로 감싸진 명령어.화면에 표시할 콘텐츠를 담는 박스.- 속성(Attribute):처럼 태그에 정보를 추가해 주는 것.박스에 붙여둔 설명 스티커(라벨).- 마크업(Markup):정보를 구조화하고 표시하는 방식. HTML은 마크업 언어.설명 없이 나..

프로그래밍 언어/Front-End 2025. 5. 27. 13:14

🟡 [시작하기 전에] 웹사이트는 어떻게 만들어질까?“웹 개발을 배운다는데… HTML이 도대체 뭔데?”처음 접하는 사람이라면 누구나 가질 수 있는 의문입니다.웹사이트가 어떻게 만들어지는지, 왜 HTML을 배우는지 이 글에서 함께 알아보겠습니다. 🔷 웹사이트는 그냥 그림이 아니다우리가 보는 모든 웹 페이지는 브라우저가 HTML이라는 코드를 해석해서 그려준 결과물입니다.눈에 보이는 버튼, 이미지, 텍스트 등은 전부 보이지 않는 코드로 만들어져 있어요.아래처럼 생긴 코드가 브라우저에 의해 해석됩니다:환영합니다이 사이트는 HTML로 만들어졌습니다.이처럼 HTML은 웹의 구조를 담당하는 중요한 언어입니다. 🔷 웹의 세 가지 기본 구성 요소웹 개발은 크게 세 가지 핵심 기술이 서로 협력하여 완성됩니다:구성 요..

프로그래밍 언어/Front-End 2025. 5. 27. 11:00