목록CSS3 (23)
연습장
https://poiemaweb.com/css3-shadow CSS3 Shadow | PoiemaWeb텍스트나 요소에 그림자(Shadow) 효과를 부여하기 위한 프로퍼티를 선언한다.poiemaweb.com 텍스트나 요소에 그림자(Shadow) 효과를 부여하기 위한 프로퍼티를 선언한다. 1. text-shadow 텍스트에 그림자 효과를 부여하는 프로퍼티이다. 3종류의 그림자를 한번에 넣는 코드 선택자 { text-shadow: Horizontal-offset Vertical-offset Blur-Radius Shadow-Color; } h1:nth-child(7) { color: white; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px dar..
https://poiemaweb.com/css3-vendor-prefix CSS3 Vendor Prefix | PoiemaWebCSS3 표준으로 확정되기 이전 또는 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위해서는 벤더 프리픽스를 사용하여야 한다.poiemaweb.com 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때이전 버전의 웹 브라우저에 알려주기 위해 사용하는 접두사(prefix) * { -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select..
https://poiemaweb.com/css3-inheritance-cascading CSS3 Inheritance & Cascading | PoiemaWeb상속이란 상위(부모, 조상) 요소에 적용된 프로퍼티를 하위(자식, 자손) 요소가 물려 받는 것을 의미한다. 상속 기능이 없다면 각 요소의 Rule set에 프로퍼티를 매번 각각 지정해야 한다. 하지만poiemaweb.com 1. 상속(Inheritance) 상속이란 상위(부모, 조상) 요소에 적용된 프로퍼티를 하위(자식, 자손) 요소가 물려 받는 것을 의미한다. 상속 기능이 없다면 각 요소의 Rule set에 프로퍼티를 매번 각각 지정해야 한다. 하지만 모든 프로퍼티가 상속되는 것은 아니다. 프로퍼티 중에는 상속이 되는 것과 되지 않는 것이 있..
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 모니터..