New 병아리 개발자

*&nbsp

- 두칸 이상 띄울 경우 &nbsp 사용.

- &nbsp는 공백 한칸을 의미.

- br은 줄바꿈을 의미.

안           녕 
<br> 
잘&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;가

*엘리먼트의 부모/자식/형제 관계

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

// div는 nav의 부모 엘리먼트
<div>

	// nav는 div의 자식먼트, nav와 형제 엘리먼트
    // 막내 nav 엘리먼트의 인접 형
	<nav></nav>
    
    // nav는 div의 자식 엘리먼트, nav와 형제 엘리먼트
    // 첫째 nav 엘리먼트의 인접 동생
    <nav></nav>
    
</div>

*자식 선택자 / 인접 선택자

- > : 자식 선택자

- + : 인접 선택자

// 자식 선택자 : >
div>section*2>nav[tab키 입력]

// 인접 동생 선택자 : +
div+section[tab키 입력]

*hover

- 이미지, 텍스트, 버튼 등에 마우스 커서를 올려 놓았을때 발동되는 일종의 전환효과를 의미한다.

*hover transform 속성

1. 확대/축소 (scale)

- transform: scale(숫자) : 크기가 숫자만큼 확대, 축소된다.

- transform: scaleX(숫자) : X축 기준으로 숫자비율만큼 확대, 축소된다.

- transform: scaleY(숫자) : Y축 기준으로 숫자비율만큼 확대, 축소된다.

2. 회전 (rotate)

- transform: rotateX(숫자deg) : X축 기준으로 숫자deg 만큼 회전한다.

- transform: rotateY(숫자deg) : Y축 기준으로 숫자deg 만큼 회전한다.

- transform: rotate(숫자deg) :  숫자deg 만큼 회전한다.

3. 이동 (translate)

- transform: translateX(숫자px) : X축으로 숫자px 만큼 이동한다.

- transform: translateY(숫자px) : Y축으로 숫자px 만큼 이동한다.

- transform: translate(X축 숫자px, Y축 숫자px) : X축으로 숫자px 만큼, Y축으로 숫자px 만큼 이동한다.

4. 기울기 (skew)

- transform: skewX(숫자deg) : X축으로 숫자deg 만큼 기울이기

- transform: skewY(숫자deg) : Y축으로 숫자deg 만큼 기울이기

- transform: skew(X축 숫자deg, Y축 숫자deg) : X축으로 숫자deg 만큼, Y축으로 숫자deg 만큼 기울이기

5. 기준점 변경 (origin)

- transform-origin: X축 Y축 :  px, 백분율(%), left, right, center 등 사용 가능하다.

1. 문제 : div, section, article 태그를 사용해서 3가지 색의 막대 생성

// HTML
<div></div>
<section></section>
<article></article>


// CSS
div {
  background-color: green;
  height: 50px;
  display: block;
}

section {
  background-color: red;
  height: 50px;
  display: block;
}
article {
  background-color: black;
  height: 50px;
  display: block;
}

2. 문제 : section(green 색 막대)과 article(blue 색 막대)을 한 줄에 보이게 설정 (display: inline-block 사용)

// HTML
<div></div>
<section></section>
<article></article>


// CSS 
// display:inline-block 사용하여 옆으로 표현
div {
  background-color: red;
  height: 50px;
  display: block;
}

section {
  background-color: green;
  height: 50px;
  width: 50px;
  display: inline-block;
}
article {
  background-color: blue;
  height: 50px;
  width: 50px;
  display: inline-block;
}

3. 문제 - 글자를 예제와 똑같은 스타일로 만들기

// HTML
<div>안녕</div>
<section>안녕</section>


// CSS
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);
}

4. 문제 : 각각의 사이트 명에 링크 설정.(새창으로 떠야하며, 젠코딩으로 진행) (a hrf="" 사용)

// HTML

<젠코딩>
a[href="https://www.naver.com"][target="_blank"]{네이버로 이동}+br+a[href="https://www.google.com"][target="_blank"]{구글로 이동}+br+a[href="https://daum.net"][target="_blank"]{다음으로 이동}
해당사항 한줄로 입력 후 끝에서 tab 누르면 자동으로 태그가 생성된다.

<a href="https://www.naver.com/" target="네이버">네이버</a><br>
<a href="https://www.google.co.kr/" target="_구글">구글</a><br>
<a href="https://www.kakaocorp.com/" target="카카오">카카오</a>

5. 문제 : 각각의 크기와 색상이 다른 링크 버튼 3개 생성 (div 박스 안 자식요소(a) 사용)

// HTML
<div>
    <a href="http://www.bnx.oa.gg" target="_blank">bnx 사이트</a>
</div>

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

<section>
    <a href="http://www.google.com/" target="_blank">구글</a>
</section>


// CSS
div a {
    font-size:3rem;
    color:black;
}

nav a {
    font-size:5rem;
    color:red;
}

section a {
    font-size:7rem;
    color:blue;
}

6. 문제 : 각각의 크기와 색상과 정렬상태가 다른 링크 버튼 3개 생성 (text-align 사용)

// HTML
<div>
    <a href="http://www.bnx.co.kr/16fw/main/main.asp" target="_blank">bnx 사이트</a>
</div>

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

<section>
    <a href="http://www.google.com/" target="_blank">구글</a>
</section>


// CSS
div {
    text-align:right;
}

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

nav {
    text-align:center;
}

nav a {
    font-size:5rem;
    color:red;
}

section a {
    font-size:7rem;
    color:blue;
}

7. 문제 : 100칸 짜리 바둑판을 만들고 하나의 칸에 마우스를 올리면 해당 칸의 배경색이 변경되도록 생성 (hover사용)

// HTML
// div*100 tab으로 한번에 생성 가능하다.
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

// CSS
// hover 사용하여 background 색상 변경
div {
    width:100px;
    height:100px;
    background-color:red;
    display:inline-block;
}

div:hover {
    background-color:blue;
}