1-4) 글로 적는 웹개발 공부 - 웹표준과 HTML 마크업, CSS, Javascript

---

■ CSS

- 인라인레벨(글자들)을 수평 가운데로 정렬시키기 위해서는 부모요소에 text-align 속성 값을 center 로 지정

- 블록레벨을 부모기준 수평가운데로 정렬하려면 margin 을 auto 로 지정

- 브라우저 기준 완전히 덮고 싶으면(반투명막 등) position 속성을 fixed 로, width 와 height 값을 100% 로 left, top 을 0 으로 지정한다.

- 브라우저 기준 수평, 수직 가운데 정렬은 position 속성을 fixed 로, left 와 top 값을 50% 로 margin-left 를 width 의 절반만큼 - 값으로 지정하고 margin-top 을 height 의 절반만큼 -값으로 지정한다.

- position 속성값을 지정하면(예:relative, absolute, fixed) 3층으로(opacity 를 1보다 작은 값으로 지정해도 됨) => 무슨 말인지 찾아보자!

- 같은 층수면 markup 상에 아래에 코딩된 요소가 위로 올라가게 됨

- 만약 3층에 있는 요소들끼리의 경우에는 markup 된 순서를 변경하지 않아도 위, 아래를 지정할 수 있음: z-index 속성으로 지정

- 블록레벨(width, height 를 가지고 있는 요소) 를 수평으로 레이아웃하려면 float 속성값을 지정하거나(left or right), display 속성값을 inline-block 으로 지정

- 만약 float 으로 지정시, 공간을 차지하지 않기 때문에 문제가 생긴다.

- 해결책

1. 부모 요소에 overflow 속성 지정
2. 부모요소에 적절한 height 값을 지정
3. 부모의 가상요소로 clear 속성의 값을 지정

■ Javascript

- javascript 는 클라이언트 컴퓨터의 브라우저에서 작동된다

- javascript 에서 변수의 선언은 var 키워드를 사용한다.=> var 안쓰는걸로 알고 있는데 정확히 찾아보자!

- javascript 에서 함수의 선언은 function 키워드를 사용한다.

- javascript 를 편리하게 사용하기 위해서 jquery 를 이용한다.

- jquery 는 요소 선택이 쉽고 요소들의 내용(css,글자) 의 변경이 쉽다.

- jquery 는 이펙트, 애니메이션이 쉽다.

- jquery 는 ajax 가 편리하고 쉽다.

- jQuery() 함수는 $() 로 축약하여 사용한다.

- $(선택자) 로 jquery 요소객체를 얻어올 수 있다.

- click 메서드를 이용하면 편리하게 'click' 이벤트를 처리할 수 있다.

- mouseenter 메서드를 이용하면 마우스가 요소에 들어갔을 때(css 에서 hover) 의 이벤트를 처리할 수 있다.

- this 는 javascript객체이다.

- 객체란 속성들의 묶음이다.

- 객체의 선언은 {} 중가로 이다.

- 자바스크립트객체를 jquery 객체로 변경하려면 $(javascript 객체)이다.

- 요소의 css 를 변경하거나 얻어오기 위해서 css 메서드를 이용한다.

- 요소의 글자를 변경하거나 얻어오기 위해서 text 메서드를 이용한다.

- 요소의 속성을 변경하거나 얻어오기 위해서 attr 메서드를 이용한다.

- 해당요소가 부모로부터 몇번째 요소인지 얻어오는 메서드는 index 이다.

- 요소의 클래스를 추가하는 메서드는 addClass 이다.

- 요소의 클래스를 제거하는 메서드는 removeClass 이다.

- 요소가 특정클래스를 가지고 있는지 확인하는 메서드는 hasClass 이다.

- 클래스가 붙어있으면 떼고, 없으면 붙이는 메서드는 toggleClass 이다.

- 안보이던 요소를(display:none) 스-윽 opacity 를 증가시켜 보여주는 메서드는 fadeIn 이다.

- 보이는 요소를 opacity 감소시켜 숨기는 메서드는 fadeOut 이다.

- display:none 을 쉽게 하는 메서드는 hide 이다.

- display:block 을 쉽게하는 메서드는 show 이다.

- 나타나 있으면 숨기고, 숨겨있으면 보이게 하는 메서드는 toggle 이다.

- 위에서 아래로 내려오듯 보여주는 메서드는 slideDown 이다.

- jquery 객체안의 요소들중에 특정 index 를 선택하는 메서드는 eq 이다.

- 이전 요소의 선택 prev

- 다음요소의 선택 next

- 부모요소의 선택 parent

- 조상요소들중에 선택 parents

- 자식요소들의 선택 children

- 자손요소들중에 선택 find

- 폼에서 submit , a요소에서 링크이동을 막는 메서드는 preventDefalult 이다.

---