CSS의 우선순위, 요소 및 선택자

두부링·2024년 12월 9일
borderjsonmarginpaddingparse()positionstringify()비동기동작

css

목록 보기
1/3

<복습>

함수

  • 함수를 호출하면서 함수로 그 동작을 모아놓고 그 동작을 전달해줌.
  • 동작을 모아놓고 그 동작을 전달해주니 내부적으로 언제 호출이 되는지 자각해야함!
  • 모든 함수를 우리가 호출하지는 않음 & 적절한 시점에 알아서 호출됨!
fetch()
.then(function(){}) //응답한 데이터(결과)가 매개변수로 들어감 
.then(function(){}) //그래서 화면변화가 없음
.catch(function(){}); //에러에 대한 정보

<동기 vs 비동기 동작> : 작동방식에만 차이가 존재함

document3.html

  • 요청만 하고 언제 응답이 올지는 모르지만 흐름은 넘어간다 + 응답이 오면 함수를 호출한다 : 비동기 동작 = 스타벅스 대기표 생각하기 : 자바스크립트 <-> 동기동작 : 자바
  • 자바스크립트: 캐셔가 1명 VS 자바: 캐셔가 오는 사람마다 증가 삭제됨

<backtic의 역할>

  • 문자열 연결 : 바깥값을 참조할 수 있음
  • html 요소로 출력시 backtic 사용시 편하게 사용 가능함

json

<json의 정리>

  • javaScript Obeject Notation
  • {"key":value}
  • JSON.parse를 통해서 데이터유형을 변경이 가능함



    작성규칙을 지켜야 변경이 가능함

    json2.html
  • fetch : 페이지 변경 없이 데이터를 서버에 요청이 가능함
  • fetch함수로 받아와서

JSON.parse()

  • 문자열을 json 형식으로 변경

JSON.stringify()

  • object, array를 문자열로 저장하면 영구적으로 데이터를 저장할 수 있음
  • object, array는 초기화되기에 영구저장이 불가능

CSS

css 적용 우선순위

<정호T 설명>

  • 구체성이 올라가면 우선적 순위가 된다!
  • 단, 계층을 뛰어넘을 수 없음 (동순위에서는 구체성)
  • 인라인 css가 거의 우선순위 1위가 된다
  • 자바스크립트로 작성되면 거의 무조건 적용이 된다
  • !important는 정의되는 순간 아예 고정됨

선택자의 가중치

  • 요소명 : 1
  • 클래스명 :10
  • 아이디 : 100
  • !important : 9999

선택자

기본 선택자

Step02_Example.html

  • class 선택자 : 어떤 요소든지 간에 class에 속하면 적용됨
  • class는 여러개의 클래스를 가질 수 있음
  • 준비된 css를 선택해서 사용함
<head>
	<meta charset="UTF-8">
	<title>Step02_Example.html</title>
	<style>
		.bg-green{
			background-color: #00ff00;
		}
		.text-bold{
			font-weight: bold;
		}
		.text-red{
			color: #ff0000;
		}
	</style>
</head>
<body>
<p class="bg-green">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero magnam autem, accusantium quos quae assumenda a facere ut quod blanditiis voluptate ratione voluptatum debitis ipsam delectus quas minima corporis dicta?</p>	
<p class="bg-green text-bold">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam itaque temporibus facilis dolor ex earum minima rerum magnam beatae praesentium, molestiae. Voluptatum cumque voluptatibus molestiae eligendi voluptate recusandae, ab nihil!</p>
<p class="bg-green text-bold text-red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni et incidunt eveniet nulla, voluptatibus, dolores reiciendis ipsam rerum aliquam ea explicabo assumenda fugit ullam quia nemo inventore. Repudiandae, autem, magnam.</p>
</body>
</html>
  • id 선택자 : <class = "..." id="main-title"...>

복합 선택자

Step02_Selector4.html
Step02_Selector5.html

  • 자식과 자손을 구별해야 함

다중선택자

Step02_Selector6.html

<style>
		/* 모두 선택 */
		*{
			background-color: #cecece;
		}

		/* , 로 구분해서 다중 선택 */
		h1, .my, .your{
			color: blue;
		}
	</style>

속성 선택자

  1. 속성 값 선택자
  • 클래스와 id를 주기 번거로울 때 사용함

div. my-class{} vs div.my-class{}

Step02_Selector2.html
Step02_Selector3.html

  • 붙여쓰면 and 조건
  • 띄어쓰면 자식에서

가상 클래스(Pseudo Class)

Step06_PseudoClass.html

  • 실제로 존재하지 않는 클래스
  • 시각적으로 확인 할수 없지만 특정 상황해서 있다고 간주 되는 클래스
  • 요소명이 a이면서 가상의 클래스 hover 를 가지고 있는 요소 선택

  • => < input pclass="focus" > : 여기서 pclass는 사라졌다가 나타났다가 함

자주 사용하는 가상클래스

hover : 마우스가 위에 올때
focus : 포커스가 갈 때
active : 버튼을 누르는 경우

만약에 프로젝트 실행 시

만들어 놓은 css를 그대로 가지고 와서 선택하여 사용한다!

CSS 요소

padding, border, margin

Step03_Margin.html
Step04_Padding.html
Step05_Border.html

  • content -> padding -> border -> margin -> other content
  • border은 3가지 유형을 가지고: color, width, style

Step02_Example2.html + styles.css

  • 선택자 연습

static fixed

Step07_Example.html
Step07_Position.html

<View와 Window 개념>

  1. View(뷰)
  • html의 문서 전체를 생각하기 / 우리가 보이지 않는 아래쪽이나 오른쪽
  • 스크롤하면 나오는 내용도 뷰의 일부임
  1. Window(창)
  • 지금 브라우저에 보이는 화면만이 창임
  • 스크롤을 내려도 창은 그래도 뷰는 계속 아래로 이어짐

<position의 속성>

  • static : 기본값으로 그냥 html의 흐름 그래도 배치
  • relative : 부모 영역을 설정해서 그 안에서 배치되게끔 한다!
    -> 즉 설정되면 안에서 자식 요소들이 위치된다!
  • absolute : 가장 가까운 position이 설정된 부모를 기준으로 배치
    (relative가 배치되면 그 안에서 배치됨)
  • fixed : 창 기준으로 스크롤해도 항상 같은 자리에 있음 (김구라사이트 메뉴창)
  • display: none; 화면에서 완전히 숨기고 레이아웃도 차지하지 않아서 다른 요소가 자리를 차지하게 됨
  • 메뉴 선택시 뒤에 화면 가리기
    <-> block, inline
<style>
		.wrapper{
			position: relative;
			width: 500px;
			height: 500px;
			margin: 0 auto;
			border: 1px solid red
		}
		.box{
			position: absolute;
			width: 50px;
			height: 50px;
			background-color: yellow;
		}
		#one{
			top: 100px;
			left: 100px;
		}
		#two{
			top: 100px;
			right: 100px;
		}
		#three{
			bottom: 100px;
			left: 100px;
		}
		#four{
			bottom: 100px;
			right: 100px;
		}
		#center{
			top: 225px;
			left: 225px;
		}
		/* .wrapper div 전체 덮기 */
		#test{
			background-color: #000;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			color: #fff;
			opacity: 0.5; /* 투명도 ( 0 ~ 1.0) */
			display: none; 
		}
	</style>
</head>
<body>
<h3>특정 요소 안에서 원하는 위치에 배치</h3>
<div class="wrapper">
	<div class="box" id="one">one</div>
	<div class="box" id="two">two</div>
	<div class="box" id="three">three</div>
	<div class="box" id="four">four</div>
	<div class="box" id="center">center</div>
	<div id="test">test</div>
</div>
<button id="showBtn">background</button>	
<script>
	document.querySelector("#showBtn").addEventListener("click", function(){
		//javascript로 조작하는 css는 inline css를 조작하는 것
		//따라서 위에 style 요소에 작성한 css를 재정의 할 수가 있다
		document.querySelector("#test").style.display = "block";
	});
	
	document.querySelector("#test").addEventListener("click", function(){
		//javascript로 조작하는 css는 inline css를 조작하는 것
		//따라서 위에 style 요소에 작성한 css를 재정의 할 수가 있다
		document.querySelector("#test").style.display = "none";
	});

<작성순서>
Step02_Example.html v
Step02_Selector~6.html v
Step03_Margin.html v
Step04_Padding.html v
Step05_Border.html v
Step02_Example2.html + styles.css
Step07_Position.html
Step07_Example.html
bootstrap = hello.html

<질문>
1. 클래스는 여러번 작성이 가능한가?
여러 요소에서 class명이 작성될 수 있으며 css에서 원하는 기능을 class로 가지고 와서 사용이 가능함!

profile
두부링
하이하잉
다음 포스트

bootstrap와 반응형 레이아웃

0개의 댓글