기초공사 (html,css,javascript)

li에만 색이 입혀지고 그 자식인 span태그는 색이 안들어가게 하고싶다. 아래처럼 색이 추가되면 그 자식인 span태그에도 상속된다. .frame-menubar > li { /* li만 색 입히게 --> 안되네*/ background-color:rgb(215, 206, 253); } // 그래서 span에 색을 따로 넣어줬더니 색은 채워졌는데 가득 안채워졌다. width:100%주니 아래로 떨어진다. width:100% .frame-menubar li span { display:inline-block; color:#333; background-color:rgb(207, 132, 247); } 우선순위 상속 참고자료 https://developer.mozilla.org/ko/docs/Web/CSS/whi..

*******html*********** 시스템관리자 데모그룹 목소리시험 목소리등록 목소리인증 운영통계현황 대시보드 일일통계현황 화자인증 목소리모델관리 목소리인증관리 엔진관리 엔진설정 시스템관리 시스템정보 시스템정보관리 사용자권한 사용자관리 프로그램관리 권한그룹관리 Admin 테넌트관리 작업이력관리 로그인이력 공통코드관리 테스트 임시 예약현황 김승렬_테스트 화면1 안창용_테스트 안창용_소스분석 안창용_소스분석1 화자인증데모 등록&인증 봉나례_테스트 봉나례_코드분석 박희정_테스트 목소리등록 일일통계현황 화자등록페이지 목소리모델관리_임시팝업 박희정_사용자관리 **********css************ @charset "utf-8"; @-face { -family: 'NotoKrL'; -style: nor..

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onchange_dom W3Schools online HTML editor The W3Schools online code editor allows you to edit code and view the result in your browser www.w3schools.com 참고하고 응용해보기

let asideMenu = $('.aside_menu > .category > li'); let asideToggleBtn = $('.aside_button'); let body = $('body'); asideMenu.click(function(){ // $('.category ul').slideUp(); // $(this).find('ul').slideDown(); // $(this).find('ul').slideUp();바로 이거쓰니 와따가따한다. //내가 클릭한 li형제자매는 접어야한다. $(this).find('ul').slideToggle(); $(this).siblings().find('ul').slideUp(); //모양바꾸기 $(this).toggleClass('active'); $(t..

$(function(){ var $menu = $('#top_menu ul li'), $contents = $('#contents >div'); console.log($menu); console.log($contents); //menu를 클릭했을때 $menu.click(function(e){ e.preventDefault(); var idx = $(this).index(); console.log(idx); /*$menu.removeClass('on'); $(this).addClass('on'); */ var section = $contents.eq(idx); console.log(section); //선택한것이 어떤contents앎 var sectionDistance = section.offset().t..

//js $(function(){ $('.work-section').tabs({ show: { duration: 300 }, hide: { duration: 300 } }); }); //css추가 소스보기 하니 이 클랙스가 추가되어있다. 이 클래스에 적용 work-section .tabs-nav a:hover, /* **19강 추가작성 ui-state-active*/ .work-section .tabs-nav li.ui-state-active a, .work-section .tabs-nav a.active { background-color: rgb(51, 51, 51); color: rgb(255, 255, 255); } /*새로작성 a에 active가 있을때만 삼각형이 보인다. 우리가 해야할거것은 js..

//1718 attr로 구하기 / index로 구하기 *18강 *****index로 구하기 $(function(){ // var tabAnchor = $('.tabs-nav li'), 18강에서는 li로 변수 // tabPanel = $('.tabs-panel'); /* tabAnchor.click(function(e){ e.preventDefault(); //li에 클릭하면 그에 맞는 내용이 와야해.panel이 와야함 $(this).find('a').addClass('active') ; $(this).siblings().find('a').removeClass('active'); tabPanel.hide(); // 순번 인덱스번호로 하면된다. var targetIdx = $(this).index(); c..

css에서는 클래스에 active가 있으면 검정바탕에 흰글씨가 생기고, 삼각형이 나온다. 그러니 내가 할일은;;; js에서 active를 넣었다 뺐다 하면된다. jquery에서는 hide()와 show()로 display:none / display:block로 표현할수 있다. ******************css********************************* /*새로작성 active라는 클래스명이 있으면 검정바탕에 흰글씨*/ .work-section .tabs-nav a:hover, .work-section .tabs-nav a.active { background-color: rgb(51, 51, 51); color: rgb(255, 255, 255); } /*새로작성 a에 active가 ..

/*html body아래에 script가 있으므로 body읽고 script가 읽히기때문에 document할일 안해도 왼다. 바로 변수명 잡는다.*/ var $window = $(window), $mainHeader = $('#main-header'), $defaultLogo = 'images/logo.svg', $smallLogo = 'images/logo-shrink.svg'; /*--> shrink클래스명을 가지고 있지않으면 넣어주고, 가지고 있으면 빼줘라. shrink를 넣다뺐다할거다--->그 후 shrink를 css에서 작성*/ $window.scroll(function(){ if(($window).scrollTop() > 100){ if(!$mainHeader.hasClass('shrink'))..

if문에서만 쓸수있고, toggleClass('open')이 있어야 함 hasClass('open') ==> open클래스를 보여줘라 html소스 $(function(){ var $aside = $('aside'), $button = $aside.find('button'), $duration = 300; /*$button = $('aside button'); 이렇게 쓰면 시간오래걸림 이미 위에 변수를 지정해서 ..큰거부터찾고 find--find(자식..자식..)하는게 빠르다.*/ //버튼을 클릭하면 aside가 나오도록 해주세용 //자바스크릷트에서는 선택자.classList.add='open'; //css에서 aside느 left: -350px; //제이쿼리에서는 클래스명 추가 선택자 //A.addCla..