[HTML 시작하기] #04 HTML 문서의 특수문자
·
Web Front/HTML
https://youtu.be/77PMoXpLHDk안녕하세요, 토스트 데브입니다! 지난 시간에는 HTML 문서의 기본 구조와 주석 작성 방법에 대해 알아보았죠? 오늘은 HTML 문서를 작성할 때 주의해야 하는 특수문자들에 대해 알아보겠습니다.왜 특수문자에 주의해야 할까?HTML에서는 일부 문자가 태그나 속성의 구분자로 사용되기 때문에, 콘텐츠로 직접 입력하면 문법 오류를 유발할 수 있습니다. 예를 들어 , " 같은 기호들은 HTML 태그의 시작과 끝, 속성 구분 등으로 사용되므로, 이 기호들을 실제 콘텐츠로 쓰고 싶을 때는 특수문자 코드로 변환해 주어야 합니다.HTML 특수문자 기본 구조HTML 특수문자는 다음과 같은 형식으로 작성합니다.&문자코드;시작 : &문자 코드 이름종료 : ;자주 쓰이는 특수문자..
[HTML 시작하기] #03 HTML 문서의 구조
·
Web Front/HTML
https://youtu.be/nb2BulbWTAY 안녕하세요, 토스트 데브입니다! 지난 시간에는 HTML 요소의 속성(Attribute)에 대해 알아보았는데요,이번 시간에는 웹 문서의 시작이 되는 HTML 문서의 구조에 대해 배워보겠습니다. 웹 페이지는 눈에 보이는 부분만큼이나, 눈에 보이지 않는 구조와 규칙이 굉장히 중요하답니다. 그럼 하나씩 함께 살펴볼까요?HTML5 선언 방식예전 HTML4나 XHTML 시대에는 아래와 같이 복잡한 선언이 필요했습니다.하지만 HTML5부터는 훨씬 간단해졌습니다!이 한 줄만으로도 “이 문서는 HTML5 문서입니다”라고 선언할 수 있게 되었죠.HTML 문서의 기본 골격HTML 문서는 기본적으로 html 요소 안에 head와 body 요소가 포함되는 구조입니다. ..
[HTML 시작하기] #02 HTML의 요소 속성(Attribute)
·
Web Front/HTML
안녕하세요, 토스트 데브입니다! 이전 시간에는 HTML의 요소(Element)와 태그의 구조에 대해 배웠는데요, 이번 시간에는 한 단계 더 나아가 HTML 요소에 작성되는 ‘속성(Attribute)’에 대해 알아보겠습니다. HTML을 제대로 다루기 위해서는 속성의 정확한 문법과 역할을 이해하는 것이 매우 중요합니다.HTML 속성(Attribute)이란?HTML 속성은 태그에 추가적인 정보를 부여할 수 있는 방식입니다. 요소 자체만으로는 부족한 설명이나 기능을 확장하기 위해 사용되죠.문단 태그의 선언과 종료위 코드에서 class="study"가 바로 속성입니다. 이 속성은 p 태그에 class라는 이름의 추가 정보를 부여한 것입니다. 속성 작성 규칙HTML 속성을 작성할 때에는 반드시 아래 규칙을 지켜야 ..
[코딩에 대하여] #05 프레임워크 vs 라이브러리에 대하여
·
알쓸신잡/코딩에 대하여
안녕하세요, 토스트 데브입니다.이전 시간에는 웹 개발에 대한 프론트엔드와 백엔드에 대해 살펴보았는데요, 오늘은 그 다음 단계로 "프레임워크”와 “라이브러리”에 대해 함께 알아보겠습니다.처음 개발을 시작하면 자주 듣게 되는 용어지만, 막상 “정확히 뭐야?”라고 물어보면 헷갈리는 경우도 많죠. 이번 포스팅을 통해 프레임워크와 라이브러리의 차이점, 그리고 웹 개발에서의 활용 예시까지 정리해드립니다.프레임워크(Framework)란?“소프트웨어 개발의 뼈대이자 구조.”프레임워크는 어떤 목적을 달성하기 위해 복잡한 문제를 해결할 수 있도록 미리 설계된 기본 구조입니다.건축을 예로 들면, 건물을 짓기 위한 철골 구조(골조공사) 같은 개념으로 이해하시면 됩니다. 즉, 하나하나 직접 코드를 다 짜지 않아도, 기초 골격을..
[HTML 시작하기] #01 HTML의 요소 (Element)
·
Web Front/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) 내용 없이 태그만 있는 요소. 닫는 태그 없음.태그..
[코딩에 대하여] #04 웹 개발과 프론트 엔드! 백엔드에 대하여
·
알쓸신잡/코딩에 대하여
웹 개발 입문 순서웹 개발이란? 웹사이트를 만들고 운영하는 전반적인 일.인터넷 또는 인트라넷에서 사용 가능한 웹사이트를 구축. 웹 개발에 사용되는 주요 언어HTML, CSS, JavaScript, PHP, JSP, ASP 등 웹 개발 언어의 분류 클라이언트 스크립트 언어 (Client-side)HTML, CSS, JavaScript프론트엔드 개발에 사용됨 (사용자와 직접 상호작용하는 UI 제작)서버 스크립트 언어 (Server-side)PHP, JSP, ASP백엔드 개발에 사용됨 (데이터 처리, 저장, 서버 관리 등) 프론트엔드 vs 백엔드 프론트엔드: 웹사이트의 외형/UI (사용자가 보는 부분)백엔드: 웹사이트의 내부 시스템/서버 처리 (데이터 관리 등) 웹 개발 입문 순서 HTML, CSS, Java..
[코딩에 대하여] #03 코딩을 위한 코드 에디터 무엇이 좋을까?
·
알쓸신잡/코딩에 대하여
안녕하세요 토스트 데브입니다.이번에는 코딩을 위한 코드 에디터 무엇을 쓰는 것이 좋을지에 대해 알아봅니다. 1. 과거의 코드에디터과거 코드를 작성하기 위해서는 윈도우의 기본 프로그램인 메모장을 사용하기도 하였고 다른 OS의 경우 Vi 에디터를 사용하기도 하였으며 그 외에도 EditPlus, 나모 웹에디터, Dreamweaver, Microsoft FrontPage, Adobe Brackets 등 다양한 문서 편집기를 사용하여 프로그램 코드를 작성하였습니다. 그러나 현재에는 프로그램을 개발 하는데에 필요한 편리한 기능이나 플러그인 등이 탑재되어 다양한 환경을 세팅 할 수 있는 코드 에디터들도 많이 늘어나다보니 조금 더 자신에게 잘 맞는 코드 에디터를 사용하는 추세입니다.그러면 추천하는 코드에디터 5가지에 ..
[코딩에 대하여] #02 코딩과 프로그래밍이란?
·
알쓸신잡/코딩에 대하여
안녕하세요 토스트 데브입니다. 이번에는 코딩과 프로그래밍이 무엇인지 알아보도록 하겠습니다.1. 이전의 코딩에 대한 인식이전에는 코딩을 하는 직종은 소프트웨어나 하드웨어에 설치되는 프로그램 등을 개발하는 프로그래머들이 하는 일이었습니다. 이전에는 전공자가 아닌 비 전공자라라면 너무나도 먼 미지의 영역으로 느꼈던 것 같습니다. 요즘 우리 삶에서 볼 수 있는 가전제품부터 시작하여 휴대폰, 노트북, 컴퓨터 심지어는 자동차와 같이 다양 곳곳에서 컴퓨터와 인공지능은 우리 삶에 많은 영향을 끼치고 있고 또한 발전하고 습니다.​이제는 꼭 프로그래밍을 하는 개발자가 아니더라도 어린 학생부터 성인까지 충분히 자기계발과 취미나 개발 분야가 아닌 곳에서도 본인의 업무 역량을 향상하기 위해서 코딩을 공부하는 시대가 도래하였습..
[코딩에 대하여] #01 AI 시대에 코딩을 배워야 하는 이유
·
알쓸신잡/코딩에 대하여
안녕하세요 토스트 데브입니다. 오늘은 AI 시대에 코딩을 배워야 하는 이유에 대해 알아보도록 하겠습니다. 1. 2025년 현재 AI의 발전과 IT 계열의 현 시장2025년 우리가 살아가고 있는 시대에는 AI가 하루가 다르게 빠르게 발전하고 있습니다.OpenAI의 ChatGPT, Microsoft의 Copilot, 최근 이슈가 많았던 중국의 Deepseek 등 다양한 AI가 발전하고 출시되고 빠르게 발전하고 있습니다.AI출현은 이미 수년 전부터 예상되고 예측했던 것과 같이 하루하루 빠르게 발전하고 일상과 업무에도 활용되는 일이 더욱더 많아지고 있습니다. AI 시대에 도래하면서 "앞으로 5~6년 뒤쯤이면 다양한 직종에서 90% 이상의 일자리가 인공지능에 대채될 가능성이 높다"는 조사도 최근에 발표 되었습니다..