코딩세상

CSS 애니메이션 - CSS는 애니메이션 효과를 적용하는 기능을 제공합니다. 이를 이용하면 콘텐츠나 요소들을 더욱 생동감 있게 만들 수 있습니다. 애니메이션을 적용하기 위해서는 다음과 같은 속성을 이용합니다. /* 애니메이션 속성 */ animation-name: move; /* 애니메이션 이름*/ animation-duration: 3s; /* 애니메이션 지속 시간 */ animation-timing-function: ease-in-out; /* 애니메이션의 타이밍 함수*/ animation-dealy: 1s; /* 애니메이션 시작까지의 지연 시간 */ animation-iteration-count: infinite; /* 애니메이션 반복 횟수 */ animation-direction: alternat..

블록(block) - 블록은 한 줄에 하나의 요소만 배치되는 태그를 의미한다. 대표적인 블록 요소로는 div, h1~h6, p, ul, li 등이 있다. 예시: 블록 한 줄에 하나의 요소만 배치됩니다. 인라인(inline)요소와 인라인 블록(inline-block) - 한 줄에 여러 요소가 배치될 수 있는 태그를 의미한다. 이런 인라인 요소는 HTML 문서에서 span, a, img, input 등과 같은 태그들이 해당된다. 기본적으로 태그가 필요한 영역만 차지하기 때문에 높이와 너비를 임의로 조정할 수 없다. 예시: 인라인블록 링크 display 및 border 속성 1) display 속성 - display 속성은 요소를 블록과 인라인 요소 중 어떤 형태로 처리할지를 정의한다. 요소별로 기정의된 속성..

CSS(Cascading Style Sheets) - HTML과 함께 웹 페이지의 디자인을 구성하는 언어 CSS의 기본구조 -선택자(selector)와 선언부(declaration block)로 이루어져 있다. 선택자는 스타일을 적용할 HTML요소를 지정하고, 선언부는 선택한 요소에 적용할 스타일 속성과 값을 지정한다. selector{ property: value; property: value; } 선택자 CSS에서 사용되는 선택자는 여러가지가 있으며, 기본적인 선택자로는 전체 선택자, 태그 선택자, 클래스 선택자, ID 선택자 등이 있다. 1) 전체 선택자 전체 선택자는 모든 HTML요소에 스타일을 적용. 선택자로 (*)을 사용한다. * { property: value; } 2) 태그 선택자 태그 선..

HTML(Hyper Text Markup Language) - 웹 페이지를 만드는 데 사용되는 기본적인 마크업 언어이다. HTML 문서의 구조 DOCTYPE html> 문서 제목 문서내용 : 문서 형식을 HTML5로 지정 html : HTML 문서의 최상위 요소 head : 문서의 메타데이터를 포함 title: 문서의 제목을 지정 body: 문서의 본문을 포함 HTML 요소 HTML은 다양한 요소(element)로 구성되며, 각 요소는 태그(tag)로 표시된다. 1) 링크 요소 링크 텍스트 a : 링크 요소. href 속성을 이용해 링크 주소를 지정할 수 있다. 2) 이미지 요소 img : 이미지 요소. src속성을 이용해 이미지 주소를 지정, alt 속성을 이용해 대체 택스트 지정 #출처 엘리스 AI ..

웹 표준 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 동일하게 구현됨과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법 웹 표준 준수 이유 모든 사용자들이 브라우저의 종류나 버전에 상관 없이 모든 사용자들이 동일한 웹사이트를 볼 수 있도록 하기 위함. 웹 표준 장점 1. 수정 및 운영관리 용이: 콘텐츠의 올바른 구조화와 CSS로 시각표현을 통일하여 제어하게 되어 페이지 제작의 부담 감소 및 관리용이 2. 접근성 향상: 웹 표준을 이용해 작성한 문서는 다양한 브라우징 환경에 대응이 가능하며 휴대폰, PDA에서도 정상적인작동 및 장애인 지원용 프로그램에도 도움이 되므로 사용자..