본문 바로가기
반응형

전체 글137

[jquery] jquery 제이쿼리 선택자 제이쿼리 선택자 사용하기(기본형) 1. 선택한 요소에 지정한 스타일을 적용합니다. $("CSS 선택자").css("스타일 속성명","값"); $("CSS 선택자").css({"스타일 속성명":"값"}); 2. 선택한 요소에 지정한 속성을 적용합니다. $("CSS 선택자").attr("스타일 속성명","값"); 선택자를 이용하여 id="title"인 h1의 글씨색을 파란색으로 바꾸는 예시입니다. 안녕하세요~ on sunday입니다 ^^ 아래 표는 기본 선택자의 종류입니다. 구분 종류 사용법 설명 직접 선택자 전체 선택자 $(*) 모든 요소를 선택합니다. 아이디 선택자 $("#아이디명") id 속성에 지정한 값을 가진 요소를 선택합니다 클래스 선택자 $(".클래스명") class 속성에 지정한 값을 가진 요.. 2020. 1. 20.
[CSS] display:tabel 을 이용한 연혁표 만들기 2019 11.24 on sunday 티스토리 블로그 개설 11.24 첫 포스팅 시작함 11.25 on sunday 바람개비마을 포스팅 11.26 서촌 준수방키친 포스팅 2019 on sunday 티스토리 블로그 개설 11.24 첫 포스팅 시작함 11.24 on sunday 바람개비마을 포스팅 11.25 서촌 준수방키친 포스팅 11.26 * { margin: 0; padding: 0; box-sizing: border-box; } ul,li { list-style: none; } a { text-decoration: none } #history { width: 1200px; margin: 0 auto; } #history h2 { text-align: center; font-size: 24px; colo.. 2020. 1. 19.
[css] display:table-cell;을 이용한 갤러리 만들기 갤러리 on sunday의 갤러리 만들기 on sunday의 갤러리 만들기 on sunday의 갤러리 만들기 on sunday의 갤러리 만들기 on sunday의 갤러리 만들기 on sunday의 갤러리 만들기 * { margin: 0; padding: 0; box-sizing: border-box; } ul,li { list-style: none; } a { text-decoration: none } #content_box { height: 400px; background-color: slategray; } #gallery { width: 580px; height: 230px; } .gallery_title { height: 45px; border-bottom: 1px solid #dfdfdf; mar.. 2020. 1. 18.
[css] display:table-cell 을 이용한 원형에 배경넣기 on sunday tistory html+css javascript jquery re:view 2020. 1. 17.
Emmet 젠코딩 Zen Coding 문법 html 구조를 하나하나입력하는것도 나쁘지 않지만 좀더 빠른 입력을 하도록 도와주는 emmet이라는게 있는데 이번에 브라켓을 사용하면서 유용하게 잘 쓰게 되어 젠코딩 문법 포스팅을 올리는데 선택자만 잘 알고 있으면 생각보다 별게 없다. 우선 브라켓에서 젠코딩을 하려면 Emmet이라는 확장 프로그램을 설치해야합니다.. 태그 여러개 만들기 태그명*숫자 입력하고 tab키 누르면 아래처럼 div요소가 3개가 만들어 집니다. div*3 id, class명 입력해서 만들기 id를 입력하려면 div#content class를 입력하려면 div.content 를 입력하면됩니다. (속성에 맞는 선택자 입력하고 *숫자를 입력하면 동일한 class명이 개수만큼 생성 됩니다.) div.content*3 class명의 숫자값 .. 2020. 1. 16.
[CSS] visibility:hidden 과 display:none; visibility:hidden; 과 display:none;은 둘다 요소를 보이지 않게 하는 속성입니다. 차이점 visibility:hidden; -> 자리는 차지하지만 빈공간으로 남겨두어 보이지 않습니다. (visibility의 기본값은 visibility:visible; 입니다 = 요소를 표시 합니다.) display:none; -> 자리를 차지하지 않고 빈공간도 남겨두지 않으면서 보이지 않습니다. #wrap { position: relative; width: 100%; height: 650px; background: gray; } .box_list { position: absolute; right: 10px; top: 50px; width: 490px; overflow: hidden; } .box.. 2020. 1. 15.
[CSS] 선택자(id선택자, class선택자, nth-child, nth-of-type, odd, even등..) CSS 기본속성 다음에 포스팅을 했어야되는데 생각나는대로 하다보니 이걸 뒤늦게야 올리는 뒤죽박죽 순서.. 선택자란? 특정 태그에 이름을 지정하여 해당태그의 폰트,색깔,크기등의 속성을 변경할수 있도록 하는 역할을 합니다. * -> 전체전택자 *{margin:0; padding:0; box-sizing:border-box;} 등등 reset.css 파일에 자주 쓰이는 선택자 입니다. id(#) -> id 선택자 한문서에 하나의 아이디만 사용할 수 있습니다. class(.) -> class 선택자 하나의 태그에 클래스 명을 여러개 줄수도 있고, 여러개의 태그에 동일한 클래스 명을 지정하여 하나의 그룹으로 묶을 수 있습니다. on sunday on sunday on sunday *{margin:0; paddin.. 2020. 1. 14.
[CSS] animation 여러가지효과 응용 연습! 저번에 했었던 transition과 animation을 응용한 연습해본 html/css입니다. animation효과 border on sunday_tistory .box{ position:relative; width:300px; height:300px; background:#fff; padding:25px; border:1px solid #ddd; border-radius:5px; } .box h2{ font-size:24px; color:#444; line-height:1.4; font-weight:bold; } .box p{ font-size:14px; color:#444; line-height:1.8; } .box p:nth-of-type(1){margin-top:20px;} .box p.view{.. 2020. 1. 13.
[javaScript] 함수3 객체 생성자 함수를 선언하고 객체를 생성하는 기본형입니다. function CheckWeight(name,height,weight){ this.userName = name; this.userHeight = height; this.userWeight = weight; this.minWeight; this.maxWeight; this.getInfo = function(){ var str="" str += "이름:" + this.userName + " "; str += "키:" + this.userHeight + " "; str += "몸무게:" + this.userWeight + " "; return str; } this.getResult = function(){ this.minWeight = (this.u.. 2020. 1. 12.
반응형

티스토리툴바