## 3월 28일 프론트 엔드 2일차

###개념 - 엘리먼트(배우)의 부모, 자식, 형제관계

나를 감싸는 엘리먼트 : 부모 엘리먼트
내가 감싸는 엘리먼트 : 자식 엘리먼트
같은 부모를 둔 엘리먼트 : 형제 엘리먼트

 nav의 부모 엘리먼트
<div>
 div의 자식 엘리먼트
  막내 nav엘리먼트의 인접 형
  <nav></nav>
div의 자식 엘리먼트
 첫째 nav엘리먼트의 인접 동생
  <nav></nav>
</div>

###개념 - 글자

  div {
  /* 글자의 두께 조절 */
  font-weight:normal;
  font-weight:bold;
  /* 기본폰트의 3배 */
  font-size:3rem;
  font-size:140px;
  /* 자간조절 */
  letter-spacing:-10px;
  color:#787878;
}

section {
  font-size:10rem;
  /*
  rgba 함수의 인자
  인자 1(red) : 0 ~ 255 까지 넣어서 실험
  인자 2(green) : 0 ~ 255 까지 넣어서 실험
  인자 3(blue) : 0 ~ 255 까지 넣어서 실험
  인자 4(alpha, 투명도) : 0 ~ 1 까지 넣어서 실험
  */
  color:rgba(255,0,0,0.5);
}


###개념 - a와 br

a 엘리먼트는 링크 버튼입니다.
 target 속성은 새 창으로 띄울지 여부를 정합니다.
 href 속성은 이동할 주소입니다.
<a href="https://to2.kr/bTn">bmx</a>

  br은 줄바꿈 엘리먼트 입니다.

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



###개념 - 후손 선택자

 section 엘리먼트 안에 들어있는 a
 ` ` : 후손선택자
 ` > ` : 자식선택자
 선택자가 길면 우선순위가 높다

section a        # section  a # 이 상황에서는 자식선택자를 써도 된다.#
  {
  color:red;
}

/* 이 CSS 는 무시된다. */
a {
  color:pink;
}

/* 이 CSS 는 적용된다. */
a {
  color:green;
}


###개념 - text-align

  div {
  /* 절대로 자신을 정렬하는게 아니라. */
  text-align:left;
}

section {
  /* 자신이 가지고 있는 텍!스!트!를 정렬한다. */
  text-align:center;
}

nav {
  /* 글자가 아닌 엘리먼트도 정렬할 수 있을까? */
  /* 힌트 : display:inline-block 하면 엘리먼트가 `텍스트 화` 된다. */
  text-align:right;
}




```

자동정렬 컨트롤+쉬프트 +A or 화살표표시 포맷 htmle

<div><div>
  <section></section>
  
   두개는 아예 개념이 다르다
  
  <div>
    <section></section>
    </div>
  이건 부모 자식관계
  
    <div>
    <section>
      <nav></nav>
      </section>
    </div>
  
  
 nav는 section의 자식이자 div의 후손이다
  
  강제 줄바꿈 태그 <br>
  단독으로 쓰여 닫는태그가 없으므로 자식 못만든다
  
  <a href=""> </a> 클릭 태크
  <a href="" target="_blank"> </a>  코드펜에선 타겟 해줘야함
  
  <!-- ~~~~ -->  html 주석처리 기능
  /*   ~~~    */ css 주석 처리 기능
  
  [명령어] + 탭 -> 자동완성
  {컨텐츠} + 탭 -> 자동완성
  
  ex)
  
 a[href="#"][targer="_black"]{내용}*100 이러면 100개 한번에 가능
  
  
  > , + 의 차이점 파악 젠코딩
  
  ex)
a[href="#"][targer="_black"]{내용}
  +
  br
a[href="#"][targer="_black"]{내용}
  
  -추가 emmet 문법-
  
  
  /// 띄어쓰기는 후손이란 뜻, > 는 자식이란 뜻 전혀 다르다

div a{
font-size: 3rem;
color : red;
}

div > a{
font-size: 3rem;
color : red;
}

div {
/_ 절대로 자신을 정렬하는게 아니라. _/
text-align:left;
}

section {
/_ 자신이 가지고 있는 텍!스!트!를 정렬한다. _/
text-align:center;
}

nav {
/_ 글자가 아닌 엘리먼트도 정렬할 수 있을까? _/
/_ 힌트 : display:inline-block 하면 엘리먼트가 `텍스트 화` 된다. _/
text-align:right;
}

항상 블록인것,블록이 아닌것 구분 잘하기

글자의 기본값은 인라인이고
너비 높이의 영향 x
적용 하고 싶으면 인라인->인라인 블럭으로 설정

### 개념

div {
/_ 글자의 두께 조절 _/
font-weight:normal;
font-weight:bold;
/_ 기본폰트의 3배 _/
font-size:3rem;
font-size:140px;
/_ 자간조절 _/
letter-spacing:-10px;
color:#787878;
}

section {
font-size:10rem;
/_
rgba 함수의 인자
인자 1(red) : 0 ~ 255 까지 넣어서 실험
인자 2(green) : 0 ~ 255 까지 넣어서 실험
인자 3(blue) : 0 ~ 255 까지 넣어서 실험
인자 4(alpha, 투명도) : 0 ~ 1 까지 넣어서 실험
_/
color:rgba(255,0,0,0.5);
}

###

a 엘리먼트는 링크 버튼입니다.
target 속성은 새 창으로 띄울지 여부를 정합니다.
href 속성은 이동할 주소입니다.

<a href="https://to2.kr/bTn">bmx</a>

br은 줄바꿈 엘리먼트 입니다.
<br>
<br>
<a href="http://www.naver.com/" target="_blank">네이버</a>

###

div {
/_ 절대로 자신을 정렬하는게 아니라. _/
text-align:left;
}

section {
/_ 자신이 가지고 있는 텍!스!트!를 정렬한다. _/
text-align:center;
}

nav {
/_ 글자가 아닌 엘리먼트도 정렬할 수 있을까? _/
/_ 힌트 : display:inline-block 하면 엘리먼트가 `텍스트 화` 된다. _/
text-align:right;
}

/_ 마우스 올림을 받은 div _/
div:hover {
background-color:blue;
}
마우스 올리면 색이 바뀐다

`>` : 자식 선택자
div>section\*2>nav[tab키 입력]
`+` : 인접 동생선택자
div+section[tab키 입력]

두칸 이상 띄울 때는 `&nbsp;`
` &nbsp;` 공백 한칸을 의미

특수문자들은 검색해서 쓴다