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

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