Programming/HTML

CSS 기본

juyinjang25 2016. 10. 18. 13:11

CSS(Cascading Style Sheets;스타일 시트)

: HTML을 꾸며주는 기능을 제공

꾸미는 부분만 독립시켜 처리하므로

HTML의 가독성이 유지됨


<CSS를 HTML에 적용하기>


1) style 태그를 <head> 사이에 위치시킴


1
2
3
4
5
<head> 
<style>
어떻게 꾸밀 것인지
</style>
</head>
cs


2) CSS 파일 작성 OR CSS 링크 찾기


3) <link> 태그 안에 href(CSS 주소), type(HTML과 링크하는 데이터 종류), rel(Relationship btw HTML and CSS) 순으로 적어줌


<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,100' rel='stylesheet' type='text/css'>


<예제>


1) 헤더(h1)의 색을 Black으로, 문단(p)의 폰트 크기를 18px로 맞추자


1
2
3
4
5
6
7
h1 {
  color: Black;
}
p {
  font-size: 18px;
}
cs


<CSS 박스 모델>




<CSS 속성>

1) display: 같은 페이지 내 HTML 요소와의 배치 관계 설정

ex. display: inline;


      =>    

2) float: 왼쪽/오른쪽에 적절히 배치

ex. float: right;


    =>    




3) flex: 여러 페이지에 걸쳐 있는 요소를 한 페이지에 정리


display: flex; 한 줄로 정리됨

flex-wrap: wrap; 한 페이지 넘어가면 다음 줄에 정리됨

justify-content: center; 다 못 채우는 줄은 가운데부터 정리됨


4) location: 절대값 위치 설정


5) 가상 선택자: 액션리스너와 비슷


  • link - 방문한 적이 없는 링크
  • :visited - 방문한 적이 있는 링크
  • :hover - 마우스를 롤오버 했을 때 
  • :active - 마우스를 클릭했을 때


각각의 상황에 대해서 밑과 같은 '속성'을 지정 가능

  • color
  • background-color
  • border-color
  • outline-color
  • The color parts of the fill and stroke properties


예)


1
2
3
4
5
6
7
8
9
10
<style>
    a:visited{
    color:red;
    }
    
    input:focus{
    background-color: black;
    color: white;
    }
</style>
cs


<CSS를 게임식으로 배우자!>


http://flukeout.github.io/



<Bootstrap: 웹사이트 간편히 꾸미게 해주는 툴>


설명: http://unikys.tistory.com/363

사용예: http://expo.getbootstrap.com/

사이트 주소: http://getbootstrap.com