CSS 기초
HTML은 운영체제나 사용하는 프로그램에 관계없이 누구나 같은 내용의 문서를 볼 수 있도록 하겠다는 취지에서 만들어졌다.
그러나, 이미지와 동영상등의 하이퍼미디어를 주 내용으로 하는 웹 문서가 다양하고 화려해짐에 따라,
HTML은 그 한계를 드러났고, 이를 보완하기 위해 등장한 새로운 문법으로 스타일 시트를 사용하면
TABLE이나 FRAME에 의존하던 문서의 레이아웃을 효과적으로 할 수 있고, 글자 크기나 글자체, 줄간격, 배경 색상 등도 자유롭게 선택할 수 있다.
CSS 는 HTML문서 내에서 어떤 요소에 CSS의 스타일을 적용시킬 것인가 결정하기 위한 것이다.
CSS 파일은 선택자(Selector)와 { }로 둘러쌓인 속성:속성값 들로 이루어져 있다.
CSS 의 장점
① 홈페이지에 통일감(일관성)을 줄 수 있다.
② 한 번만 정의하여 여러번 가져다 쓸 수 있으므로 업무효율성을 높일 수 있다.
③ 정의된 곳 한 곳만 수정하면 되므로 수정작업이 쉽다.
CSS의 정의하는방법
(1) <style>태그를 선언하여 사용하기
<style type=”text/css”>
<!--
이곳에 스타일을 정의한다.
-->
</style>
(2) 각 태그들의 style 속성에 설정하기
<태그 이름 style = ”스타일 ……..” >
(3) CSS(스타일)를 파일로 저장하기
<head> </head> 사이에 외부 스타일 시트를 불러올 수 있다.
<link rel="stylesheet" type="text/css" href="./stylesheet.css" />
Front End 디자인 무료 공개 소스(코드펜) https://codepen.io 에서 회원 가입하면 코드 미리 보기도 가능하고, 수많은 오픈 소스를 이용할 수 있다.
※ 글자색상, 배경색상을 RGB로 직접 지정하고 싶은 경우에는
http://www.color-hex.com/ 에서 확인 변경할 수가 있고
http://www.w3schools.com/css/css_colors.asp 참조하면 좋다.
https://www.cmsfactory.net/ 에 좋은 강좌 내용이 많다.
ㅇ ID 사용하기
스타일 시트 파일내에
#slist { font-style:italic; color:blue; }
라고 정의하면
HTML 본문에서
<div id="slist"> Welcome to Hello</div>
로 문장을 사용한다.
<style>
#para1 { text-align: left; color: blue; }
</style>
<p id="para1">Hello World!</p>
ㅇ 클래스 사용하기
ID에 사용되는 # 심볼 대신에 클래스 문장은 .(점)으로 시작한다.
스타일 시트 파일내에
.slist { font-style:italic; color:blue; }
라고 정의하고
HTML 본문에서는
<div class="slist"> Welcome to Hello</div>
<style>
p.center { text-align: center; color: red; }
p.large { font-size: 200%; }
p {text-align:justify;} // <p> ...</p> 태그 사이의 모든 텍스트가 양쪽 맞춤된다.
</style>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>
p { margin-left : 10px; margin-right : 10px; background-color: yellow; }
ㅇ CSS 규칙
- CSS에서 세미콜론은 동일한 줄에 있는 여러 CSS 문장을 분리하는데 사용한다.
- 만일 값이 공백을 포함한 여러 단어일 경우 다음과 같이 quote(")로 묶어준다.
p {font-family: "sans serif"}
- 하나의 선택자에 하나 이상의 속성을 정의하고 싶을 경우에는 ";"(semicolon)으로 분리해 준다.
p {text-align:center;color:red}
ㅇ 외부 스타일 시트
외부 스타일 시트는 여러 웹 페이지에 스타일을 적용시킬 때 이상적이다. 외부 스타일 시트를 사용하면 하나의 CSS파일 만 수정하여 어려 웹 페이지(HTML문서)의 스타일을 변경시킬 수 있다. 그렇게 하기 위해서 각각 웹 페이지에는 <link> 태그를 사용하여 외부 스타일 시트 파일을 지정하는 문장에 <head>태그에 포함되어 있어야 한다.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="default.css" />
</head>
<body>
ㅇ 주석처리
/* ... */ 로 하면 주석으로 인식한다.
ㅇ 내부스타일 시트
내부 스타일 시트는 하나의 문서에서만 사용하는 스타일을 정의할 때 사용한다. 내부 스타일은 <head>태그 안에 <style>태그를 이용하여 정의한다.
<head>
<title>문서의 제목</title>
<style type="text/css">
hr { color: sienna; }
p { margin-left: 20px; }
body {
background-image: url("images/back.gif")
}
</style>
</head>
<style type = "text/css">
p { color : blue; } /* p 태그 안의 글자들을 파란색으로 처리함. */
#ctxt { color : blue; } /* id명이 ctxt인 요소의 글자들을 파란색으로 처리함. */
.ctxt { color : blue; } /* class명이 ctxt인 요소의 글자들을 파란색으로 처리함. */
* { color : blue; } /* 페이지 내의 모든 요소의 글자들을 파란색으로 처리함. */
li > p { color : blue; } /* li 자식 p 태그의 글자들을 파란색으로 처리함. */
h1 + p { color : blue; } /* h1 속 바로 다음 p 태그의 글자들을 파란색으로 처리함. */
h1[class] { color : blue; } /* 두 hi 중 class 속성을 가진 '서울특별시'만 파란색으로 나타난다. */
a { color : #000; } /* 링크 걸린 글자는 모두 검은색 */
a:hover { color : #f00; } /* 마우스 닿으면 빨간색 */
.box:after { content : "항목을 선택해주세요." ; color : green ;} /* box의 마지막에 문장을 삽입한다. */
p:first-letter { font-size : 300% ; } /* p 태그 안의 첫 글자는 글자크기 세배로. */
p { border-bottom:1px dashed #000 ;} /* p 태그에 모두 밑줄 치고. */
p:last-child { borde : none ;} /* 마지막 p 태그에만 밑줄 빼기. */
p.more a { color : red ; } /* 클래스명이 more인 p 태그의 링크 (a)색상을 변경함. */
.box li { padding : 5px 0;} /* 클래스명이 box인 요소 내부의 li에 세로 여백을 준다. */
h1, p { border:1px solid #000; } /* h1과 p 요소에 1px짜리 검은 테두리를 준다. */
</style>
기본적으로 <div> 엘리먼트는 무한 너비를 가진다.
픽셀(px)의 크기는 사용자의 모니터의 면적과 픽셀 깊이에 따라 다르다.
포인트는 인치의 1/72 크기와 같다.
em 은 현재 글씨체와 같고, 상대적인 면적으로 나타내는 데 사용된다.
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x; // 작은 이미지파일을 가로방향으로 큰 이미지처럼 보여준다
background-repeat: no-repeat;
background-position: left top; // 이미지 파일 위치 지정
margin-left: 220px; // 이미지와 글자가 겹쳐 보이지 않도록 글자의 여백 지정
}
</style>
If the margin property has four values:
margin: 20px 30px 40px 50px;
top margin is 20px
right margin is 30px
bottom margin is 40px
left margin is 50px
If the margin property has three values:
margin: 20px 30px 40px;
top margin is 20px
right and left margins are 30px
bottom margin is 40px
If the margin property has two values:
margin: 20px 30px;
top and bottom margins are 20px
right and left margins are 30px
If the margin property has one value:
margin: 20px;
all four margins are 20px
text-transform: uppercase; // 글자를 모두 대문자로 변환
text-transform: lowercase; // 글자를 모두 소문자로 변환
text-transform: capitalize; // 글자의 첫글자만 대문자로 변환
text-indent: 30px; // 텍스트 첫글자 들여쓰기
ㅇ 스마트폰 레이아웃 주의사항
- overflow 속성을 사용해서 스크롤을 넣을 수 없다.
- 스마트폰은 hover가 없다. 그래서 hover, active 등 상태 선택자를 사용할 때 주의해야 한다.
- 동위 선택자에 제한이 있다.
- 선택자에 ~를 지원하지 않는 브라우저가 있다.
- iphone에서는 label 태그에 onclick="" 속성을 부여해야 정상 동작한다.
- 그래디언트를 적용할 수 없을 수 있다.
ㅇ viewport META
- meta 태그를 title 태그 위에 선언하여 브라우저에 특별한 정보를 제공할 수 있다.
- name 속성의 값이 viewport인 경우 content 속성의 값을 이용해 브라우저 화면 설정과 관련된 정보를 제공한다.
<meta name="viewport" content="width=device-width, intial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />
