본문 바로가기
반응형

All122

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.
[javaScript] 함수2 return 문은 함수에서 결과값을 반환할 때 사용되며, return문이 실행되면 코드가 강제로 종료됩니다. function test(arrData){ var sum=0; for(var i=0; i< arrData.length; i++){ sum += Number(prompt(arrData[i] + "점수는?", "0")); } var avg = sum / arrData.length; return avg; } var arrSubject=["국어","수학"]; var result = test(arrSubject); document.write("평균 점수는" + result + "점입니다."); arrData.length가 국어,수학 총 2이기 때문에 arrData.length(2)만큼 반복문을 실행합니다... 2020. 1. 11.
[CSS] animation 효과 (@keyframes) animation은 속성을 시간에 따라 변화를 줄 수 있도록 하는 효과이며, @keyframes와 함께 사용합니다. animation 속성 animation-name : 애니메이션 효과에 이름을 설정해야 @keyframes에 설정한 명령이 실행됩니다. animation-duration : 애니메이션 효과가 몇초동안 실행될지, 시작해서 끝날때까지 시간을 설정합니다. animation-delay : 애니메이션 효과가 몇초 지난 후 실행될지 설정합니다. animation-timingfunction : 애니메이션이 적용되는 속도를 설정합니다. animation-direaction : 애니메이션 진행방향을 설정합니다. animation-iteration-count : 애니메이션 반복 횟수를 설정합니다. anima.. 2020. 1. 8.
[CSS] transition 애니메이션과 같이 사용되는 transition 속성 전환 transition은 애니메이션 효과를 적용할 때 애니메이션 효과가 일정 시간에 걸쳐서 다양한 방법으로 진행 되도록 하는것 입니다. 기본 형식은 아래와 같습니다. transition : property duration timingfunction delay; transition 속성 transition-property : 원하는 애니메이션 시킬 속성을 입력합니다. (color, background-color, border-radius, position....) transition-duration : 애니메이션 효과가 몇초동안 실행될지, 시작해서 끝날때까지 시간을 밀리초(ms), 초(s)단위로 설정합니다. transition-timingfunction : 애니메이션이 적용되는 속도를 지정합니다.(linear.. 2020. 1. 7.
[CSS] transform속성 (translate,ratate,scale,skew) transform은 요소를 회전(rotate), 확대 축소(scale), 이동(translate), 찌그러뜨리기(skew)할 수 있습니다. 원래박스 transform:translate transform:rotate transform:scale transform:skew h1{width:350px; padding:5px 10px; margin-bottom:30px; border:3px solid #A0D9E2; background:#004680;} .tra{ transform:translate(20px,30px);} /*좌우, 위아래*/ /*박스를 오른쪽으로 20px, 아래로 30px이동*/ .rot{transform:rotate(30deg);} /*시계방향 기준으로 30도 회전시킴*/ .sca{trans.. 2020. 1. 6.
반응형

티스토리툴바