참고 책 : https://www.yes24.com/Product/Goods/108748709
코딩 자율학습 HTML + CSS + 자바스크립트 - 예스24
코딩을 몰라도 걱정 제로, 이 책 하나로 충분히 웹 개발을 시작할 수 있다!이 책은 코딩 초보자가 문법을 빠르고 재밌게 배울 수 있도록 실무에서 주로 사용하는 내용을 쏙쏙 골라 다양한 예제와
www.yes24.com
CSS
HTML 문서에 스타일을 적용하여 꾸며준다
문법 형식: 선택자와 선언부로 나뉜다.
1. 선택자
CSS 스타일을 적용할 HTML 태그 요소를 선택한다
2. 선언부
중괄호 {}로 되어있다
태그에 적용할 스타일을 작성한다
속성: 값;
형식으로 써준다
h1 {
color:red;
}
CSS 주석
/* 주석입니다. 웹 브라우저 소스 보기를 보면 보이기 때문에 중요한 내용은 적지 않습니다 */CSS를 HTML 문서에 적용하는 방법
1. 내부 스타일 시트 이용하기
2. 외부 스타일 시트 이용하기
3. 인라인 스타일 사용하기
-내부 스타일 시트 이용하기
HTML 문서의 head 부분에 style 태그를 사용하여 쓴다
<head>
<style>
h1{
color:red;
}
</style>
</head>
-외부 스타일 시트 이용하기
CSS 파일을 별도로 만들고 HTML 문서와 연결한다
CSS: .css 파일로 생성
선택자와 선언부를 쓴다
h1 {
color:red;
}
연결: HTML 문서의 head 부분에 link 태그를 사용하여 쓴다
<head>
<link rel="stylesheet", href="CSS 파일 경로">
</head>
유지보수가 쉽고 성능적으로도 가장 좋기 때문에 때문에 이것을 주로 사용
-인라인 스타일 이용하기
태그 안에 style 속성을 이용하여 속성값에 CSS 코드 작성해서 사용한다.
선택자 부분이 필요 없다
<body>
<h1 style="color:red">안녕하세요</h1>
</body>거의 사용되지 않는다
선택자 사용 방법
<기본 선택자>
1. 전체 선택자 사용하기 : #
#{
/*CSS 코드*/
}
2. HTML 태그 이름 사용 : 태그명
태그명 {
/*CSS 코드*/
}동일한 태그명을 가진 요소들에 모두 적용된다
3. id 속성 사용 : #id속성값
#id속성값 {
/*CSS 코드*/
}id는 HTML 문서 안에서 유일한 값이어야 한다.
4. class 속성 사용 : .class속성값
.class속성값 {
/*CSS 코드*/
}class 속성값은 중복해서 사용할 수 있다.
class 속성값이 같은 요소들에 모두 적용된다.
5. HTML 속성 사용 : [ ]
[속성] {
/*CSS 코드*/
}
[속성=속성값] {
/*CSS 코드*/
}태그 안에 동일한 속성이 있는 요소나, 속성과 값이 동일한 요소가 있다면 모두 적용된다.
속성 선택자는 다른 선택자들과 함께 쓸 수 있다.
태그명[속성] {
/*CSS 코드*/
}
태그명[속성=값] {
/*CSS 코드*/
}태그 선택자와 함께 쓸 수도 있다.
클래스 선택자, id 선택자와도 쓰일 수 있다.
<조합 선택자>
1. 그룹 선택자 : ,
여러 선택자의 선언부가 동일하여 같이 묶고 싶을 때 사용한다.
선택자1, 선택자2, 선택자3, ..., 선택자n {
/*CSS 코드*/
}선택자는 태그 선택자가 될 수도, id 선택자가 될 수도, class 선택자가 될 수도 있음
2. 자식 선택자: >
부모 요소의 하위에 있는 자식 요소에 사용된다
부모선택자 > 자식선택자 {
/*CSS 코드*/
}
3. 하위 선택자: 공백
중첩된 태그 요소들에 대한 조건
특정 부모 요소의 하위 요소에 한정되어 사용된다
선택자1 선택자2 ... 선택자n {
/*CSS 코드*/
}
4. 인접 형제 선택자 : +
선택자 + 바로 뒤에 있는 선택자(형제 관계인)
이전 선택자 + 이후 선택자 {
/*CSS 코드*/
}이전 선택자 뒤에 있는 이후 선택자 하나에만 적용된다.
5. 일반 형제 선택자 : ~
이전 선택자 ~ 대상 선택자 {
/*CSS 코드*/
}
<가상 요소 선택자>
1. ::before
기준 선택자 앞에
기준 선택자::before {*/CSS 코드 */}2. ::after
기준 선택자 뒤에
기준 선택자::before {*/CSS 코드 */}
::before과 ::after에만 사용하는 contenct 속성
p::before {
content:'글'
}새로운 콘텐츠를 추가할 때 사용
<가상 클래스 선택자>
기준 요소:가상 클래스 선택자 {/*CSS 코드*/}요소의 상태를 이용하여 선택자를 지정한다
1. 링크 가상 클래스 선택자
a태그에서 사용
a:link
한 번도 방문하지 않은 링크를 가진 a 태그만 선택
a:link {}
a:visited
한 번 이상 방문된 링크를 가진 a 태그만 선택
a:visited {}
2. 동적 가상 클래스 선택자
사용자의 행동에 따라 동적으로 변하는 상태를 이용
:hover
요소에 마우스를 올리면 해당 태그가 선택자로 지정된다
p:hover {}:active
요소에 마우스를 클릭하고 있는 동안 해당 태그가 선택자로 지정된다
button:activate {}
3. 입력 요소 가상 클래스 선택자
:focus
입력 요소(텍스트 입력 input 태그, textarea 태그)에 커서가 활성화되면 선택자로 지정
input:focus {}
:checked
체크박스가 표시되어 있으면 선택자로 지정된다
input:checked {}
:disabled
상호작용 요소에 diabled 속성이 사용되면 선택자로 지정된다
input:disabled {}:enabled
상호작용 요소에 diabled 속성이 사용되지 않으면 선택자로 지정된다.
input:enabled {}
4. 구조적 가상 클래스 선택자
HTML 태그의 사용 위치, 다른 태그와의 관계에 따라 요소 선택
E:first-child
E 요소의 첫 번째 자식을 선택자로 지정
E:last-child
E 요소의 마지막 자식을 선택자로 지정
E:nth-child(n)
모든 부모 요소의 n번째 자식이 E 요소인 것만 선택자로 지정
E:nth-last-child(n)
모든 부모 요소의 자식 요소들 중 마지막에서 n번 째 자식이 E 요소인 것만 선택자로 지정
E:nth-of-type(n)
모든 부모 요소의 n번째로 등장하는 E 요소를 선택자로 지정
E:nth-last-of-type(n)
모든 부모 요소의 자식 요소들 중 마지막에서 n번째로 등장하는 E 요소를 선택자로 지정
E:first-of-type
모든 부모 요소의 자식 요소 중 첫 번째로 등장하는 E 요소를 선택자로 지정
E:last-of-type
모든 부모 요소의 자식 요소 중 마지막에 등장하는 E 요소를 선택자로 지정
'코딩 자율학습' 카테고리의 다른 글
| [길벗 코딩자율학습단] 학습 후기 (1) | 2023.12.20 |
|---|---|
| HTML 태그 종류 (0) | 2023.11.26 |
| HTML 기본 (0) | 2023.11.26 |