연습장

https://poiemaweb.com/css3-display CSS3 Display | PoiemaWebdisplay 프로퍼티는 layout 정의에 자주 사용되는 중요한 프로퍼티이다.poiemaweb.com    1. display 프로퍼티 block : block 특성을 가지는 요소(block 레벨 요소)로 지정 inline : inline 특성을 가지는 요소(inline 레벨 요소)로 지정 inline-block : inline-block 특성을 가지는 요소(inline-block 레벨 요소)로 지정 none : 해당 요소를 화면에 표시하지 않는다 (공간조차 사라진다) 1.1 block 레벨 요소.항상 새로운 라인에서 시작한다.화면 크기 전체의 가로폭을 차지한다. (width: 100%)width,..

https://poiemaweb.com/css3-box-model CSS3 Box Model | PoiemaWeb모든 HTML 요소는 Box 형태의 영역을 가지고 있다. Box 형태란 물론 사각형을 의미한다. 이 Box는 마진(Margin), 테두리(Border), 패딩(Padding), 콘텐츠(Contents)로 구성된다. 브라우저는 박스 모델의 크기(dimepoiemaweb.com  모든 HTML 요소는 Box 형태의 영역을 가지고 있다이 Box는 콘텐트(Content), 패딩(Padding), 테두리(Border), 마진(Margin)로 구성된다.  브라우저는 박스 모델의 크기(dimension)와 프로퍼티(색, 배경, 모양 등), 위치를 근거로 하여 렌더링을 실행한다.웹디자인은 콘텐츠를 담을 박스..

https://poiemaweb.com/css3-units CSS 프로퍼티에는 키워드, 크기 단위, 색상 표현 단위 등의 특정 단위를 갖는 값을 지정한다.  1. 키워드 각 프로퍼티에 따라 사용할 수 있는 키워드가 존재한다. 예를 들어 display 프로퍼티의 값으로 사용할 수 있는 키워드는 block, inline, inline-block, none이 있다.  2. 크기 단위CSS에서 사용하는 대표적인 크기 단위는 px, em, %이다.px은 절대값이고 em, %는 상대값이다.대부분 브라우저의 폰트 사이즈 기본값은 16px, 1em, 100%이다.프로퍼티 값이 0인 경우, 단위를 생략할 수 있다.  2.1 px px은 픽셀(화소) 단위이다. 1px은 화소 1개 크기를 의미한다.  22인치 LCD 모니터..

style을 적용하고자하는 HTML 요소를 셀렉터로 특정하고 선택된 요소에 스타일을 정의하는 것이다. 복수개의 셀렉터를 연속하여 지정할 수 있으며 쉼표( , )로 구분한다. h1, p { color: red; } 1. 전체 셀렉터 (Universal Selector)* : HTML 문서 내의 모든 요소를 선택한다. html 요소를 포함한 모든 요소가 선택된다. (head 요소도 포함된다) style>    * { color: red; }    style> 2. 태그 셀렉터 (Type Selector)태그명 :  지정된 태그명을 가지는 요소를 선택한다. style>    p { color: red; }   style> 3. ID 셀렉터 (ID Selector)#id 어트리뷰트 값 :  id 어트리뷰트 값을..

https://poiemaweb.com/css3-syntax CSS3 Syntax | PoiemaWebCSS(Cascading Style Sheets)는 HTML이나 XML과 같은 구조화 된 문서(Document)를 화면, 종이 등에 어떻게 렌더링할 것인지를 정의하기 위한 언어이다. 즉, CSS는 HTML의 각 요소(Element)의 style(design, layout etc)을poiemaweb.com  HTML5 이전 버전의 HTML에는 style을 컨트롤할 수 있는 태그(font, center)가 존재하여 CSS가 없이도 어느 정도의 스타일 표현이 가능하였으나 정보와 구조를 담당하는 HTML의 본연의 역할과 동떨어진 기능까지 추가됨으로서 복잡하고 혼란스러운 언어가 되어 버렸다.  HTML5에서는 H..

모듈화와 선택적 구현:CSS3: CSS3는 여러 모듈로 나누어져 있어서 각 모듈을 독립적으로 구현할 수 있습니다. 이는 브라우저 제작자들이 필요한 기능을 선택적으로 구현할 수 있게 합니다. 예를 들어, 그림자 효과를 가진 요소나 애니메이션을 지원하는 것처럼 선택적으로 적용할 수 있습니다.CSS2: CSS2는 단일 문서로 구성되어 있어서, 한 번에 모든 기능을 구현해야 했습니다. 이는 일부 브라우저에서는 지원되지 않는 기능이 있을 수 있음을 의미합니다.모듈화: CSS3는 여러 개별 모듈로 나누어져 있습니다. 예를 들어, 그림자 효과를 추가하는 CSS 속성은 하나의 모듈로 간주됩니다. 각 모듈은 특정 기능 또는 스타일을 담당하며, 서로 독립적으로 작동할 수 있습니다.선택적 구현: 브라우저 제작자들은 CSS3..

브라우저란? 웹 브라우저는 인터넷을 통해 웹 페이지를 검색하고 표시하는 소프트웨어입니다.사용자가 입력한 URL을 기반으로 웹 서버로부터 데이터를 요청하고, 이를 화면에 렌더링하여 사용자가 볼 수 있도록 합니다. ex) 모질라 파이어폭스, 구글 크롬, 인터넷 익스플로러/마이크로소프트 엣지, 오페라, 삼성 인터넷, 사파리, 브레이브  사용자 인터페이스대부분의 웹 브라우저는 주소 표시줄(주소창)과 검색 상자(검색 엔진 사용 시), 뒤로/앞으로 이동하는 버튼, 새로 고침 버튼, 북마크 기능 등의 사용자 인터페이스 요소를 제공합니다.   보안 기능많은 웹 브라우저들은 사용자 개인 정보 보호를 위한 다양한 보안 기능을 제공합니다. 이는 HTTPS 프로토콜 지원, 쿠키 관리, 팝업 차단, 위조 사이트 경고 등을 포함..

https://poiemaweb.com/html5-tag-structure HTML5 Tag - Structure | PoiemaWeb웹페이지의 레이아웃을 구성하기 위해 공간을 분할하는 태그poiemaweb.com   공간을 분할할 수 있는 태그는 div, span, table 등이 있는데, 과거에는 table 태그를 사용하여 레이아웃을 구성하기도 하였으나 모던 웹에서는 주로 div를 사용하여 레이아웃을 구성한다. 그런데 div 태그는 의미론적으로 어떠한 의미도 가지고 있지 않기 때문에 아래와 같이 HTML5에서 새롭게 추가된 시맨틱 태그를 사용하는 것이 더 나은 방법이나 IE 8버전 이하에서는 작동하지 않기 때문에 주의가 필요하다. header : 헤더를 의미한다nav : 내비게이션을 의미한다aside..

https://poiemaweb.com/html5-tag-forms HTML5 Tag - Forms | PoiemaWebform 태그는 사용자가 입력한 데이터를 수집하기 위해 사용되며 input, textarea, button, select, checkbox, radio button, submit button 등의 입력 양식 태그를 포함할 수 있다.poiemaweb.com form 태그는 사용자가 입력한 데이터를 수집하기 위해 사용되며 input, textarea, button, select, checkbox, radio button, submit button 등의 입력 양식 태그를 포함할 수 있다. GET과 POST는 HTTP 프로토콜을 이용해서 사용자 입력 데이터를 서버에 전달하는 방식을 나타내며 H..

https://poiemaweb.com/html5-tag-image-multimedia HTML5 Tag - Image & Multimedia | PoiemaWeb이미지의 표현과 동영상, 음악 등 멀티미디어를 지원하는 태그poiemaweb.com  img이미지를 삽입 attribute src : 이미지 파일 경로alt : 이미지 파일이 없을 경우 표시되는 문장width : 이미지의 너비 (CSS에서 지정하는 것이 일반적)height : 이미지의 높이  (CSS에서 지정하는 것이 일반적)    audioHTML5 에서 새롭게 추가된 태그이다. IE8 이하에서는 사용할 수 없다.src : 음악 파일 경로preload : 재생 전에 음악 파일을 모두 불러올 것인지 지정autoplay : 음악 파일을 자동의 재..