* 웹사이트의 폰트
1. 일반 폰트 : 사용자의 pc에 설치되어 있는 폰트를 사용하는 것이 기본 => 사용자에 따라서 제작자의 의도와 다른 폰트를 사용해서 웹사이트가 표시되는경우
2. 웹 폰트 : 폰트를 사용자의 pc에 설치되어 있는 폰트를 사용하지 않고 서버에 저장된 폰트를 사용할 수 있게하는 것
** 구글 폰트 : 무료
- 링크 -> html 적용
- @import -> css 적용
* 폰트 - 패밀리 속성, 폰트 크기,웹/구글 폰트 사용법 중요
* 링크 : 링크는 상태 에 따라 다르게 스타일을 지정할 수 있다.
=> 1. a:link - 방문하지 않은 정상적인 링크
2. a:visited - 사용자가 방문한 링크
3. a:hover - 사용자가 마우스를 올려 놓을 때의 링크
4. a:active - 마우스 버튼을 누르고 있을 때의 링크
EX)
<head>
<style>
/* unvisited link */
a:link {
color: red;
} => 기본상태 => 빨간색
/* visited link */
a:visited {
color: green;
} => 해당 링크를 방문한 뒤에는 초록색으로 변경된다.
/* mouse over link */
a:hover {
color: hotpink;
} => 마우스가 닿았을 때 핫핑크로 변경된다
/* selected link */
a:active {
color: blue;
} => 마우스버튼을 누르고 있는 상태에 파란색으로 변경된다.
</style>
</head>
* 순서 규칙
- a : hover는 a : link 및 a : visited 뒤에 와야한다.
a : active는 a : hover 뒤에 와야한다.
* 테이블
- 표 테두리 : 기본 => 두줄 : 테이블과 <th> 및 <td> 요소에 별도의 테두리가 있기 때문 이다.
EX)
<head>
<style>
table, th, td {
border: 1px solid blue;
} => 테두리 굵기,모양,색
</style>
</head>
- 표 테두리 축소 : 한줄 => border-collapse: collapse;
EX)
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
width: 100%;
border-collapse: collapse;
} => 표 테두리를 한줄로 만든다.
</style>
</head>
* text-align => left,right,center 가로방향
vertical-align => top,bottom,middle 세로방향
* 반응형 테이블(Responsive Table) : overflow-x:auto
: 화면이 작아져 전체 콘텐츠를 표시 할 수 없는 경우 반응 형 테이블에 가로 스크롤 막대가 표시된다. => 반응형 웹에서는 잘 사용하지 않는다.
-> 모바일 화면에서 보기 불편하다.
* 조합 선택자
: 여러 Element들의 관계를 선택자로 표현한다.
Element 관계
- 수직구조( 포함 관계 ) : 조상, 부모, 자식(child), 자손(desecdant)
- 수평구조( 인접 관계 ) : 형제(sibling)
** 조상,부모 요소를 찾는 경우는 없다.
* CSS 선택 : 선택자 간의 관계를 설명하는 것
- CSS 선택기는 둘 이상의 단순 선택기를 포함 할 수 있다. 간단한 선택자 사이에 결합자를 포함 할 수 있다.
=> 네 가지 조합이 있다.
1. 자손 요소 (공백) : 기준 요소에 포함되는 모든 요소
2. 자식 요소 (>) : 기준 요소에 직계로 포함되는 요소
3. 형제 요소(+) : 기준 요소의 바로 다음 요소를 찾는다.
(** 바로 다음 요소가 선택자와 일치하지 않으면 제대로 적용이 되지 않는다..)
4. 형제 요소(~) : 기준 요소의 다음 요소들중 선택자와 일치하는 것을 모두 찾는다.
* 선택자를 연결해서 사용하는 경우
- css property를 여러개의 요소에 공통 적용(,)
Ex) table,th,td{}
* 선택자의 의미를 좀 더 명확히 사용하는 경우
Ex) p.small : p요소 중 class 이름이 small인 요소를 찾으라는 뜻
div.code : div요소 중 class 이름이 code 인 요소를 찾으라는 뜻
h1#title : h1요소 중 id 이름이 title인 요소를 찾으라는 뜻