jQuery - Traversal - Ancestor
jQuery를 사용해서 부모 element를 탐색하는 방법을 정리하였습니다. - : element의 바로 위 부모 element를 가리킵니다. - : element의 바로 위, 그 위 부모등 모든 부모들을 가리킵니다.
jQuery - Traversal - Descendant
jQuery를 사용해서 자식 element를 탐색하는 방법을 정리하였습니다. - : element의 바로 아래의 모든 자식 노드를 가리킵니다. - : element의 아래에 있는 모든 자식 노드들 중에서 을 찾습니다.
jQuery - Traversal - Siblings
jQuery를 사용해서 형제 element를 탐색하는 방법을 정리하였습니다. - : 현재 element의 다음에 있는 형제 node를 1개 찾아서 리턴합니다. - : 형제 노드 중에서 div인 애들만 찾아서 리턴합니다.
jQuery - Traversal - Filter
jQuery를 사용하여, 요소를 filter하는 방법을 정리합니다. - : 요소중에서 첫번째 요소를 리턴 - : 요소중에서 마지막 요소를 리턴 - : 요소중에서 i번째 요소를 리턴(0부터 시작) - : 요소 중에서 class가 인 애들만 남깁니다...
CSS - backface visiblity
는 "뒷면이 보이냐"라는 말이죠. 기본적인 웹 디자인에서는 사용할 일이 없지만, 2D 혹은 3D를 구현하고 이를 회전시키거나 할때 뒷면이 유효하도록 할 것인지 아닌지를 설정하는 것을 말합니다. 다음과 같은 간단한 html에서 class에 속한 요...
CSS - transform
css의 를 사용해서 요소를 이동(translate), 기울이기(skew), 회전(rotate), 확대 혹은 축소(scale)하는 방법을 정리하였습니다. Define style.css css를 다음과 같이 정의합니다. define html htm...
CSS - visibility
visibility의 값을 수정하여, 상황에 따라 보이도록 혹은 보이지 않도록 할 수 있습니다. 기본적으로는 visible하지만, 마우스를 올리면(hover) 보이지 않도록 설정합니다. 렌더링해보면, 마우스를 올리면 보여지지 않는 것을 알 수 있...
python - Django - Include Static files
css, javascript, image와 같은 static 파일들을 Django 프로젝트 내에 집어넣기 위해서는 다음의 과정을 따르면 됩니다. 우선, 에서 static css file을 집어넣어주려고 합니다. head 부분에 다음의 부분을 넣어...
CSS - linear gradient
css를 사용해서 html 요소의 background를 linear gradient로 설정합니다. 으로 정의해줍니다. - : gradient를 그려주는 방향을 결정해줍니다. 일 경우에는 위쪽으로, 일 경우에는 오른쪽으로 그려주죠. - : 는 어떤...
CSS - position property
문서 내 작성된 순서에 따라 배치되는 경우 position property의 다음 세 값은 문서 내에서 작성된 순서에 따라서 배치됩니다. 이미 현재의 요소 위에 다른 요소가 있다면, 그 요소의 아래에 그려지게 된다는 이야기죠. - : defaul...
CSS - background properties
css의 background의 다양한 설정값을 변경합니다. - : 요소의 background를 image로 설정합니다. - 값을 으로 설정하면 gradient로 예쁘게 설정됩니다. 호호. - : background의 크기를 설정합니다. - : b...
CSS - Box Shadow
요소의 글 상자 만큼의 를 만드는 방법을 정리합니다. 는 로 정의됩니다. - : boxshadow의 위치 양수(오른쪽), 음수(왼쪽) - : boxshadow의 위치 양수(아래쪽), 음수(위쪽) - : 그림자를 얼마나 뿌옇게 뿌려질지 정합니다. ...
CSS - List Style
html 요소인 들에 대해서 스타일을 적용하는 방법을 정리하였습니다. 한 줄로 표현하려면 다음과 같이 정의하면 됩니다. 저는 각 스타일별로 하나씩 적용해주는 것을 더 좋아하는 편이라서, 다음처럼 처리합니다.
CSS - margin, padding, border
html의 각 요소는 모두 content, padding, border, margin이라는 값을 가집니다. - : 일반적으로 각 요소에 정의하는 , 는 content의 너비, 높이를 의미합니다. 이 값은 padding, border, margin...