🎊학습한 내용

CSS 기초

div 태그 기준으로 header 부모 태그, h2,p 자식태그, h2,p 서로는 형제 태그

	<header>
		<div>
			<h2>header h2</h2>
			<p>header p</p>
		</div>
	</header>

기본적으로 적용하는 여러 방식
html

1. <h1 style="background-color: pink;">Hello World</h1>
2. <h1>Hello World</h1>
3. <h2 id="test1">Nice to meet you</h2>
4. <h3 class="test2">Welcome</h3>
5. <input type="text" placeholder="이름">

css

2.
h1 {
	font-size: 80px;
}
3.
#test1 {
	color: blue;
}
4.
.test2 {
	color: green;
}
5.
input[type="text"] {
	border: solid 10px red;
}

id 하나의 속성, class 여러 속성 가능
id 중복 X, class 중복 가능

<h2 id="color-1">ID 선택자</h2>
<h3 class="bg-1 font-size-1">Class 선택자</h3>

동일한 속성 값을 적용 했을 때 우선 순위
style 속성 > id > class > tag
/
디테일 하게 작성할수록 우선 순위가 높아짐
/
css 예시

div {
	width: 100%; /* 가변성은 부모 기준 */
	height: 300px;
	min-width: 600px; /* % 기준 */
	max-width: 800px;

	border: solid 10px red;
	border-radius: 50px;

	background-color: yellow;

	opacity: 0.5;
}


h1 {
	color: blue;
	font-size: 80px;
	font-style: initial; /* 기울기 italic */
	font-family: 'Noto Sans KR', sans-serif; /* 브라우저에서 Arial 안되면 다음 폰트 적용, sans_serif 모든 브라우저 가능 */
	font-weight: 300;
	text-decoration: line-through; /* underline, line-through*/
	text-align: center; /* 기준은 태그 영역 */
   

	background-color: pink;
}

ul {
	list-style: none; /* 리스트 마크 제거 */
}

a {
	text-decoration: none /* a 태그 언더바 제거 */
}

#bg {
	width: 100px;
	height: 100px;
	background-color: yellow;
	background-image: url(icon.png);
	background-repeat: no-repeat; /* 반복효과 제어 */
	background-position:  right bottom;
}

background-image는 html img 달리 영역의 크기보다 크면 잘리고 작으면 여백이 생김.
웹 접근성을 위해 정보성 이미지는 img 삽입하며 alt를 넣는 게 좋다.

구글 폰트
https://fonts.google.com/

이하 내용은 github 업로드

☔학습한 내용 중 어려웠던 점

id,class 적용 범위, 차이점

🎁해결방법

여러 태그와 속성값 공부

🎉학습소감

아직까지는 html, css에 대한 기초적인 강의라 따라가기 무난하지만 앞으로 어려워질 예정😂
태그 몇 개 배운 것도 없으면서 벌써 헷갈린다...