Frontend/Markup (15) 썸네일형 리스트형 checkbox 커스텀, select All UI 비활성화체크, 비활성화와 활성화체크 활성화 자바스크립트 checkbox all See the Pen MWeQBzp by LeeEugene1 (@leeeugene1) on CodePen. 아코디언 메뉴 accordion menu See the Pen XWKZBZR by LeeEugene1 (@leeeugene1) on CodePen. const mainMenu = document.querySelectorAll('.mobileAccordion--main') mainMenu.forEach((e,i) => { //방법1. dom직접선택 e.addEventListener('click',()=>{ mainMenu[i].classList.toggle('active') }) //방법2. 일반함수+this이용 // e.addEventListener('click',function(){ // console.log(this) // this.classList.toggle('active') // }) }) this는 화살표함수에서는 window객체로 .. [flexbox] 여러줄을 표현하는 wrap, column flex를 쓰고있지만 매번 쓰던것만 써서 안쓰는 아이들을 배워보았다. 먼저 여러줄을 표현할때 매번 flex-direction 만 썻지만 flex-wrap으로도 할수있다하여 공부해보았다. flex-wrap 1 1 1 둘다 여러줄을 표현해주는데 개념은 완전히 다르다할수있다. 우선 flex-wrap:wrap을 사용할때는 #wrap div에 height값이 필요하지않다. height값을 임의로 설정할경우 아래와같은 결과가나온다. flex-direction과의 차이 그다음 flex-direction:column는 주축을 세로로 완전히 바꾸는개념이라 #wrap div에 height값이 필요하다 여기서는 숫자 1이 공간을 형성해줘서 보이기는하지만 숫자를지울경우 이미지가사라진다 꽉채우려면 height:100%로 바꿔야.. [css] div를 상하좌우 중앙정렬 html에 기본박스를 생성하고 중앙 이를 상하좌우 중앙정렬하는데 여러방법이 있다. div안에 '중앙'글씨를 정가운데로옮긴것은 flex를 이용하였고 이포스팅에서는 div만 다룰예정이므로 생략. 해결1 - 모든브라우저상에 표현이가능하나 고정적인 w,h값필요 body div{position:absolute; top:50%; left:50%;} 해결 2 - 쉽고빠르지만 익스플로어9이상에서만 - 모바일용 body div{position:relative; left:50%; top:50%; transform: translateY(-50%);} 해결3 - IE8이상 중첩구조필요(table>table-cell>inline-block) 이때는 html에서 div가 여러개야함 blablabla blablabla blabla.. [css] ellipsis로 multiple lines '...'처리 1줄일 경우 딱 4개만 정해주면된다. width값; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 여러줄일경우 -display: -webkit-box; -webkit-line-clamp: 3; //원하는 라인수 -webkit-box-orient:vertical 가 추가되고 만약 line-height값이 설정되어있다면 height은 line-height의 값의 *3배로 정해준다 .mainModule li .substance { overflow: hidden; margin-top: 5px; font-size: 16px; color: #bfbfbf; text-overflow: ellipsis; display: -webkit-box; -webkit-.. [css] height:100% vs height:auto 나는 평소 이미지에 width:100%를 주면 height값이 자동주어진다고생각해 꼭 필요한경우가 아니라면 별도의 값을 지정해주지않았다. 사수가 width값이랑 height:auto를 주라는 조언을 해줘서 100%하면안되나? 문득 궁금해졌다. height:100%와 height:auto의 차이는 무엇인지궁금하여 구글링해보았다. 쉽게말해 100%는 부모태그의 값에 영향을 받고 auto는 자식태그의 값에 영향을 받음! difference between css height : 100% vs height : auto I was asked a question in an interview that "what is the difference between the css height:100% and height:aut.. <a><li></li></a>는 가능할까? (li태그에 링크걸기) li 태그에도 링크가 걸리게하고 싶어서 문득 궁금해졌다. 답은 불가능. 는 의 자식이기때문에 불가능하다고한다. 그 반대인 li>a 구조는 가능하다. a태그안에 block지정하거나 lnline-block을 지정하면된다고한다. 나같은 경우는 추가로 width:100%도 같이 지정해주니까 적용된다. 출처:스텍오버플로우 https://stackoverflow.com/questions/9627683/a-tag-around-li-tag tag around tag I always want to ask this question: Is this validate Or should always have Is the first way wrong or you are... stackoverflow.com 이전 1 2 다음
