티스토리 뷰
CSS는 Cascading Style Sheets의 약자로 HTML 문서의 style을 정의(화면에 어떤 스타일로 나올지 설정해주는)하는 언어이다. HTML 언어를 사용해서 컨텐츠를 표현했다면, CSS는 거기에 디자인을 덧붙이는 역할을 하는 것이다.
CSS Syntax
예시) h1 { color:blue; font-size:12px; }
- selector (예: h1)
- declaration: 각각의 declaration은 semicolon으로 구분 되어 있고, declaration 블록은 중괄호로 묶여있다
- property:value (예: color-property, blue-value)
CSS Selectors
우리가 꾸미고자 하는 HTML element를 지정하는 역할을 한다
- Element selector
예) p, h1, ... - Id selector
- 형식: #"id 이름"
- id 이름은 숫자로 시작하면 안된다
예) #note
- Class selector
- 형식: ."class 이름"
- 영향을 끼치고 싶은 HTML elements도 따로 지정 할 수 있다 ( "." 앞에 HTML element를 적어주면 된다)
예) p.center{text-align:center; color:red;} - HTML elements는 한 개 이상의 class를 적용할 수 있다 (id는 단 하나의 HTML element에서 사용되어야 한다는 점과 다르다)
- class 이름은 숫자로 시작하면 안된다
- Universal selector
- * 문자를 사용한다
예) *{text-align:center; color:red;}
- * 문자를 사용한다
- Grouping selector
- 같은 style declaration을 가진 selector들을 묶어놓은 것
예) h1, h2, p {text-align:center; color:red;}
- 같은 style declaration을 가진 selector들을 묶어놓은 것
CSS를 추가하는 방법 3가지
- External CSS
- <link>를 이용해서 외부에 있는 style sheet를 적용시키는 방법이다
예) <link rel="stylesheet" type="text/css" href="mystyle.css"> - .css 확장자로 저장되어야 한다
- <link>를 이용해서 외부에 있는 style sheet를 적용시키는 방법이다
<!--mystyle.css-->
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
- Internal CSS
- 현재 HTML 페이지 전체에 style을 적용시키는 방법이다
- Inline CSS
- 하나의 HTML element에 style을 적용시키는 방법이다
예) <h1 style="color:blue; text-align:center;">Heading</h1>
- 하나의 HTML element에 style을 적용시키는 방법이다
- Multiple style sheets
- internal style sheet와 external style sheet를 동시에 적용 시켰을 경우?
- 다음 우선 순위로 차례대로 적용된다:
- Inline style
- External and internal style sheets
Enternal 과 internal style sheet이 둘다 있을 경우에는 <link> <style> 중에서 더 뒤에 나오는 style이 최종적으로 적용된다. - Browser default
위 사진의 예시 코드를 보고 싶다면: http://songoftea.dothome.co.kr/2020Camp/hw3_1.html
CSS 주석(comments)
주석은 코드에 대한 설명으로 브라우저가 해석하는데에는 아무런 영향을 끼치지 않고 나중에 코드를 업데이트 하게 될때 참고할 수 있도록 적어놓은 내용이다.
형식: /* */
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red; /* CSS 주석 */
}
</style>
</head>
<body>
<!-- HTML 주석 -->
</body>
</html>
CSS Color Names
색은 이름으로 지정하거나, RGB, HEX, HSL, RGBA, HSLA등을 사용해서 정의할 수 있다
- color : 글자 색을 변경 할 때 사용하는 속성
- background-color: 배경색을 변경 할 때 사용하는 속성
- border : 테두리 굵기, 종류, 색을 반드시 명시해야 제대로 나온다
예) <h1 style="border: 2px solid black;">hello</h1>
CSS colors
- RGB
- rgb(red, green, blue)
- rgb(255, 255, 255): 흰색
- rgb(0,0,0): 검은색
- rgb(red, green, blue)
- RGBA
- rgba(red, green, blue, alpha) : 투명도 조절 가능
- HEX
- #rrggbb
- 00 = 0(rgb), ff= 255(rgb)
- HSL
- hsl(hue, saturation, lightness)
- HSLA
- hsla(hue, saturation, lightness, alpha)
CSS backgrounds
- background-color
- opacity (0.0 ~ 1.0)
- opacity property를 쓰면 배경색과 함께 글씨도 투명해지지만, rgba를 사용하면 글자색의 투명도는 그대로이다.
- background-image
예) background-image: url(""); - background-repeat
- 옵션: repeat-x(수평으로 반복), repeat-y(수직으로 반복), no-repeat(반복하지 않음)
- background-position
- background-attachment
- fixed
- scroll
CSS Background Shorthand
아래와 같이 다 적는 대신에:
body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
shorthand 기번으로 다음과 같이 한꺼번에 적을 수 있다:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
CSS Borders
- border : 태두리를 추가하는 속성
- border-style: 테두리 스타일을 정의하는 속성, 총 4개의 값을 가질 수 있다
- border-style property가 설정 되어야만 추가적으로 border에 하는 설정들이 영향을 미칠 수 있다
- 다음과 같은 순서로 값을 가진다:
- top border
- right border
- bottom border
- left border
- dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
<!--border-style 값 4개 다 입력할 경우: -->
p.mix {border-style: dotted dashed solid double;}
CSS Border width
- border-width
- px, pt, cm, em 등...의 값으로 테두리 두께를 정하거나
- thin, medium, thick 중 한 값을 사용해도 된다
CSS Border Color
- border-color
- name, HEX(#000000), RGB, HSL, transparent
- top, right, bottom, left 해서 각각 다른 색깔로 설정 할 수 있다
CSS Margins
- margin: element와 바깥의 경계 사이 space를 정의하는 속성
- margin-top, right, bottom, left
- margin: auto하면 자동으로 화면 중간에 맞춰준다
- inherit: parent element의 margin값을 그대로 받아온다
Margin Collapse
Top와 bottom margin에만 해당된다
아래의 코드를 보면 두 heading 사이의 margin은 50+20 해서 70px 이 되어야 할 것 같지만, margin collapse에 의해 50px로 나온다.
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
- line-height: 줄 사이 간격을 정의 할 때 사용된다
div.a {
line-height: normal;
}
div.b {
line-height: 1.6; /* recommended line-height: 1.6*/
}
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- HTML_Forms
- HTML #media #video #YouTube
- HTML #class
- jsp
- Block_element #inline_element
- fontstyle
- head #title #style
- DB4free
- JSP_CRUD
- JSP환경구축
- Mavenproject
- meta #link #script #base #HTML
- text_shadow
- HTML #Tables
- javascript #datatype
- 2020Camp
- HTML #Headings #Paragraph #Styles
- HTML_Formatting
- HTML #Canvas #SVG
- annotation
- box_model
- html
- UserBean
- 인용문 #주석
- HTML #id #iframe
- links lists tables display
- HTML #CSS
- css
- DynamicWebProject
- STS4
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
글 보관함