CSS정리 - Chapter.03

서체

 

(1) 서체

  1) font-family 속성
   - 서체를 지정
   - 예) body { font-family : '돋움‘, dotum, helvetica, sans-serif; }
  
  2) @font-face
   - 서체를 같이 올려두고 연결하는 방법
   - 예) 

        <style type="text/css">
         @font-face{
            font-family: 'Nanum Gothic';
            src:url(fonts/NanumGothic.eot);
            src:url(fonts/NanumGothic.eot?#iefix) format('embedded-opentype'),
               url(fonts/NanumGothic.woff) format('woff'),
               url(fonts/NanumGothic.ttf) format('truetype')
         }
         p{
            font-family: 'Nanum Gothic', sans-serif;
         }
        </style>

(2) 글자 크기 지정
  1) font-size

(3) 글자 두께 지정
  1) font-weight

(4) 글자 장식
  1) text-decoration

(5) 글자 스타일 지정
  1) font-style
    - italic : 기울임      - oblique : 비스듬하게      - normal : 기울어진 글자를 바로 세움

(6) 글자색 지정
  1) color 

(7) 글 정렬 지정
  1) text-align
   - left : 좌측정렬    - right : 우측정렬   - center : 중앙정렬      -justify : 양쪽정렬

(8) 수직 정렬 지정
  1) vertical-align
    - 인라인 요소끼리의 위, 아래 간격을 맞출 수 있다.
   - <img> 요소는 블록 요소 안에 있을 경우 약간의 공백이 발생할 수 있는데, 
     vertical-align을 이용해서 그 공백을 없앨 수 있다.
     예) img {    vertical-align: top; }

(9) 글자 들여쓰기
  1) text-indent
   - 예) p { text-indent: 1em; }

(10) 글의 줄바꿈 처리
  => 인라인 요소인 ‘글(text)'은 자신을 감싸고 있는 상위 블록 요소의 'width'를 넘어서게 되면 줄을 
     바꾸게 된다. 

  1) word-break
   - 단어를 깨뜨려 줄바꿈을 지정
   - 예) 

        <style>
         body{
            width: 400px;
            font-family: '돋움',dotum,helvetica,sans-serif;
            font-size: 12px;
            text-align: justify;         
         }
         .area{
            background-color: #ddd;
            word-break: break-all;      /* text-align: justify;와 같이 지정 */ 
         }
        </style>

  2) white-space
   - 줄바꿈을 금지하거나, <pre> 요소의 특성을 부여
   - nowrap : 줄바꿈 금지
   - pre : <pre> 요소를 지정한 것처럼 띄어쓰기나 줄바꿈 등이 작성한 그대로 표현된다.
   - pre-wrap : 앞의 pre의 효과와 비슷하지만, 지정한 영역을 넘어가지 않는다.
   - pre-line : pre-wrap과 비슷하지만, 띄어쓰기한 공백은 한 칸만 표현된다.
   - 예) 

        <style>         
         .nowrap{
            white-space: nowrap;
         }
         .pre{
            white-space: pre;
         }
         .pre-wrap{
            white-space: pre-wrap;
         }
         .pre-line{
            white-space: pre-line;
         }
        </style>

 

박스 모델

- HTML의 각 요소들은 사각의 박스 형태를 가진다.
- 이 박스를 표현하기 위해 지정하게 되는 여러 요소들을 한데 묶어 ‘박스 모델’이라고 한다.
- content : 내용
- border : 테두리
- margin : 테두리를 기준으로 바깥쪽 여백
- padding : 테두리와 content 사이의 안쪽 여백

 

display, visibility 속성

(1) display 속성

  1) 기본 속성
     - HTML 요소를 블록 혹은 인라인으로 지정한다.
     - 인라인 요소는 width를 가질 수 없고, 블록 요소는 텍스트 정렬이 적용되지 않는다.

     - inline-block은 width 지정도 가능하고, text-align 속성을 지정하면, 정렬도 적용된다.
      게시판 하단의 페이징(1, 2, 3 ...) 부분을 꾸미는데 유용하다.  
     - display : inline                /* 인라인 지정 */ --- 가장 대표적인 것이 <span>태그. width와 height를 지정할 수 없다
     - display : block                /* 블록 지정 */
     - display : inline-block          /* 인라인 블록 지정 */
     - display : none                 /* 존재하지 않는 것으로 만든다. */

  2) 목록 표현
    - 지정하는 요소가 인라인 요소라도 목록과 같이 블록 형태로 나타낸다.
     - display : list-item               /* 해당 요소가 목록의 형태로 나타난다. */

  3) 테이블 형태 표현
     - display : table               /* table 지정 */

 

(2) visibility 속성

  - 기본값은 ‘visible'이며 'hidden'을 지정할 경우에는 지정된 요소가 보이지 않게 된다.
  - 'display: none;'은 원래 없었던 것처럼 표현되지만, 'visibility: hidden'은 보이지만 않고 공간은 유지된다.

    => 보이지 않는 건 똑같지만, 'visibility: hidden'은 공간을 차지하고 있고, 'display: none;'은 차지하지 않는다.

 

 

포지셔닝(positioning) 스타일

 

(1) float 속성

  1) left, right
     - float를 지정하면 다음에 오는 컨텐츠가 float를 지정한 블록 주위를 감싸게 된다.
     - html 요소 중에서 인라인 요소나 블록 요소는 그 결과가 무척 다르다. 
      그러나, float를 지정하면 두 요소는 같은 결과를 보여준다. 
      인라인 요소가 블록 요소처럼 크기를 지정할 수 있게 된다.

  2) clear 속성
   - float를 해지한다.
     - clear: left;      /* float: left; 해지 */
     - clear: right;      /* float: right; 해지 */
     - clear: both;      /* float: left;, float: right; 둘 다 해지 */

7-3. position 속성

- 값으로는 absolute, relative, fixed의 3가지가 있다.
- 이렇게 설정된 후에는 left, right, top, bottom 속성으로 그 위치를 지정하게 된다.

(1) position: absolute; (부모 태그의 위치를 기준으로)

  - HTML 문서에 2개 이상의 요소가 나열되면, 뒤에 배치되는 요소는 앞에 놓인 요소를 기준으로 
    배치된다. 하지만, ‘position: absolute’으로 지정하면, 다음 요소가 이 블록을 인지하지 못한 채
   오로지 주어진 절대값을 기준으로 배치된다.
  - ‘position: absolute’ 지정한 후, left, right, top, bottom 속성으로 그 위치를 지정할 수 있다.

(2) position: relative; (자기 자신을 기준으로)

  - 기준값(자기자신) 기준으로 상대적으로 배치된다. 
  - ‘position: relative’로 지정된 후, left, right, top, bottom의 위치 값들은 relative가 지정된 블록 그
    자신의 위치에서 지정한 값만큼 이동하게 된다.
  - ‘position: absolute’를 지정하는 경우, 이를 감싸는 블록에는 ‘position: relative’로 지정해야 한다.

 

(3) position: fixed; (화면(view)를 기준으로)

  - 위치는 항상 <body>를 기준으로 위치된다.
  - 위치는 고정이다.

(4) z-index (이미지의 순서를 정하는 데 쓰인다)

  - position을 지정한 여러 블록이 겹치게 되면, 나중에 작성한 블록이 위로 올라가게 된다.
  - z-index 속성으로 블록의 위, 아래의 위치를 조정할 수 있다.
  - z-index의 값이 크면 클수록 위로 올라간다.
  - 기본값이 0, 음수 ~ 양수까지 줄 수 있다

 

 

 

↓ Postion속성 참고자료

https://thrillfighter.tistory.com/480

css position 속성과 relative, absolute, fixed, static 이해하기

 

 

inline

- 줄바꿈 없이 순서대로 한 줄에 다른 엘리먼트들과 나란히 배치된다
- 컨텐트의 크기 만큼만 공간을 차지하므로 width, height 속성을 지정해도 무시된다
- padding, margin 속성은 좌우 간격만 반영이 되고 상하 간격은 반영되지 않는다
- <span>, <a>, <em> 등

block

- 혼자 한 줄을 차지한다
- 매번 줄바꿈이 되어 여러 줄에 보이게 된다
- width, height, padding, margin 속성이 모두 반영된다
- <div>, <p>, <h1> 등

inline-block

- inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다.
- inline에서 불가능하던 width, height, padding, margin 속성의 상하 간격 지정이 가능하다.
- inline-block을 이용하면 여러 개의 엘리먼트를 한 줄에 정확히 원하는 너비만큼 배치할 수 있기 때문에 레이아웃에 활용할 수 있다.
- <button>, <select> 등