반응형

HTML, CSS 24

[구조화 마스터] HTML 목록 만들기, 표 만들기, 입력 폼까지 완전정복!

지난 포스팅에서 텍스트, 제목, 이미지, 링크까지 알아봤습니다이번엔 웹페이지에 **리스트(목록)**도 만들고, **표(table)**도 만들어보고,사용자에게 입력받는 폼도 만들어보겠습니다!✅ 순서 있는 목록: + ol은 Ordered List (순서 있는 목록)이고,li는 List Item (목록 항목)을 뜻합니다. HTML 배우기 CSS 배우기 JavaScript 배우기 👉 결과는 이렇게 나와요:HTML 배우기CSS 배우기JavaScript 배우기✅ 순서 없는 목록: + ul은 Unordered List (순서 없는 목록)입니다.보통 동그란 ● 표시로 항목이 나와요. 커피 차 주스 👉 결과:커피차주스📊 표 만들기: , , , table: 표 전체tr: 한 줄(Row)th: 제목 셀(..

HTML, CSS 2025.05.05

HTML 텍스트, 제목, 링크, 이미지 넣기!

안녕하세요! 😊이전 포스팅에서 HTML 문서 구조를 배웠다면,이번에는 웹페이지 안에 실제로 글과 이미지, 링크를 넣어보는 방법을 알아보겠습니다!✍️ 텍스트 넣기: 태그HTML에서 일반적인 문장은 태그를 사용해요.p는 "paragraph", 즉 문단이라는 뜻이죠!오늘은 HTML 공부를 시작한 기념일이에요! 👉 이 코드를 브라우저에서 실행하면 이렇게 보여요:오늘은 HTML 공부를 시작한 기념일이에요!📝 제목 넣기: 부터 제목은 ~ 까지 있어요.숫자가 작을수록 더 중요한 제목, 글자 크기도 더 커요.가장 큰 제목조금 작은 제목이제 점점 작아져요🔗 링크 만들기: 다른 사이트나 페이지로 이동하게 하려면 링크 태그를 사용 해야합니다.구글로 이동 👉 결과: 구글로 이동Tip!href="" 안에는 연결할..

HTML, CSS 2025.05.04

HTML 문서 구조 완전정복! <html>, <head>, <body>는 뭐야?

이전 포스팅 에서는 HTML이 뭔지, 누가 쓰는지 알아봤습니다!이번 포스팅에서는 HTML 문서의 기본 뼈대를 설명 해드리겠습니다.앞으로 작성할 HTML은 모두 이 기본 구조 안에서 만들어집니다!🧱 HTML 문서의 기본 구조란?HTML 문서는 웹페이지의 기본 설계도예요.아래는 가장 기본적인 HTML 문서 구조예요: 안녕하세요! 이것은 나의 첫 HTML 문서예요. 🔍 태그 하나하나 알아보기✅ 이 문서는 HTML5로 작성되었다는 걸 브라우저에게 알려주는 선언이에요.한 번만 쓰면 되고, 항상 맨 위에 있어야 해요!✅ ~ 전체 HTML 문서를 감싸는 가장 바깥 태그예요.모든 내용은 이 안에 들어가야 해요.✅ 웹페이지에 직접 보이진 않지만 중요한 정보들을 담는 공간이에요.예: 페이지 제목(..

HTML, CSS 2025.04.29

HTML이란 무엇일까? 누가 왜 쓰는 걸까?

웹페이지를 만드는 기초 언어인 HTML과 CSS를 아주 쉽게 하나씩 설명 해보는 포스팅을 할까 합니다 😊첫 번째 포스팅은 HTML이란 무엇인지, 누가, 어떤 상황에서 사용하는지를 천천히 알아보도록 할게요!✅ HTML이란?HTML은 HyperText Markup Language의 줄임말이에요. 말 그대로, 하이퍼텍스트를 작성하기 위한 마크업 언어랍니다! 📌 여기서 잠깐!하이퍼텍스트란?👉 다른 페이지나 정보로 연결되는 문서예요. 우리가 인터넷에서 링크를 클릭해서 다른 페이지로 이동하잖아요? 그게 하이퍼텍스트예요!✅ HTML은 왜 필요할까?우리가 보는 모든 웹사이트는 결국 HTML로 구성되어 있어요.예를 들어, 네이버, 유튜브, 구글, 인스타그램 같은 사이트도 처음에는 HTML로 기본 뼈대를 만들어요.H..

HTML, CSS 2025.04.24
반응형