1. 블록 레벨 요소와 인라인 레벨 요소


블록 레벨(block-level) 요소 - 태그를 사용해 요소를 삽입했을 때 혼자 한줄을 차지하는 요소

인라인 레벨(inline-level) 요소 - 화면에 표시되는 콘텐츠만큼 영역을 차지하는 요소


종류 

해당 태그 

블록 레벨 태그

<p>, <h1>~<h6>, <ul>, <ol>, <div>, <blockquote>, <form>, <hr>, <table>, <fieldset>, <address> 

인라인 레벨 태그 

<img>, <object>, <br>, <suv>, <sup>, <span>, <input>, <textarea>, <label>, <button> 



2. 박스 모델(box model)



박스모델은 실제 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩(padding), 박스의 테두리(boder), 그리고 여러 박스 모델 사이의 여백인 마진(margin)등의 요소로 구성됩니다.



3. width, height 속성 - 콘텐츠 영역의 크기


width: <크기> | <백분율> | auto

height: <크기> | <백분율> | auto


- 모던 브라우저에서 박스 모델의 전체 너비 = width 값 + 좌우 패딩 + 좌우 테두리

- 인터넷 익스플로러 6에서 박스 모델의 width 값 = 콘텐츠 너비 + 좌우 패딩 + 좌우 테두리



4. display 속성 - 화면 배치 방법 결정


display 속성을 사용하면 블록 레벨 요소를 인라인 요소로 바꾸거나 인라인 레벨 요소를 블록 레벨 요소로 바꿀 수 있습니다.


속성 값

설명 

block

해당 요소를 블록 레벨로 지정한다. 

inline

해당 요소를 인라인 레벨로 지정한다. 

inline-block

해당 요소를 인라인 레벨로 지정하면서 블록 레벨 속성을 갖도록 한다. 

none

해당 요소를 화면에 표시하지 않는다. 

inherit

상위 요소의 display 속성을 상속받는다. 

table

블록 레벨의 표로 만든다. 

inline-table

인라인 레벨의 표로 만든다. (<table> 태그를 사용한 것처럼) 

table-row

표의 행으로 만든다. (<tr> 태그를 사용한 것처럼> 

table-row-group

표의 행 그룹으로 만든다. (<tbody> 태그를 사용한 것처럼)

table-header-group

표의 제목 영역(header) 그룹으로 만든다. (<thead> 태그를 사용한 것처럼)

table-footer-group

표의 요약 영역(footer) 그룹으로 만든다. (<tfoot> 태그를 사용한 것처럼)

table-column 

표의 열로 만든다. (<col> 태그를 사용한 것처럼) 

table-column-group 

표의 열 그룹으로 만든다. (<colgroup> 태그를 사용한 것처럼)

table-cell 

표에서 하나의 셀로 만든다. (<td>나 <th> 태그를 사용한 것처럼)

table-caption 

표의 캡션을 만든다. (<caption> 태그를 사용한 것처럼) 

list-item 

목록의 항목을 표시할 수 있도록 기본적인 블록 박스와 표시자 박스를 만든다. (<li> 태그를 사용한 것처럼) 


visibility: hidden;도 display:none;과 같은 비슷한 역할을 하는데 visibility 속성은 화면에서 감추기만 할 뿐 원래 요쇼가 있는 공간은 그대로 차지하지만 none 속성은 아예 공간조차 차지하지 않습니다.






<출처> Do it! HTML5+CSS3 웹 표준의 정석

저작자표시 비영리 변경금지

'IT > CSS' 카테고리의 다른 글

[CSS 입문] 여백을 조절하는 속성  (0) 2017.04.17
[CSS 입문] 테두리 관련 속성  (2) 2017.04.13
[CSS 입문] 그러데이션 효과  (0) 2017.04.11
[CSS 입문] 배경 색과 배경 이미지  (0) 2017.04.10
[CSS 입문] 목록과 링크 스타일  (0) 2017.04.06

그러데이션을 지원하지 않는 브라우저와 접두사를 붙여 사용하는 브라우저까지 고려해 함께 입력해야합니다.


      background: #ff0000; /* CSS3 미지원 브라우저*/
      background: -webkit-linear-gradient(45deg, #ff0000, #ffffff); /* 초기 모던 브라우저 */
      background: -moz-linear-gradient(45deg, #ff0000, #ffffff); /* 초기 모던 브라우저 */
      background: -o-linear-gradient(45deg, #ff0000, #ffffff); /* 초기 모던 브라우저 */
      background: linear-gradient(45deg, #ff0000, #ffffff); /* 최신 모던 브라우저 */


이때 선형 그러데이션 함수나 원형 그러데이션 함수를 이용해 만드는 배경은 크기가 없는 배경 이미지이므로 그러데이션 값을 background-image 속성 값이나 background의 속성 값으로 지정합니다.



1. 선형 그러데이션


liner-gradient( <각도> to <방향>, color-stop, [color-stop,..]);


위의 구문이 표준 구문이지만 '위치'와 '각도'를 표시하는 방법이 브라우저별, 버전별 사용법이 조금씩 다르기 때문에 구분해 사용해야 합니다.


 접두사

브라우저 버전 

'위치' 속성 값 

-webkit- 

사파리 5.1 ~ 6.0 

그러데이션 시작 위치 기준 

-moz-

파이어폭스 3.6 ~ 15 

그러데이션 끝 위치 기준. 키워드 to 사용하지 않음 

-o-

오페라 11.1 ~ 12.0 

그러데이션 끝 위치 기준. 키워드 to 사용하지않음 


선형 그러데이션을 만들기 위해서는 바뀌는 부분 색을 지정해 주어야 하는데 바뀌는 지점을 색상 중지점(color-stop)이라고 합니다. 색상 중지점을 지정할 대는 색상만 지정할 수도 있고 색상과 함께 중지 점의 위치도 함께 지정할 수도 있습니다.


      background: #06f; /* css3 미지원 브라우저 */
      background-image: -webkit-linear-gradient(top, #06f, white 30%, #06f); /* 초기 모던 브라우저 */
      background-image: -moz-linear-gradient(bottom, #06f, white 30%, #06f); /* 초기 모던 브라우저 */
      background: -o-linear-gradient(bottom, #06f, white 30%, #06f); /* 초기 모던 브라우저 */
      background: linear-gradient(to bottom, #06f, white 30%, #06f); /* 최신 모던 브라우저 */



2. 원형 그러데이션


원형 그러데이션에서 만들어지는 모양은 circle(원형)과 ellipse(타원형)입니다. 따로 지정하지 않으면 ellipse로 인식합니다.


radial-gradient( <최종 모양> <크기> at <위치>, color-stop, [color-stop,..]);


표준 구문에서는 '모양'과 '크기' 속성 다음에 at 키워드와 함께 위치 값을 지정하는데 브라우저 접두사를 붙이는 구문사에서는 at 키워드 없이 구문의 맨 앞부분에 위치를 표시합니다.


      background: blue;
      background: -webkit-radial-gradient(10% 10%, circle, white,blue);
      background: -moz-radial-gradient(10% 10%, circle,white,blue);
      background: -o-radial-gradient(10% 10%, circle, white,blue);
      background: radial-gradient(circle at 10% 10%,white,blue);


그러데이션을 지정할 때 원의 크기도 지정할 수 있는데 크기에서 사용할 수 있는 값은 다음과 같습니다.


속성 값

설명 

closest-side 

원의 경우, 그러데이션 가장자리가 그러데이션 중심에서 가장 가까운 요소의 모서리와 만날 때까지 그림

타원의 경우, 그러데이션 중심에서 가장 가가운 요소의 수평축이나 수직축과 만날 때까지 그림

closest-corner 

그러데이션 가장자리가 그러데이션 중심에서 가장 가까운 요소의 코너에 닿을 때까지 그림 

farthest-side 

그러데이션 가장자리가 그러데이션 중심에서 가장 먼 모서리와 만날 때까지 그림

farthest-coner 

그러데이션 가장자리가 그러데이션 중심에서 가장 먼 코너에 닿을 때까지 그림. 기본 값 


원형 그러데이션도 선형 그러데이션처럼 그러데이션 색상뿐만 아니라 색상이 바뀌는 위치도 함께 지정할 수 있습니다.


    background:skyblue;
    background:-webkit-radial-gradient(red, yellow 20%, skyblue);
    background:-moz-radial-gradient(red, yellow 20%, skyblue);
    background:-o-radial-gradient(red, yellow 20%, skyblue);
    background:radial-gradient(red, yellow 20%, skyblue);



3. 그러데이션 반복


선형 그러데이션을 반복할 때는 repeating-linear-gradient를 사용하고 원형 그러데이션을 반복할 때는 repeating-radial-gradient를 사용합니다.


      background: red; /* css3 미지원 브라우저 */
      background: -webkit-repeating-linear-gradient(yellow, red 20px); /* 초기 모던 브라우저 */
      background: -moz-repeating-linear-gradient(yellow, red 20px); /* 초기 모던 브라우저 */
      background: -o-repeating-linear-gradient(yellow, red 20px); /* 초기 모던 브라우저 */
      background: repeating-linear-gradient(yellow, red 20px); /* 최신 모던 브라우저 */


반복되는 선형 그러데이션을 만들 때 다음과 같이 시작 색상과 끝 색상을 명확히 구분해 주면 색상이 중간에 섞이지 않고 두개 이상의 색상을 반복적으로 표시할 수 있습니다.


      background: red; /
      background: -webkit-repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px);
      background: -moz-repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px);
      background: -o-repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px); 
      background: repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px);




<출처> Do it! HTML5+CSS3 웹 표준의 정석

저작자표시 비영리 변경금지

'IT > CSS' 카테고리의 다른 글

[CSS 입문] 테두리 관련 속성  (2) 2017.04.13
[CSS 입문] CSS와 박스 모델  (0) 2017.04.12
[CSS 입문] 배경 색과 배경 이미지  (0) 2017.04.10
[CSS 입문] 목록과 링크 스타일  (0) 2017.04.06
[CSS 입문] 문단 스타일  (0) 2017.04.05

1. background-color 속성 - 배경 색 지정


background-color:#0094ff;



2. bankgoround-clip 속성 - 배경 적용 범위 조절


속성 값

설명 

boder-box 

박스 모델의 가장 외곽인 테투리까지 적용한다.

padding-box 

박스 모델에서 테두리를 뺀 패딩 범위까지 적용한다. 

content-box 

박스 모델에서 내용 부분에만 적용한다. 



3. background-image 속성 - 웹 요소에 배경 이미지 넣기


background-image: url('images/bg1.png');



4. background-repeat 속성 - 배경 이미지 반복 방법 지정


속성 값

설명

repeat

브라우저 화면에 가득 찰 때까지 배경 이미지를 가로와 세로로 반복한다.

repaeat-x 

브라우저 창 너비와 같아질 때까지 배경 이미지를 가로로 반복한다. 

repeat-y 

브라우저 창 높이와 같아질 때까지 배경 이미를 세로로 반복한다. 

no-repeat

배경 이미지를 한 번만 표시하고 반복하지 않는다. 



5. background-size 속성 - 배경 이미지 크기 조절


속성 값

설명 

auto 

원래 배경 이미지 크기만큼 표시한다.

contain 

요소 안에 모든 배경 이미지가 표시되도록 확대하거나 축소한다.

cover

요소 전체를 모두 덮도록 배경 이미지를 확대하거나 축소한다.

<크기 값> 

너비 값만 지정할 경우, 원래 배경 이미지 크기를 기준으로 축소/확대 비율을 자동으로 계산해 높이 값을 지정한다.

<백분율> 

원래 배경 이미지 크기를 기준으로 확대하거나 축소한다. 



6. background-position 속성 - 배경 이미지 위치 조절


bankground-positon: <수평 위치> <수직 위치>;

수평 위치 : left | center | right | <백분율> | <길이 값>

수직 위치 : left | center | right | <백분율> | <길이 값>



7. background-origin 속성 - 배경 이미지 배치할 기준 조절


background-origin: border-box | padding-box | content-box



8. background-attachment 속성 - 배경 이미지 고정


background-attachment: scroll | fixed



9. background 속성


배경 이미지 관련 속성을 background 속성으로 줄여 사용할 수 있습니다. 속성 값이 다르므로 입력 순서는 상관없습니다.





<출처> Do it! HTML5+CSS3 웹 표준의 정석

저작자표시 비영리 변경금지

'IT > CSS' 카테고리의 다른 글

[CSS 입문] CSS와 박스 모델  (0) 2017.04.12
[CSS 입문] 그러데이션 효과  (0) 2017.04.11
[CSS 입문] 목록과 링크 스타일  (0) 2017.04.06
[CSS 입문] 문단 스타일  (0) 2017.04.05
[CSS 입문] 텍스트 스타일  (0) 2017.04.04

+ Recent posts

티스토리툴바