-쉼표(,)로 구분해서 여러 선택자를 나열하고,스타일 규칙을 한번만 작성한다
==
웹 브라우저에서 내용을 표시할 때, 적용되는 스타일
1.웹 브라우저 "자체"스타일
2.웹 문서를 제작한"제작자"의 스타일
3.컴퓨터를 사용하는"사용자"의 스타일
-브라우저 적용 우선 순위
-사용자>제작자>자체
예시)
브라우저 자체 색상:하얀색
제작자:색상을 라이트 그레이
사용자:내 눈이 아파.다크모드 실행
css 적용 우선 순위
-우선 순위란,어떤 스타일을 먼저 적용할 것인지 결정하는 규칙
-우선 순위를 높이려면,정확하게 해당 요소에 스타일을 적용하면,우선 순위가 높아진다
단,스타일 규칙에 예외인 !important를 작성하면,그 스타일 규칙이 다른 스타일보다 우선 순위가 높아진다
점수
※참고
https://iridescent-zeal.tistory.com/90
[CSS]선택자 우선순위: 점수 매기기
선택자 우선순위란? 선택자 우선순위란 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선적으로 적용할 것인지를 결정하는 방법입니다. 그 기준은 다음과 같습니다. 1. 점수
iridescent-zeal.tistory.com
1) !important:1억점 그냥 높다 (not important)
2) inline:1천점
3) ID selector:100점
4) class seletor:10점
5) tag selector(=type selector):1점
==
※자동완성 !html / 손가락 믿지마쇼
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>css 스타일 적용 우선 순위</title>
<link rel="stylesheet" href="./css/main.css"/>
</head>
<body>
<h1>적용 우선 순위 -태그</h1>
<h1 class="test">적용 우선 순위 - 클래스</h1>
<h1 id="test">적용 우선 순위 - 아이디</h1>
<h1>적용 우선 순위 - 인라인</h1>
<h1>적용 우선 순위- !important </h1>
<div1>
<div2>
<div3></div3>
</div2>
</div1>
</body>
</html>링크 연결 html
/* tag select */
h1{
color: blueviolet !important;
}
/* class select */
.test{
color:royalblue;
}
/* id select; */
#test{
color:aqua;
}
/*동일한 스타일은 나중에 작성한 스타일 규칙이 적용*/
#test{
color: darkmagenta;
}
==
부모와 자식관계
<div1>
<div2>
<div3></div3>
</div2>
</div1>div1의 내용에 div2라는 요소가 들어가 있다
바깥에 있는 요소를 "부모 요소"라고 하며,내부에 있는 요소를 "자식 요소"라고 한다
div3>1,2 조상요소(상위 요소)라고 부른다
div1>div2,div3 후손 요소(하위 요소)
==
종류
1)기본 선택자
2)복합 선택자
3)가상 클래스 선택자
4)가상 요소 선택자
5)속성 선택자
2)복합 선택자
-★강조★복합 선택자는 기본 선택자를 조합해서 사용한다
복합 선택자의 종류
-일치 선택자
-자식 선택자
-일반 형제 선택자
형제 선택자는 무엇일까?? <div3><div3>
-인접 형제 선택자
일치 선택자
-두 개의 선택자(태그,클래스,아이디 선택자)를 붙여서 사용하며,동시에 만족하는 요소를 선택
-사용시,태그 선택자와 클래스/아이디 선택자의 위치를 바꾸서 작성하면 찾을 수 없다.태그 선택자를 먼저 작성하는 것이 좋다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>복합 선택자</title>
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<div>
<ul>
<li>수박</li>
<li>복숭아</li>
<li>사과</li>
<li>딸기</li>
</ul>
</div>
<span class="peach">복숭아</span>
</body>
</html>
------
/* 일치선택자 */
span.peach{
color: palevioletred;
}
자식 선택자
-어떤 요소의 자식 요소를 선택한다
-기호:>(앨글 브레킷,꺽쇠 괄호)
하위(후손)선택자
-어떤 요소의 하위 요소를 선택한다
-기호:스페이스바("공백 문자")
**띄어 쓰기도 하나의 특수 기호=공백 문자
**선택자 사용 시,띄어 쓰기를 함부로 사용 하지 말자.왜냐하면 띄어쓰기도 하나의 특수기호 이기 때문에
인접 형제 선택자
-어떤 선택자의 다음 형제 선택자
-기호: +
일반 형제 선택자
-어떤 선택자의 다음 형제 요소 전부 선택한다
-기호:~(틸드)
3)가상 클래스 선택자(자주 사용)
-우리가 어떤 행동을 했을 때,동작하는 개념
-표기법은:가상 클래스
-종류
1)동작을 나타내는 가상 클래스 선택자
hover
-특정 요소에 마우스 포인터를 올리면 동작한다.
.box:hover{
width: 300px;
background-color: greenyellow;
active
-특정 요소에 마우스를 클릭하는 있는 동안 동작한다.
.box:active{
width: 300px;
background-color: greenyellow;
}
focus
- 어떤 요소에 포커스 되면 동작한다(마우스 클릭 등,원래는 빈칸->마우스 클릭하면 지정한 색깔 blue로 변함)
-포커스가 가능한 요소는 HTML의 대화형 콘텐츠(input,a,button, 등) 이다
-대화형 콘텐츠 : 사용자와 상호작용을 위해 설계된 요소
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title><title></title></title>
<link rel="stylesheet" href="./css/sub.css" />
</head>
<body>
<input type"text">
</body>
</html>
--
input:focus{
background-color: blue;
}
<div class="box"></div>
--
.box{
width: 100px;
height: 100px;
background-color: blueviolet;
}
2)특정 요소를 선택하는 가상 클래스 선택자
-요소가 많을 때,이름(id,class)을 붙이지 않고 스타일을 적용할 요소가 몇 번째인지 스타일을 적용할 수 있다
선택자:first-child
-어떤 선택자가 형제 요소 중,첫째인 경우 선택한다.
선택자:last-child
-어떤 선택자가 형제 요소 중,마지막인 경우 선택한다.
<div class="address">
<p>동산동</p>
<p>모현동</p>
<span>마동</span>
<div>영등동</div>
<h3>중앙동</h3>
<h4>인후동</h4>
<h3>송학동</h3>
--
/* address하위 모든요소의 p가 첫째 라면 color 바꾸기 */
.address p:first-child {
color:darkorange ;
}
/* address하위 모든요소의 h3 마지막 이라면 */
.address h3:last-child{
color:royalblue ;
}
선택자:nth-child(m)
-어떤 선택자가 형제 요소 중,m번째 이면 선택한다
-odd(홀수),even(짝수) / 2n(짝수) 2n+1(홀수)
부정선택자 / 말그대로 부정의 의미 - 괄호 안에 작성한 선택자가 아닌 요소를 선택한다
:not(선택자) / 즉 not을 붙인 선택자 제외한 모든 선택자는 다 선택 해~
.address *:nth-child(odd){
color:darkblue;
}
.address *:not(p) {
color: red;
}
속성(attribute) 선택자
-태그 안에서 사용하는 속성 값에서 사용하는 선택자
-작성방법 [속성이름]
-특이한 속성을 가진 요소를 찾을 때,적합하다.하지만 일반적으로 가지는 속성을 기준으로 특정 요소를 찾을 때는 유용하지 않다,
여기에서 특이한 속성의 예시
비활성화, disabled
- 입력 요소를 비활성화 할 수 있다.
<input type="text">
<input type="password">
<input type="text" value="id003" disabled>
--
[disabled] {
color: rgb(20, 197, 129) ;
}
[type="password"]{
color: darkorchid;
}
4)가상 요소 선택자
-특별히 화면에 보이는 부분을 꾸밀 때,불필요한 태그를 사용하지 않도록 하기 위해 가상 요소 선택자를 사용한다
-이름 그대로 가상 요소로 된 걸 만든다
-문서 안에 특정 부분에 대해 스타일을 지정하기 위해 가상으로 요소를 만들어 추가한다
-작성방법
::(콜론2개) / ::가상요소선택자
->콜론을 1개만 찍어도 동작하지만,웹 표준에는 어긋난다
-종류
::before
::after
::before
어떤 선택자 요소의 앞 부분에 내용을 넣을 수 있다
★필수로 써야하는 것
content:""
-->내용을 비우더라도 필수로 작성을 해야한다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>가상 요소 선택자</title>
<link rel="stylesheet" href="./css/main-2.css" />
</head>
<body>
<div class="box">송지연 입니다.</div>
</body>
</html>
--
.box::before{
content: "안녕하세요";
}
::after
어떤 선택자 요소의 뒷 부분에 내용을 넣을 수 있다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>가상 요소 선택자</title>
<link rel="stylesheet" href="./css/main-2.css" />
</head>
<body>
<div class="box">송지연 입니다.</div>
</body>
</html>
--
.box::after{
content: "안녕하세요";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>가상 요소 선택자</title>
<link rel="stylesheet" href="./css/main-2.css" />
</head>
<body>
<div class="box">송지연 입니다.</div>
<h2>라면 메뉴</h2>
<ol>
<li class="hot">불닭볶음면</li>
<li>신라면</li>
<li>삼양라면</li>
<li class="new">안성탕면</li>
</ol>
</body>
</html>
--
.box::after{
content: "안녕하세요";
}
/* ol 의 후손 모두 */
ol li::after{
content: "HOT";
background-color: red;
color: white;
font-size: 13px;
border-radius: 13px;
padding: 0 5px;
margin-left: 3px;
}
ol li.new::before{
content: "new";
background-color: blue;
color: blue;
font-size: 14px;
border-radius: 15px;
padding: 0 5px;
margin-left: 5px;
}
::after / ::와after띄어쓰지 말자
* 선택자:last-child / ::after 활용
-어떤 선택자가 형제 요소 중,마지막인 경우 선택한다.
<h2>Breadcrumb</h2>
<div class="breadcrumb">
<a href="">HOME</a>
<a href="">국민내일배움카드</a>
<a href="">훈련과정</a>
<a href="">정보마당</a>
--
.breadcrumb a {
text-decoration: none;
color: black;
}
.breadcrumb a::after{
content: "▶";
}
.breadcrumb a:last-child::after{
content: "";
}
==
CSS 스타일 상속
어떤 요소에 css를 적용했을 때,해당 요소의 자식 요소(하위 요소)까지 영향을 미치는 것
자식 요소에 스타일을 따로 지정하지 않으면,부모 요소의 스타일 속성이 자식 요소로 전달
상속이 가능한 속성 목록
-주로 글자,문자 관련 속성들
예)글자 크기,두께.기울기,폰트,글자 색상 등
color,font-size:30px ;.....
강제상속 keyword는 무엇을 쓰는지 ? inherit 예)height: inherit;
-실제 상속할 수 없는 내용도 강제 상속 가능
==
overflow
요소의 크기 이상으로 콘텐츠의 내용이 넘쳤을 경우,어떻게 화면에 보이게 만들지 제어한다
값
visible
-넘친 내용을 그대로 보여준다
hidden
-넘친 내용을 잘라낸다
scroll
-넘친 내용을 자르고,스크롤 바를 생성한다
-사용x
auto
-넘친 내용이 있는 경우에만 잘라내고 스크롤 바 생성
-scroll 보다 auto가 가시성 좋기 때문에 많이 사용 ~!~!~!~!~!~!!~!!!!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title</title>
<link rel="stylesheet" href="./css/main-3.css" />
</head>
<body>
<div class="overflow">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. It usually begins withThe purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout. A practice not without controversy, laying out pages with meaningless filler text can be very useful when the focus is meant to be on design, not content.</div>
</body>
</html>
--
*scorll 사용
.overflow{
width: 400px;
height: 200px;
border: 2px solid red;
overflow: scroll;
--
*auto사용
.overflow{
width: 400px;
height: 200px;
border: 2px solid red;
overflow: auto;
overflow-x / y
-x축 또는 y축으로 스크롤 바 생성
==
opacity
-요소의 투명도 지정
값
-1 : 불투명
0~1 까지의 소수점 숫자 작성
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title</title>
<link rel="stylesheet" href="./css/main-3.css" />
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</body>
</html>
--
div{
width: 200px;
height: 200px;
border: 2px solid red;
background-color: chartreuse;
margin: 20px;
}
.a{
opacity: 1;
}
.b{
opacity: 0;
}
.c{
opacity: 0.8;
}
.d{
opacity: 0.5;
}
==
display
-요소의 배치 방법을 결정
-화면에 보여질 요소의 특성을 지정한다
-display속성 사용 시,블록 요소와 인라인 요소를 바꿔서 사용 가능하다
->인라인 요소를 블록 요소로 바꿀 수 있고, 블록요소를 인라인 요소로 바꿀 수 있다
값
-block:인라인>블록
-inline:블록>인라인
-inline-block
-flex
-grid
1)블록요소
-기본적으로 레이아웃 작업에 많이 사용하며,특별한 의미는 없고 구분을 위해 사용한다
특징
-한 줄에 한개만 배치 가능하다.왜냐하면 기본 너비값이 100%를 차지하기 때문하기 때문에..
-크기 값을 가질 수 있다(가로 세로)
-상,하,좌,우 마진을 가질 수 있다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title</title>
<link rel="stylesheet" href="./css/main-3.css" />
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<span>송지연 입니다 </span>
</body>
</html>
--
span {
color:blueviolet;
border: 2px solid red;
width: 300px;
height: 500px;
display: block;
}
div{
width: 200px;
height: 200px;
border: 2px solid red;
background-color: chartreuse;
margin: 20px;
}
2)인라인 요소
-한 줄에 여러 개 배치 가능하다
-기본 너비값이 콘텐츠의 너비값
-크기값을 가질 수 없다
-상,하 마진을 가질 수 없다
==
float
-왼쪽,오른쪽으로 배치하는 float속성
-문단의 왼쪽이나 오른쪽에 이미지를 배치하고 싶을 때
-p태그는 블록요소 이기 때문에,이미지와 함께 배치할 수 없다
<img
src="https://cdn.pixabay.com/photo/2021/11/25/08/52/mountains-6822937_960_720.jpg"
alt="heart-image">
<p>
손 하트 사진
</p>
--
img{
float: left;
}->편의상 html 일부만 발췌...
==
글꼴,문자
font-style
-기울기
-이텔릭체 글자를 표시할 때 사용한다
값
nomal:기울기 없음
italic:기울어진 글자
oblique:기울어진 글자
font-weight
-두께
값
normal:기본 두께(400)
bold:두꺼운 글씨(700)
100~900까지 숫자를 작성.400 또는 700을 주로 사용
font-size
-글자 크기
-브라우저 기본 글자 크기 16px
-단위:px,em,rem
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title</title>
<link rel="stylesheet" href="./css/main-3.css" />
</head>
<body>
<h2>text <style></style></h2>
<p>
<span class="lorem">Lorem ipsum</span> Similique obcaecati molestias iusto. Facilis consectetur necessitatibus eligendi ad nobis aliquid explicabo.
<span id="lorem">dolor sit</span>amet consectetur adipisicing elit. Doloremque fugiat, ipsa veniam nemo et ullam sit incidunt distinctio!
</p>
</body>
</html>
--
.lorem {
color: blueviolet;
font-size: 30px;
font-style: italic;
}
#lorem{
color:deeppink;
font-size: 60px;
font-style: italic;
}
line-height
-줄 높이
값
숫자를 작성(배수 사용을 권장한다.왜?코드를 다시 작성하지 않고,유지가 가능하다)
font-family
-폰트(서체)를 지정한다
사용 방법
font-family:글꼴1,글꼴2,글꼴3....글꼴 계열;
-글꼴 후보를 쉼표로 구분해서 여러 개 명시 가능
-마지막 글꼴 계열은 필수 작성
글꼴 계열 예시
serif:바탕체 계열
sans-serif:고딕체 계열
font-family: "Malgun Gothic","맑은 고딕"-apple-system,BlinkMacSystemFont,helvetica,"Apple SD Gothic Neo",sans-serif;
1)"Malgun Gothic""맑은 고딕2)-apple-system3)BlinkMacSystemFont4)"Apple SD Gothic Neo"5)sans-serif;6)sans-serif; 순서로 사용 가능한 글꼴 확인 하여 가장 먼저 작성된 글꼴 사용..?
-우리가 후보를 지정하면,브라우저가 그 후보 중,사용 가능한 글꼴이 있는지 확인하며,가장 먼저 작성된 글꼴을 사용하기 위해 시도. 사용 가능하며느 그 다음 후보는 무시
-모든 후보를 사용 시도 후,사용 가능한 글꼴 후보가 없다면,글꼴 계열에서 브라우저가 사용 가능한 폰트를 화면에 출력한다
color
-글자 색상
text-align
-문자의 정렬 방식
값
기본값:left
right
center
justify:양 쪽 정렬
text-decoration
-문자 장식(선 추가)
값
none:장식 없음
underline:밑 줄
line-through:중앙선
목록 스타일
list-style
값
disc:채워진 원
circle:빈 원 모양
square:채워진 사각형
decimal:1부터 시작하는 수
none:없음
<ul class="food">
<li>한식</li>
<li>일식</li>
<li>양식</li>
</ul>
--
.food {
list-style: "❤";
}
아좌좌
