웹 프론트70 jquery - html과 text 메소드의 차이 text 어떤 내용이 예를들어 p같은 문자 태그 안에 있다면 text를 사용해서 변경할 수 있습니다. 그냥 text() 이런식으로 사용한다면 오히려 해당 요소의 text를 가져오는 역활을 합니다. 위의 예제는 hello를 출력합니다. html html도 text와 비슷한 기능인데요, text는 텍스느만 불로오지만 html()은 html 태그도 불러옵니다. http://www.everdevel.com/jQuery/text-html.php 2018. 8. 30. CSS - 자손 선택자와 자식선택자 비교 CSS의 자손선택자와 자식선택자 차이 css 선택자 중에 자손선택자와 자식 선택자를 알아보겠습니다. 자손선택자 자손 선택자(descendant selector)는 문서 구조에서 특정 요소의 자손을 선택하는 선택자입니다. 자손은 자식, 손자, 그리고 이후에 후손을 모두 포함합니다. 자식선택자 자식 선택자(child selector)는 특정 요소의 직계 자식만 선택하는 선택자입니다. (자식 이후 손자, 후손들 포함하지 않음) 참조) http://aboooks.tistory.com/286 2018. 8. 14. jquery의 chain Chain 이란 jquery의 메소드들은 반환값으로 자기 자신을 반환해야 한다는 규칙을 가지고 있습니다. 이를 이용하면 한번 선택한 대상에 대해서 연속적인 제어를 할 수 있습니다. 즉 자기 자신을 포함하는 래퍼를 모든 메서드가 반환합니다. 여러줄의 코드를 한줄로 표현 가능~ Chain의 장점 코드가 간결해집니다. 인간의 언어와 유사해서 사고의 자연스러운 과정과 일치함. 하나의 주어를 여러가지 서술어가 묘사 할 수 있습니다. 탐색 (traversing) chain의 대상을 바꿔서 채인을 계속 연장시킬 수 있습니다. 너무 복잡한 chain은 코드의 가독성을 떨어 뜨립니다. 예제) find(.foo) -> 주어진 래퍼의 자식 앨리먼트중 class명이 foo인 엘리먼트를 찾아라!end() -> 마지막으로 사용한.. 2018. 8. 13. jquery의 선택자 선택자란? jquery 래퍼에는 CSS 선택자가 위치할 수 있는데, 이를 통해 제어하려는 엘리먼트를 빠르고 정확하게 지정할 수 있습니다. jquery 공식 홈페이지 api.jquery.com -> jquery 공식 홈페이지 Selector 챕터의 Basic에 해당 선택자에 대한 설명이 나와있습니다. 예제를 실행해보며 공부해 볼 수 있습니다 기본 선택자 필터 선택자 대괄호로 시작하며 앞쪽에는 속성 이름이 들어가게 됩니다. = 앞에 어떤 연산자가 들어가느냐에 따라 동작의 차이가 발생합니다. 속성 선택자 폼 선택자 2018. 8. 13. jquery의 래퍼 래퍼란? jquery라는 이름으로 시작되는 함수를 래퍼라고 합니다. jquery ( 앨리먼트 오브젝트 | 'CSS' 스타일 선택자') 의 형태로 사용됩니다. 보통 $로 많이 씁니다. 엘리먼트 오브젝트 => document.getElementById css 스타일 선택자 => . # 등의 css 문법 레퍼의 안전한 사용 jquery는 라이브러리로 재사용을 하기 위해 사용합니다. jquery는 다른 라이브러리와 같이 사용할 경우가 많습니다. 그럴경우 라이브러리의 변수명, 함수명등의 충돌이 발생할 수 있기 때문에 jquery는 이러한 충돌을 회피할 수 있는 기능을 제공합니다. (장점) $(엘리먼트)와 jquery(앨리먼트)는 같은 의미이지만 $를 사용하는 다른 라이브러리와의 충돌 때문에 다음과 같은 방법을 사.. 2018. 8. 13. Key-Frame 애니메이션이란? @keyframes 와 애니메이션 CSS 애니메이션의 중요한 요소는 @keyframes입니다. @keyframes는 CSS 문법 중 하나로 애니메이션이 만들어 지는 부분입니다. @keyframes를 타임라인 안의 하나의 스태이지(구간)들 이라고 생각하시면 편합니다. 다음으로 CSS 애니메이션이 작동하도록 @keyframes를 선택자로 묶어주시면 됩니다. 이것은 마지막에 keyframes 선언 안의 모든 코드를 분석하고 각 스테이지에 따라 새로운 스타일로 변형시키게 됩니다. 참조) 0% 시작 => 100% 끝 from to 로도 사용가능 to로만 쓸수도 있음 Animation 속성 animation 속성은 예전에 @keyframes라고 불리며 CSS 선택자 안에서 존재했었습니다. animation은 여러개.. 2018. 8. 9. SVG란? 기존에 알고 있던 SVG에 대한 상식 백터기반이기 때문에 사이즈가 변경되어도 안 깨지고 XHTML 문법으로 이루어져서 CSS 및 Event Handle이 가능하다. 정확한 개념 정리 SVG의 약자는 Scalable Vector Graphic 의 약자입니다. 2차원의 백터 그래픽을 표현하기 위해서 탄생하였고 XML 기반의 표현입니다. 1998년 W3C에서 개발을 하였고 그전에는 Microsoft의 "VML"와 Apple의 "PGML" 이라는 2차원의 백터 그래픽을 XML로 표현하는 언어가 있었습니다. 하지만 두개다 W3C에서 채택하지 않았고 W3C는 SVG를 개발하여서 표준으로 채택하였습니다. SVG의 장단점 장점으로는 백터기반이기 때문에 기존의 비트맵 기반의 포멧과 달리 사이즈가 늘어나도 사진이 깨지지 .. 2018. 8. 9. 쿠키란? Cookie 개념 쿠키란? 브라우저의 저장소 역활을 하기 위해 사용합니다. 쿠키는 만료 기간이 있는 키 - 값 저장소입니다. document.cookie를 통해 현재 쿠키의 정보를 알아낼 수 있습니다. 쿠키의 특징 4KB의 용량 제한이 있습니다. (1KB는 1024 바이트 => 한글자당 보통 2Byte니까 512글자정도 쓸수 있는 용량) 계산해보면 2000자 남짓의 텍스트를 저장할 수 있다고 가정하겠습니다. 매 서버 요청시마다 서버로 쿠키가 전송되는데요, 왜 쿠키가 전송될까요? 그것을 알기위해서는 HTTP요청에 대해서 간단히 알아야합니다. HTTP 요청은 상태를 가지고 있지 않습니다. (Stateless) 무슨 말인지 예를 들면 브라우저에서 서버로 나에 대한 정보를 가져오라는 Get /Me라는 요청을 보낼 때, 서버는 요.. 2018. 8. 6. CSS - 뷰포트란 무엇일까? 모바일 친화적이란? 사이트가 모파일 친화적이라는 것은 간단하게 사용자가 모바일로 웹 페이지를 이동할 때 편하게 이용할수 있음을 뜻합니다. 사이트의 데스크톱 버전을 휴대기기에서 보거나 사용한다면 콘텐츠를 읽기위해 두 손가락으로 화면을 모으거나 확대할 수 있고 이는 사용환경을 번거롭게 느끼게 하므로 사용자가 사이트를 떠날 확률이 높기 때문에 모바일 친화적으로 만드는 것이 중요합니다. ViewPort?? 정의 모바일 브라우저들은 viewport로 알려진 가상의 window상에 페이지를 렌더링 합니다. 즉 화면 Display상의 표시 영역을 뜻합니다. 모바일 Safari는 viewport meta 태그를 도입해 웹 개발자들이 viewport 크기와 scale을 조정할 수 있게 했고, 웹 표준은 아니지만 이제 대.. 2018. 8. 3. 웹에서 forward와 redirect의 차이 페이지 전환 방식 웹에서는 페이지 전환 방식이 2가지가 있습니다. forward 방식과 redirect 방식이 있습니다. forward 방식 Web Container 차원에서의 페이지 이동만 있습니다. 실제로 웹 브라우저는 다른 페이지로 이동했음을 알 수 없습니다. 그렇기 때문에 웹 브라우저에는 최초에 호출한 URL이 표시되고 이동한 페이지의 URL 정보는 볼 수 없습니다. 동일한 web container 차원에서의 페이지 이동만 가능합니다. 현재 실행중인 페이지와 forward에 의해 호출될 페이지는 request, response 객체를 공유합니다. Redirect 방식 web container 는 redirect 명령이 들어오면 웹 브라우저에게 다른 페이지로 이동하라는 명령을 내립니다. 웹 브라우저.. 2018. 8. 2. 이전 1 ··· 3 4 5 6 7 다음