박지연의 코딩이야기

table header 고정테이블의 thead or thead > tr 에 아래 소스를 넣으면 끝! table thead tr {     position: sticky;     top: 0px;     background-color: gray !important;     border-top: 1px solid gray;     border-bottom: 1px solid gray;     box-sizing:border-box; } 문제는 스크롤시 header가 fixed는 되는데 고정헤더 검정 border가 투명화되는 현상이 발생한다. 이 때는 아래 코드를 넣어주자table { border-collapse: separate; border-spacing: 0; } 그럼 스크롤 시 테이블 헤더 검정 bor..

테이블안에 테이블이 들어간단말이야~? 한번 시도해봐야겠다.해서 만들어봄 결과는 성공!   HTML                                                                                                                                                                                                                                                                                                                                                        ..

결과화면 (▼클릭)  클릭해주세요! 목록1 목록2" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스  HTML      클릭해주세요!     목록1      목록2   CSSdetails {     margin: 5px 0 10px; } details > summary {     background: #666;     color: #fff;     padding: 10px;     outline: 0;     border-radius: 5px;     cursor: pointer;     transition: background 0.5s;     text-align: left;     box-shadow: 1px 1px 2px gray; } details > s..

/* CSS */ /* on/off 박스 */ .check {     position: relative;     display: flex;     flex-direction: column;     color: #97acd1;     align-items: center; } .check p {     font-size: 14px;     color: #97acd1;     margin-bottom: 5px; } .check .button {     position: relative;     top: 50%;     width: 50px;     height: 25px;     border-radius: 100px; } .check .button .checkbox {     position: relative..

https://codepen.io/qwer273/pen/bGNOJBY fixed header on Scroll...codepen.io스크롤시 내릴 때에는 헤더가 사라지고 올릴 때는 생기는 헤더입니다.

https://codepen.io/qwer273/pen/XWppOxJ toggleClass...codepen.io 더블클릭 했을 때 파란색 박스가 나타났다가 다시 더블클릭하면 없어지는 효과입니다.

//id를 가진 노드 다 찾아오기     $("[id]").css("border", "5px solid green");     //class를 가진 노드 다 찾아오기     $("[class]").css("border", "5px solid pink");     //class 값 중 test를 포함하는 노드 다 찾아오기     $("[class*=test]").css("border", "5px solid black");     //class 값 중 m으로 시작하는 모든 노드 찾아오기     $("[class^=m]").css("border", "5px solid yellow");     //class 값 중 t로 끝나는 모든 노드 찾아오기     $("[class$=t]").css("border", "5..

https://codepen.io/qwer273/pen/gOxpWaj 로딩페이지...codepen.io로딩이 늦어질 때 미리 뜨는 로딩페이지입니다 :)

홈페이지 HTML a태그로 링크 삽입 시 보통 링크가 없을 때는사이트1 #을 통해서 많이 나타냅니다.이러한 경우 a태그 클릭 시 자동으로 맨위로 이동하게 됩니다. 이것을 방지하기 위해서는 아래 제이쿼리 코드를 넣어주게 되면클릭 시 위로 올라가는 것을 방지할 수 있습니다.  //첫번째방법 // $("a").click(function() { //     if ($(this).attr("href") == "#") { //         return false; //     } // }); //두번째방법 $("a").click(function(e){     e.preventDefault(); }); https://codepen.io/qwer273/pen/GRMrNZj href= # 클릭시 위로 이동 방지...c..

* overflow 속성: 박스 안에서 컨텐츠가 넘칠 때 표현방법을 지정하는 속성 (박스 보다 컨텐츠 크기가 클 때)  visible : 넘치는 콘텐츠를 그대로 납두면서 박스를 넘겨 표시한다. 기본값hidden : 넘치는 콘텐츠를 자르고 보이지 않게 한다.scroll : 넘치는 콘텐츠를 자르지만 스크롤바를 표시하여 스크롤을 내리면 볼 수 있게 한다.auto : 넘치면 콘텐츠를 자르지만 스크롤바가 표시된다.inherit : 부모 요소로부터 값을 상속 받는다.  * overflow-x, overflow-y 속성overflow만 지정했다면 x축 y축 모두 넘치는 부분을 지정해주는 것이라면overflow-x , overflow-y 는 각각 x,y축을 지정해서 표현해주는 속성이다.  visible : 콘텐츠가 잘..