Dev10 TCP/IP란? TCP/IP는 패킷 통신 방식의 인터넷 프로토콜인 IP(인터넷 프로토콜)와 전송 조절 프로토콜인 TCP(전송 제어 프로토콜)로 이루어져 있으며, IP는 패킷 전달 여부를 보증하지 않고, 패킷을 보낸 순서와 받는 순서가 다를 수 있습니다. (unreliable datagram service) TCP는 IP 위에서 동작하는 프로토콜로, 데이터의 전달을 보증하고 보낸 순서대로 받게 해주며, HTTP(HyperText Transfer Protocol), FTP(File Transfer Protocol), SMTP(Simple Mail Transfer Protocol) 등 TCP를 기반으로 한 많은 수의 애플리케이션 프로토콜들이 IP 위에서 동작하기 때문에, 묶어서 TCP/IP라 부르기도 합니다. 조금 더 간략히.. 2023. 11. 17. HTML 최적화를 통한 웹 사이트 성능 향상 방법 소개 웹 사이트의 성공은 방문자에게 제공하는 경험에 의해 크게 좌우됩니다. 성능 최적화는 사용자 경험을 향상시키는 중요한 요소 중 하나입니다. 빠른 로딩 시간은 사용자의 만족도를 높이고 검색 엔진 결과에서 더 높은 순위를 차지할 수 있게 합니다. HTML은 웹 페이지의 구조를 정의하기 때문에 성능에 영향을 미치는 요소로 아래에는 간단하게 HTML을 최적화하여 웹 사이트의 성능을 개선할 수 있는 몇 가지 방법입니다. 성능 향상 방법 불필요한 태그 및 주석 제거 코드 내에 쓸모없는 태그와 주석이 많으면 HTML 문서의 크기가 커지게 되며, 이는 로딩 시간에 부정적인 영향을 미칩니다. 사용하지 않는 코드를 정기적으로 검토하고 정리하여 문서를 간결하게 유지하는것이 좋습니다. 이것은 필요한 내용입니다. 이미지 최.. 2023. 11. 12. CSS 방법론이란? OOCSS, BEM, SAMCSS, Atomic CSS 소개 CSS방법론들은 모듈성, 확장성, 유지보수성을 고려한 설계 방법들을 제안하고 있습니다. 다양한 CSS방법론이 있지만 CSS방법론에서 추구하고자 하는 모습은 아래와 같습니다. 코드의 재사용성을 높이자. 쉽게 유지보수 하자. 확장 가능하게 하자. 클래스명 만으로도 무슨 의미인지 예측 가능하도록 하자. 이는 CSS의 규모가 확장되고 프로젝트의 규모가 커질수록 관리하기 어려운 CSS를 관리하기 수월하게 하고자 하는 노력이며, 방법론은 상황에 맞춰 다양한 모습으로 변형될 수 있으며 유연하게 여러 방법론을 함께 사용할 수 있습니다. OOCSS(Object Oriented CSS) OOCSS는 Object Oriented CSS의 약자이며, 모듈 방식으로 다양한 스타일 규칙 전체에서 동일한 속성의 중복을 줄이는.. 2023. 11. 7. 이미지 및 멀티미디어 콘텐츠를 삽입하는 HTML 작성법 소개 이미지 및 멀티미디어 콘텐츠 삽입을 위한 태그(Image and multimedia Elements)는 이미지, 오디오, 비디오와 같은 다양한 멀티미디어 리소스를 지원하며, 멀티미디어 접근성을 보장합니다. 이미지 및 멀티미디어 콘텐츠를 위한 HTML 작성법 태그 태그는 문서의 이미지를 나타냅니다. 태그는 필수 속성으로 src을 가지며, src 속성은 이미지의 경로(URL)을 나타냅니다. alt속성은 이미지를 설명하는 대체 텍스트를 정의합니다. alt 속성은 이미지 URL이 잘못되었거나 브라우저내 지원되는 형식이 아닌 경우 이미지를 대체하여 보여줄 텍스트이며, 이는 웹페에지 내 이미지를 직접적으로 볼 수 없는 사용자 혹은 봇에 이미지에 대한 정보를 제공해주는 역할을 수행합니다. 태그 태그는 태그와 함.. 2023. 11. 4. 웹 표준과 웹 접근성을 위한 HTML 작성법 웹 표준이란? 웹 표준은 웹 사이트를 만들 때 따르는 규칙과 권장 사항의 모음입니다. 이러한 규칙과 권장 사항은 웹 사이트가 모든 사용자에게 일관된 경험을 제공하고, 웹 사이트가 여러 플랫폼 및 브라우저에서 일관되게 동작하도록 보장합니다. 예를 들어, HTML5는 최신 웹 표준이며, 웹 페이지의 구조를 정의하고, CSS는 웹 페이지의 디자인 및 레이아웃을 관리하는 데 사용됩니다. 웹 표준을 준수하면 모든 사용자가 웹 사이트를 쉽게 접근하고, 검색 엔진에서도 좀 더 잘 색인화될 수 있습니다. 웹 접근성이란? 웹 접근성은 모든 사람들이 웹 사이트에 접근하여 정보를 얻고 상호작용할 수 있도록 보장하는 것을 의미합니다. 이것은 장애가 있는 사람들, 고령자, 저시력 또는 색약인 사람, 모바일 기기를 사용하는 사람.. 2023. 11. 2. CSS(Cascading Style Sheets)란 무엇인가? CSS란? CSS는 문서가 사용자에게 표시되는 방식 (스타일, 레이아웃 등)을 지정하는 언어입니다. 문서는 대개 MarkUp언어를 사용하여 구조화된 텍스트 파일로, HTML이 가장 일반적인 MarkUp언어이지만 SVG또는 XML과 같은 다른 MarkUp언어도 사용됩니다. 사용자에게 문서를 제시한다는 것은 사용자를 위해 유용한 양식으로 변환한다는 것을 의미하며, Firefox, Chrome 등 브라우저는 모니터, 프로젝터 또는 프린터에서 시각적으로 문서를 표시하도록 설계되었습니다. CSS 규칙 CSS는 규칙 기반 언어입니다. 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하며, 다음과 같은 규칙을 가지고 있습니다. HTML 콘텐츠가 표시되는 방식을 업데이트 하도록 설정.. 2023. 10. 31. 웹 폼 디자인과 유효성 검사를 위한 HTML 작성법 폼(Form)이란? 폼은 웹사이트나 웹 애플리케이션에서 사용자로부터 정보를 수집하는 데 사용되는 요소입니다. 폼은 사용자와 상호작용할 수 있는 다양한 입력 필드, 버튼 및 선택 옵션 등을 포함할 수 있습니다. 이러한 폼을 제공하는 것은 사용자 경험을 개선하고 유효성 검사를 통해 올바른 데이터를 수집하는 데 도움이 됩니다. 주요 폼 태그 태그 폼의 시작을 나타내는 태그로, 모든 입력 요소는 이 태그 안에 위치해야 합니다. action 속성을 사용하여 폼 데이터를 서버로 전송할 URL을 지정할 수 있습니다. method 속성을 사용하여 폼 데이터를 전송하는 HTTP 메소드를 지정할 수 있습니다. 일반적으로는 "GET" 또는 "POST"를 사용합니다. Name: Save Name: Save Title Sele.. 2023. 10. 31. 시맨틱 마크업을 위한 HTML 작성법 시맨틱 마크업이란? 시맨틱(Semantic)이란 "의미론적인"의 뜻을 가지며 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말합니다. 시맨틱 마크업이란 웹페이지의 의미를 전달하기 위해 구조적으로 의미를 지닌 마크업을 뜻합니다. 이는 곧 검색엔진최적화(SEO)에도 영향을 미치며, 웹 페이지의 가독성과 접근성을 높일 수 있어 전체적인 웹 페이지의 정보전달을 꾀할 수 있습니다. 시맨틱 마크업 예시 웹 페이지의 머리말을 나타냅니다. 사이트 제목, 로고, 주요 내비게이션 등을 포함할 수 있습니다. 웹사이트 제목 메뉴1 메뉴2 메뉴3 웹 페이지의 주요 내비게이션을 나타냅니다. 메뉴1 메뉴2 메뉴3 문서의 주요 섹션을 나타냅니다. 각 섹션은 일반적으로 제목( ~ )을 가지며 뉴스, 블로그 게시물 등과.. 2023. 10. 30. 검색엔진최적화(SEO)를 위한 HTML 마크업 기법 SEO란? SEO(검색 엔진 최적화)는 웹사이트가 검색 엔진에서 상위에 노출될 수 있도록 최적화하는 과정을 말합니다. 비즈니스 유형이 어떤 것이든 SEO는 가장 중요한 마케팅 유형 중 하나로, 검색엔진최적화를 통해 서비스 유입을 이끌어 낼 수 있습니다. SEO가 필요한 이유 고객이 검색엔진(구글 or 네이버 등)에서 검색을 할 경우, 검색결과에서 최대 3페이지 정도만 탐색을 하고 이후 이탈한다고 합니다. 통계에 따르면, 첫페이지의 검색이탈율은 거의 92%에 달하고 3페이지까지 클릭해보는 고객은 겨우 3.7%에 불과하다 합니다. 그렇기에 대부분 1페이지에 목표하는 비즈니스가 검색 결과에 나오지 않으면 검색을 통한 사용자 유입 기회가 없다고 생각해도 무방합니다. 대부분의 검색량이 높은 키워드는 경쟁페이지수가.. 2023. 10. 29. HTML 이란? HTML이란? HTML은 HyperText Markup Language의 약자로, 웹 페이지를 구성하는 표준 마크업 언어입니다. HTML은 웹 브라우저에게 웹 페이지의 구조와 내용을 알려주는 역할을 합니다. 간단하게 말해서, 웹 브라우저는 HTML 문서를 읽어들여서 웹 페이지를 표시하게 됩니다. HTML은 기본적으로 태그(tag)라고 불리는 요소로 구성되어 있습니다. 각각의 태그는 각자의 용도가 있으며, 웹 페이지의 구조와 내용을 정의하는 데 사용됩니다. 예를 들어, ``, ``, ``, ``와 같은 태그는 각각 HTML 문서의 시작, 타이틀 등을 정의하는 데 사용됩니다. HTML 특징 태그는 ``으로 시작해서 ``으로 끝납니다. 시작 태그와 끝 태그로 둘러싸인 부분이 해당 태그의 콘텐츠(content).. 2023. 10. 25. 이전 1 다음
