TIL - 20.10.16 (CSS, JS)

📖 CSS

JS로 바로 넘어가기에 CSS를 너무 어물쩡 넘어가는 것 같아서 display, position 등 중요한 개념들 복습하며 정리

📌 display

1. block

• 새로운 라인에서 시작, 가로폭 전체 차지
• width, height, margin, padding 지정
• block 내 inline 포함 가능
• ex) div, h1 ~ h6,p, ol, ul, li, hr, table, form

2. inline

• 줄 안바꾸고 다른 요소와 한 줄에 위치
• 내용 너비만큼 차지
• width, height, margin, padding 지정 불가 (상하여백은 line-height)
• inline 내 block 포함 불가
• ex) span, a, strong, img, br, input, select, textarea, button

3. inline-block

• inline처럼 줄 안바꾸고 다른 요소와 한 줄에 위치
• block처럼 width, height, margin, padding 지정 가능
  (상하여백 margin, line-height)
• 내용 너비만큼 차지
  
  

📌 position

1. static

• position 미설정시 기본값
• 부모 요소 위치 기준
• top, bottom, left, right 사용 불가

2. relative

• static으로 설정 시의 위치(기본위치)를 기준으로 top, bottom, left, right 사용하여 위치 조정

3. absolute

• 부모, 가장 가까운 조상 요소 기준으로 top, bottom, left, right 사용하여 위치 조정
  * 단, 기준요소가 static인 경우는 제외. relative, absolute, fixed가 적용된 부모 or 가장 가까운 조상 요소를 기준으로 함
• absolute 일 때, width 지정해야함
• 부모, 조상 모두 static 이면, body 기준으로 위치

4. fixed

• top, bottom, left, right 사용하여 위치 조정 (부모요소 관계 없음)
• 스크롤되도 항상 같은 곳에 위치 (네비게이션 바 고정할 때 좋음!)
• fixed 일 때, width 지정해야함
  
  

📌 z-index

• 큰 값일수록 화면 전면에 출력됨
  * 단, position: static 이외인 요소만
  
  

📌 float

• width 없는 block 요소는 가로폭 100% 차지하는데, float 선언되면 width가 내용에 맞게 최소화됨
  
  

📌 CSS 적용 우선순위 (Cascading)

1. 중요도

다음과 같은 순서로 우선순위 달라짐

1. head 요소 내의 style 요소
2. head 요소 내의 style 요소 내의 @import 문
3. <link> 로 연결된 CSS 파일
4. <link> 로 연결된 CSS 파일 내의 @import 문
5. 브라우저 디폴트 스타일시트

2. 명시도

!important > 인라인 스타일 > 아이디 선택자 > 클래스/어트리뷰트/가상 선택자 > 태그 선택자 > 전체 선택자 > 상위 요소에 의해 상속된 속성

3. 선언 순서

나중에 선언된 스타일이 우선 적용됨

📌 transition

CSS 프로퍼티 값 변화가 일정 시간에 걸쳐 일어나도록 하는 것
움직이는 페이지 만들 때 다시 공부해보자

📖 JS

JS 는 기억할 사항만 적어두자

간단한 거 연습할 때는 html파일 body 태그 내에 script 태그 내부에 JS 작성해도됨

📌 변수

var : 변수 선언

📌 비교

== : 동등 연산자
=== : 데이터 형까지 완벽하게 같을 때

== 보단 === 쓰는 것이 정확하므로 ===을 사용하자

📌 배열

배열의 조작

1. 추가

var li = ['a','b','c'] 있을 때,

• li.push(추가할 원소) : 배열 맨 끝에 원소 추가
• li.concat(붙일 배열) : 배열 맨 끝에 복수의 원소 추가
• li.unshift(추가할 원소) : 배열 시작점에 원소 추가 (기존거 하나씩 밀어)
• li.splice(x, y, 추가할 원소) : 첫번째 인자에 해당하는 원소부터 두번째 인자에 해당하는 원소의 숫자만큼 배열에서 제거하고, 세번째 인자부터 전달된 인자들을 첫번째 인자의 원소 뒤에 추가
  만약, li의 'b' 뒤에 'B' 추가하고 싶다면 li.splice(2, 0, 'B');

2. 제거

var li = ['a', 'b', 'c', 'd', 'e'] 있을 때,

• li.shift() : 배열의 첫번째 원소 제거
• li.pop() : 배열 마지막 원소 제거

3. 정렬

var li = ['c', 'e', 'a', 'b', 'd'] 있을 때,

• li.sort() : 순서대로 정렬 (결과는 a,b,c,d,e)
• li.reverse() : 역순으로 정렬 (결과는 e,d,c,b,a)
  
  

📌 객체(dictionary)

파이썬에서 딕셔너리가 JS에서는 객체에 해당

객체에는 객체, 함수 등도 담을 수 있다.

📌 기타

1. 콘솔에서 디버깅

HTML에 포함된 JS 코드를 콘솔창에서 디버깅하기

F12 눌러 개발자도구 -> Sources -> 해당 html 파일 -> 에러지점확인 -> 중단점 걸고 다시 돌리며 어느 부분에서 에러 발생하는지 확인 -> 에러 수정 후 재확인

2. HTML body 요소 가장 아래에 JS 위치시키기

• 페이지 로딩 시간 단축 : HTML 요소들이 스크립트 로딩 지연에 영향 받지 않음
• DOM 완성 전, JS가 DOM 조작하면 에러 발생