안녕하세요, 토스트 데브입니다!지난 시간에는 네트워크와 네트워킹의 개념에 대해 배워보았는데요,오늘은 그 연장선에서 웹 개발에 꼭 필요한 IP 주소와 도메인 주소에 대해 간단하게 알아보겠습니다.IP란 무엇인가요?IP는 Internet Protocol(인터넷 프로토콜)의 줄임말입니다.인터넷에서 서로 다른 기기들이 정보를 주고받기 위한 통신 규칙(프로토콜)을 말합니다.운영체제도 다르고 기기 종류도 다른 컴퓨터, 스마트폰, 태블릿 등이 서로 소통할 수 있도록 만들어주는 기본 약속이죠.IP 주소란?IP 주소는 네트워크 상의 각 기기에 부여되는 고유 주소입니다.우리가 편지를 보낼 때 집 주소를 적는 것처럼, 기기 간 통신에서도 정확히 누구에게 정보를 보낼지 알려주는 식별자 역할을 합니다.IP 주소의 두 가지 체계1..

안녕하세요, 토스트 데브입니다!지난 시간에는 프레임워크와 라이브러리의 차이에 대해 알아보았습니다.이제 웹 개발을 본격적으로 배우기 전에 반드시 이해하고 넘어가야 할 개념이 있습니다. 바로 네트워크(Network) 와 네트워킹(Networking) 입니다.이 개념은 웹의 기본이자 서버와 클라이언트 구조를 이해하는 데에도 꼭 필요한 기초 지식이에요.지금부터 쉽게, 단계별로 함께 알아보겠습니다!네트워크(Network)란?Net(그물) + Work(작업) = 그물처럼 연결된 통신망네트워크는 간단히 말해 컴퓨터 간에 데이터를 주고받기 위한 연결 구조입니다.즉, 내가 쓰는 컴퓨터와 다른 사람의 컴퓨터가 통신 기술을 통해 연결된 상태를 말합니다.네트워크는 어디에 쓰일까요? 이메일 송수신웹사이트 접속게임 서버 접속클라..

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

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

https://youtu.be/nb2BulbWTAY 안녕하세요, 토스트 데브입니다! 지난 시간에는 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 속성을 작성할 때에는 반드시 아래 규칙을 지켜야 ..

안녕하세요, 토스트 데브입니다.이전 시간에는 웹 개발에 대한 프론트엔드와 백엔드에 대해 살펴보았는데요, 오늘은 그 다음 단계로 "프레임워크”와 “라이브러리”에 대해 함께 알아보겠습니다.처음 개발을 시작하면 자주 듣게 되는 용어지만, 막상 “정확히 뭐야?”라고 물어보면 헷갈리는 경우도 많죠. 이번 포스팅을 통해 프레임워크와 라이브러리의 차이점, 그리고 웹 개발에서의 활용 예시까지 정리해드립니다.프레임워크(Framework)란?“소프트웨어 개발의 뼈대이자 구조.”프레임워크는 어떤 목적을 달성하기 위해 복잡한 문제를 해결할 수 있도록 미리 설계된 기본 구조입니다.건축을 예로 들면, 건물을 짓기 위한 철골 구조(골조공사) 같은 개념으로 이해하시면 됩니다. 즉, 하나하나 직접 코드를 다 짜지 않아도, 기초 골격을..

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) 내용 없이 태그만 있는 요소. 닫는 태그 없음.태그..