선택자 / <br>과 a 태그 개념

> 선택자 개념

나를 감싸는 엘리먼트 : 부모 엘리먼트

내가 감싸는 엘리먼트 : 자식 엘리먼트

나와 같은 부모를 둔 엘리먼트 : 형제 엘리먼트

가장 가까운 형제 엘리먼트 : 인접형 / 인접동생

1. 자식 선택자 : >

div > nav {
	height: 100px;
	background-color: green;
}

-> div의 자식 nav

2. 인접동생 선택자 : +

div > nav + article{
	background-color: red;
}

-> div의 자식 nav의 인접동생

3. (모든)동생 선택자 : ~

div > nav ~ section {
	height: 100px;
	background-color: pink;
}

-> div의 자식 nav의 모든 동생

4. 후손 선택자 : 띄어쓰기 한칸

div section {
	height: 100px;
	background-color: pink;
}

-> div의 후손 section

** 순서와 상관없이
body div (부가설명 된 태그)가 적용됨

---

> < br >과 a 태그의 개념

1. < br > : 자리바꿈
2. a 태그 : 링크 (앵커태그)

<a href="https://www.naver.com/" target="_blank">네이버</a>

2-1 부가적인 옵션
target="_blank" : 새창으로 띄우기
title : 커서 부가설명

---

> RGB로 색상 지정하기

1. color picker 활용 : #~ 색상코드 복붙
2. ( , , ) 0 ~ 255 안에서 선택
   *화이트 : ffffff (fff) / 255, 255, 255
   블랙 : 000000 (000) / 0, 0, 0
   레드 : ff0000 / 255, 0, 0
   그린 : 00ff00 / 0, 255, 0
   블루 : 0000ff / 0, 0, 255

rgba : ( , , , ) rgb에서 0~1 투명도 조절

div{
	rgba(255,0,0,0.3)
}

-> red, 불투명도 0.3인 색상 적용

---

> 젠코딩, emmet

편리하게 작성할 수 있음
속성 : 대괄호 / 내용 : 중괄호

<div>
	<nav>
		<article></article>
		<div></div>
	</nav>
</div>

div>nav>article+div -> Tab하면 바로 나옴!

---

* 레이아웃 범위 확인하는 법

background-color
border (레이아웃에 반영)
outline (레이아웃에 반영 X)

div{
	background-color: pink;
	border: 10px solid red;
    outline: 5px solid blue;
}

* 정렬하는 법

text align 사용하기

div{
  font-size: 2rem;
  color: black;
  text-align: right;

레이아웃으로 확인하면 좋음
부모 태그로 적용시켜야 범위가 넓음
display: block 으로 설정