HTML의 본질
: 어떻게 정보를 잘 표현할 것인가
CSS란?
: Cascading Style Sheet
디자인 기능
HTML과 CSS가 만나는 법
- 인 라인(in line) 방식 - ex) h1
- 내부 스타일 시트 (embeded 방식) - ex) h2
- 외부 스타일 시트
- import 방식
- link 방식
<head>
<style>
h2 {color:blue}
</style>
</head>
<body>
<h1 style="color:red">Hello World</h1>
<h2>Hello world</h2>
</body>선택자(selector)와 선언(declaration)
: 선택하고 선택한 대상에게 효과를 줘야한다.
선택자
- 태그 선택자
ex) li{ } - 클래스 선택자 : 여러 번 등장
ex) class="임의" .임의 { } - 아이디 선택자 : 한 번 등장
ex) id="임의" #임의 { }
<head>
<style>
li {
color:red;
text-decoration:underline;
}
#임의 {
font-size:100px;
}
.deactive {
text-decoration:line-through;
}
</style>
</head>
<body>
<li class="deactive">HTML</li>
<li id="임의">CSS</li>
<li class="deactive">JavaScript</li>
</body>- 부모 자식 선택자
ul li {color:read;} 부모 태그 바로 밑에 있는 해당 자손 태그들만 선택
ul,ol {backgroung-color:blue;} ul과 ol을 동시 선택
#임의>li {border:1px solid red;} #lecture 밑에 있는 li만 선택
* {} 모두 선택
태그* {} 해당 태그 모두[선택자 게임] https://flukeout.github.io/
가상(pseudo) 클래스 선택자
: 클래스 선택자는 아니지만 클래스선택자처럼 동작하고
엘리먼트의 상태에 따라서 엘리먼트를 선택하는 선택자
- :link - 방문한 적이 없는 링크
- :visited - 방문한 적이 있는 링크
- 보안상의 문제로 아래 속성만 사용가능
- color
- background-color
- border-color
- outline-color
- The color parts of the fill and stroke properties
- 보안상의 문제로 아래 속성만 사용가능
- :hover - 마우스를 올려 놓았을 때
- :active - 마우스를 클릭했을 때
- :focus - 포커스되었을 때, 가장 밑에 두는 것이 좋음
**css는 뒤에 있는 코드가 우선순위임
<style>
a:active{color:green;}
a:hover{color:yellow;}
input:focus{background-color:black; color:white;}
</style>
상속
: 부모 엘리먼트의 속성을 자식 엘리먼트가 물려받는 것을 의미
모든 속성이 상속을 지원하는 것은 아니다. 상속을 하면 오히려 비효율적인 속성들이 있음
[상속하는 속성과 상속하지 않는 속성의 목록]
https://www.w3.org/TR/CSS21/propidx.html
캐스캐이딩 Cascading
: 하나의 엘리먼트에 대해서 다양한 효과가 영향력을 행사하려고 할 때 우선순위를 어떻게 설정하는가에 대한 규칙
우선순위
1. style attribute 가장 정교
2. id selector
3. class selector
4. tag selector 가장 포괄적
** !important 붙여주면 우선순위가 제일 높아짐
<style>
li{color:red !important;}
#idsel{color:blue;}
#idsel{color:yellow;}
.classsel{color:green;}
</style>
</head>
<body>
<ul>
<li>html</li>
<li id="idsel" class="classsel">css</li>
<li>javascript</li>
</ul>
</body>속성 (property)
타이포그래피 - 서체
- font-size : 글꼴 크기
- rem : 가변성, 주로 사용
- px : 크기가 고정되어 있음
- em : 가변성, 부모태그의 영향을 받음
#px {font-size:16px;}
#임의 {font-size:1rem;}- color : 색상
h1 {color:red;}
h1 {color:#00FF00;}
h1 {color:rgb(256,256,256);}[색상 참고] http://www.w3schools.com/css/css_colors.asp
- text-align : 정렬
- left, right, center, justify
p {text-align:justify;}- font-family : 글꼴 지정
해당 글꼴이 없을 수 있기 때문에 여러 개의 글꼴은 지정해주고
마지막 글꼴은 특정 글꼴이 아닌 포괄적인 폰트(serif 장식이 있음, sans-serif 장식이 없음, cursive 흘림체, fantasy, monospace 고정폭)로 지정해준다.
h1 {font-family: arial, verdana, serif;}- font-weight : 폰트 두께
h1 {font-weight:bold;}- line-height : 줄 간격 기본:1.2
p {line-height:1.4;}
p {line-height:120px;} //고정값- font : 여러 속성을 축약형으로 표현하는 속성, 순서 지켜서 기술해야함
font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;
#type1{
font-size:5rem; //필수
font-family: arial, verdana, "Helvetica Neue", serif; //필수
font-weight: bold;
line-height: 2;
}
#type2{
font:bold 5rem/2 arial, verdana, "Helvetica Neue", serif;
}- 웹폰트 : 사용자가 가지고 있지 않은 폰트를 웹페이지에서 사용할 수 있는 방법
무료 웹폰트 사이트 https://fonts.google.com/?authuser=1
<head>
<link href="https://fonts.googleapis.com/css?family
=Indie+Flower|Londrina+Outline|Open+Sans+Condensed:300" rel="stylesheet">
<style>
#font1{
font-family: 'Open Sans Condensed', sans-serif;
}
</style>
</head>- 폰트 파일 다운로드 후 폰트 삽입하기
@font-face {
font-family: 폰트명;
src : url(파일저장위치) format('폰트 확장자명');
}
당신의 노고에 박수를 보냅니다.🥹👍🏻