본문으로 바로가기

속성(Properties)과 값(Value)

category CSS 2019. 11. 19. 12:43

background-color

  • element의 배경색을 설정하는 속성
  • border와 padding을 포함한 영역을 칠합니다. margin 영역은 칠하지 않습니다.
{background-color: #cecece;}

 

color

  • 글자색을 지정
{color: white;}

 

 

position

html문서는 고정되어 있고 Web Browser Window를 움직여서 문서를 보는 것임.

html문서는 좌 상단이 기준점(0,0)임.

 

  • default값은 static이다.
  • 부모요소
  • 부모요소의 position값이 static일 경우, 자식요소의 position은 동작하지 않음.
value 설명
static

기본값. 구성요소는 문서 흐름에서 나타나는 순서대로 렌더링함
(문서기준으로 정적인 위치에 있음)
relative

relative는 원래 배치된 위치를 기준으로 상대좌표에 배치된다.
(본인의 원래 공간은 차지를 하고 있는 상태에서 상대좌표에 배치됨)

top, left를 이용해서 배치(음수값도 가능)

absolute

- 부모가 position속성을 갖고 있지 않은 경우 문서기준(절대좌표)기준으로 원하는 곳에 배치 가능

- 부모가 position 속성을 갖고 있는 경우
position:static 속성을 가지고 있지 않은 부모를 기준으로 움직임.

(부모 요소 중 position이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이됨.)

참고사항 : 자식요소가 absolute 값을 갖고 있고, 부모요소에 static, relative, absoute, fixed 값이 있을때 비교  https://www.w3schools.com/cssref/tryit.asp?filename=trycss_position2

fixed

web browser를 기준으로 고정된다.

 

<head>
    <title>Step07_Position2</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        .spacer{
            height: 500px;
            background-color: #999;
        }
        /* 
            relative는 원래 배치된 위치를 기준으로 상대좌표에 배치된다.
            top, left를 이용해서 배치(음수값도 가능)
        */
        #one{
            position: relative;
            top: 100px;
            left: 100px;
        }

        /* 
            body를 기준으로 절대 좌표(body의 원점)에 배치할 수 있다.
        */
        #two{
            position: absolute;
            top: 150px;
            left: 150px;
        }
        /* 
            fixed는 window를 기준으로 고정된 좌표에 배치된다.
        */
        #three{
            position: fixed;
            top: 200px;
            left: 200px;
        }
    
    </style>
</head>
<body>
    <div class="box">static</div>
    <div class="box" id="one">relative</div>
    <div class="spacer"></div>
    <div class="box" id="two">absolute</div>
    <p>lordsfsdfsdfsdfsdffsdsdfsd</p>
    <div class="box" id="three">fixed</div>
</body>

 

flow

  • float 속성은 요소가 어떻게 떠야 하는지를 명시한다.
  • Absolutely positioned elements ignores the float property!
  • Elements after a floating element will flow around it. To avoid this, use the clear property or the clearfix hack (see example at the bottom of this page).
  • 참고 : https://www.w3schools.com/cssref/pr_class_float.asp
값 설명
none The element does not float, (will be displayed just where it occurs in the text). This is default
left The element floats to the left of its container
right The element floats the right of its container

 

overflow

  • 속성은 콘텐츠가 요소의 상자를 오버플로우할 경우 어떤 일이 일어나야 하는지를 지정한다.
    예) 자식요소가 부모요소의 범위를 벗어났을때.
  • 이 속성은 요소의 내용이 너무 커서 특정 영역에 맞지 않을 때 내용을 클립할지 스크롤 막대를 추가할지 여부를 지정한다.
  • 오버플로 속성은 지정된 높이를 가진 블록 요소에서만 작동한다.
  • 참고 :  https://www.w3schools.com/cssref/pr_pos_overflow.asp
{overflow: hidden;}
값 설명
hidden 요소의 상자를 벗어 난 부분은 보이지 않게 된다.
scroll 요소의 상자를 벗어 난 부분은 보이지 않게 되고 스크롤막대가 추가된다.
auto 스크롤과 유사하지만 필요한 경우에만 스크롤 막대를 추가함
visible Default 값. contents가 요소의 상자 밖으로 렌더링됨
overflow-x
overflow-y		 x좌표와 y좌표를 각각 원하는 값으로 줄 수 있다.

 

clear

  • float 속성을 가진 요소가 clear 속성을 가진 선택자에 떠있지 못 하도록 한다.
{clear: left;}
값 설명
none Default. Allows floating elements on both sides
left No floating elements allowed on the left side
right No floating elements allowed on the right side
both No floating elements allowed on either the left or the right side

 

cursor

  • 선택자에 마우스 오버를 하면 커서의 모양이 바뀐다.
{cursor: pointer;}

 

transition

값 설명
property  transition 효과를 줄 CSS 속성의 이름
duration  transition 효과를 완료하는 데 걸리는 시간(초 또는 밀리초) 지정
timing-function specifies the speed curve of the transition effect. 
//문법
{transition: property duration timing-function}

//예시
{transition: left 1s ease-out;}

 

z-index

  • 요소의 스택 순서를 지정한다. (요소가 쌓이는 순서를 정한다.)
  • 스택 순서가 큰 요소는 항상 스택 순서가 낮은 요소 앞에 있다.
    (정해진 값은 없고 상대적인 크기가 중요함.)
  • z-인덱스는 position속성이 있는 요소에서만 작동함(position : static | relative | absoulte | fixed)
  • 부모요소를 극복할 수 없다.
    부모요소의 z-index가 작으면 자식요소의 z-index가 아무리 커도 위에 쌓일 수 없음

위의 그림에서 img1-child는 img2의 위에 쌓일 수 없음

이유 : img1의 z-index값이 img2의 z-index 값보다 작기때문

{z-index: 값;}

 

opacity

 

 

display

p::first-letter {  }
값 설명
none

- html문서객체에는 만들어져 있지만 공간도 차지하지 않고 보이지 않게 한다

- 주로 JavaScript와 함께 요소를 삭제하고 다시 생성하지 않고 숨기거나 표시하기 위해 사용된다.
inline

display를 inline 요소로 지정

block

display를 block 요소로 지정
inline-block

inline의 성격과 block요소의 성격을 함께 가지고 있다.

- width와 height를 지정할 수 있다.

- width는 필요한 만큼만 차지한다.

 

list-style-type

 

 

text

font-style

값 설명
normal default값. The browser displays a normal font style.
italic The browser displays an italic font style
oblique The browser displays an oblique font style

 

font-family

  • 요소의 글꼴 스타일을 지정한다
  • 자손요소로 상속된다.
  • 글골 이름에 띄어쓰기가 있으면 따옴표" " 로 감싸야한다.
  • 왼쪽에서 부터 순서대로 적용(첫번째글씨가 적용되지 않으면 그 다음 글씨가 적용됨)
  • 참고 : https://www.w3schools.com/cssref/pr_font_font-family.asp
{font-family: Consolas, Gothic, serif;}

 

font-weight

{font-weight: bold;}

 

font-size

  • 글씨 크기 지정
{font-size: 30px;}

 

text-decoration

  • 요소 텍스트에 사용되는 글꼴에 적용되는 장식.
/* 
text-decoration의 값을 none으로 글꼴에 적용되는 장식을 모두 없애버림
 */ 
{text-decoration: none;}

/*글꼴에 언더라인을 줌*/
{text-decoration: underline;}

 

color

{ color: red;}

 

text-transform

{text-transform: capitalize;}

 

letter-spacing

{letter-spacing: 5px;}

 

text-indent

{text-indent: 30px;}

 

line-height

{line-height: 20px;}

 

text-align

값 설명
left 텍스트를 왼쪽으로 정렬
right 텍스트를 오른쪽으로 정렬
center 텍스트를 가운데로 정렬
justify

자간의 간격을 늘려 줄바꿈되면서 비는 공간을 없앤다

 

Unit (단위)

px

 

 

%

  •  부모요소를 기준으로 사이즈 지정
{width: 10%;}

 

em

  • 요소의 글꼴 크기에 상대적으로 속성의 사이즈가 바뀐다.
    예) 2em은 현재 글꼴의 2배 크기
{width: 20em;}

 

rem

  • root 요소의 글꼴 크기에 상대적
    예) 2rem은 root 요소 글꼴의 2배 크기
{width: 20rem;}

 

 

'CSS' 카테고리의 다른 글

이미 만들어져 있는 css요소를 div에 적용해보기  (0) 2019.11.19
p 요소 변경하기  (0) 2019.11.19
가상클래스 PseudoClass / 가상요소 PseudoElement  (0) 2019.11.19
BoxModel  (0) 2019.11.19
CSS 선언 / 선택자  (0) 2019.10.29
댓글 , 엮인글
sally의 프로그래밍 공부
블로그 이미지 롱디라니ldrn_sally_kim 님의 블로그
MENU
CATEGORY
VISITOR 오늘 / 전체

티스토리툴바