웹언어 (191) 썸네일형 리스트형 [jQuery강좌] 10강 문서객체 영역 메서드 - 오쌤의 니가스터디 1. 문서객체 영역메서드의 종류 - 문서객체 영역메서드는 w3school사이트에서 워낙 잘 그려놔서 참조해서 가져왔습니다. - 우리가 문서객체(선택자=요소=태그)가 있을 때 영역이 있습니다. - 이때 영역을 어떻게 처리했냐에 따라 메서드를 다 다르게 작성해야 합니다. - CSS에서 영역을 표시할 때 width/height속성으로 크게 영역을 잡습니다. - 거기에 padding이라는 테두리 안쪽 여백, margin이라는 테두리 바깥쪽 여백도 있습니다. - 그리고 테두리를 뜻하는 border라는 속성도 있습니다. - 이 전체가 모여 요소를 이루는 영역이 되는 것입니다. - 이때 과연 개발자가 필요로 하는 요소는 무엇인가에 따라 메서드를 다르게 써야 하는 것입니다. 메서드명 설명 width() 요소의 너비를 .. [jQuery강좌] 9강 제이쿼리 CSS 조작 메서드 - 오쌤의 니가스터디 1. 제이쿼리 CSS 조작메서드 종류 - 제이쿼리는 CSS 조작을 위한 몇가지 방법이 있습니다. 표로 정리해보도록 하겠습니다. 메서드명 메서드사용법 설명 addClass() $('문서객체선택').addClass('클래스명'); 문서객체에 매개변수 클래스를 추가하는 메서드 removeClass() $('문서객체선택').removeClass('클래스명'); 문서객체에 매개변수 클래스를 제거하는 메서드 toggleClass() $('문서객체선택').toggleClass('클래스명'); 문서객체에 매개변수 클래스를 추가/제거를 번갈아 실행하는 메서드 css() $('문서객체선택').css('css속성명',값); 문서객체 CSS를 컨트롤하는 메서드 - 뒤에 Class가 붙은 메서드들은 전부 매개변수가 한개입니다... [jQuery강좌] 8강 문서객체 추가/이동/복제/삭제 메서드 - 오쌤의 니가스터디 1. 문서객체추가/이동메서드 - 문서객체를 동적으로 생성한 것을 추가할 땐 추가메서드가 되고, 기존에 있는 메서드를 선택하면 이동하게 되는 메서드입니다. 1) 문서객체선택을 기준으로 매개변수를 추가하는 유형 메서드명 사용법 설명 append() $('A').append(B); A의 마지막 자손으로 B를 추가하는 메서드 prepend() $('A').prepend(B); A의 첫번째 자손으로 B를 추가하는 메서드 after() $('A').after(B); A의 동생으로 B를 추가하는 메서드 before() $('A').before(B); A의 형으로 B를 추가하는 메서드 ** 사용될 이미지 출처 : https://icon-icons.com/icon/fish-movie/35099 Fish, movie Ic.. [jQuery강좌] 7강 문서객체 HTML요소관련 메서드 - text(), html(), attr(), prop()메서드 1. 문서객체 - 텍스트관련메서드 - 이번에는 문서객체 중 글자를 컨트롤하는 메서드들을 보도록 하겠습니다. 1) text()와 html() 메서드 비교 - text메서드와 html메서드는 문서객체의 텍스트컨텐츠를 컨트롤하는 메서드입니다. - 둘다 게터와 세터를 갖고 있어, 글자를 얻어올 수도 있고, 변경할 수도 있습니다. - 두 메서드의 큰 차이는 태그문자를 태그로 인식하는지, 아니면 문자로 인식하는지입니다. - 자바스크립트의 innerHTML속성과 innerText속성을 메서드화 시켰다고 생각하면 편합니다. ## 코드 보기 ## 결과보기 - text() 메서드는 매개변수의 문자열을 그냥 문자로 받아들여 그대로 출력해줍니다. - html() 메서드는 매개변수의 문자열 중 태그가 있다면 태그를 인식하여 태.. [CSS3강좌] 37강 CSS단위 - px, em, rem, vw, vh 등 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/gQqkSZvDtbM - CSS는 길이를 표현하는 몇 가지 다른 단위가 있습니다. - 예를 들어 width로 가로폭을 표현할 때 [ width: 300px; ]이라고 쓰죠? 이때 px이 단위입니다. - 이번 강좌에서는 단위의 종류들을 알아보고자 합니다. ** 단위의 몇가지 특징 - 숫자와 단위 사이에는 공백을 쓸 수 없습니다. - 0은 단위 생략이 가능합니다. - 일부 CSS 속성의 경우 음수 길이가 허용됩니다. 1. 절대적 길이 단위 - 절대적 길이 단위는 고정되어 있으며, 정확히 그 크기로 나타내는 것을 말합니다. - 화면 크기(뷰포트)는 기기에 따라 모두 다르기 때문에 절대적 단위만 쓰는 것은 추천하지 않습니다... [CSS3강좌] 36강 유동형 사이즈와 유동형 그리드 - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/5JDVzCNueF0 - 반응형 웹을 만들 수 있는 기술은 크게 3가지라고 말합니다. 1. 미디어 쿼리 - 각각의 기기 뷰포트 별로 CSS를 쓸 수 있는 기술입니다. 이건 지난 강좌에서 배웠죠. 2. 유동형 이미지(사이즈) - 이미지나 요소가 창 사이즈에 따라 자동으로 유동적으로 변화시키는 기술입니다. 3. 유동형 그리드 - 데스크톱, 태블릿, 모바일은 기기 가로폭 즉 뷰포트가 다 다릅니다. 그렇기 때문에 같은 그리드 시스템을 쓰게 되면 안됩니다. 그래서 각각 기기에 맞게 그리드시스템을 맞추는 것입니다. - 지난 강좌에서는 미디어 쿼리에 대해서 배워봤고, 이번 강좌에서는 2번과 3번인 유동형 이미지(사이즈)와 유동형 .. [CSS3강좌] 35강 반응형웹을 위한 미디어쿼리(@media screen{ }) ** 동영상으로 배우고 싶은 분은 아래 주소를 클릭하세요! https://youtu.be/uBrsPwzIZR0 1. 미디어 쿼리(Media Query) - 미디어 쿼리는 특정 조건이 true인 경우에만 코드 블록{ } 내부의 CSS 코드를 실행해주는 구문입니다. - 다른 매체 유형/장치에 대해 서로 다른 스타일을 적용하는데 사용합니다. - 보통 스크린 사이즈를 조건으로 걸어 반응형웹에서 많이 사용하는 코드입니다. - 미디어 쿼리는 반응형웹디자인을 데스트톱, 랩톱, 태블릿 및 휴대폰에 각각 CSS언어를 전달해줄 수 있기 때문입니다. - 또 미디어 쿼리를 사용하여 특정 스타일이 인쇄된 문서 또는 화면 판독기에서만 사용되도록도 할 수 있습니다. @media 조건{ } 2. 뷰포트 너비(width)에 맞춘 미디.. [JS강좌] 13.5강 기본내장객체 - Date - 오쌤의 니가스터디 ** 강좌를 쭉 올리고 보니 Date객체를 안해서 13.5강으로 만들어봤습니다. 제 강좌를 쭉 보신분들은 13강까지 보고 보시면 좋을 듯합니다. ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=qggDJk9UHOY * 기본내장객체 종류 설명 String 문자열 객체 Number 숫자 객체 Math 수학 객체 Array 배열 객체 Date 날짜시간객체 - 기본내장객체는 첫글자를 대문자로 작성하는 것이 규칙 1. Date 객체 선언 - Date객체는 자바스크립트가 서버의 날짜와 시간을 가져올 수 있도록 하는 객체입니다. - 이 파트는 선언 시 무조건 new 키워드를 써서 생성자 함수 방식으로 사용해야 합니다. 1) 변수식 선언 - 없습니다. .. 이전 1 ··· 3 4 5 6 7 8 9 ··· 24 다음
