안녕하세요, 토스트데브입니다!이전 글에서는 HTML 문서의 기본 구조, 즉 , 🧩 정리 요약태그역할문자셋, 뷰포트, SEO 정보 등 문서 설정문서 제목 (브라우저 탭에 표시)외부 CSS, 파비콘 등 연결외부 자바스크립트 연결내부 CSS 작성 HTML에서 영역은 단순한 부가 정보 공간이 아니라, 페이지의 품질, 접근성, SEO를 결정하는 핵심 공간입니다.앞으로 HTML을 본격적으로 활용하기 위해 꼭 알아두세요! #HTML #HTML기초 #HTML문서구조 #head태그 #메타태그 #title태그 #link태그 #script태그 #style태그 #웹접근성 #웹표준 #웹개발기초 #웹퍼블리싱 #코딩입문 #프론트엔드 #toastdev #웹개발공부

안녕하세요 토스트데브입니다!JavaScript는 원래 웹 브라우저에서만 동작하는 스크립트 언어로 시작했지만, 이제는 Node.js의 등장으로 서버 사이드 개발까지 담당하는 풀스택 언어로 발전했어요.오늘은 JavaScript의 실행 환경인 브라우저와 Node.js의 차이점에 대해 알아보겠습니다! 🧭 1. 실행 위치의 차이 항목브라우저 환경Node.js 환경실행 위치사용자 컴퓨터의 웹 브라우저서버 또는 로컬 컴퓨터목적UI 조작 및 사용자 상호작용백엔드 로직 및 시스템 제어접근 권한DOM, BOM 사용 가능파일 시스템, 네트워크 등 접근 🌐 2. 브라우저 환경이란?📌 특징HTML/CSS와 함께 작동하여 UI를 구성하고 제어사용자 입력, 클릭 이벤트 등 프론트엔드 로직 처리브라우저 내에서만 작동하며..

안녕하세요, 토스트 데브입니다!앞서 JavaScript의 정의와 역사, 특징에 대해 살펴보았죠.오늘은 JavaScript가 실제로 어디에 사용되는지 다양한 활용 분야를 소개해드릴게요. 🌐 1. 웹 프론트엔드 개발JavaScript의 가장 대표적인 활용 분야는 바로 웹페이지의 프론트엔드(Frontend)입니다.HTML이 웹페이지의 구조를 만들고, CSS가 스타일을 담당한다면, JavaScript는 웹페이지에 생명력을 불어넣는 언어입니다. 📌 대표 기능버튼 클릭 시 동작 처리모달 창 열기/닫기실시간 입력 검사 (Validation)애니메이션 효과비동기 데이터 요청 (AJAX, fetch 등) 🔧 사용 프레임워크/라이브러리ReactVue.jsAngular 🔧 2. 웹 백엔드 개발 (서버 사이드)예전..

안녕하세요, 토스트 데브입니다!이번 글에서는 HTML을 본격적으로 배우기 전에 꼭 이해하고 넘어가야 할 HTML 문서의 뼈대 구조를 살펴보겠습니다. ✅ 1. HTML 문서란?HTML 문서는 웹 브라우저가 읽고 해석하여 화면에 출력하는 웹페이지의 설계도입니다.HTML 파일은 보통 .html 확장자를 가지며, HTML5 문법 기준으로 작성됩니다. ✅ 2. 기본 문서 구조 (HTML5 기준)HTML 문서는 아래와 같은 기본 구조를 가집니다. 안녕하세요! 이곳은 HTML 문서의 본문입니다. 🔹 3. – 문서 유형 선언HTML5 문서임을 브라우저에게 알려주는 선언문입니다.반드시 문서의 최상단에 위치해야 합니다. 🔹 4. – 문서의 전체 영역모든 HTML 코드는 이 태그 안에 ..

안녕하세요, 토스트 데브입니다!지난 시간에는 "JavaScript란 무엇인가?"에 대해 알아봤는데요,이번 글에서는 JavaScript가 어떻게 태어나고 성장해왔는지, 그리고 어떤 특징을 가졌는지 함께 살펴보겠습니다. 🕰️ JavaScript의 역사🔹 1995년 – JavaScript의 탄생JavaScript는 넷스케이프(Netscape)사의 브렌던 아이크(Brendan Eich)에 의해 단 10일 만에 개발되었습니다.원래 이름은 LiveScript였지만, 당시 유행하던 Java 언어의 인기에 편승하기 위해 JavaScript로 이름이 바뀌었죠. 🔹 1996년 – Microsoft의 JScriptMicrosoft는 JavaScript와 유사한 JScript를 발표하며 브라우저 호환성 문제가 생기기 ..

안녕하세요, 토스트 데브입니다!이번에는 앞서 소개한 강조 태그들 외에도 HTML에서 자주 사용되는 문자 관련 태그들을 정리해보려 합니다.이 태그들은 콘텐츠의 의미를 명확하게 전달하거나, 특정한 문맥을 부여하는 데 활용됩니다. 🔸 1. – 작은 글씨로 부가 설명 표현 태그는 글자를 작게 표현하면서, 부가적인 정보나 저작권, 면책 문구 등에 자주 사용됩니다.이 제품은 일부 국가에서만 판매됩니다. 시각적으로 글씨 크기가 줄어들며,보조적 정보임을 암시합니다. 🔸 2. – 위 첨자 (superscript) 태그는 윗첨자로, 수학 기호, 단위, 각주 등에 사용됩니다. E = mc2 위로 올라간 작은 글씨로 표시됩니다.보통 지수 표현이나 각주 번호 등에 자주 쓰입니다. 🔸 3. – 아래 첨자 (sub..

안녕하세요, 토스트 데브입니다!오늘은 HTML에서 텍스트를 강조하거나 중요성을 표현할 때 사용하는 주요 태그들을 정리해보겠습니다.웹페이지의 내용 전달에서 텍스트의 강조는 의미를 부각시키고,웹 접근성을 높이며, 사용자의 주의를 유도하는 데 아주 중요한 역할을 합니다. 🔹 1. – 강한 중요성 강조 태그는 의미적으로 중요한 단어를 표현할 때 사용합니다.브라우저 상에서는 보통 굵은 글씨로 표시되지만, 단순한 스타일이 아닌 의미 전달이 목적입니다.주의: 이 작업은 되돌릴 수 없습니다.🔸 의미 중점: 단순히 굵게 보이게 하는 게 아니라, 해당 텍스트가 중요하다는 의미를 스크린 리더나 검색 엔진에도 전달합니다. 🔹 2. – 강조(강세) 표현 태그는 문장에서 강조하고 싶은 단어를 표현할 때 사용합니다.보..

녕하세요, 토스트 데브입니다!오늘은 웹 개발에서 가장 많이 사용되는 프로그래밍 언어 중 하나인 JavaScript(자바스크립트)에 대해 알아보려 합니다."자바스크립트가 도대체 뭐길래 이렇게 많이 쓰일까?" 궁금하셨다면 이 글을 꼭 끝까지 읽어보세요! 💡 JavaScript란?JavaScript는 웹 브라우저에서 동작하는 프로그래밍 언어입니다.정적인 웹페이지에 생동감을 더하고, 사용자와 상호작용할 수 있는 기능을 구현할 수 있게 해주는 웹의 필수 언어라고 할 수 있죠. 🧾 JavaScript의 탄생 배경1995년, 넷스케이프(Netscape)의 브렌던 아이크(Brendan Eich)가 단 10일 만에 개발초창기에는 "LiveScript"라는 이름이었으나 Java의 인기에 편승하기 위해 이름을 Jav..

안녕하세요, 토스트데브입니다!지금까지 CSS의 기초부터 애니메이션까지 단계별로 학습해오셨죠?이번 글에서는 실제 개발 환경에서 CSS를 더욱 효율적으로 사용하는 고급 기능들과 실전 스타일링 팁을 정리해보겠습니다.유지보수와 협업을 고려한 코드 작성을 위한 필수 개념도 함께 소개할게요. 1️⃣ CSS 변수(CSS Custom Properties)CSS에서도 변수를 선언하고 사용할 수 있습니다.변수를 사용하면 색상, 간격, 폰트 등 공통값을 일괄 관리할 수 있어 매우 편리합니다.✅ 변수 선언 (보통 :root에):root { --main-color: #3498db; --spacing: 16px;} ✅ 변수 사용button { background-color: var(--main-color); paddin..

안녕하세요, 토스트데브입니다!오늘은 웹사이트에 생동감을 더해주는 CSS 트랜지션(transition)과 애니메이션(animation)에 대해 알아보겠습니다.정적인 웹페이지에서 버튼에 마우스를 올릴 때 색이 부드럽게 변한다든지, 스크롤 시 요소가 자연스럽게 등장한다면, 사용자 경험이 훨씬 좋아지겠죠? 이런 효과들을 CSS만으로 손쉽게 구현할 수 있습니다! 1️⃣ 트랜지션(Transition)이란?트랜지션은 특정 속성 값이 변경될 때, 그 변화가 일정 시간에 걸쳐 부드럽게 일어나도록 만들어줍니다.✅ 기본 문법transition: [속성] [지속시간] [타이밍 함수] [지연시간]; ✅ 예시button { background-color: skyblue; transition: background-color ..

안녕하세요, 토스트데브입니다!오늘은 현대 웹 개발의 필수 개념인 반응형 웹 디자인(Responsive Web Design)에 대해 배워보겠습니다.반응형 웹은 하나의 HTML 코드로 다양한 기기 해상도에 맞게 레이아웃을 자동 조정할 수 있어 사용자 경험(UX)을 크게 향상시켜줍니다.그럼 바로 반응형 웹을 만들기 위한 핵심 요소들을 살펴보겠습니다! 1️⃣ 반응형 웹 디자인이란?반응형 웹 디자인(Responsive Web Design)은 화면 크기, 해상도, 방향에 따라 레이아웃, 폰트, 이미지 크기 등을 유동적으로 변화시키는 웹 디자인 방식입니다.💡 모바일/태블릿/데스크탑에서 동일한 URL, HTML을 사용하며, CSS로 뷰를 조정합니다. 2️⃣ 기본 전제: 뷰포트 설정HTML 에 다음 메타 태그를 반..

안녕하세요, 토스트데브입니다!지난 글에서 Flexbox로 수평 또는 수직 정렬을 다뤘다면, 오늘은 한 차원 더 확장된 레이아웃 시스템인 CSS Grid Layout에 대해 배워보겠습니다.Grid는 2차원(행과 열)의 격자 구조를 기반으로 정교한 레이아웃을 설계할 수 있어, 대시보드, 갤러리, 블로그 카드 등 다양한 UI에 유용하게 활용됩니다. 1️⃣ CSS Grid란?CSS Grid Layout은 요소를 행(row)과 열(column) 기준으로 배치하는 2차원 레이아웃 시스템입니다.display: grid를 부모 요소에 지정하면, 해당 요소는 Grid 컨테이너자식 요소들은 Grid 아이템이 됩니다. 2️⃣ 기본 구조 1 2 3.grid-container { display: grid; grid..

안녕하세요, 토스트데브입니다!지난 글에서 CSS의 전통적인 레이아웃 구성 방법들을 살펴봤는데요, 오늘은 현대적인 CSS 레이아웃 방식 중 하나인 Flexbox(Flexible Box)에 대해 정리해보겠습니다.Flexbox는 요소들을 쉽고 유연하게 정렬하고 배치할 수 있는 강력한 도구입니다.특히 수평/수직 정렬, 공간 배분, 반응형 레이아웃에 강점을 가집니다. 1️⃣ Flexbox란?Flexbox(Flexible Box Layout)는 1차원(가로 또는 세로 한 방향) 레이아웃 시스템으로, 정렬, 배치, 공간 분배를 쉽게 처리할 수 있게 만들어졌습니다.기본적으로 부모 요소에 display: flex를 지정하면, 자식 요소들이 자동으로 flex item(플렉스 항목)으로 인식되어 동작합니다. 2️⃣ 기본..

안녕하세요, 토스트데브입니다!오늘은 CSS를 활용해 웹 요소를 어떻게 배치하고 정렬할 수 있는지, 즉 레이아웃(Layout)을 구성하는 핵심 속성들을 알아보겠습니다.텍스트와 이미지를 예쁘게 꾸며도, 배치가 엉망이면 사용자 경험은 크게 떨어지죠.이번 글에서는 가장 기초적인 레이아웃 구성 방법인 display, position, float, z-index, overflow, box-sizing 등을 중심으로 정리해볼게요. 1️⃣ display – 요소의 유형 정의display는 HTML 요소의 기본 동작 방식(레이아웃 방식)을 정의합니다.속성 값설명block줄 바꿈이 있는 박스 (div, p 등)inline한 줄에 나란히 (span, a 등)inline-block줄 바꿈 없음 + 너비·높이 지정 가능non..

안녕하세요, 토스트데브입니다!오늘은 CSS에서 텍스트의 분위기와 개성을 결정짓는 핵심 요소, 바로 글꼴(Font)과 폰트 관련 속성에 대해 자세히 알아보겠습니다.다양한 폰트를 설정하는 방법과 웹폰트를 불러오는 방법까지 함께 정리해볼게요. 1️⃣ font-family – 글꼴 지정HTML 요소의 글꼴을 지정하는 가장 기본적인 속성입니다.p { font-family: Arial, sans-serif;} ✅ 여러 폰트를 쉼표(,)로 나열하는 이유:앞의 글꼴이 사용 불가능할 경우, 다음 글꼴로 대체마지막에는 항상 글꼴 계열(generic family)을 적어야 함계열설명serif바 있는 전통적인 글꼴 (예: Times New Roman)sans-serif바 없는 현대적 글꼴 (예: Arial)monospac..

안녕하세요, 토스트데브입니다!오늘은 웹 요소의 배경을 꾸미는 데 사용하는 CSS의 background 속성을 알아보겠습니다.텍스트만으로는 심심한 웹페이지도, 배경색이나 배경 이미지를 적절히 사용하면 훨씬 시각적으로 풍부해지고 전문적으로 보입니다.자, 그럼 배경 속성 하나하나 함께 살펴볼까요? 1️⃣ background-color – 배경 색상요소의 배경에 색을 지정합니다.div { background-color: lightblue;}색상값은 이름, 16진수, rgb, rgba, hsl 등 다양한 방식으로 표현 가능background-color: #f0f0f0;background-color: rgba(0, 0, 0, 0.5); /* 반투명 검정 */ 2️⃣ background-image – 배경 이미..

안녕하세요, 토스트데브입니다!웹에서 모든 HTML 요소는 기본적으로 사각형 박스(Box)입니다.이 박스의 구조를 이해하는 것이 바로 CSS의 핵심이라 할 수 있습니다.오늘은 박스 모델(Box Model)을 통해 margin, padding, border, width, height의 관계를 완벽하게 이해해봅시다! 1️⃣ 박스 모델(Box Model)이란?CSS에서 모든 요소는 사각형 박스로 구성되어 있으며, 이 박스는 다음 4개의 영역으로 나뉩니다:+---------------------------+| margin | ← 외부 여백| +---------------------+ || | border | | ← 테두리| | +--------..

안녕하세요, 토스트데브입니다!오늘은 CSS에서 텍스트 스타일링에 자주 사용하는 속성들을 알아보겠습니다.텍스트는 웹페이지에서 가장 중요한 콘텐츠 중 하나이기 때문에, 글자의 색상, 크기, 정렬, 간격 등을 세심하게 조정하는 것은 디자인의 완성도를 높이는 핵심입니다.그럼 바로 하나씩 살펴볼까요? 1️⃣ color – 글자 색상 지정글자 색상을 설정합니다. 색상 값은 이름, 16진수, rgb(), hsl() 등 다양하게 지정 가능합니다.p { color: red;}h1 { color: #333333;} 2️⃣ font-size – 글자 크기 조절글자의 크기를 지정합니다. 단위는 px, em, rem, % 등을 사용할 수 있습니다.h2 { font-size: 24px;}p { font-size: 1...

안녕하세요, 토스트데브입니다!오늘은 CSS를 작성할 때 빠질 수 없는 “주석(Comment)”에 대해 알아보겠습니다."CSS에서 주석이 왜 필요할까?" 라고 생각할 수 있지만, 규모가 커지거나 팀으로 개발할 때 주석은 필수적인 의사소통 도구입니다.코드 한 줄 한 줄에 의미를 담고, 미래의 나와 동료들을 위한 설명서를 작성하는 것!바로 CSS 주석의 힘입니다. 1️⃣ CSS 주석이란?CSS 주석은 브라우저가 실행하지 않는 코드 설명 텍스트입니다.코드의 의미나 작성자의 의도를 남기거나, 특정 코드 블록을 임시로 비활성화할 때 사용합니다. 2️⃣ CSS 주석 작성 방법CSS에서는 /* */ 형식을 사용해 주석을 작성합니다.✅ 기본 형식:/* 이 부분은 제목에 대한 스타일입니다 */h1 { color: n..

안녕하세요, 토스트데브입니다!CSS에서 스타일을 적용하기 위해서는 "어떤 요소에 적용할지"를 먼저 정확히 지정해야 합니다.바로 이때 사용하는 것이 선택자(Selector)입니다.선택자는 HTML 요소를 정확하게 찾아내고, 그 요소에 스타일을 입히는 역할을 합니다.이번 글에서는 가장 많이 쓰이는 기본 선택자부터 고급 선택자까지 단계별로 정리해드릴게요! 1️⃣ 선택자란?선택자(Selector)는 HTML 문서에서 스타일을 적용할 대상 요소를 지정하는 데 사용됩니다.즉, CSS에서 선택자 { 속성: 값; } 형태로 스타일 규칙을 작성하면, 선택자에 해당하는 HTML 요소에 스타일이 적용됩니다.✅ 예시:p { color: blue;}👉 모든 태그에 파란색 글씨를 적용함. 2️⃣ 기본 선택자✅ 태그 선택..

안녕하세요, 토스트데브입니다!지난 시간에 CSS란 무엇인지, CSS의 역할에 대해 알아봤죠?오늘은 CSS를 실전에서 어떻게 적용하는지를 배워볼 차례입니다.즉, HTML 문서에 CSS를 어떤 방식으로 연결하고 적용하는가에 대한 내용이에요. 1️⃣ CSS 적용 방법이란?HTML은 구조(태그)를 만들고, CSS는 스타일을 입힙니다.그런데 CSS를 HTML에 적용하는 방법은 3가지가 있습니다:인라인(Inline) 스타일내부(Internal) 스타일시트외부(External) 스타일시트각 방법은 사용 목적과 상황에 따라 적절하게 선택됩니다.자, 하나씩 살펴볼까요? 2️⃣ 인라인 스타일 (Inline Style)📌 정의HTML 요소의 style 속성 안에 직접 CSS를 작성하는 방식입니다.✅ 예시이 문장은 인라..

안녕하세요, 토스트데브입니다!오늘은 웹 개발을 처음 접하신 분들이 꼭 알아야 할 CSS(Cascading Style Sheets)에 대해 알아보려 합니다.HTML과 함께 웹의 핵심을 이루는 기술인 CSS는 웹사이트의 디자인과 스타일을 담당하는 언어입니다."도대체 CSS는 왜 필요하고, 뭘 할 수 있는 걸까?"이 질문에 대한 답을 오늘 완벽하게 이해해보세요! 1️⃣ CSS란 무엇인가?CSS는 Cascading Style Sheets(계단식 스타일 시트)의 약자입니다.HTML이 웹페이지의 구조(뼈대)를 담당한다면, CSS는 그 구조에 색, 크기, 여백, 위치, 애니메이션 등을 적용하여 웹페이지를 예쁘게 꾸며주는 역할을 합니다.예시 비교안녕하세요안녕하세요이처럼 CSS를 사용하면 텍스트 색상, 크기, 정렬뿐 ..

안녕하세요, 토스트 데브입니다!지난 시간에는 HTML 문서에서 제목(~)과 단락() 태그를 어떻게 사용하는지 알아보았죠?오늘은 문서를 구성할 때 자주 사용되는 목록(List) 태그에 대해 알아보겠습니다.✅ 왜 목록 태그가 필요할까요?우리는 글을 작성할 때 자주 항목별로 정리된 정보를 나열하게 됩니다.예를 들어:장보기 목록순위 리스트사용 방법FAQ이런 항목들을 HTML에서 표현할 때 사용하는 것이 바로 목록 태그입니다.📌 HTML의 목록 태그 종류태그설명순서가 없는(Unordered) 목록순서가 있는(Ordered) 목록목록 항목 (List Item)정의 목록 (Description List)용어 (Definition Term)설명 (Definition Description)🟢 순서 없는 목록 ()순서..

안녕하세요, 토스트 데브입니다. 이전 시간에는 HTML 문서의 구조에 대해 배워보았죠? 오늘은 웹 문서를 구성하는 데 있어서 가장 기본적이면서 중요한 제목(heading) 태그와 단락(paragraph) 태그에 대해 알아보겠습니다.제목과 단락 태그는 왜 중요한가요?기사, 교과서, 보고서 등 어떤 문서든 제목과 단락으로 구조화되어 있습니다. HTML 문서도 마찬가지예요. 제목과 단락을 잘 구성하면 읽기 쉽고, 정보 구조도 명확해집니다.제목 태그 ( ~ )HTML에서는 총 6단계의 제목 태그를 제공합니다.대제목 (최상위)중제목소제목하위제목더 작은 제목가장 작은 제목각 태그는 문서의 계층 구조를 나타내는 용도로 사용되며, 시각적인 크기 차이보다 논리적 구조가 더 중요합니다.단락 태그 단락은 문장의 내용을 감싸..

안녕하세요, 토스트 데브입니다! 지난 시간에는 HTML 문서의 기본 구조와 주석 작성 방법에 대해 알아보았죠? 오늘은 HTML 문서를 작성할 때 주의해야 하는 특수문자들에 대해 알아보겠습니다.왜 특수문자에 주의해야 할까?HTML에서는 일부 문자가 태그나 속성의 구분자로 사용되기 때문에, 콘텐츠로 직접 입력하면 문법 오류를 유발할 수 있습니다. 예를 들어 , " 같은 기호들은 HTML 태그의 시작과 끝, 속성 구분 등으로 사용되므로, 이 기호들을 실제 콘텐츠로 쓰고 싶을 때는 특수문자 코드로 변환해 주어야 합니다.HTML 특수문자 기본 구조HTML 특수문자는 다음과 같은 형식으로 작성합니다.&문자코드;시작 : &문자 코드 이름종료 : ;자주 쓰이는 특수문자 코드기호코드설명<less than (열린 꺾..

안녕하세요, 토스트 데브입니다! 지난 시간에는 HTML 요소의 속성(Attribute)에 대해 알아보았는데요,이번 시간에는 웹 문서의 시작이 되는 HTML 문서의 구조에 대해 배워보겠습니다. 웹 페이지는 눈에 보이는 부분만큼이나, 눈에 보이지 않는 구조와 규칙이 굉장히 중요하답니다. 그럼 하나씩 함께 살펴볼까요?HTML5 선언 방식예전 HTML4나 XHTML 시대에는 아래와 같이 복잡한 선언이 필요했습니다.하지만 HTML5부터는 훨씬 간단해졌습니다!이 한 줄만으로도 “이 문서는 HTML5 문서입니다”라고 선언할 수 있게 되었죠.HTML 문서의 기본 골격HTML 문서는 기본적으로 html 요소 안에 head와 body 요소가 포함되는 구조입니다. 비유로 이해해볼까요? 태그는 사람의 전체 몸 ..

안녕하세요, 토스트 데브입니다! 이전 시간에는 HTML의 요소(Element)와 태그의 구조에 대해 배웠는데요, 이번 시간에는 한 단계 더 나아가 HTML 요소에 작성되는 ‘속성(Attribute)’에 대해 알아보겠습니다. HTML을 제대로 다루기 위해서는 속성의 정확한 문법과 역할을 이해하는 것이 매우 중요합니다.HTML 속성(Attribute)이란?HTML 속성은 태그에 추가적인 정보를 부여할 수 있는 방식입니다. 요소 자체만으로는 부족한 설명이나 기능을 확장하기 위해 사용되죠.문단 태그의 선언과 종료위 코드에서 class="study"가 바로 속성입니다. 이 속성은 p 태그에 class라는 이름의 추가 정보를 부여한 것입니다. 속성 작성 규칙HTML 속성을 작성할 때에는 반드시 아래 규칙을 지켜야 ..

HTML 기초 개념 정리HTML이란?HTML은 웹 문서를 만들기 위한 마크업 언어이며, 현재는 HTML5가 가장 최신 표준 버전입니다.HTML 요소 (Element)1. 태그의 구조 HTML 코드는 대부분 내용 형식으로 작성됨.Opening tag + Content + Closing tag = Element(요소)제목문단 2. 요소의 중첩하나의 요소 안에 또 다른 요소가 들어갈 수 있음 (내포 구조)문단 강조 굵게 3. 블록 레벨 요소 vs 인라인 요소 Block-level Element: 한 줄 전체 차지 → , , 등Inline Element: 같은 줄 안에 표시 → , , 등하나 둘 셋 문단 하나 4. 빈 요소 (Empty Element) 내용 없이 태그만 있는 요소. 닫는 태그 없음.태그..