CSS(Cascading Style Sheets)
HTML과 함께 웹을 구성하는 기본 프로그래밍 요소로 html 문서에서 디자인 부분을 담당하는 코드
HTML로 만들어진 콘텐츠에 레이아웃과 디자인요소를 정의하는 기술로 브라우저마다 동일하게 표현할 수 있도록 한다.
웹 문서의 내용과 상관없이 디자인만 바꾸거나, 디자인은 그대로하면서 내용만 바꾸고 싶을 때 사용하기 좋다.
폰트 - 크기, 글꼴, bold, italic, underline, 색상
박스모델링 - 배경, 테두리, 여백(margin, padding), 그림자
레이아웃 - 박스모델링, 가로세로, display, float, 좌표, position, grid, flex
애니메이션
CSS 적용방법
1. 내부 스타일시트
html 파일 내에 스타일을 정의하는 방법
<head></head> 태그 사이에 style 태그를 삽입하고 <style></style> 태그 부분에 원하는 스타일을 작성한다.
html 과 css가 한 파일에 있기 때문에 작업이 간편하지만 CSS를 재활용할 수 없다.
2. 외부 스타일시트
별도의 파일에 CSS 문서를 작성하고 해당 CSS를 html 문서에서 불러와서 스타일을 적용시키는 방법
link:css 이용해서 동일한 서버의 CSS를 불러오거나, url으로 다른 서버의 CSS를 불러온다.
3. 인라인 스타일
태그에 직접 디자인 속성 스타일을 지정할 수 있는 방법
디자인을 편리하게 바로 적용할 수는 있지만 html과 섞여 있기 때문에 추후에 관리하기 어렵다.
html에 style=""으로 추가한다.
선택자(selector) : 디자인을 적용할 태그를 선택하는 방법
CSS는 선택자와 선언부로 구성된다.
선택자는 스타일을 지정할 HTML 요소를 가리키고, 선언부에는 CSS 속성 이름과 값이 포함된다.
선택자 {속성:값, 속성:값....}
1. 태그선택자
태그명{속성: 값...}
태그선택자는 태그명으로 선택, 특정 태그에 스타일을 적용한다.
태그 선택자를 정의하면 해당 태그들의 공통적인 디자인을 표현하기 때문에 웹문서의 해당 태그의 모든 요소들에 동일한 스타일이 적용된다.
<style>
b{
color: red;
text-decoration: underline;
}
</style>
b태그를 선택자로 정의하였고, 해당 문서에서 모든 b 태그는 정의한 빨간색, 밑줄 스타일이 적용된다.
2.id 선택자
#id명{속성:값...}
태그중에 특정한 부분에 고유한 속성을 넣고 싶을 때 사용하는 선택자
<style>
#under{
text-decoration: underline red;
font-style: italic;
}
</style>
id명이 under으로 설정된 태그 부분만 기울임꼴+빨간색밑줄 스타일이 적용된다.
3. 전체선택자
*{속성:값...}
모든 요소들에 동일한 효과를 줄 때 사용하는 선택자
h2태그 밑의 모든 요소에 같은 속성을 부여하고 싶다면, * h2{ } 로 사용하면 됩니다.
4. class 선택자
.class명{속성:값...}
미리 CSS로 디자인을 만든 후에 해당 디자인이 필요한 경우 여러 종류 태그에게 디자인을 적용하는 방식
<style>
.red{
color: red;
}
.under{
text-decoration: underline;
}
</style>
클래스 2개 만들었다.
<body> <p class="red under"> 내용 </p> </body>
class속성이 red, under으로 2개 클래스 지정해주어 디자인이 2종류가 적용된다.
5. 선택자 우선순위
id선택자> class선택자> tag선택자 순으로 우선 순위를 가진다.
클래스선택자나 태그선택자로 스타일이 정의되어 있어도 특정 태그에 id선택자로 준 태그가 적용된다.
<p id="blue" class="red"> 내용 </p>
class의 빨간색이 적용되지 않고 id로 지정해둔 파란색이 적용된다.
조합선택자
조합 선택자는 기본선택자 2개 이상을 한 번에 사용하는 선택자
1. 그룹 선택자
선택자,선택자...{속성:값...}
여러 선택자를 그룹으로 묶는 기능
선언한 스타일이 중복될 때 그룹화 하면서 코드를 줄이는 방법이다.
<style>
td{color:red}
th{color:red}
</style>
다른 태그에 동일한 스타일이 적용된다.
<style>
td,th{color:red}
</style>
간단히 그룹선택자로 묶을 수 있다.
2. 자식선택자
<style>
p>span{
text-decoration: underline;
}
</style>
p태그 아래에 있는 span태그에만 적용되었다.
3. 자손 선택자
.container > ul li {color:gray;}
자식 선택자, 자손 선택자를 조합했다.
container 태그 선택자의 자식 ul 의 자손 li에 CSS가 적용된다.
4. 인접 형제 선택자
인접 형제 선택자는 + 기호를 사용하며, 선택자가 같은 계층에 있을 때 바로 뒤의 선택자로 지정한다.
선택자1 + 선택자2 {...} : 같은계층의 선택자1 바로 뒤의 선택자2를 선택
h1 + h2 {
text-decoration: underline;
}
h1 태그 바로 뒤에 있는 h2 태그 하나만 CSS가 적용된다.
5. 일반 형제 선택자
~기호를 사용하여 두 선택자가 같은 계층에 있을 때 선택자1 뒤에 있는 모든 선택자2 태그를 지정한다.
선택자1 ~ 선택자2 {...}
h1 ~ h2 {
text-decoration: underline;
}
h1 태그 뒤에 있는 모든 h2 태그에 CSS가 적용된다.
'WEB > CSS' 카테고리의 다른 글
Box Model / content-box, border-box / background-clip / 배경 이미지 설정 태그 (1) | 2022.05.31 |
---|---|
넘치는 텍스트, 공백 표현하는 태그 : overflow, text-overflow, white-space (0) | 2022.05.30 |
목록태그 CSS : 리스트 블릿기호 변경, 들여쓰기/내어쓰기 (0) | 2022.05.30 |
font-size : medium, smaller, larger, px, % / em, rem 비교 / 줄 바꿈, 글자 간격, 단어 간격 (0) | 2022.05.30 |
CSS : display 태그 속성 - none, block, inline, inline-block (0) | 2022.05.30 |