Css
CSS
Why?
스타일 작업은 디자인적인 작업에 가깝다.
이 작업은 논리적이지 않은 것처럼 보이지만, 상당히 논리적인 부분으로 구성되어 있다.
여러속성이 가진 의미와 원리를 깨닫고, 이를 적용하자.
학습 목표
- CSS원리를 깨닫고 이를 이용해 스타일 작업을 할 수 있다.
배경 지식
1. css 기본사용법
멋진 웹사이트 엘리먼트가 알맞게 위치해야하고 나름대로의 멋이 필요하다.
=> element(tag)마다 어떠한 스타일을 가질 필요가 있다.
span { color : red; }
//각각 span은 selector, color는 property, red는 value 이다.
코드복사
style을 html페이지에 적용하는 세가지 방법.
- inline, internal, external
1.1 inline (HTML태그안에 적용)
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8” />
<title>World !</title>
</head>
<body>
<span style=”color:red;”> HELLO World ! </span>
</body>
</html>
코드복사
1.2 internal (style태그로 지정)
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8” />
<title>World !</title>
<style>
span {
color :red;
}
</style>
</head>
<body>
<span> HELLO world ! </span>
</body>
</html>
코드복사
1.3 external (외부 css파일로 만들기)
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8” />
<title>World !</title>
<link rel=”stylesheet” type=”text/css” href=”main.css” />
</head>
<body>
<span> HELLO World ! </span>
</body>
</html>
코드복사
위 세 가지 방법중 어떤 방법이 좋을까? 그 이유를 고민하고 찾아보자.
2. CSS특징 - Cascading
CSS는 다양한 방식으로 여기저기 중복으로 코딩할 수 있다. 그럼에도 브라우저는 어떠한 오류를 일으키지 않는다.
다만 브라우저는 최종적으로 어떤 스타일을 표현할지를 결정한다. 그때 룰을 가지고 있다.
기본적으로 스타일 정보는 ‘경쟁’에 의해서 결정된다.
선언방식에 따라 다르다.
- inline > internal = external
- internal과 external 은 우선순위가 같다. 따라서 나중에 작성된 것이 반영됨.
동일하면 나중에 선언한 것이 적용됨
span {
color : red;
}
span {
color : blue;
}
//blue가 적용됨
코드복사
구체적인 것이 있다면 먼저적용됨
body > span {
color : red;
}
span {
color : blue;
}
//red 가 더 구체적인 selector임으로 red가 적용됨.
코드복사
하나의 엘리먼트에 아이디,클래스가 존재한다면 아이디가 최우선적용됨.
#a {
color : red;
}
.b {
color : blue;
}
div {
color : green;
}
//id > class > element 순으로 우선적용됨. 따라서 red가 적용됨.
코드복사
3. CSS특징. 상속
css 속성은 하위 태그에 상속된다. box관련 스타일은 제외 (border, padding, margin)
body { color:red}
코드복사
라고 했을때 body 태그 안에 엘리먼트는 모두 상속되어 red색깔을 가진다.
<body>
<div id="jisu">
<div>
<span> span tag </span> <!--red-->
</div>
<span> span tag 2 </span> <!--red-->
</div>
<bod>
코드복사
4. CSS Selector
CSS Selector는 복잡한 DOM Tree를 찾기 위한 문법이다. 다시말해, tag, id, class, html 태그속성을 활용해 원하는 node를 쉽게 찾아주는 방법이다.
selector는 꽤 복잡한 규칙을 가지고 있음으로 그때그때 찾아서 적용하며, 차츰 외우도록 한다.
4.1 HTML Tag로 지정하기.
아래에서 span태그로 span태그를 찾았다.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8” />
<title>World !</title>
<style>
span {
color :red;
}
</style>
</head>
<body>
<span> HELLO World ! </span>
</body>
</html>
코드복사
4.2 ID로지정하기.
ID가 spantag인 span 엘리먼트를 지정했다. ID는 문서에서 재사용하지 않고, 하나만 존재하는 것이 좋다.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8” />
<title>World !</title>
<style>
#spantag {
color :red;
}
</style>
</head>
<body>
<span id=”spantag”> HELLO World ! </span>
</body>
</html>
코드복사
4.3 CLASS 로 지정하기.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8” />
<title>World !</title>
<style>
.spanClass {
color :red
}
</style>
</head>
<body>
<span class="spanClass"> HELLO World ! </span>
</body>
</html>
코드복사
4.4 CSS Selector 다양한 활용
id,class 요소 선택자와 함께 활용
#myid {color : red}
div.myclassname { color : red}
코드복사
그룹선택
h1, span, div { color :red }
h1, span, div#id {color : red}
h1.span, div.classname { color : red}
코드복사
하위요소 선택
<div id=”jisu”>
<div>
<span> span tag </span>
</div>
<span> span tag 2 </span>
</div>
코드복사
이렇게 하면 span tag와 span tag2가 모두 선택된다.
#jisu span { color :red }
코드복사
n번째 자식요소를 선택 (nth-child)
<div id=”jisu”>
<h2>단락 선택</h2>
<p>첫번째 단락입니다</p>
<p>두번째 단락입니다</p>
<p>세번째 단락입니다</p>
<p>네번째 단락입니다</p>
</div>
코드복사
이렇게 선언하면 어떤 p태그에 red 가 적용될까? nth-of-type 라는 셀렉터도 찾아서 nth-child와의 차이를 비교해보자.
#jisu > p:nth-child(2) { color :red }
코드복사
이것말고도 다양한 CSS Selector 가 존재한다.
5. 다양한 스타일 꾸미기 : font, color, background
5.1 font style 선택
font-family : ‘sans-serif’;
font-family : ‘굴림’,Gulim, Helvetica,sans-serif;
코드복사
font-face라는 걸 사용하면 web font를 다운로드해서 다양한 font제공도 가능. (ex> ‘google web font’)
5.2 font size 선택
기본 : 16px (1em)
font-size : 0.9em;
코드복사
5.3 font의 색깔을 변경
color : red; /* color name (google에서 ‘css color names’ 를 검색해보자) */
color : rgb(255, 255, 0); /* red, green, blue */
color : rgba (255, 255,0,0.5); /* red, green, blue, alpha */
color : #3344ff /* 16 진수 표기법 */
color : #34f /* 16진수 축약 표기법 */
코드복사
5.4 예쁜 폰트에 대한 연구.
폰트 스타일은 웹사이트 디자인의 핵심이다 :-)
대부분 디자이너는 기본 폰트는 안이쁘다.고 생각….
이쁜 폰트를 위해 이미지를 만들어 배경으로 사용했었음. 이미지가 다운로드를 받아야하고, 다양한 해상도에서 깨지는 등의 문제 발생.
많은 웹 폰트가 존재한다. css의 @font-face 속성으로 웹에서 다운로드 받아 사용해야 함(woff와 같은 확장자 파일) 구글 웹폰트가 유명.
다양한 크기에서 품질을 유지하는 벡터 방식의 아이콘 웹폰트가 퍼지기 시작 (unicode영역중 Private Use Area (PUA) 영역을 활용해서 제작) http://getbootstrap.com/components/
웹폰트 방식말고, 기본 unicode를 사용해서 간단한 아이콘을 표현하는 것도 가능.
<div> 안녕하세요 ☺</div> //☺
코드복사
5.6 background
배경에 이미지를 넣을 수 있다. 이미지를 어디에 어떻게 넣는지에 대한 속성이 있음.
background-color
background-image
background-position
background-repeat
한 줄로 적용할 수도 있음
background : #0000ff url(“.../gif”) no-repeat center top;
코드복사
6. BOX Model
모든 html tag는 사각형모양을 유지하면서 중첩된 형태이다. 박스안에 박스가 들어있는 구조라고 이해할 수 있다.
element간의 간격이 필요하고, element안에서의 글자와의 간격도 필요하다. 어떤 속성이 있는지 찾아보자.
6.1 Box Model
HTML의 element는 사각형 박스의 형태를 가지며, 다음과 같은 속성을 가진다 아래 그림을 참고하자.
https://www.w3schools.com/css/css_boxmodel.asp
6.2 element의 테두리를 부여하자.
border 속성을 찾아보자.
6.3 padding, margin
padding, margin속성을 사용하면, 안의 간격과 다른 엘리먼트와의 간격을 설정할 수 있다.
이 속성은 이렇게 단축표기법으로 표현할 수 있다.
margin : 0px 0px 0px 10px; (top , right , bottom, left)
margin : 10px; (네개의 분면이 모두 10px)
margin : 10px 15px; (top, bottom 은 10px , right, left는 15px)
코드복사
참고. HTML,CSS 디버깅
https://developers.google.com/web/tools/chrome-devtools/css
정리
- 스스로 캐스캐이딩에 대해서 이해하고 설명할 수 있어야 함
- 스스로 상속에 대해서 이해하고 설명할 수 있어야 함
- 다양한 스타일을 어디서 찾고 어떻게 적용하면 될지 알아야 함.
- CSS Selector 문법을 이해하고 있어야 함.