Day6 (CSS와 이벤트 버블링)

CSS

• CSS 기본세팅

  * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

화면 layout을 구현할 때 초기화 해야하는 코드 이 부분을 생략하면
layout 구현을 할 때 원하는 모양을 얻기 어렵다.

태그가 기본적으로 가진 여백이 있기 떄문에 이후에 모든 것은 마진과 패딩을 0으로 하겠다 라는 설정이다.

box-sizing은 요소의 너비와 높이를 계산하는 방법을 지정한다.
그 중 border-box는 테두리와 안쪽 여백의 크기도 요소의 크기로 고려하므로 너비를 100 픽셀로 설정하고 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100 픽셀을 유지한다.

• margin

  : 외부 여백, 상하는 입력한 것보다 작게 보일 수 있다.
  margin: 10px auto
  이런식으로는 박스형태일때만 가능함, 주로 반응형 웹을 만들때 사용된다.
  block tag에서 많이 사용하는 방법 상하 여백을 지정하고 화면 중앙에 box를 배치하는 기법

• padding

  : 내부 여백(마치 공기 주입)
  margin과 padding 이친구는 하나만 나오면 4번 같게
  10px, 20px 이렇게 적게되면 시계방향으로 위쪽이 10, 오른쪽 20 이런식으로 적용된다.

• (r)em 단위

  margin, padding 을 설정할때고정값으로 px 단위를 사용하지만
  rem, em 단위를 사용하는 것을 권장한다.
  이 단위는 화면에 보이는 text 의 크기에 따라 비율적으로 여백을 지정할 수 있다.
  1(r)em : 글자와 1대 1크기
  0.5(r)em : 글자 대 여백 = 1 : 0.5
  1.5(r)em : 글자 대 여백 = 1 : 1.5

  추가 조사내용(https://www.daleseo.com/css-em-rem/)
  em과 rem 단위의 기준은 font-size 속성 값이라고 했는데, 정확히 어디에 있는 font-size 속성 값인지에 따라 차이가 발생한다. em의 경우 해당 단위가 사용되고 있는 요소의 font-size 속성 값이 기준이 되지만 rem에서 r은 root, 즉 최상위 요소를font-size 속성 값 의미한다.

• :hover

  -> css 에서 가상 클래스
  js 를 사용하여 event 등을 수행했던 것을 css 에서 할수 있도록 만들어주는 확장 도구
  hover = tag 에 마우스가 올라갔을 때

  button:hover {
        box-shadow: 2px 2px 2px 2px #ddd;
      }

이렇게 있으면 앞에 3개는 2px 이동하고 끝에 2px는 투명도로 마우스가 올라갔을 때 그림자가 생긴다.

• :nth-of-type(순번)

  화면에 보이는 button 중에서 1번째로 보이는 button 의 style 지정

• outline

  : 버튼을 클릭했을 때 나타나는 희미한 실선

이벤트 버블링 및 태그

• 이벤트 버블링

  특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미한다.
  이것때문에 많은 문제를 일으키지만 이걸 역이용하면 스크립트 코드가 간단해진다.

btnBox?.addEventListener("click", (tag) => {
  const target = tag.target;
 
  if (target.tagName === "BUTTON") {
    const text = target.innerText;
    content.style.backgroundColor = text;
  }
});

tag는 클릭했을 때 여러가지 정보를 담은 매개변수 값이고 tag.target 은 제일먼저 클릭된 친구의 정보가 들어있다.

• 시만텍 Tag

  성질은 div와 똑같지만 이름은 다르게 해서 어떤 내용이 있는지 알 수 있다.
  ex) <header>,<nav>,<section>,<footer>

• <a>에서의 스타일

<a> : 닻을 뜻하는 Anchor의 약자로 Content 에 Hyper Text 효과를 부여하는 tag

text-decoration: none;으로 설정하면 기본적으로 되어있는 밑줄이 사라진다.
color: inherit;로 설정하면 a태그는 고유한 색깔이 있기 때문에 바깥쪽 태그의 속성을 상속받지 않으므로 위와같이 설정해주어야 한다.

display: inline-block;
        padding: 12px 16px;

a tag를 감싸는 nav 를 만들때 li tag 에 padding 주면, 마우스 반응을 하지 않는 영역이 발생한다 이러한 현상을 방지 하기 위하여 a tag 에 padding 을 주는데 a tag 는 inline tag 여서 padding 이 적용되지 않는다 a tag 에 padding 을 적용하려면 display 를 inlin-block으로 설정해야 한다.

• form tag의 action 속성

  form tag에서 submit 이벤트가 발생할때 데이터를 배달할 주소 이 주소가 지정되지 않으면 화면만 refresh 된다.

input의 name속성은 input을 변수로 만들어서 form의 action속성에 적힌 주소로 변수를 담아 보낸다.

그 외 내용

https://www.google.com/search?q=대한민국

~~?변수 = 값
?변수=값 & 변수2 = 값
이렇게 255자를 넘길 수 없다

<li><a href="https://google.com">구글</a></li>

href -> hyper text reference 의 약자

address는 기본텍스트를 이탤릭으로 나타내줌