퍼블리싱(44)
-
jQuery: method - 객체 편집 메서드
객체편집 메서드 가상요소 추가하기 before&after css처럼 제이쿼리에서도 마크업에 없는 가상 요소를 추가할 수 있다. 차이점은 css에서는 가상선택자 before, after가 inline요소이지만, 제이쿼리에서 before, after는 block 요소이다. $(function(){ $("p").before("before"); $("p").after("after"); }) prepend&append prepend, append를 사용하면 inline 요소로 넣을 수 있다. 독립된 요소라기 보다는 아래 예제에서 p 태그 안으로 내용이 추가 된다고 보면 된다. $(function(){ $("p").prepend("prepend"); $("p").append("append"); }) prependT..
2021.01.18 -
jQuery: Method - 수치조작메서드
수치조작 메서드 css와 관련된 메서드 1. width & height width() 너비 innerWidth() 너비+패딩 outerWidth() 너비+패딩,보더 height() innerHeight() outerHeight() - $("선택자").width(); - $("선택자").width(값); $(function(){ var w=$("div").width(); //사용자지정너비 var iw=$("div").innerWidth(); //패딩 포함 var ow=$("div").outerWidth(); //패딩, 보더 포함 console.log("width:"+w); console.log("inner width:"+iw); console.log("outer width:"+ow); var h=$("di..
2021.01.14 -
jQuery: Method - 속성조작 메서드
속성조작 메서드 1. html() : html태그값을 얻어오거나, html태그 안에 내용을 변경시킬때 사용 $("선택자").html(); $("선택자").html("수정할내용"); 2. text() : html 태그의 내용물을 얻어오거나, 변경할때 $("선택자").text(); $("선택자").text("변경할 내용"); $(function(){ //h1의 html값을 얻어서 콘솔에 출력하기 console.log($("h1").html()); //h1의 내용을 를 넣어서 변경하기 $("h1").html(" 속성"); //h2중에서 첫번째 h2의 내용물 text console.log($("h2:eq(0)").text()); //h2중에서 두번째 h2의 내용물 text 변경 $("h2:eq(1)").text..
2021.01.14 -
jQuery: 장점, 사용법, 선택자(직접 선택자, 인접선택자, 탐색선택자, 속성선택자, form필터 선택자)
jQuery 자바스크립트의 라이브러리 중 하나 라이브러리 : 함수를 여러개 모아둬서 필요 시 불러서 사용할 수 있도록 장점 - 적은 코드로 많은 작업 실행 가능 - 크로스 브라우징 가능 - 자유로운 css 구현 사용법 1. 다운로드 - compressed : 디자이너 버젼, 연결만 하면 사용 가능 - uncompressed : 개발자 버젼, 소스 수정 용이 2.CDN(CDN Content Delibery Network) : 콘텐츠를 효율적으로 사용하기 위해 : 로딩속도 향상 - 구글 https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js - 네이버 - 마이크로 소트프사 https://docs.microsoft.com/en-us/aspnet/aj..
2021.01.11 -
SCSS: if 조건문, 반복문
조건문 if 함수 삼항연산자와 유사 if(조건, 참표현식1, 거짓표현식2) // @if @if (조건) { /* 조건이 참일 때 구문 : 조건의 ()는 생략가능하다. */ } // @if @else @if (조건) { /* 조건이 참일 때 구문 */ } @else { /* 조건이 거짓일 때 구문 */ } // @if @else if @if (조건1) { /* 조건1이 참일 때 구문 */ } @else if (조건2) { /* 조건2가 참일 때 구문 */ } @else { /* 모두 거짓일 때 구문 */ } 반복문 @for 스타일을 반복적으로 출력할 때 // through : 시작에서 종료까지 반복 // 종료 만큼 반복 @for $변수 from 시작 through 종료 { // 반복 내용 } // to: ..
2021.01.11 -
SCSS: 함수, extend, import
함수 mixin과 유사하지만 반환되는 내용이 다름. mixin은 지정된 style 반환, 함수는 연산된computed 값을 반환 별도의 지시어 없이 사용하기 때문에 내장함수와 충돌하지 않도록 함수명 설정할 것 @function 함수이름($매개변수) { @return 값 } 내장함수 // 내가 정의한 함수 @function extract-red($color) { // 내장 함수 @return rgb(red($color), 0, 0); } div { color: extract-red(#D55A93); } https://sass-lang.com/documentation/modules Sass: Built-In Modules Compatibility: Dart Sass since 1.23.0 LibSass ✗ ..
2021.01.06