박지연의 코딩이야기

HTML Hello World! Javascript 1 ) className 속성 사용 // 요소 선택const element = document.querySelector(".old-class");// 클래스 이름 변경element.className = "new-class";  2) classList 속성을 사용  2-1. 클래스 추가 (add) element.classList.add("new-class"); 2.2. 클래스 제거 (remove)element.classList.remove("old-class");  2.3. 클래스 교체 (replace)element.classList.replace("old-class", "new-class"); 2.4. 클래스 토글 (toggle)element.cla..

HTML HTML CSS CSS3 JavaScript jQuery  Javascriptvar li = document.querySelectorAll("#tutorial li");for (var i = 0; i   JavaScript 코드 설명querySelectorAll로 모든 요소 선택:document.querySelectorAll("#tutorial li")는 #tutorial ID를 가진 의 모든 요소를 NodeList로 반환합니다.for 루프로 각 요소 순회:루프를 사용해 각 요소의 클래스 이름(className)을 확인합니다.slice 메서드로 문자열 자르기:className.slice(0, 3)로 클래스 이름의 처음 3문자를 추출합니다.조건문 if (na..

HTML 1 2 3 4 Javascript // 모든 li 태그를 가져옵니다.var items = document.getElementsByTagName("li");// 각 li 태그의 색상을 변경합니다.for (var i = 0; i 설명document.getElementsByTagName("li")는 모든 요소를 HTMLCollection으로 반환for 루프를 통해 모든 요소를 순회하며 스타일을 변경items[i].style.color = "red";로 각 요소의 텍스트 색상을 빨간색으로 설정함결과페이지를 실행하면 요소의 텍스트 색상이 빨간색으로 변경됩니다! 😊 추가 Tip (코드 효율성)최신 JavaScript에서는 querySelectorAll과 forEach를 사용..

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..

//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..

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

* text-align 속성은 텍스트의 정렬 방향을 의미합니다. left: 왼쪽 정렬right: 오른쪽 정렬center: 중앙 정렬justify: 양쪽 정렬 (자동 줄바꿈시 오른쪽 경계선 부분 정리) 주의해야할 점 2가지1. block요소에만 text-align 속성을 적용할 수 있다는 점2. 정렬되는 것은 block안에 있는 inline요소가 정렬되는 점* inline : 텍스트 뿐만 아니라 이미지 등의 span , b , a , img 등등 inline요소 *  text-align 속성을 적용할 수 있는 예시 1. div태그(block요소)안에 span문자열이 있는 경우2. p (block요소) 안에 img를 정렬하려는 경우3. div태그 (block요소) 안에 p태그(block요소) 안에 있는 in..

안녕하세요 ! 오늘은 display  / visibility / opacity 의 속성에 대해서 정리해보겠습니다 :) display  / visibility / opacity의 공통적인 부분에서 보이게 하느냐 안보이게 하느냐 즉 ! 가시성을 결정짓는 요소들이랍니다 한번 각각의 속성에 대해서 알아보도록 하겠습니다. 1. display display는 레이아웃에서 자주 사용되는 요소입니다.기본적으로 HTML은 block 또는 inline 특성을 갖습니다. display 요소설명예시태그block블록박스-가로영역모두차지 / 줄바꿈odiv / p / h / ul / li / hr / ol / table h1~h6 / form inline인라인박스-글자화영역 / 줄바꿈xspan / b / i / a / br / b..

안녕하세요 오늘은 Font Awesome 사용법에 대해서 알아보겠습니다. ⊙ Font Awesome이란?= 웹 아이콘폰트를 모아놓은 라이브러리 웹 사이트를 만들 때 아이콘을 넣기위해 필수로 사용되는 요소입니다. 즉 웹사이트에 아이콘을 쉽게 넣어줄 수 있는 것이 바로 Font Awesome 입니다. [폰트어썸 사이트 이동]https://fontawesome.com/?from=io  Font Awesome fontawesome.com그럼 Font Awesome은 어떻게 사용되는지 알아보겠습니다. 먼저 Font Awesome의 장점에 대해서 알아보겠습니다.  만약 웹 사이트에 인스타 아이콘을 넣고 싶다고 가정할 때   1. Html Font 속성과 똑같이 사용가능하기때문에 색상, 크기를 css를 통해 자유롭게..

안녕하세요 오늘은 margin과 padding속성에 대해서 알아보겠습니다. 먼저 margin과 padding은 공간을 만들어주는 속성에 자주 사용됩니다. 1. margin  마진 속성은 주변 여백을 뜻 합니다. 마진의 크기를 조절하면서 다른요소와 너무 가깝게달라붙는 것을 방지해주면서 보기 좋게 만들어주는 기능을 합니다. 마진 속성에는 margin-top , margin-bottom , margin-left , margin-right가 있습니다.즉 위, 아래, 왼쪽, 오른쪽의 여백을 각각 가리킵니다.  적용방법은 해당 여백을 주고 싶은 요소에 margin을 주면 되는데요 margin : 해당 값 , auto (그냥 magin으로 주면 위, 아래 , 좌 , 우 모두가 해당 값으로 적용됩니다.)margin-t..

안녕하세요! 오늘은 line-height 속성과 vertical-align 속성의 관계에 대해서 알아보겠습니다.먼저 line-height 속성과 vertical-align 속성은 함께 자주 쓰이고 있기 때문인데요! 두가지 속성 중에서 line-height 속성에 대해서 먼저 알아보겠습니다. ⊙ line-height: 말 그대로 라인의 높이를 뜻하는데요 이해하기 쉽게 저희가 전에 블럭요소와 인라인 요소에 대해서 배웠죠 즉 문자열의 가독성을 좋게 하기 위한 문자의 인라인요소들의 라인박스라고보시면 됩니다. 기본적으로 문자를 입력하게 되면 가독성을 위해서 자동적으로 행끼리 서로 달라붙지 않고 살짝 띄워있습니다.  * 아래처럼 글자가 붙어 있다면 가독성이 매우 떨어지겠죠?  즉 행간의 높이를 조절할 때 line-..

안녕하세요 오늘은 table 태그를 활용하여 간단하게 표를 만드는 방법을 알려드리겠습니다. table태그를 사용하기 전 알아두어야하는 하위 태그들이 있는데요 * 헤더태그 : * 행태그 : * 열태그 :  이 세가지만 안다면 표는 간단하게 만들 수 있어요!   위 사진과 같이 css없이 표를 만들 수 있습니다. 먼저 table태그를 만들어 주고 만약 3x3표를 만들고 싶다 하면 먼저 헤더태그를 3개 만들어줘야하겠죠? 그리고 행태그 안에 열 태그를 넣어주면 테이블 표 완성! 그 다음은 테이블 디자인을 변경하고 싶을 때 쓰는 속성인데요!  총 8 개의 속성으로 이루어져있습니다. 1. border테이블의 테두리  2. bordercolor테이블의 테두리 색상   3. width테이블 가로 크기  4. heig..