CSS 표현하기 #3 CSS 폰트, 테이블, 마진, 패딩 기본 설정

font-* 속성 : 서체 크기, 스타일, 굵기 조절

p{
 font-size : 11pt;
 font-style : ltalic;
 font-weight : bold;
 }

텍스트 정렬 

 text-align: center; // left, right, center, justify(양끝 정렬), auot(기본 정렬) 

 

   - 세로 정렬 vertical-align: text-top 텍스트 상단에 정렬 

 

텍스트 인덴트 : 단락의 들여쓰기

  text-indent : 5em;

 

 

텍스트 컬러 설정 : color: #FF00FF;

 

배경 설정 

 background-color: gray;

 

배경 이미지

 background-image: url("/a.png") 

background-repeat: 

  - repeat (배경 이미지를 가로 세로로 연속하여 타일과 같이 적용, 기본 속성)

  - repeat-x (배경 이미지를 가로 방향으로 연속)

  - repeat-y (배경 이미지를 세로 방향으로 연속)

  - no-repeat (배경 이미지 반복하지 않도록 설정)

background-attachment: fixed; - 배경이미지 고정 scroll - 배경 이미지에 스크롤 적용 

background-position: 30px, 30px; 배경 이미지 왼쪽 아래로 30px 이동 

background-size: 50%, 50%;

 

 

블릿!

  - 목록을 정리하며 예쁘게 보이도록 목록 아이템 앞에 붙는 숫자 또는 특수 문자 

  - list-style-type 속성 사용 

ex)

  / / HTML

<ol>

<li>안녕</li>

<li>hi</li>

</ol>

  / /  CSS

li{

list-style-type: upper-roman;(로마) decimal(아라비아), upper-alpha(대문자 이용), dics(검정원), circle(원), square(사각형)

}

 

 이미지 블릿

  list-style-image: url(dot.png); 

  

  list-style-position: inside;

  list-style-position: outside;

 

 

 - 마진, 패딩 

 p{

 margin: 10px;

 padding: 10px;

}

 

  p{

  margin-left: 1cm;  ,right, top, dowm

}

 

1,  2

1의 마진은 20  - 2의 마진은 30

두 사이의 마진은? = 30! (겹친다고 50이 아니고 둘 중 큰 마진의 값을 따라서 적용 되어짐) 

 

 - 테두리 선 설정 

table{

border-width: 1px;

border-style: solid;

border-color: black; 

}

 

th, td{

 1px solid black; 축약해서 설정도 가능 

  }

 

position 속성 

 : 특정 요소가 다른 요소들과 어떠한 관계 속에서 위치를 결정하는 지 설정

 : 상대 위치, 절대 위치, 고정 위치

p{

 position: relative; (상대위치) - 부모 기준 absolute; (절대 위치) z-index: 3; 두 번째 단락 보다 위에 제시

 top: 50px;

 left: 30px;

}