CSS

[프론트엔드] CSS 1

shb 2021. 11. 7. 17:09

CSS(Cascading Style Sheets)
HTML 문서를 시각적으로 꾸며주는 역할을 하는 언어
웹페이지의 디자인을 담당

CSS 문법
HTML문서 <head> 태그 안에 <style>~</style>에 CSS 문법을 작성
HTML문서 중 디자인을 적용시킬 태그 안에 style 속성에 작성

선택자 {
속성명 : 속성값;
속성명 : 속성값;
...
}
p {t ext-align:center; color:blue; }
--- ----------------------------
선택자           선언부
p태그를 선택해서 가운데 정렬하고 글자는 파란색으로 설정


CSS를 적용하는 방법
1. 인라인 스타일 :
HTML 요소 내부에 style 속성을 사용해서 적용하는 방법
해당 요소에만 스타일을 적용
<p style="CSS 문법">안녕하세요</p>

2. 내부 스타일
HTML 문서의 <head>태그 안에 <style>태그를 사용해서 적용하는 방법
해당 문서에서만 스타일을 적용

<head>
<style>
CSS문법
</style>
</head>

3. 외부 스타일
웹 사이트 전체의 스타일을 하나의 파일에서 변경
<head> 태그 안에 <link>태그를 사용해서 연결, 적용하는 방법
<link href="CSS파일 경로" rel="stylesheet">
rel 속성은 현재 파일과 링크된 파일 사이의 연관관계를 명시

CSS 선택자
1. 전체 선택자
스타일을 모든 요소에 적용
디테일한 스타일은 전체 선택자와 body에 적용한 스타일보다 우선시

* {
CSS 문법
 }

2. 태그 선택자, 요소 선택자
특정 태그가 쓰인 모든 요소에 스타일을 적용


태그 이름 {
CSS 문법


상속 : 부모 요소의 속성값이 자식 요소에게 적용되는 성질
https://www.w3.org/TR/CSS22/propidx.html

3. id 선택자
웹 문서 안의 특정한 부분에 스타일을 적용
# 기호를 사용해서 id 속성을 가진 요소에 스타일을 적용
#아이디명{
CSS 문법
}

4. class 선택자
특정 집단의 요소를 한번에 스타일 적용할 때 사용
. 기호를 사용해서 같은 class 이름을 가진 요소에 스타일을 적용


. 클래스명{
CSS 문법
}

5. 그룹 선택자
여러개의 요소를 나열하고 ,로 구분해 스타일을 적용


선택자1, 선택자2 {
CSS 문법
}

6. 자손 선택자
조상요소 하위의 모든 요소에 스타일을 적용
자손은 자식을 포함

조상요소선택자 자손요소선택자{

}
p.tx : p 태그들 중에 tx 클래스를 가진 요소 선택
<p class="tx">
p .tx  : p 태그들 내부에 tx 클래스를 가진 요소 전부 선택


<p>
<span class="tx></span>
<ul>
<li class="tx"></li>
</ul>
</p>

7. 자식 선택자
부모의 요소 하위의 자식요소에 스타일을 적용

부모선택자 > 자식선택자{
CSS 문법
}

8. 인접 형제 선택자
동일한 부모 요소를 갖는 자식 요소들의 관계
선후 관계는 형-동생의 관계이고, 연속된 요소를 뜻함

 

- a태그 다음에 연속된 li 태그 선택

형선택자 + 동생선택자{
CSS문법
}

a+li{
CSS 문법
}

9. 일반 형제 선택자
형제 관계를 갖는 요소 중에서 형 요소 다음에 나오는 모든 동생 요소를 선택해서 
스타일 적용


형선택자~동생선택자{
CSS 문법
}

a~li{
앞에 a태그가 있는 모든 li 태그 선택
}

10. 속성 선택자
HTML 요소에서 src, href, style, type, ...과 같은 속성을 선택자로 지정해서 
스타일을 적용

[속성명]{
CSS 문법
}
 
[src]{
src 속성요소 선택
}

[src='apple.png']{
src 속성이 'apple.png'인 요소들 선택
}



'CSS' 카테고리의 다른 글

[프론트엔드] CSS 6  (0) 2021.11.17
[프론트엔드] CSS 5  (0) 2021.11.17
[프론트엔드] CSS 4  (0) 2021.11.13
[프론트엔드] CSS 3  (0) 2021.11.13
[프론트엔드] CSS 2  (0) 2021.11.07