0216/CSS

쌍용교육센터에서 공부한 내용을 정리하며 기록하는 글이고 주관적인 생각이 들어갈 수 있습니다.
잘못된 내용이나 피드백 및 생각 공유는 언제든 환영입니다.
댓글로 남겨주시면 확인 후 수정하겠습니다.
내용에 대한 소스 코드는 https://github.com/2jaehoon/html에 올려두었습니다.

 

CSS의 속성
  - 속성명 : 값;

 

* 글꼴 관련 속성

  - 글꼴 설정 : font-family : 글꼴;
  - 진하게 : font-weight : 속성;( normal - 일반 글자, bold - 진하게 )
  - 이탤릭 : font-style : 속성;( normal - 일반 글자, italic - 이탤릭 )
  - 색 : color : 속성;( RGB ) 

  - 효과 : text-decoration : 속성;

    ( 밑줄제거 – none, 밑줄 – underline, 취소선 – line-through, 윗줄 - overline )
  - 글자 크기 : font-size: 속성;( 수치px )

 

* 테두리관련 속성

  - 테두리를 가지는 모든 태그는 적용이 가능하다.

  - border - 왼쪽, 윗쪽, 오른쪽, 아래쪽 모든 선을 변경한다. 
  - border : 선의두께 선종류 선색;

    (선의 두께 - 수치px, 선 종류 - solid, dotted, dashed, double, 선색 - RGB )

  - 특정 위치의 선 변경

    왼쪽선 -  border-left: 선의두께 선종류 선색;
    위쪽선 -  border-top: 선의두께 선종류 선색;
    오른쪽선 – border-right : 선의두께 선종류 선색;
    아랫쪽 선 – border-bottom : 선의두께 선종류 선색;

 

* 크기 변경

  - 넓이 : width:값;( 수치px ) 
  - 높이 : height:값;( 수치px )  

 

* 바닥색 설정

  - backgorund-color:값;( RGB )

 

* 테이블 여백
 - td 간 간격 : border-spacing:값;( 수치px )  

 

정렬

* 글자 정렬

  - 수평 정렬 : text-align:속성값;( left, center, right )

  - 수직 정렬 : vertical-align:속성값;( top, middle, bottom )

 

* 객체 정렬 - text-align으로 정렬되지 않는 대상( 수평 정렬만 가능 )
  - margin: x좌표값 y좌표값;
  - 가운데 정렬 : margin: 0px auto;
  - float을 사용하면 왼쪽이나 오른쪽으로 객체를 정렬할 수 있다.
    float: 속성;( left, right )
    float으로 정렬을 수행하면 float속성이 하위 객체로 전달되는 경우가 발생한다.
    float 속성을 초기화 : clear:both;

 

이미지설정

  - background:바닥색 url( 이미지 경로 ) 반복 여부;

    (반복 여부 - x좌표로 반복( repeat-x ), y좌표로 반복( repeat-y ), 반복x( no-repeat )

 

여백

* 기준선 밖 여백( 여백을 설정하더라도 크기에 영향을 주지 않는다. )
  - margin : 속성;( 수치px )
  - margin : 속성 속성;( 수치px )  - 객체를 가운데 정렬할 때 사용

  - 특정위치만 변경 가능( 수치px ) 

    ( margin-left: 속성; margin-top: 속성; margin-right: 속성; margin-bottom: 속성; )

 

* 기준선 안 여백( 여백을 설정하면 크기에 영향을 준다. )

  - padding : 값; ( 수치px ) 
  - 특정 위치에 대한 설정 ( 수치px ) 
    ( padding-left:값;  padding-top:값; padding-right:값; padding-bottom:값; )

* 숨김 설정

  - 모든 객체는 숨기거나 보이도록 설정할 수 있다.

    ( 부모태그가 숨겨지면 자식태그에도 상속된다. )

    display : 값;( 숨기기 : none, 보이기 : block , inline )
  - ol, ul, li 의 목록 기호( 번호, 도형 ) 숨기기

    list-style: 값;( 숨기기 : none, 보이기 : block , inline )

 

그림자 설정( CSS3에서부터 지원한다. )

  - box-shadow, text-shadow를 지원

* text-shadow

  - 글자에 그림자를 설정

    text-shadow: 값 값 값 값;( x좌표, y좌표, 번짐값, 그림자색 )

* box-shadow

  - div나 table에 그림자를 설정

    box-shadow : 값 값 값 값;( x좌표, y좌표, 번짐값, 그림자색 )

 

* 모서리를 둥글게 만들기( CSS3에서 제공 )

  - border-radius :값 값 값 값;( 좌상단, 우상단, 우하단, 좌하단 )( 수치px )