[HTML] HTML 플렉스 박스와 그리드 레이아웃을 사용한 레이아웃 구성방법

1. 플렉스 박스(flexbox) HTML에서 플렉스박스(flexbox는) 컨테이너 내의 아이템을 배치하는 데 유용한 CSS 레이아웃 모델로, 주로 1차원 레이아웃을 구성할 때 사용됩니다. 플렉스 박스의 기본 사용법은 아래와 같습니다.display: flex를 사용해 플렉스 컨테이너를 설정justify-content: space-between 속성으로 아이템간 여백을 조정align-items: center로 수직 정렬을 조정  See the Pen flexbox by Koras02 (@koras02-the-lessful) on CodePen.">See the Pen flexbox by Koras02 (@koras02-the-lessful) on CodePen. 2. CSS 그리드 (Grid) 레..

• format_list_bulleted HTML
• · 2025. 2. 26.
• textsms

[HTML] Canvas와 SVG의 차이점

1. HTML 캔버스(Canvas) 예제HTML의 캔버스  요소를 사용해 비트맵 이미지를 그릴 수 있는 2D 그래픽 API 입니다. 주로 Javascript를 통해서 동적으로 그래픽을 렌터링합니다. 사용 방법:HTML에  요소 추가: HTML 문서에 태그를 추가해. width와 height 속성으로 크기를 지정하고, style 속성으로 테두리를 설정할 수 있습니다.Javascript로 그래픽 그리기: JavaScript를 사용해 캔버스의 2D 컨택스트를 가져와, 다양한 메소드를 사용해 그래픽을 그립니다.기능 및 옵션:2D 컨텍스트: getContext('2d') 메소드로 2D 렌더링 컨텍스트를 얻음선 그리기: beginPath(), moveTo(x,  y), lineTo(x,  y), stroke() ..

• format_list_bulleted HTML
• · 2025. 2. 16.
• textsms

[HTML] HTML과 XHTML의 차이점

1. HTML과 XHTML 이란?HTML(HyperText Markup Language)과 XHTML(eXtensible HyperText Markup Langauge)는 웹 페이지를 구성하기 위한 마크업 언어로  서로 다른 차이점을 가지고 있습니다.문법 규칙HTML: 유연한 문법을 가지고 있어 태그를 닫지 않거나 대소문자를 구분하지 않아도 됨예: 태그 또는 , 태그는 닫지 않아도 됨XHTML: XML 기반언어로, 더욱 엄격한 문법을 요구함, 모든 태그를 반드시 닫아야 하고, 대소문자를 구분함예: , 반드시 태그르 썻다면 닫아야함DOCTYPE 선언HTML: 다양한 DOCTYPE을 사용할 수 있으며, HTML5에서는 을 사용XHTML: 반드시 XHTML 1.0 또는 XHTML 1.1의 DOCTYPE을..

• format_list_bulleted HTML
• · 2025. 2. 16.
• textsms

[HTML] 6.HTML nav, ol, option, span, strong

1. HTML nav HTML 태그는 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 태크로 메뉴, 목차, 색인을 구현하는 태그입니다. 분류 전체보기 웹/HTML 1.HTML의 탄생 1.HTML의 탄생 HTML은 1981년 하이퍼 텍스트 마크업 언어로 탄생한 언어다 2.HTML Ol 요소 HTML 요소는 목록을 정렬할때 사용합니다. 보통 숫자 목록으로 표현합니다. Number1 li Number2 li Number3 li Number4 li Number5 li last station 로마 숫자로도 표기할 수 있습니다. Construct Style Forme..

• format_list_bulleted HTML
• · 2025. 2. 1.
• textsms

[HTML] 5.HTML label 요소, legend, 리스트, 링크 스타일,메뉴

1. HTML Label html label요소는 사용자 인터페이스 항목의 설명을 나타냅니다. Do you like cherry🍒? Do you like Apple? 🍎  을  요소와 연결하면 몇가지 이점이 있습니다.label 텍스트는 텍스트 입력과 시각적 관련이 있으며 프로그래밍적으로도 관련있다. 예를 들어 화면리더기(screenreader)는  폼 입력(form input)에 label을 사용자가 입력해야하는 텍스트가 무엇인지 쉽게 이해할 수 있게 만들어 준다관련 label을 클릭해 input 자체 초점을 맞추거나 활성화 시킬 수 있다. label을 input 요소와 연관시키려면, input에 id 속성을 넣어줘야합니다. 그 다음 label에 id와 같은 값의 for 속성을 ..

• format_list_bulleted HTML
• · 2025. 2. 1.
• textsms

[HTML] 4.HTML form 요소 , dl, 텍스트 강세, 제목, 헤더, footer

1. HTML dl HTML의 dl 요소는 문장의 설명을 나타낼때 사용합니다. 은 로 표기한 용어와 요소로 표기한 그룹의 목록을 감싸서 설명 목록을 만들어냅니다.  Html 이란: 개발자 팀 버너스리 개발 년도 1990 언어 마크업 언어  접근성 고려 각각의 스크린 리더는 을 다르게 표현합니다. 총 아이템 개수, 용어/정의 컨텍스트 및 탐색 방법등을 다르게 노출합니다. 이러한 차이가 반드시 버그를 일으키는게 아닙니다.  Chrome 프리웨어 웹 브라우저이며 웹킷 엔진을 애플이 복제하여 만든 블랭크 엔진을 채용  복수 용어와 단일 정의 Chrome..

• format_list_bulleted HTML
• · 2025. 1. 29.
• textsms