[CSS] BASIC

함수객체 정의 (선언)

함수 선언

<script></script> 내 함수 안에서의 this는 함수를 호출한 객체를 뜻함

f12결과는 다음과 같음

즉, 아래와같은 전체 창을 의미함

html에서의 console.log(this)는 element를 의미함

f12결과는 아래와 같음

자바스크립트에서의 속성 중, 주의해야할 사항

background-color에서 - 는 자바스크립트에서 연산자로 인식하기때문에 <script>에서 style.backgroundColor 사용 시,

다음과 같이 backgroundColor로 바꿔줘야한다.

종속선택자

input{ }

.my { }

input.my{ }: input선택자 중에 my로 종속되어있는 선택자 골라라

javascript는 ' ', " "를 구분하지 않음, 그렇지만 single quote( ' ')를 많이 씀

height와 line-height의 차이점

[height]

[line-height적용했을 경우]

input태그중에 id가 user-id class가 focused인 태그에 적용

ul밑에 ul이 올 수 없다.

ul밑에 li가 와야한다.

li밑에 ul은 가능하다.

css 순서 헷갈림 -> 같은 조건일때, 맨 아래에 있는 항목을 적용한다

근데 만약

css순서를 바꾼다면, 다음과 같은 결과가 나온다.

floating으로 layout을 많이 잡는다. 개념적으로는 떠있다(실제로는 떠있지 않음), rendering할때는 2차원이 된다.
li는 블록단위이기 때문에

----

--- 이런식인데 ---- ---- ---- ---- 이런식으로 써주려면 float을 활용한다.

수도 선택자 (Psuedo Selector)

- 선택자로 바로 사용되는 것이 아니고 선택자와 함께 사용되어 선택자를 보조 하는 역할
- 그 역할에 따라 몇가지가 정해져 있다.
:hover -> 마우스의 커서가 올라가 있는 상태
:active -> 마우스 커서를 클릭한 순간부터 놀기 직전까지 상태
:link -> 링크를 클릭하지 않은 그냥 링크만 되어 있는 상태
:visited -> 링크를 눌러서 방문한 후 상태
:before -> 문장이 시작되기 전
:after -> 문장이 끝난 다음
- :hover, :active, :link, :visited 는 a 태그와 함께 링크를 데코레이션 할 때 많이 사용된다

mouse down: 눌러진 상태

mouse up:누르고 다시 놓은 상태

mouse click

이미지를 h1앞뒤로 넣고 싶을 경우, 이러한 방식도 많이 쓰임 before, after이용한 방식

전체 선택자

- 말그대로 전체 엘리멘트를 뜻한다. (와일드 카드)
- 스타일이 적용되는 모든 엘리멘트에 일괄 적용하고자 할 때 사용한다.
브라우저 별로 모든 엘리멘트는 기본적인 margin값과 padding값을 가지고 있다
그런데 브라우저별로 이 값이 틀리기 때문에 디폴트로 0로 만들고 시작하자
* { margin:0; padding:0 }

- 하위 선택자에 적용된 경우,
#idname * 또는 .classname *
아이디가 idname 인 엘리멘트 내부의 모든 자식 엘리멘트에 해당 속성들이
적용될 것이다.
클래스 이름이 classname 인 엘리멘틀들의 내부의 모든 자식 엘리멘트들에게
해당 속성들이 적용될 것이다.