CSS①

#.css 링크하기

<link rel="stylesheet href="파일명">

 

#.선택자 / 선택자 적용 우선 순위

①태그 선택자 p{ }

②클래스 선택자 .center{ }

③아이디 선택자 #center{ }

④태그와 함께 쓰는 선택자 p.center

 

내부 파일 스타일 > 외부 파일 스타일 
!important > 인라인 > 아이디 > 클래스 > 태그

①인라인 : 직접 태그 안에 스타일 적용 하는 것 ex. <h1 stype="color: red;">

②!important : 어느 스타일이건 스타일 옆에 !important 붙여 준다. 

h1 { 

   color : red !important;  (세미 클론 끝나기 전에 붙여준다.)

}

 

 

#.CSS 텍스트 스타일 

기본 값 : 16px / 1em(상대적인 값, 줄간격) / 12pt(문서 작업) / 100%

body에서 15px이 제일 많이 쓰임

 

font

font-size		px em pt % rem(반응형에서)
font-weight	글꼴 두께를 지정하는 특정	100~900 bold bolder lighter normal (400=normal, 700=bold)
line-height	줄 간격을 지정하는 특정	px em pt % rem
font-family	글꼴 지정하는 속성	font-name(돋움 굴림체..)
font-style	문자 스타일(기울림체)	narmal italic
color	글꽃 색을 지정하는 특정
trxt-decoration	텍스트 줄 표시/제거	none underline overline(윗줄) line-through(취소선)
text-transform	텍스트를 대문자 및 소문자로 변환	none capitalize(첫 스펠링만 대문자) uppercase lowercase
text-align	문자 정렬 방법을 지정하는 속성	center left right justify(양쪽)
text-shadow	텍스트 그림자 효과	[x-축 거리] [y축 거리] [퍼짐 거리 정도] [색상]

 

 

#.CSS 목록 스타일(list-style)

 

#.CSS 자손선택자 vs 자식선택자, 부모요소 vs 자식요소

자손 선택자 : 스페이스 / 부모 밑의 모든 선택자 

자식 선택자 : >  / 부모 바로 밑의 선택자만

 

#.CSS 박스모델

①border-style : 테두리 스타일 지정

solid dashed(굵은 점선) dotted(얇은 점선) double groove inset outset

②border-width : 테두리 두께 지정

px % thin medium thick

③border-color : 테투리 색상 지정

 

④margin, padding 속성의 크기 지정

-크기 값을 사용하는 경우 : 동일한 크기 값이 적용 ex)margin:30px;

-두 개의 크기 값을 사용하는 경우 : 위쪽 및 아래쪽 / 왼쪽 및 오른쪽 ex)margin:30px 5px; (상하 30, 좌우 5)

-4가지 크기의 값을 사용하는 경우 ex)margin:10px(top) 20px(right) 30px(bottom) 40px(left);

ex) margin/padding : 10px(top) 20px(right,left) 30px(bottom);

 

padding : border 기준으로 text 사이 간격

margin : border 밖의 영역

 

box-sizing : border-box;

width,height 지정한 박스 사이즈가 padding,border등에 의해 사이즈가 변하는 것을 방지함, 

박스가 늘어나는 것을 방지함

 

예)

.box{

    border : 10px solid red;

    width : 600px;

}

 

.box div{

    border : 10px solid blue;

    width : 200px;

    height : 200px;

    box-sizing : border-box;      /* border값 합해서 width를 200px 넘어가지 않게 함 */

}

 

#.HTML 인라인 요소, 블록요소, 인라인요소(★★★)

 

①인라인(inline) 요소

✔.한줄에 여러개 배치

✔.기본 너비값은 컨텐츠의 너비값

✔.크기값을 가질 수 없음 : width, height 적용X

✔.상하 마진은 가질 수 없음 : margin:50px 처리시 좌우만 적용

-span, a, small, big, em, u, s, del, br, q, b, video, audio, strong, mark, sub, sup

display:block 처리시 block이 되면서 block의 특성을 갖게 된다 > width 100%, 크기 가질 수 있다... 

display:inline-block : 한줄에 여러개 배치 가능하면서 크기값을 가질 수 있게 된다.

 

②블록(block) 요소

✔.한줄에 한개만 배치 : 세로 배치

✔.기본 너비값은 100%  /* width:100% */

✔.크기값을 가질 수 있음

✔.상하 좌우 마진을 가질 수 있음

-div, table, figure, caption, header, nav, footer, section, article, aside, p , ul, ol, li , td, th, form, h1~h6

 

③인라인블록(inline-block)

✔.한줄에 여러개 배치

✔.기본 너미값은 컨텐츠의 너비값

✔.크기값을 가질 수 있음

✔.상하 마진은 가질 수 있음

-img, imput 태그들, button, fontawesome