목록2024/06 (49)
연습장
https://poiemaweb.com/css3-float CSS3 Float | PoiemaWebfloat 프로퍼티는 주로 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법이다. flexbox 레이아웃를 사용한다면 더욱 간단하게 정렬을 구현할 수도 있지만 flexbox 레poiemaweb.com float 프로퍼티는 주로 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법이다. float 프로퍼티는 본래 아래 예제와 같이 이미지와 텍스트가 있을 때, 이미지 주위를 텍스트로 감싸기 위해 만들어진 것이다. style> img { float: left; margin-right: 10px; } style> flo..
https://poiemaweb.com/css3-position CSS3 Position | PoiemaWebposition 프로퍼티는 요소의 위치를 정의한다. top, bottom, left, right 프로퍼티와 함께 사용하여 위치를 지정한다.poiemaweb.com 1. position 프로퍼티 position 프로퍼티는 요소의 위치를 정의한다.static (기본위치)relative (상대위치)absolute (절대위치)fixed (고정위치)+ top, bottom, left, right 프로퍼티와 함께 사용하여 위치를 지정한다. 1. static은 기본값이며 이미 설정된 position을 무력화하기 위해 사용될 수 있다. 2. relative 기본 위치(static으로 지정되었을 때의 위치)를 기..
https://poiemaweb.com/css3-font-text 1. font-size 프로퍼티텍스트의 크기를 정의한다. style> .font-size-40 { font-size: 40px; } .font-size-2x { font-size: 2.0em; } .font-size-150ps { font-size: 150%; } .font-size-large { font-size: large; } style> 주로 px , em , % 를 사용해봤으나 small large 등은 처음들어보는것같다. 2. font-family 프로퍼티 폰트를 지정한다. 컴퓨터에 해당 폰트가 설치되어 있지 않으면 적용되지 않는다. font-family 폰트는 여러 개를 동시에 지정이 가능하다...
https://poiemaweb.com/css3-background CSS3 Background | PoiemaWebBackground 관련 프로퍼티는 해당 요소의 배경으로 이미지 또는 색상을 정의한다.poiemaweb.com 1. background-image 프로퍼티 요소에 배경 이미지를 지정한다. div {background-img : url("http:// ~~ .png"); } 2. background-repeat 프로퍼티 background-repeat : repeat // 반복 출력 , 기본값background-repeat : repeat-x // x축으로만 배경 이미지를 반복할 경우background-repeat : repeat-y // y축으로만 배경 이미지를 반복할 경우ba..
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..