웹 브라우저에서 내용을 표시할 때, 적용되는 스타일
1.웹 브라우저 자체 스타일
2.웹 문서를 제작한 "제작자"의 스타일
3.컴퓨터를 사용하는 "사용자"의 스타일
-작용 우선 순위
-사용자 > 제작자 > 자체
브라우저 자체 색상 : 하얀색
제작자:색상을 라이트 그레이
CSS 적용 우선 순위
-우선 순위란, 어떤 스타일을 먼저 적용할 것인지 결정하는 규칙
-우선 순위를 높이려면, 정확하게 해당 요소에 스타일을 적용하면, 우선 순위가 높아진다.
단, 스타일 규칙에 !important를 작성하면, 그 스타일 규칙이 다른 스타일보다 우선 순위가 높아진다.
점수
1)!important: 무조건 PRIORITY! 1억점ㅋㅋ
2)inline :1000점
3)ID selector:100점
4)class selector:10점
5)tag selector(=type selector) :1점
=====================================================
<div>
<div2>
<div3></div3>
</div2>
</div>div1=조상 요소(상위 요소)라고 부른다.
div1의 내용에 div2라는 요소가 들어가 있다.
바깥에 있는 요소를 "부모 요소"라고 하며, 내부에 있는 요소를 "자식 요소"라고 한다.
div1 > div2, div1 후손 요소(하위요소)
========================
종류
1)기본 선택자
2)복합 선택자
3)가상 클래스 선택자
4)가상 요소 선택자
5)속성 선택자
2)복합 선택자
-복합 선택자는 기본 선택자를 조합해서 사용한다.
복합 선택자의 종류
1.일치 선택자
:두 개의 선택자를 붙여서 사용하며, 동시에 만족하는 요소를 선택
-사용 시, 태그 선택자와 클래스/아이디 선택자의 위치를 바꿔서
작성하면 찾을 수 없다. 태그 선택자를 먼저 작성하는 것이 좋다.
2.자식 선택자
-어떤 요소의 자식 요소를 선택한다.
-기호: > (앵글 브레킷 Angle Braket, 꺽쇠 괄호)
-형제 선택자
하위(후손) 선택자
-어떤 요소의 하위 요소를 선택한다.
-기호:스페이스바("공백문자")
**띄어쓰기도 하나의 특수 기호=공백 문자
**선택자 사용 시, 띄어 쓰기를 함부로 사용 하지 말자.
<!DOCTYPE html>
<html>
<head lang="ko">
<meta charset="utf-8" />
<title>복합 선택자</title>
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<div>
<ul>
<li>수박</li>
<li class="peach">복숭아</li>
<li>사과</li>
<li>딸기</li>
</ul>
</div>
<span class="peach">복숭아</span>
</body>
</html>div는 class="peack"의 바로 앞이 아닌, 앞에 앞에 있다(자식이 아님)
그래서 스페이스 공간(띄어쓰기)을 만들어준다. 아래처럼
인접 형제 선택자
어떤 선택자의 다음 형제 요소 하나를 선택한다
기호: +
일반 형제 선택자
-어떤 선택자의 다음 형제 요소 전부 선택한다.
기호: ~ (틸드 Tilde)
<!DOCTYPE html>
<html>
<head lang="ko">
<meta charset="utf-8" />
<title>복합 선택자</title>
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<div>
<ul>
<li>수박</li>
<li class="peach">복숭아</li>
<li>사과</li>
<li>딸기</li>
</ul>
</div>
<span class="peach">복숭아</span>
<ol>
<li>JAVA</li>
<li>HTML</li>
<li>CSS</li>
<ul>
<li>Spring</li>
<li>JS</li>
<li>DBMS</li>
</ul>
</ol>
</body>
</html>
가상클래스 선택자(자주 사용함)
-우리가 어떤 행동을 했을 때, 동작하는 개념
-표기법은 :가상클래스
종류
1)동작을 나타내는 가상 클래스 선택자
hover
-특정 요소에 마우스 포인터를 올리면 선택
active
-특정 요소에 마우스를 클릭하고 있는 동안 동작한다.
focus - 어떤 요소에 포커스되면 선택. 포커스가 가능한 요소는 HTML의 대화형 콘텐츠(input, a, button 등)이다
대화형 콘텐츠: 사용자와 상호작용을 위해 설계된 요소
2)특정 요소를 선택하는 가상 클래스 선택자
-요소가 많을때, 이름(id, class)을 붙이지 않고 스타일을 적용할 요소가 몇번째인지 따져서 스타일을 적용할 수 있다.
선택자:first-child
-어떤 선택자가 형제 요소 중, 첫째인 경우 선택한다.
p가 first-child이기 때문에 효과가 먹히는 거다. 다른 하위 요소들은 첫째가 아니기에 먹히지 않는다
예) .address div, .address h3 이렇게 하면 효과가 나타나지 않는다
선택자:last-child
-어떤 선택자가 형제 요소 중, 마지막인 경우 선택한다
선택자:nth-child(x)
-어떤 선택자가 형제 요소 중, x번째이면 선택한다.
-2n, 2n+1
-odd(홀수), even(짝수)
부정 선택자 - 괄호 안에 작성한 선택자가 아닌 요소를 선택한다.
:not(선택자)
=====================
속성(Attribute) 선택자
-태그 안에서 사용하는 속성 값에 따라서 요소를 선택한다
-작성 방법: [속성 이름]
-특이한 속성을 가진 요소를 찾을때, 적합니다. 하지만 일반적으로 가지는 속성을 기준으로 특정 요소를 찾을 때는 유용하지 않다.
-작성 방법:[속성="값]
가상요소 선택자
-특별히 화면에 보이는 부분을 꾸밀 때, 불필요한 태그를 사용하지 않도록 하기 위해 가상 요소 선택자를 사용한다.
-문서 안에 특정 부분에 대해 스타일을 지정하기 위해 가상으로 요소를 만들어 추가한다.
작성 방법
::가상요소선택자
-->콜론을 1개만 찍어도 동작합니다. 웹 표준에는 어긋난다.
종류
::before
::after
**필수!! content:"" 이거 꼭 해야함
-->
::before
어떤 선택자 요소의 앞 부분에 내용을 넣을 수 있다.
::after
어떤 선택자 요소의 뒷 부분에 내용을 넣을 수 있다.
=========================================================
CSS 스타일 상속
어떤 요소에 css를 적용했을 때, 해당 요소의 자식 요소(하위요소)까지 영향을 미치는 것.
자식 요소에 스타일을 따로 지정하지 않으면, 부모 요소의 스타일 속성이 자식 요소로 전달.
상속이 가능한 속성 목록
-주로 글자, 문자 관련 속성들
예:글자 크기, 두께, 기울기, 포트, 글자 색상 등
강제 상속 inherit
-실제 상속할 수 없는 내용도 강제 상속 가능
ex) height= inherit;
====================================================================
overflow
요소의 크기 이상으로 콘텐츠의 내용이 넘쳤을 경우, 어떻게 화면에 보이게 만들지 제어한다.
값
visible
-넘친 내용을 그대로 보여준다.
hidden
-넘친 내용을 잘라낸다
scroll
-넘친 내용을 자르고, 스크롤 바를 생성한다
auto
-넘친 내용이 있는 경우에만 잘라내고 스크롤 바 생성
overflow-x /y
-x축 또는 y축으로 스크롤 바 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title</title>
<link rel="stylesheet" href="./css/main3.css" />
</head>
<body>
<div class="overflow">
“Admitting what a disaster it’s been is too tough to digest,” he wrote. “But come on. There isn’t really an upside to Trump.”
The damning new texts were released in court filings from the defamation suit Fox is facing from voting machine maker Dominion that claims it knowingly spouted Trump’s false claims that the 2020 presidential election was rigged.
Even as the texts emerged, Carlson went ahead Tuesday with a second night of airing exclusive security footage from the Jan. 6 attack that he asserted proves the bloody attack on Congress was actually a peaceful protest.
After lawmakers from both sides of the partisan aisle fact-checked his bogus claims, Carlson Tuesday blamed Democrats for displaying “hysteria, overstatement, crazed hyperbole, red-in-the-face anger” over his use of the footage that showed some peaceful moments during the hours-long insurrection effort.
He didn’t address the shocking text messages showing that his on-air praise-singing for Trump was all a charade.
For his part, Trump also ignored the critical texts.
He instead patted Carlson on the back again for the second night of revisionist history about the Jan. 6 attack, which aimed to keep Trump in power after he lost to President Biden.
The former president demanded the release of convicted rioters, many of whom admitted attacking police officers, and blasted the congressional Jan. 6 committee for “knowingly refused to show the videos that mattered.”
Senate Majority Leader Chuck Schumer on Wednesday blamed House Speaker Kevin McCarthy for handing over more than 40,000 hours of Capitol security footage to Carlson.
“McCarthy ... has done more than any party leader in Congress to enable the spread of Donald Trump’s Big Lie,” Schumer said.“Admitting what a disaster it’s been is too tough to digest,” he wrote. “But come on. There isn’t really an upside to Trump.”
The damning new texts were released in court filings from the defamation suit Fox is facing from voting machine maker Dominion that claims it knowingly spouted Trump’s false claims that the 2020 presidential election was rigged.
Even as the texts emerged, Carlson went ahead Tuesday with a second night of airing exclusive security footage from the Jan. 6 attack that he asserted proves the bloody attack on Congress was actually a peaceful protest.
After lawmakers from both sides of the partisan aisle fact-checked his bogus claims, Carlson Tuesday blamed Democrats for displaying “hysteria, overstatement, crazed hyperbole, red-in-the-face anger” over his use of the footage that showed some peaceful moments during the hours-long insurrection effort.
He didn’t address the shocking text messages showing that his on-air praise-singing for Trump was all a charade.
For his part, Trump also ignored the critical texts.
He instead patted Carlson on the back again for the second night of revisionist history about the Jan. 6 attack, which aimed to keep Trump in power after he lost to President Biden.
The former president demanded the release of convicted rioters, many of whom admitted attacking police officers, and blasted the congressional Jan. 6 committee for “knowingly refused to show the videos that mattered.”
Senate Majority Leader Chuck Schumer on Wednesday blamed House Speaker Kevin McCarthy for handing over more than 40,000 hours of Capitol security footage to Carlson.
“McCarthy ... has done more than any party leader in Congress to enable the spread of Donald Trump’s Big Lie,” Schumer said.
</div>
</body>
</html>이렇게 콘텐츠 양이 넘치면
이렇게 overflow:auto;해주니 넘치는 내용은 스크롤 바 생김
(scroll 쓰면 콘텐츠 양이 넘치지 않아도 뜨기 때문에 잘 안씀)
====================================
opacity
-요소의 투명도 지정
값
1:불투명
0~1까지의 소수점 숫자 작성
========================
display
-요소의 배치 방법을 결정
-화면에 보여질 요소의 특성을 지정한다.
-display속성 사용시, 블록 요소와 인라인 요소를 바꿔서 사용 가능하다.
값
-block : 인라인 >블록
-inline: 블록 >인라인
-inline-block
-flex
-grid
======================================
float
-왼쪽, 오른쪽으로 배치하는 float속성
-문단의 왼쪽이나 오른쪽에 이미지를 배치하고 싶을때
-p태그는 블록요소이기 때문에, 이미지와 함께 배치할 수 없다./
================================================
글꼴, 문자
font-style
-기울기
-이텔릭체 글자를 표시할 때 사용한다.
값
normal:기울기 없음
italic: 기울어진 글자
oblique: 기울어진 글자
font-weight
-두께
값
normal:기본 두꼐
bold:두꺼운 글씨
100~900까지 숫자를 작성. 400또는 700을 주로 사용
font-size
-글자크기
-브라우저의 기본글자 크기
-단위: px, em, rem
line-height
-줄높이
값
숫자를 작성(배수 사용을 권장한다. 왜? 코드를 다시 작성하지 않고 , 유지가 가능하다.)
font-family
-폰트(서체)를 지정한다.
사용 방법
font-family:글꼴1,글꼴2,글꼴3,글꼴4,글꼴5....글꼴계열
-글꼴 후보를 쉼표로 구분해서 여러 개 명시 가능
-마지막 글꼴 계열은 필수작성
글꼴 계열 예시
serif:바탕체 계열
sans-serif:고딕체 계열
우리가 후보를 지정하면, 브라우저가 그 후보 중, 사용 가능한 글꼴이 있는지 확인하며, 가장 먼저 작성된 글꽃을 사용하기 위해 시도. 사용가능하면, 그 다음후보는 무시.
-모든 후보를 사용 시도후, 사용 가능한 글꼴 후보가 없다면, 글꼴 계열에서 브라우저가 사용 가능한 폰트를 화면에 출력한다.
======================================
color
-글자 색상
text-align
-문자의 정렬 방식
값
기본값:left
right
center
justify: 양 쪽 정렬
text-decoration
-문자 장식(선추가)
값
none:장식없음
underline: 밑줄
line-through:중앙선
목록 스타일
list-style
값
disc: 채워진 원
circle:빈 원 모양
square:채워진 사각형
decimal:1부터 시작하는 수
none:없음
'UX UI' 카테고리의 다른 글
| 1주일_3일차: UX,UI (0) | 2023.03.10 |
|---|---|
| 1주일차: UX,UI (0) | 2023.03.08 |
| 첫날1일: UX,UI (0) | 2023.03.02 |
