분류 전체보기
-
9. Inheritance & CascadingFront-end/CSS3 2020. 6. 6. 15:59
/*property Inherit*/ /*width/height no*/ /*margin no*/ /*padding no*/ /*border no*/ /*box-sizing no*/ /*display no*/ /*visibility yes*/ /*opacity yes*/ /*background no*/ /*font yes*/ /*color yes*/ /*line-height yes*/ /*text-align yes*/ /*vertical-align no*/ /*text-decoration no*/ /*white-space yes*/ /*position no*/ /*top/right/bottom/leftno*/ /*z-index no*/ /*overflow no*/ /*float no*/ /*Cascadi..
-
8. FloatFront-end/CSS3 2020. 6. 6. 15:59
/*float 프로퍼티는 주로 layout 을 구성하기 위해 사용되는 핵심 기술이다. layout 의 가장 큰 목적은 1개 이상의 요소를 원하는 위치에 정렬시키는 것이다.*/ img { float: left; margin-right: 10px; } /**/ /* */ /*be bve be */ /**/ /*텍스트로 이미지 주위를 감싸는 형태*/ /*float 프로퍼티는 해당 요소를 다음 요소 위에 떠 있게(부유하게) 한다. 여기서 떠 있다(float)는 의미는 요소가 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것이다. float 프로퍼티를 사용할 때 요소의 위치를 고정시키는 position 프로퍼티의 absolute 를 사용하면 안된다.*/ /*프로퍼티값Descri..
-
7. PositionFront-end/CSS3 2020. 6. 6. 15:58
.parent { width: 150px; height: 150px; background: #bcbcbc; border: 1px solid #bcbcbc; } .static-box { position: static; background: #2E303D; color: #e55c3c; font-weight: bold; text-align: center; line-height: 150px; /*기본적인 요소의 배치 순서에 따라 위에서 아래로, 왼쪽에서 오른쪽으로 순서에 따라 배치되며 */ /*부모 요소 내에 자식 요소로서 존재할 때는 부모 요소의 위치를 기준으로 배치된다.*/ /*기본적으로 이 값을 지정할 일은 없지만 이미 설정된 position 을 무력화하기 위해 사용될 수 있다.*/ /*좌표 프로퍼티(to..
-
6. Font & TextFront-end/CSS3 2020. 6. 6. 15:58
.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; } /*폰트는 여러 개를 동시에 지정이 가능하다. */ /*첫번째 지정한 폰트가 클라이언트 컴퓨터에 설치되어 있지 않은 경우, 다음에 지정된 폰트를 적용한다. */ /*따라서 마지막에 지정하는 폰트는 대부분의 OS에 기본적으로 설치되어 있는 */ /*generic-family 폰트(Serif, Sans-serif, Mono space)를 지정하는 것이 일반적이다.*/ /*폰트명은 따옴표로 감싸주며 폰트명이 한단어인 경우는 따옴표로 감싸주지 않아도 ..
-
5. BackgroundFront-end/CSS3 2020. 6. 6. 15:58
body { background: url("http://poiemaweb.com/img/bg/dot.png") repeat-y; /*background-image: url("http://poiemaweb.com/img/bg/dot.png");*/ /*background-repeat: repeat-y;*/ /*no-repeat: 반복하지 않음.*/ } body { background: url("../items/auto(1).jpg"), url("../items/auto(2).jpg") no-repeat, repeat; /*복수개의 이미지를 설정할 경우, 먼저 설정된 이미지 전면에 출력됨*/ /*auto(2) 이미지 위에 auto(1)*/ } .bg { background-size: 700px 500px; ..
-
4. DisplayFront-end/CSS3 2020. 6. 6. 15:57
/*display 프로퍼티는 layout 정의에 자주 사용되는 중요한 프로퍼티이다.*/ /*block*/ /*inline*/ /*inline-block*/ /*none*/ /*display 프로퍼티는 상속되지 않는다.*/ p { display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; } /*항상 새로운 라인에서 시작한다.*/ /*화면 크기 전체의 가로폭을 차지한다. (width: 100%)*/ /*width, height, margin, padding 프로퍼티 지정이 가능하다.*/ /*block 레벨 요소 내에 inline 레벨 요소를 포함할..
-
3. Box ModelFront-end/CSS3 2020. 6. 6. 15:57
/*Margin : 테두리(Border) 바깥에 위치하는 요소의 외부 여백 영역이다. margin 프로퍼티 값은 마진 영역의 두께를 의미한다. 기본적으로 투명(transparent)하며 배경색을 지정할 수 없다.*/ /*Border : 테두리 영역으로 border 프로퍼티 값은 테두리의 두께를 의미한다.*/ /*Padding : 테두리(Border) 안쪽에 위치하는 요소의 내부 여백 영역이다. padding 프로퍼티 값은 패딩 영역의 두께를 의미하며 기본색은 투명(transparent)이다. 요소에 적용된 배경의 컬러, 이미지는 패딩 영역까지 적용된다.*/ /*Content : 요소의 텍스트나 이미지 등의 실제 내용이 위치하는 영역이다. width, height 프로퍼티를 갖는다.*/ div { /* 배..
-
2. UnitsFront-end/CSS3 2020. 6. 6. 15:56
/*대부분의 브라우저는 1px을 1/96인치의 절대단위로 인식*/ body { text-align: center; } div { font-size: 14px; font-weight: bold; padding: 2em; /* 14px * 2 = 28px */ background-color: rgba(255, 0, 0, 0.2); } body { font-size: 14px; text-align: center; } div { font-size: 120%; /* 14px * 1.2 = 16.8px*/ padding: 2em; /* 16.8px * 2 = 33.6px */ } body { font-size: 14px; text-align: center; } div { font-size: 1.2em; /* 14p..