[국비지원과정] 웹표준 - CSS
🌏 웹표준(Web Standards)
- 웹에서 표준적으로 사용되는 기술이나 규칙
- 표준화 단체인 W3C가 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정
- 어떤 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상 작동해야함을 의미한다.
🖥️ CSS(Cascading Style Sheets)
HTML로 만들어진 콘텐츠에 레이아웃과 디자인요소를 정의하는 기술, 웹페이지의 디자인 요소를 지원하는 문법(Style sheet 언어)
디자인 부분은 CSS로 분리하는 것이 유지보수에 유리하며, 템플릿의 형태로 확장할 수 있다. → 웹사이트 전체의 일관성을 유지할 수 있다.
자바스크립트와 연계해 콘텐츠의 내용이나 디자인을 동적으로 처리할 경우에도 유용하게 사용된다.
1. CSS 개요
1. 기본문법 : 선택자와 선언부
태그 { 속성1:값1 ; 속성2:값2 ; ... }
- 선택자 : 스타일을 지정할 HTML 요소(태그, 아이디 등)
-
선언부 : CSS 속성 이름과 값
p { background-color:yellow; } // p 태그의 배경색상을 yellow로 설정 h1 { color:blue; font-size:12px; } //h1 태그의 폰트 색, 크기 설정
2. 선택자(selector) : 스타일을 적용할 요소, 대상
| 선택자 | 예시 | 설명 |
|---|---|---|
| 태그 | 태그 {속성:값}p {background-color:yellow;} |
문서 내 모든 <p> 태그 영역 선택 |
| 태그, 태그 | div, p {속성:값} |
그룹 선택자 모든 <div> 와 <p> 태그 영역 선택 |
| 태그 태그 | div p {속성:값} |
<div> 태그 안에 있는 모든 <p> 태그 영역 선택 |
| .class | .class {속성:값}.type1 {color:red;} |
class="type1" 인 된 모든 태그영역 선택 |
| #id | #id {속성:값}#special {color:red;} |
id="special" 인 된 모든 태그영역 선택 |
| * | * | 문서 내 모든 요소를 선택 |
3. CSS 활용
- inline CSS : 태그 내부에 style 속성으로 지정
<p style="background-color:yellow;"> - 내부 스타일 시트 →
<head>태그 내부에 작성 -
외부 스타일 시트 →
<link type="text/css" rel="stylesheet" href="스타일시트파일">//include/mystyle.css → 스타일시트파일 @CHARSET"UTF-8"; h1 {color:red;} p {color:green;}<!DOCTYPEhtml> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link type="text/css" href="../include/mystyle.css" rel="stylesheet"> </head> <body> <h1>Heading</h1> <p>Paragrah</p> </body> </html>
2. CSS3 박스 모델
HTML 내의 요소들은 사각형의 박스 형태로 출력된다. → border(경계선), margin(바깥쪽 여백), padding(안쪽 여백)
1. border (경계선)
border-style : none , dotted , dashed , solid , double 등
border-width
border-color
border-radius
2. 요소의 크기
width : 가로 길이
height : 세로 길이
3. margin(바깥쪽 여백)
margin-top, margin-right, margin-bottom, margin-left
// 상하좌우 여백 설정(시계방향으로)
// margin: top right bottom left
margin: 10 20 30 40;
// 상하좌우 여백을 동일하게 설정
margin: 10;
4. padding(안쪽 여백)
padding-top, padding-right, padding-bottom, padding-left
// 상하좌우 여백 설정(시계방향으로)
// padding: top right bottom left
padding: 10 20 30 40;
// 상하좌우 여백을 동일하게 설정
padding: 10;
5. 정렬 방식
text-align : left, center, right, justify
6. 배경 설정
background-color : 배경 색상
background-image: '이미지의 경로/url' : 배경 이미지
7. 하이퍼링크 스타일
a:link 클릭하지 않은 링크
a:visited 클릭한 링크
a:hover 마우스가 올라갔을 때
a:active 마우스로 클릭할 때
3. CSS의 레이아웃
1. block 요소와 inline 요소
-
block 요소 : 한 줄에 한개 요소만 배치할 수 있다. → h, p, ul, li, table, div, form 태그 등
*ex.태그 { display:block; } -
inline 요소 : 한 줄에 여러개 요소를 배치할 수 있다. → a, img, input, span 태그 등
*ex.태그 { display:inline; }
2. 좌표 지정
정적 배치(static) : 정상적인 흐름에 따라 배치  →  태그 { position:static }
상대적 배치(relative) : 정상적인 흐름을 기준으로 상대적인 좌표에 배치  →  태그 { position:relative }
절대좌표 배치(absolute) : 전체 페이지를 기준으로 절대 좌표에 배치  →  태그 { position:absolute }
고정좌표 배치(fixed) : 스크롤에 관계없이 고정된 좌표에 배치  →  태그 { position:fixed }
3. float(배치 방향)
태그 { float:left; } : 왼쪽에 배치
태그 { float:right; } : 오른쪽에 배치
4. 레이어와 z-index
태그 { z-index:값 }  →  __z-index__가 클수록 높은 우선순위를 갖는다.
즉, __z-index__가 클수록 상대적으로 위쪽/앞쪽에 표시되고 z-index가 낮으면 다른 요소들에 의해 가려지게 된다.
5. opacity(투명도)
태그 { opacity:0.0~1.0 }
// 0.0(투명) ~ 1.0(불투명) 사이값
6. visible(가시성)
태그 { visibility:visible; } : 화면에 표시
태그 { visibility:hidden; } : 화면에서 숨김
4. 애니메이션 효과
-
이동(transition)
//태그 { transition:전환속성 시간; } div { transition: width 5s; } -
평행이동(translate)
translate(100px, 0px) // x축 100px, y축 0px 이동 scale(1.2, 1.2) // x축 1.2배, y축 1.2배 확대 rotate(30deg) // 30도 회전 -
비틀기(skew)
skew(30deg, 20deg); // x축 30도, y축 20도 비틀기
* 참고 링크
참조1 HTML+CSS
참조2 CSS를 HTML에서 사용
참조3 CSS 기초
Leave a comment