생각 기록장

https://codepen.io/guenhyuck/pen/XWxrEox

/* 탑바 */
.top-bar {
  height: 72px;
  border-bottom: 1px solid #f4f4f4;
}

.top-bar > .con > .menu-box-1 > ul > li > a {
  font-weight: bold;
  color: #1e1e1e;
  font-size: 17px;
  padding: 0 15px;
  position: relative;
}

.top-bar > .con > .menu-box-1 > ul > li > a::after {
  content: "";
  position: absolute;
  bottom: 0;
  background-color: black;
  left: 0;
  width: 0;
  transition: width 0.3s;
  height: 3px;
}

.top-bar > .con > .menu-box-1 > ul > li:hover > a::after {
  width: 100%;
}

/* 2차메뉴 */
.top-bar > .con > .menu-box-1 > ul > li {
  position: relative;
}

.top-bar > .con > .menu-box-1 > ul > li > ul {
  display: none;
  position: absolute;
  left: 12px;
  padding: 17px 0;
}

.top-bar > .con > .menu-box-1 > ul > li:hover > ul {
  display: block;
}

.top-bar > .con > .menu-box-1 > ul > li > ul > li > a {
  font-size: 17px;
  color: #666666;
  display: block;
  padding: 10px 0;
  white-space: nowrap;
  font-weight: bold;
}

.top-bar > .con > .menu-box-1 > ul > li > ul > li:hover > a {
  color: #1e1e1e;
}

이전에서 백그라운드 컬러를 지우고

2차 메뉴를 삽입,정렬하며 나오게끔까지 구현

https://codepen.io/guenhyuck/pen/NWOKyEP

<!-- 유용한 링크 -->
<!-- cdnsj : https://cdnjs.com/ -->
<!-- 폰트어썸 아이콘 리스트 : https://fontawesome.com/icons?d=gallery&m=free -->

<!-- 구글 폰트 불러오기 -->
<!-- rotobo(400/700/900), notosanskr(400/600/900) -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700;900&family=Roboto:wght@400;700;900&display=swap" rel="stylesheet">

<!-- 폰트어썸 불러오기 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">

<!-- 제이쿼리 불러오기 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<div class="top-bar">
  <div class="con height-100p flex flex-jc-sa">
    <a href="#" class="logo flex flex-ai-c">
      <img src="https://kakaopaysec.com/resources/images/bi.png" alt="">
    </a>

    <nav class="menu-box-1">
      <ul class="height-100p flex">
        <li><a href="#" class="flex flex-ai-c height-100p">회사소개</a></li>
        <li><a href="#" class="flex flex-ai-c height-100p">비즈니스</a></li>
        <li><a href="#" class="flex flex-ai-c height-100p">경영정보</a></li>
        <li><a href="#" class="flex flex-ai-c height-100p">고객센터</a></li>
        <li><a href="#" class="flex flex-ai-c height-100p">채용정보</a></li>
      </ul>
    </nav>
  </div>
</div>


/* 노말라이즈 */
body,
ul,
li,
h1 {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

label[for] {
  cursor: pointer;
  user-select: none;
}


/* 탑바 */
.top-bar {
  height: 72px;
  background-color: #afafaf; /* 임시 */
  border-bottom: 1px solid #f4f4f4;
}

.top-bar > .con > .menu-box-1 > ul > li > a {
  font-weight: bold;
  color: #1e1e1e;
  font-size: 17px;
  padding: 0 10px;
  position: relative;
}

.top-bar > .con > .menu-box-1 > ul > li > a::after {
  content: "";
  position: absolute;
  bottom: 0;
  background-color: black;
  left: 0;
  width: 0;
  transition: width 0.3s;
  height: 3px;
}

.top-bar > .con > .menu-box-1 > ul > li:hover > a::after {
  width: 100%;
}

상단의 로고와 메뉴만 클릭하게 만들어 놓은 상태

@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
html {
  /* 영문이면 roboto가 적용되고, 한글이면 Noto Sans KR가 적용되도록 아래와 같은 순서로 배치 */
  font-family: "Roboto", "Noto Sans KR", sans-serif;
}

/* 노말라이즈 */
body, ul, li, h1 {
  margin:0;
  padding:0;
  list-style:none;
}

a {
  color:inherit;
  text-decoration:none;
}

label[for] {
  cursor:pointer;
  user-select:none;
}

/* 라이브러리 */
.block {
  display:block;
}

.inline-block {
  display:inline-block;
}

.absolute-left {
  position:absolute;
  left:0;
}

.absolute-right {
  position:absolute;
  right:0;
}

.absolute-bottom {
  position:absolute;
  bottom:0;
}

.absolute-top {
  position:absolute;
  top:0;
}

.absolute-center {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}

.absolute-middle {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}

.absolute-middle.absolute-center {
  position:absolute;
  top:50%;
  left:50%;
  transform:translateX(-50%) translateY(-50%);
}

.relative {
  position:relative;
}

.cell {
  float:left;
  box-sizing:border-box;
}

.cell-right {
  float:right;
  box-sizing:border-box;
}

.row::after {
  content:"";
  display:block;
  clear:both;
}

.clear-both {
  clear:both;
}

.img-box > img {
  width:100%;
  display:block;
}

.con {
  margin-left:auto;
  margin-right:auto;
}

.margin-0-auto {
  margin-left:auto;
  margin-right:auto;
}

.text-align-center {
  text-align:center;
}

.text-align-right {
  text-align:right;
}

.line-height-0 {
  line-height:0;
}

.line-height-0 > * {
  line-height:normal;
}

.width-30px {
  width:30px;
}

.width-35px {
  width:35px;
}

.width-40px {
  width:35px;
}

.width-45px {
  width:35px;
}

.width-50px {
  width:50px;
}

.width-80px {
  width:80px;
}

.width-100px {
  width:100px;
}

.width-100p {
  width:100%;
}

.width-60p {
  width:60%;
}

.width-55p {
  width:55%;
}

.width-50p {
  width:50%;
}

.width-45p {
  width:45%;
}

.width-40p {
  width:40%;
}

.width-30p {
  width:30%;
}

.width-35p {
  width:35%;
}

.width-100p-except-30px {
  width:calc(100% - 30px);
}

.width-100p-except-35px {
  width:calc(100% - 35px);
}

.width-100p-except-40px {
  width:calc(100% - 40px);
}

.width-100p-except-50px {
  width:calc(100% - 50px);
}

.width-100p-except-80px {
  width:calc(100% - 80px);
}

.width-100p-except-100px {
  width:calc(100% - 100px);
}

.height-100p {
  height:100%;
}

.height-50p {
  height:50%;
}

.border-box {
  box-sizing:border-box;
}

.font-size-dot-8rem {
  font-size:.8rem;
}

.table-row {
  display:table;
}

.table-row.row::after {
  display:inline;
  clear:non;
}

.table-row > .cell {
  float:none;
  display:table-cell;
}

.border-red {
  border:10px solid red;
}

.border-green {
  border:10px solid green;
}

.border-blue {
  border:10px solid blue;
}

.border-gold {
  border:10px solid gold;
}

.border-pink {
  border:10px solid pink;
}

/* 라이브러리 - flex */
* > .flex {
  display:flex;
}

* > .flex-grow-1 {
  flex-grow:1;
}

* > .flex-jc-c {
  justify-content:center;
}

* > .flex-jc-s {
  justify-content:flex-start;
}

* > .flex-jc-e {
  justify-content:flex-end;
}

* > .flex-jc-sb {
  justify-content:space-between;
}

* > .flex-jc-sa {
  justify-content:space-around;
}

* > .flex-ai-c {
  align-items:center;
}

* > .flex-ai-s {
  align-items:flex-start;
}

* > .flex-ai-e {
  align-items:flex-end;
}

* > .flex-as-s {
  align-self:stretch;
}

* > .flex-as-c {
  align-self:center;
}

* > .flex-as-s {
  align-self:flex-start;
}

* > .flex-as-e {
  align-self:flex-end;
}

* > .flex-column-nowrap {
  flex-flow:column nowrap;
}

* > .flex-column-wrap {
  flex-flow:column wrap;
}

* > .flex-row-wrap {
  flex-flow:row wrap;
}

.flex-ch-basis-0 > * {
  flex-basis:0;
}

* > .flex-1-0-0 {
  flex:1 0 0;
}

* > .bg-red{
  background-color: red;
}

/* 커스텀 */

/* 고정형 .con 시작 */
.con-min-width {
  min-width:1370px;
}

.con {
  width:1370px;
}
/* 고정형 .con 끝 */

/* 반응형 타입 1 .con 시작 */
/*
.con {
  max-width:1370px;
}
*/
/* 반응형 타입 1 .con 끝 */

/* 반응형 타입 2(넓을때만 반응형) .con 시작 */
/*
.con-min-width {
  min-width:1370px;
}

.con {
  margin-left:50px;
  margin-right:50px;
}
*/
/* 반응형 타입 2(넓을때만 반응형) .con 끝 */​

<!-- 유용한 링크 -->
<!-- cdnsj : https://cdnjs.com/ -->
<!-- 폰트어썸 아이콘 리스트 : https://fontawesome.com/icons?d=gallery&m=free -->

<!-- 구글 폰트 불러오기 -->
<!-- rotobo(400/700/900), notosanskr(400/600/900) -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700;900&family=Roboto:wght@400;700;900&display=swap" rel="stylesheet">

<!-- 폰트어썸 불러오기 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">

<!-- 제이쿼리 불러오기 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

자바 스크립트 시작
+(라이브러리로 제이쿼리)

DOM의 개념
컴파일언어와 스크립트언어 란 무엇이고 장단점과 차이
제이쿼리 용어

this
find랑 child는 후손,자식과 비슷

작업할때 수시로 저장,새로 수행할 때마다 포크 눌러서 시점 저장(url 바꿔야함)

• 문제 - 짝수번째 버튼은 body 엘리먼트의 배경을 red로, 홀수번째 버튼은 body 엘리먼트의 배경을 blue로 변경시켜야 합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<section>
    <button>버튼 001</button>
    <button>버튼 002</button>
    <button>버튼 003</button>
    <button>버튼 004</button>
    <button>버튼 005</button>
    <button>버튼 006</button>
    <button>버튼 007</button>
    <button>버튼 008</button>
    <button>버튼 009</button>
    <button>버튼 010</button>
    <button>버튼 011</button>
    <button>버튼 012</button>
    <button>버튼 013</button>
    <button>버튼 014</button>
    <button>버튼 015</button>
    <button>버튼 016</button>
    <button>버튼 017</button>
    <button>버튼 018</button>
    <button>버튼 019</button>
    <button>버튼 020</button>
    <button>버튼 021</button>
    <button>버튼 022</button>
    <button>버튼 023</button>
    <button>버튼 024</button>
    <button>버튼 025</button>
    <button>버튼 026</button>
    <button>버튼 027</button>
    <button>버튼 028</button>
    <button>버튼 029</button>
    <button>버튼 030</button>
    <button>버튼 031</button>
    <button>버튼 032</button>
    <button>버튼 033</button>
    <button>버튼 034</button>
    <button>버튼 035</button>
    <button>버튼 036</button>
    <button>버튼 037</button>
    <button>버튼 038</button>
    <button>버튼 039</button>
    <button>버튼 040</button>
    <button>버튼 041</button>
    <button>버튼 042</button>
    <button>버튼 043</button>
    <button>버튼 044</button>
    <button>버튼 045</button>
    <button>버튼 046</button>
    <button>버튼 047</button>
    <button>버튼 048</button>
    <button>버튼 049</button>
    <button>버튼 050</button>
    <button>버튼 051</button>
    <button>버튼 052</button>
    <button>버튼 053</button>
    <button>버튼 054</button>
    <button>버튼 055</button>
    <button>버튼 056</button>
    <button>버튼 057</button>
    <button>버튼 058</button>
    <button>버튼 059</button>
    <button>버튼 060</button>
    <button>버튼 061</button>
    <button>버튼 062</button>
    <button>버튼 063</button>
    <button>버튼 064</button>
    <button>버튼 065</button>
    <button>버튼 066</button>
    <button>버튼 067</button>
    <button>버튼 068</button>
    <button>버튼 069</button>
    <button>버튼 070</button>
    <button>버튼 071</button>
    <button>버튼 072</button>
    <button>버튼 073</button>
    <button>버튼 074</button>
    <button>버튼 075</button>
    <button>버튼 076</button>
    <button>버튼 077</button>
    <button>버튼 078</button>
    <button>버튼 079</button>
    <button>버튼 080</button>
    <button>버튼 081</button>
    <button>버튼 082</button>
    <button>버튼 083</button>
    <button>버튼 084</button>
    <button>버튼 085</button>
    <button>버튼 086</button>
    <button>버튼 087</button>
    <button>버튼 088</button>
    <button>버튼 089</button>
    <button>버튼 090</button>
    <button>버튼 091</button>
    <button>버튼 092</button>
    <button>버튼 093</button>
    <button>버튼 094</button>
    <button>버튼 095</button>
    <button>버튼 096</button>
    <button>버튼 097</button>
    <button>버튼 098</button>
    <button>버튼 099</button>
    <button>버튼 100</button>
</section>

function a() {
    $('body').css('background-color', 'blue');
};

$('section > button:nth-child(2n + 1)').click(a);

var b = function () {
    $('body').css('background-color', 'red');
};

$('section > button:nth-child(2n)').click(b);

http://www.tcpschool.com/javascript/intro 자바스크립트 기초 

###개념 - 트랜지션

float 고정 기능 공식
float요소의 부모에 주면 해결된다 -라이브러리-
.row::after{
content:"";
clear:both;
display:block;
}

###flex 익히기

플렉스는 자식한테만 영향을 줌
자기 x 자손 x

플렉스 명령어들

```
justify-content - Flex 요소들을 가로선 상에서 정렬합니다.

> flex-start (default) flex-end center space-between space-around space-evenly

align-items - Flex 요소를 세로선 상에서 정렬합니다.

> flex-start flex-end center baseline stretch (default)

flex-direction - 정렬할 방향을 지정합니다. 행 , 열

> row (default) row-reverse column column-reverse

order - Flex 요소의 순서를 지정합니다.

> <integer> (... -1, 0 (default), 1, ...)

align-self -지정된 align-items 값을 무시하고 Flex 요소를 세로선 상에서 정렬합니다.

> flex-start flex-end center baseline stretch

flex-wrap - Flex 요소들을 한 줄 또는 여러 줄에 걸쳐 정렬합니다

> flex-start flex-end center baseline stretch

flex-flow -

> 다음의 속성들을 간략히 한 속성입니다: flex-direction and flex-wrap.

<flex-direction> <flex-wrap>

align-content - 세로선 상에 여분의 공간이 있는 경우 Flex 컨테이너 사이의 간격을 조절합니다.

> flex-start flex-end center space-between space-around space-evenly stretch (default)
```

fontawesome -> 아이콘즈

https://flexboxfroggy.com/#ko 개구리 flex 연습 사이트 직관적이다.

https://codepen.io/enxaneta/pen/adLPwv flex 적용해보기

###개념 - 개념 : position 속성 정리

 ###개념 - 개념 - top, left, right, bottom 

###개념 - 개념 : z-index 예제 

###개념 - 개념 : white-space:nowrap, 줄바꿈 금지

 ###개념 - 개념 : overflow-x:auto, 스크롤바 자동생성 

###개념 - 개념 : overflow-x:scroll, 스크롤바 무조건 생성 

###개념 - 개념 : overflow-x:hidden, 넘치는 내용 숨김

 ###개념 - 개념 : text-overflow:ellipsis, 넘쳐서 숨겨지는 텍스트 ... 처리(5분완성)

-이미지-

section{
width: 400px;
border:10px solid red;
}
section > img {
display:block;
width: 100%; //부모의 너비 기준에 변화

}

position은 static이 기본값 겹치지 않는다 ->사람
absolute 하면 겹쳐짐,독립적인 무언가. top left로 좌표이동 ->유령

부모에게 position:relative;를 주면
부모의 범위를 벗어나지 못한다

body,ul,li 노말라이징 -패딩 0 마진 0 리스트스타일 논

TODO

<h1>완료 : 메뉴아이템에 마우스를 올렸을 때 자식인 텍스트(a)의 배경색과 글자색을 적절하게 변경해주세요.</h1>
<h1>요구 : -</h1>

<nav class="menu-1">
  <ul>
    <li><a href="#">메뉴아이템1</a></li>
    <li><a href="#">메뉴아이템2</a></li>
    <li><a href="#">메뉴아이템3</a></li>
  </ul>
</nav>

/* css 부분 */

/* 노말라이즈 => 모든 작업 전에 한번 */
/* 노말라이즈 */
ul, li {
  /* margin을 없앤다. */
  margin:0;
  padding:0;
  list-style:none;
}

/* a를 노말라이즈 합니다. */
a {
  /* 이렇게 하면 나중에 문제가 됩니다. */
  /* inherit => 나는 개성이 없어요. => 나는 부모의 속성을 그대로 물려받겠습니다. */
  color:inherit;
  text-decoration:none;
}

.menu-1 {
  text-align:center;
}

.menu-1 > ul {
  background-color:#dfdfdf;
  display:inline-block;
  padding:0 10px;
  border-radius:5px;
}

.menu-1 > ul > li {
  display:inline-block;
  width:200px;
}

.menu-1 > ul > li > a {
  padding:10px;
  /* display:inline 요소에는 margin, padding, width, height가 일반적인 방식으로 적용되지 않는다. */
  display:block;
}

/* 마우스가 올려진 메뉴아이템의 자식인 a */
.menu-1 > ul > li:hover > a {
  color:white;
  background-color:black;
}

a 노말라이징 -텍스트 데코 논 -컬러 인헤릿

1차메뉴 작성
-.menu-1 ul
백그라운드 컬러
-.menu-1 > ul
디스플레이 인라인블럭
패딩 0 20px
곡률 5px

-.menu-1 ul > li:hover > a
백그라운드 컬러
컬러

2-2차 메뉴 나오게하기
-2차메뉴 정렬 탑,레프트,위드 포지션
-2차메뉴 가두기
-2차메뉴 유령화

3-3차 메뉴 나오게 하기
-3차메뉴 구별짓기
-3차메뉴 옆에 나오기
-3차메뉴 마지막꺼 왼쪽에 나오기

줄정렬 ctrl+a -> 쉬프트+tab

### 개념 - 이미지

img 태그는 열고 닫는 구조가 아닌 하나짜리이다.
img는 자식을 가질 수 없다.
src="이미지 URL"

###개념 - margin, padding

top,bottom,left,right가 있다
하나씩 지워가보면서 차이를 보자
https://codepen.io/jangka44/pen/PBGgQa

padding 영역 안쪽이냐

paddig : 0 0 0 0;
상 하 좌 우
padding : 10px; 하면 모두 적용

margin 영역 바깥쪽이냐

    margin : 0 0 0 0;
            상 하 좌 우

margin : 10px; 하면 모두 적용

###개념 - display:inline 에는 width, height, padding, margin이 제대로 작동하지 않는다.

말 그대로

###개념 - nth-child

- 첫번째 자식-

div:first-child {
background-color:blue;
}

-n번째 자식 짝수번째라면 2n 홀수라면 2n-1 n에는 변수가 들어간다 0부터~~-

- 수학 방정식 세운다고 생각하면 됌-

div:nth-child(2) {
background-color:gold;
}

-마지막 자식-

div:last-child {
background-color:green;
}

-마지막 n번째 자식-

div:nth-last-child(2) {
background-color:pink;
}

###개념 - 모든 보이는 엘리먼트의 부모는 body이고, 그의 부모는 html 이다.

codepen에서는 기본으로 틀을 제공하지만
까보면 html , head ,body등이 감싸고 있음
우리가 쓰는건 body안족 부분

###개념 - block 요소 좌측,가운데,우측 정렬하는 방법

div {
width:100px;
height:100px;
margin-left:0; /_ 이 코드는 사실 쓸 필요는 없다. 왜냐하면 원래 0 이니까 _/
background-color:red;
}

div:nth-child(2) {
background-color:gold;
margin-left:auto;
margin-right:auto;
}

div:nth-child(3) {
background-color:green;
margin-right:0;
margin-left:auto;
}

section {
border:5px dotted gray;
}

block 요소의 가운데 정렬 marjin-left,right 둘다 auto

###개념 - 클래스와 IDclass는 엘리먼트의 별명

지칭할때는 .을 붙인다
ex)

  <div class="a"></div>
  
  .a
  
  복수 별명은 띄어쓰기로 한다
  
  ex)

  <div class="a b"></div>
  
  .a
  .b
  div 이름이 3개
###개념 - border-radius
  
- 그냥 redius 호도법 생각하면 된다-
  
  div {
  width:15%; /* 부모 엘리먼트 너비 기준 */
  height:100px;
  background-color:red;
  display:inline-block;
  /* 모서리 50px를 둥글게 처리 */
  border-radius:50px;
  /* border-radius:50%; */
}
  
  
###개념 - inherit
  
부모와 자식의 속성은 각각부여
무조건 상속되는게 아니다
  
  
  
  
  
  <--HTML-->
    
    
관계
부모/자식
형/동생
태그
인라인 계열
span(div에서 display만 inline인 태그, 인라인 계열의 기본 태그)
a : 링크
img : 이미지
블록 계열
기본
div(구분, 적절한 태그가 생각나지 않을 때, 모르면 div, 블록 계열의 기본태그)
nav(내비게이션, 보통 메뉴 감쌀 때)
section(섹션)
article(아티클, 게시물)
제목
h1, h2, h3, h4, h5, h6
목록
ul, li : 순서 없는 목록
ol, li : 순서 있는 목록
    
    
<--CSS-->
  
  
노말라이즈
해당 엘리먼트에 기본적으로 적용되어 있는 디자인을 없애서 다시 평범하게 만든다.
a, body, ul, li, ol, li, h1, h2, h3, h4, h5, h6 은 사용하기전에 노말라이즈 해야 한다.
선택자
태그선택자 : div { ... }
자식선택자 : div > a { ... }
후손선태자 : div a { ... }
클래스선택자 : .menu-item { ... }
기본 속성
width, height, font-size, font-weight, letter-spacing, color, background-color, margin-top, margin-left, padding-top, padding-left, border, border-radius
레이아웃 속성
display
none : 사라짐
inline-block, inline : 글자화
block : 블록화
float : ??
position : ???

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

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

 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;` 공백 한칸을 의미

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

html,css,js의 역할
html,css,js 목표
display
막대구현

<> ~~ <> -> 태그 2개+ 컨텐츠 1개= 1개의 엘리먼트

태그는 여는태그,닫는태그 1쌍 총 2개로 이루어진다

컨텐츠는 화면에 보여진다
엘리먼트 한것은 화면과 1:1 대응이 되지 않는다(줄 바꿈 등)

css는 태그를 찾아 컨텐츠를 꾸민다
화면에 안보인다

명령어 tab하면 자동완성이 된다.or 컨트롤 + 스페이스

-웹페이지의 3가지 요소-
html요소를 배우, css를 스타일리스트 , 자바스크립트를 감독으로 비유한다

<div></div>
<section></section>
<ariticle></ariticle>
<nav></nav>
필수 외울 태그 4개

기본값을 눈에 익히고 그외의 차이점을 익힌다는 생각.

블럭 ->레고블럭

인라인->글자

자바와 마찬가지로 위에서 아래로 실행된다.
덮어쓰기 된다는 말

```
block 요소의 너비 : 너비를 지정하지 않는 한, 최대한 늘어난다.
block 요소의 높이 : 높이를 지정하지 않는 한, 최소한으로 줄어든다.
block 요소의 줄사용 : 한 줄을 무!조!건 혼자 쓴다.(세로모드)
inline-block 요소의 너비 : 너비를 지정하지 않는 한, 최소한으로 줄어든다.
inline-block 요소의 높이 : 높이를 지정하지 않는 한, 최소한으로 줄어든다.
inline-block 요소의 줄사용 : 가능하면 최대한 한줄을 여럿이서 쓴다.
div, section, nav, article의 기본 display 속성값은 block 이다.
```

외우기보단
많이 상황별로 해보기
예측 -> 실행 -> 확인