## 3월 29일 프론트 엔드 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 : ???