Cascading의 뜻은 상속. 선택자에 적용된 많은 스타일 중에서 어떤 스타일이 적용될지 정해주는 것.
CSS의 우선순위를 결정하는 세 가지 요소
1.순서에 의한 캐스케이딩: 나중에 적용한 속성값의 우선순위가 높다. 아래에선 skyblue 색이 적용된다.
//css 문서
p{color: red;}
p{color: skyblue;}
2.디테일에 의한 캐스케이딩: 더 구체적으로 작성된 선택자의 우선순위가 높음
<!--html 문서-->
<header>
<p>안냐세요.</p>
</header>
3.선택자에 의한 캐스케이딩: style>id>class>type 순으로 우선순위가 높다.
<!--html 문서-->
<h3 style="color:pink" id= "color" class="color">color </h3>//css문서
#color{color:blue;}
.color{color:brown;}
h3{color:yellowgreen}width, height
<p class="paragraph">프로그래밍을 배워봐요! </p>
.pragraph{width: 500px; height: 500px;}width: 선택한 요소의 넓이를 설정. 고정값(px) , 가변값(%)
height: 선택한 요소의 높이를 설정
font
1font-family: 브라우저마다 지원하는 폰트가 다름. 입력한 순서대로 우선 순위 적용. 폰트1-폰트2-폰트3 순으로 적는다.
sans-serif는 마지막에 작성하는 기본 값이다.
font-weight: 100-900 사이의 숫자를 입력할 수 있다. 100단위로 조절가능
boder
boder-style: 실선은 solid, 점선은 dotted. 주석과 같이 한줄에 이어 쓸 수도 있음. 쉼표는 작성하지 않고 띄어쓰기만.
background
background-repeat:
x축으로 반복: repeat-x
y축으로 반복: repat-y
반복하지 않음: no-reat
background-position: 공간 안에서 이미지의 좌표를 변경할때 사용. top,bottom,center,left,right 등
| 캐스케이딩(Cascading) (0) | 2022.03.23 |
|---|---|
| CSS 선택자 (0) | 2022.03.23 |
| CSS 소개 (0) | 2022.03.23 |
선택자(selector): CSS 언어가 HTML 특정 요소 선택하는 방법.
type, class, id 3개가지가 있다. 각각 type은 태그, class는 태그에 대한 별명, id는 태그명.
type 선택자 : h1 태그에 스타일을 적용했다.
//<h1>안녕하세요</h1>
<style>
h1{color: red;}
</style>
class 선택자: 클래스 이름으로 특정 위치에 스타일을 적용
//<h1 class="aing">안녕하세요</h1>
<style>
.aing{color: red;}
</style>
id 선택자 : id를 이용하여 스타일을 적용
//<h1 id="aing">안녕하세요</h1>
<style>
#aing{color: red;}
</style>
부모자식 관계1
<!--html문서-->
<header>
<h1>header h1</h1>
<p>header p</p>
</header>//css 문서
header{color: green;}
h1{color: orange;}
p{color: skyblue;}<header>와 <h1><p>:부모 자식 관계
<h1>과 <p>: 형제 관계
부모자식 관계2
<!--html문서-->
<header>
<h1>header h1</h1>
<p>header p</p>
</header>
<footer>
<h1>header h1</h1>
<p>header p</p>
</footer>//css 문서
header{color: green;}
header h1{color: orange;}
headter p{color: skyblue;}원하는 지역에만 css 속성을 적용하기 위해 부모를 구체적으로 표기해야한다.
| 캐스케이딩(Cascading) (0) | 2022.03.23 |
|---|---|
| css 주요 속성 (0) | 2022.03.23 |
| CSS 소개 (0) | 2022.03.23 |
Cascading Style Sheet 의 약자.
색상을 입힐 때, 공간에 대한 크기 지정, 상하 배치 작업 디자인 시 공간에 대한 크기 설정 담당
. 정보(HTML)와 디자인(CSS)의 분리
. 문서의 레이아웃과 스타일 정의
. HTML로 작성된 정보를 꾸며주는 언어
CSS 구성 요소
선택자 {속성: 속성값;}선택자: 디자인을 적용할 HTML 영역
속성: 어떤 디자인을 적용할지 정의
속성값: 수행할 구체적인 명령. 끝에 ; 입력 필수
속성(Property)
h1{
}CSS 연동 방법 세 가지
1.inline Style Sheet : 태그 안에 직접 원하는 스타일을 적용
<h1 style="color: red;">안녕하세요</h1>
2.Internal Style Sheet : <style> 태그 안에 넣기
<head>
<style>
h1{background-color:orange;}
</style>
</head>
3.External Style Sheet: 별도 CSS 파일에 따로 입력. 상대적으로 가독성이 높고 유지보수 용이
<head>
<link rel="stylesheet" href="style.css">
<head>link는 닫힌 태그가 없다.
| 캐스케이딩(Cascading) (0) | 2022.03.23 |
|---|---|
| css 주요 속성 (0) | 2022.03.23 |
| CSS 선택자 (0) | 2022.03.23 |