영보의 SystemOut.log

[HTML/CSS] CSS기초 익히기 본문

Web/HTML CSS

[HTML/CSS] CSS기초 익히기

영보로그 2020. 9. 19. 16:31
반응형

 CSS(Cascading Style Sheets)

 : HTML과 함께 웹표준의 기본 개념으로 디자인 요소를 담당

 

 

 

# CSS 사용하는 이유

- 웹 문서 내용과 상관없이 디자인만 바꿈

- 다양한 기기에 탄력적으로 바뀌는 문서 제작

 

 

 

 

# 스타일 형식/표기방법

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<style type="text/css">
#wrap{
    width: 900px;
    border: 1px solid red;
    height: 700px;
}
.row{
    width: 700px;
    /* center를 사용하지 않고 margin을 이용해서 가운데 정렬 : 0px auto*/
    margin: 0px auto;
}
h1 {
    text-align: center;
}
/* 테이블 디자인 설정*/
#sawon{
    border:1px solid black;
    width:500px;
    border-collpase: collapse;
}
#sawon tr:nth-child(1){
    background-color: blue;
    color : white;
}
#sawon td{
    /*정렬*/
    text-align: center;
    font-family: 맑은 고딕;
}
/* 짝수만 */
#sawon td:nth-child(2n){
    background-color: RGB(255,255,200);
}
</style>
 cs

- 설명보다 코드로 보여주는게 더 깔끔할 것 같아 코드를 넣어 보았다.

   세미콜론(;)으로 구분하고, 중괄호({,})안에 나열한다.

- 개발자가 읽기 쉽고 유지,보수 하기 쉬우려면 여러줄 작성 권장

 

 

 

 

# 내부스타일 시트

 - 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것
 - 모든 스타일 정보는 <head></head>태그 안에서 정의해야하고, <style></style>태그 사이에 작성한다.

1
2
3
4
5
6
7
<head>
<style type="text/css">
h1{
    color:rgb(0,255,0);
}
</style>
</head>
 cs

 

 

#외부 스타일 시트

- 웹문서에서 사용할 스타일을 따로 저장해놓고 필요할때마다 파일에서 가젹와 사용하는 스타일 시트

- <style>태그 따로 필요 없이 <link>태그만 사용해 미리 만들어 놓은 외부 스타일 시트 파일을 연결함.

1
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
 cs

www.w3schools.com/bootstrap/bootstrap_tables.asp

 

Bootstrap Tables

Bootstrap Tables Bootstrap Basic Table A basic Bootstrap table has a light padding and only horizontal dividers. The .table class adds basic styling to a table: Example Firstname Lastname Email John Doe john@example.com Mary Moe mary@example.com July Doole

www.w3schools.com

- 예제는 위 사이트의 스타일 시트에서 가져왔다.

 

 

 

# 주요 선택자

전체 선택자 모든 요소에 스타일 적용
*{속성:속성 값; 속성:속성 값; }
태그 선택자 특정 태그를 사용한 요소에 스타일 적용
p{
   font-size : 12px;
   font-family : 돋움;
}
클래스 선택자 특정 부분에 스타일 적용하기
<style>
   .bluetext{
     color:blue;
}

<h2 class="bluetext"> 냐옹냐옹</h2>
id 선택자 특정 부분에 스타일 적용하기
#아이디명 {스타일}

#container{
    width : 600px;
    padding : 15px;
    border: 1px dotted gray;
}
그룹 선택자 둘 이상 요소에 같은 스타일 적용하기
이름1, 이름2

h1, h2{
     text-align:center;
}

 

 

반응형
저작자표시

'Web > HTML CSS' 카테고리의 다른 글

[HTML] href 태그 새창에서 열기  (0) 2021.08.10
[HTML] <select > <option> 셀렉트 박스 넣기  (0) 2020.10.30
[HTML] HTML의 기본 태그들 / HTML 기초  (2) 2020.08.18
[HTML] HTML이란 / HTML 기본구조  (0) 2020.08.14
'Web/HTML CSS' Related Articles more