CSS 적용
1. 인라인 스타일(Inline style)
- HTML 내부 요소에 style 속성을 사용하여 적용한다.
- 해당 요소에만 스타일 적용이 가능하다.
- 우선 순위가 제일 높다.
- 한 번 설정된 스타일은 변경하기가 어렵다.
인라인 스타일로 작성한 모습이다.
해당 요소에만 적용이 가능하기 때문에 같은 스타일을 적용 시킬 코드가 100개라면 100개 전부 다 스타일을 적용해줘야 하기 때문에 효율적이지 못하다.
2. 내부 스타일 시트(Internal style sheet)
- HTML 문서 내 head 태그에 style 태그를 사용하여 css를 적용한다.
- 해당 HTML 문서에만 적용이 가능하다.
- 문서의 길이가 길어진다.
내부 스타일 시트로 작성한 모습이다.
3. 외부 스타일 시트(External style sheet)
외부 스타일 시트를 많이 사용한다.
- 스타일을 하나의 파일로 분리해서 관리한다.
- .css 확장자를 사용하여 저장한다.
- head태그 내 link 태그를 사용하여 적용할 수 있다.
- 유지, 보수가 쉽고, 재사용이 가능하다.
test01.html에 style.css를 연결한 코드이다.
style.css에서 바탕 색을 초록색으로 변경하면서 잘 연결되었는지 확인해보았다.
css 문법
h1 { color:green; font-weight:bold;} h1 { color:green; font-weight:bold; }같은 내용을 작성한 것이다.
h1은 선택자, 중괄호는 선언의 시작과 끝을 나타낸다.
color는 속성명이고,green은 속성값이다.
선언을 구분할 때는콜론(;)을 사용하여 구분한다.
코드를 작성할 때는 한 속성을 작성하면 줄을 바꾸고 작성해준다.
CSS 선택자
1. 전체 선택자
선택자에 *를 넣으면 HTML 페이지 내부의 모든 태그를 선택한다.
2. 태그 선택자
특정 태그를 모두 선택한다.
예를 들어 선택자에 h1을 넣으면 h1태그 모두 선택된다.
3. 아이디(id) 선택자
아아디 속성을 가지고 있는 태그를 선택한다.
선택자에 #아이디를 넣어준다.
4. 클래스(class) 선택자
클래스 속성을 가지고 있는 태그 모두 선택한다.
선택자에 .클래스를 넣어준다.
5. 후손 선택자
부모 태그 아래에 있는 모든 태그를 선택한다.
예를 들어 선택자에 div h1이라고 넣으면 div태그 안에 있는 h1태그가 모두 선택된다.
6. 자손 선택자
부모 태그 바로 한 단계 아래에 위치한 태그이다.
예를 들어 선탁자에 div > h1과 같이 작성한다.
후손 선택자는 div태그 안에 p태그 아래에 h1태그가 있는 경우에도 적용 되지만, 자손 선택자는 적용되지 않는다.
기본 텍스트 속성
1. 텍스트 굵기
font-weight:값 입력;과 같이 사용하고, 숫자가 커질 수록 굵어진다.
.text-styling:nth-child(1) {
font-weight: 100;
}
.text-styling:nth-child(2) {
font-weight:900;
}
.text-styling:nth-child(3) {
font-weight:500;
}숫자에 따라 글씨의 굵기가 달라지는 것을 볼 수 있다.
2. 텍스트 변형(대문자, 소문자)
text-transform:숫자; 값에 uppercase를 입력하면 대문자로 바뀌고, lowercase를 입력하면 소문자로 바뀐다.
3. 텍스트 기울임
font-style:italic;을 입력하면 텍스트가 기울어진다.
6번에 기울임을 사용했는데, 7번과 비교하면 기울어져 있는 모습을 볼 수 있다.
4. 텍스트 장식(선)
text-decoration:값; 값에 none를 입력하면 아무 변화 없다.
overline은 글씨 위에 선이 그어진다.
underline은 글씨 아래에 밑줄이 그어진다.
line-through은 글씨의 중간에 선이 그어진다.
.text-styling:nth-child(7) {
text-decoration: none;
}
.text-styling:nth-child(8) {
text-decoration:overline;
}
.text-styling:nth-child(9) {
text-decoration: underline;
}
.text-styling:nth-child(10) {
text-decoration: line-through;
}값에 따라서 선이 그어지는 것이 다른 모습을 볼 수 있다.
5. 텍스트 정렬
text-aligin:값; 값은 left, center, right가 있으며, 글씨의 위치를 조절할 수 있다.
순서대로 left, right, center를 입력한 모습이다.
6. 텍스트 간격
letter-spacing:숫자px;와 같이 사용하며, 숫자가 커질수록 글자 사이의 간격이 증가한다.
.text-styling:nth-child(14) {
letter-spacing:-5px;
}
.text-styling:nth-child(15) {
letter-spacing:0px;
}
.text-styling:nth-child(16) {
letter-spacing:5px;
}음수 값을 적용하여 글자 사이의 간격이 줄어들어 겹친 모습을 볼 수 있고, 숫자가 증가함에 따라 글자 사이의 간격이 증가한 것을 볼 수 있다.
7. 텍스트 색상
color:값 값에는 색상 이름(ex, red, yellow..)을 사용할 수도 있고, Hex 단위인 16진수로 색을 입력할 수도 있다.
.text-styling:nth-child(17) {
color:red;
}
.text-styling:nth-child(18) {
color:#ff0000;
}위에 값은 색상 이름을 입력했고, 아래 값은 Hex 단위인 16진수로 입력했다.
Hex단위가 색상 이름보다 더 많은 색을 사용할 수 있다.
