본문 바로가기

Front-end/CSS3

 (18)
8. Float /*float 프로퍼티는 주로 layout 을 구성하기 위해 사용되는 핵심 기술이다. layout 의 가장 큰 목적은 1개 이상의 요소를 원하는 위치에 정렬시키는 것이다.*/ img { float: left; margin-right: 10px; } /**/ /* */ /*be bve be */ /**/ /*텍스트로 이미지 주위를 감싸는 형태*/ /*float 프로퍼티는 해당 요소를 다음 요소 위에 떠 있게(부유하게) 한다. 여기서 떠 있다(float)는 의미는 요소가 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것이다. float 프로퍼티를 사용할 때 요소의 위치를 고정시키는 position 프로퍼티의 absolute 를 사용하면 안된다.*/ /*프로퍼티값Descri..
7. Position .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 & Text .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. Background 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. Display /*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 Model /*Margin : 테두리(Border) 바깥에 위치하는 요소의 외부 여백 영역이다. margin 프로퍼티 값은 마진 영역의 두께를 의미한다. 기본적으로 투명(transparent)하며 배경색을 지정할 수 없다.*/ /*Border : 테두리 영역으로 border 프로퍼티 값은 테두리의 두께를 의미한다.*/ /*Padding : 테두리(Border) 안쪽에 위치하는 요소의 내부 여백 영역이다. padding 프로퍼티 값은 패딩 영역의 두께를 의미하며 기본색은 투명(transparent)이다. 요소에 적용된 배경의 컬러, 이미지는 패딩 영역까지 적용된다.*/ /*Content : 요소의 텍스트나 이미지 등의 실제 내용이 위치하는 영역이다. width, height 프로퍼티를 갖는다.*/ div { /* 배..
2. Units /*대부분의 브라우저는 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..
1. Selector /*셀렉터 {프로퍼티: 값; 프로퍼티: 값}*/ h1 { color: red; } p { color: blue; } /*복수개의 셀렉터를 연속하여 지정 가능*/ h1, p { color: red; } /*전체 셀렉터, HTML 문서 내의 모든 요소를 선택한다. head 요소도 포함된다.*/ * { color: red; } /*태그 셀렉터. 지정한 태그명을 가지는 요소를 선택한다.*/ /*ex) 로 선택된 모든 요소들이 포함된다.*/ p { color: red; } /*ID 셀렉터. 중복될 수 없는 id 어트리뷰트 값을 지정하고 일치하는 요소를 선택한다.*/ /*paragraph 1*/ /*paragraph 2*/ /*이때에 paragraph 1 만 빨간색으로 표시된다.*/ #p1 { color: red;..

티스토리툴바