[TIL] 생활코딩 WEB1, WEB2-CSS (21.08.06)

WEB1 보충강의: GOOGLE analytics 추가

구글 analytics에서 제공하는 다섯줄의 코드만으로 내 웹사이트의 데이터를 통해 다양한 정보들을 도출해낼 수 있다.
※ 생활코딩 강의 이후 업데이트 되어서 아래 주소의 영상을 참고했다. https://www.youtube.com/watch?v=ww_lk0sWdd4

구글 analytics URL설정에 깃헙 settings->page에 나와있는 주소로 설정한다. 소스코드를 복사 붙여넣은 다음에 git-hub에 push한다. 그리고 깃헙주소로 들어간다. 구글 analytics에서 실시간으로 접속한 사람의 정보들을 볼 수 있다.

WEB2-CSS

웹페이지에 CSS를 삽입하는 방법으로 style 태그와 style 속성을 쓰면 된다는 것.

• style태그 안에는 선택자(selector) 그리고 선택자에게 지정될 효과(declaration). 효과는 세미콜론으로 구분한다.
• style 속성은 선택자는 필요없고 style=""으로 태그 안에서 사용된다. 이 의미는 ""안의 코드는 CSS문법에 따라 해석해서 style속성이 위치하고 있는 이 태그에 적용할 것이다라는 뜻이다. 마찬가지로 ""안에서 효과는 세미콜론으로 구분된다.

CSS 스타일 태그 선택자 (class, id, 태그 선택자)

선택자를 통해 구체적인 값을 지정해서 CSS문법을 사용할 수 있다.
우선순위: id > class > 태그 선택자
그리고 같은 우선순위에서는 나중에 작성된것이 우선순위가 높다.

• class에는 여러 속성이 들어갈 수 있고 띄어쓰기로 구분한다. style태그 안에서 선택자는 .class이름{} 으로 사용한다.
• id의 값은 단 한번만 등장해야한다. 중복되서는 안된다. style태그 안에서 선택자는 #id이름{} 으로 사용한다. (구체적)
  구체적인 것이 포괄적인 것보다 우선순위가 높다.
  이러한 선택자들을 조합해서 원하는 효과를 정교하게 어떤 태그에 타겟팅할 수 있고 코드의 양을 획기적으로 줄일 수 있다.