전체 글

1Depth - 2Depth - 3Depth - 3Depth - 3Depth - 2Depth - 3Depth - 3Depth - 2Depth - 2Depth 1Depth - 2Depth - 3Depth - 3Depth - 2Depth - 3Depth - 3Depth - 3Depth 1Depth - 2Depth - 2Depth 1Depth /* reset css */ * { margin: 0; padding: 0; } li { list-style: none; } a, a:active, a:focus { color :#222; text-decoration: none; } /*************** 1Depth ***************/ .lnb { position: relative; width: 20..

How to https://github.com/rendro/easy-pie-chart GitHub - rendro/easy-pie-chart: easy pie chart is a lightweight plugin to draw simple, animated pie charts for single values easy pie chart is a lightweight plugin to draw simple, animated pie charts for single values - GitHub - rendro/easy-pie-chart: easy pie chart is a lightweight plugin to draw simple, animated pie ch... github.com Get Started h..

참고 홈페이지 https://www.yuseong.go.kr/prog/trrsrt/TRSE_01/tour/sub02_01/list.do 기간 21.10.13 ~ 21.10.14 🔥 주의사항 🔥 불필요한 태그 빼기. 알맞은 태그 넣기. 디자인에 맞게 적용하기. 📌 [정리] 텍스트부터 채운다. font에서 부터 padding,margin을 끝으로 안에서 밖으로 작업한다. img의 경로가 잘못되거나 로딩이 안 될 경우, 대체 이미지를 넣어준다. img src="" onerror="this.src='대체이미지경로'" background-image 텍스트는 말줄임표를 넣어준다. 이미지 높이는 padding-top으로 만들어주고 그 안을 이미지로 채운다. .img { position: relative; paddin..

가장 기초적인 부분인데 그냥 넘어가는 경우가 많다. 선택자 우선순위 우선순위란, 같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법. 점수가 높은 선언이 우선 점수가 같으면 가장 마지막에 선언한 태그가 우선 Hello world! 점수로 우선순위를 나타내보자. Hello world! !important > inline > ID > Class > 태그 > 전체 > body body라는 태그에 속성을 적용하면 상속되기 때문에 점수를 계산하지 않는다. [예제] .list li.item {} .list li:hover {} .box::before {} #submit span {} header .menu li:nth-child(2) {} h1 {} :not(.box)..

1. 코알라 다운 2. 코알라에서 + 를 누른 후 컴파일 할 scss파일을 선택한다. 3. 폴더 지정없이 진행하려면 6번부터 보면된다. 컴파일할 css 파일을 scss와 다른 경로에 저장하려면 여기서부터 보면됨. style.scss에서 우클릭 후, [set Output Path] 선택. 4. 3번에서 scss 파일을 선택하면 같은 경로에 css파일이 저장된다. 이 css 파일을 내가 넣을 폴더에 넣고 진행만 하면 된다. 5. 그럼 경로가 아래 이미지처럼 확인됨. 6. 컴파일 된 css를 어떻게 구조화할지 선택할 수 있다. (output style 선택) nested ul { font-family: Georgia; color: #333; } ul li { display: inlne-block; } exte..

조건 flex로 1줄 6칸 만들기 768px 일 때 2줄 3칸 만들기 box box box box box box * { margin: 0; padding: 0; box-sizing: border-box; } .container { display: flex; max-width: 1200px; height: 200px; background: #eaeaea; margin: auto; } .box { width: 20%; border: 1px solid plum; } @media all and (max-width: 768px) { .container { /*flex-wrap: nowrap(default) */ flex-wrap: wrap; background: #777; } .box { width: 33.33%..

[jQuery] class 찾기 hasClass() is() length apple banana orange 1.hasClass() 선택자 태그에 해당 조건이 class 이여야 한다. 태그는 안되는 것 같다. // jQuery $('.wrap > div').each(function() { if($(this).hasClass('apple')) { // true $(this).css({color: 'red'}); } else { // false $(this).css({color: 'yellow'}); } }) 2.is() 특정 클래스를 포함하고 있는지, class외에 id, name 등도 사용가능하다. 클래스 이름 앞에 .을 찍어서 클래스 속성임을 명..