study 코딩하자

문자열을 다루는데 사용되는 객체 글자모양, 위치 이동, 문자열 다루기 등을 할수있게 다양한 메소드를 제공함 1) new 키워드로 이용해서 생성하거나 " " 문자열로 변수에 대입한 것처럼 생성할수있음 2) 변수에 문자를 대입하던 것이 사실 String객체로 생성한 것으로 숫자나 Boolean도 마찬가지임 String 객체의 HTML 관련 메소드 ; 글자 모양을 꾸밈 메소드 태그 명령 설명 big() 글자를 표준 크기보다 약간 크게 small() 글자를 표준크기 보다 약간 작게 bold() 볼드체(굵은체) italics() 이탤릭체 strike() 가운데 줄 그은 글자체 fixed() 타자기체 fontsize("크기") 글자크기 fontcolor("색상") 글자색 sub(),sup() , 아래첨자, 위첨자 ..

css로 table을 꾸미는 6가지 방법 1. 테두리 border 속성은 기본적으로 상속되지 않습니다. 따라서 table, tr, th td 중 어디에 테두리를 만들지 전략을 짜고 각 태그에 테두리를 달리 적용한다. 그리고 table 태그에 border-collapse: collapse 속성 값이 있어야 tr, th 태그의 border속성 디자인이 제대로 적용되기 때문에 tr, th 태그에 border 속성이 있다면 필수적으로 넣어야 한다.html5에서는 유일하게 a태그안에 블록요소가 들어가면 a태그는 자동으로 블록요소가 됩니다. 2. 배경색 교차로 색상을 바뀌게 만들어 주고 싶으면 홀수 행과 짝수 행을 각각 따로 선택하는 가상선택자를 사용하면 됩니다. tr 태그에 tr:nth-child(odd)와 tr..

제이쿼리란? 제이쿼리는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리입니다.“write less, do more(적게 작성하고, 많은 것을 하자)”라는 모토로 2006년 미국의 SW 개발자 존 레식(John Resig)이 발표하였습니다. 제이쿼리의 장점 웹페이지 상에서 엘리먼트(Element)를 쉽게 찾고 조작할 수 있습니다. 거의 모든 웹브라우저에 대응할 정도로 호환성이 매우 뛰어납니다. 네트워크, 애니메이션 등 다양한 기능을 제공합니다. 메소드 체이닝(Method chaining) 등 짧고 유지관리가 용이한 코드 작성을 지원합니다. 관련 플러그인들이 웹상에 공개되어 있으며 플러그인을 직접 구현하거나 확장할 수 있습니다. 공식 웹사이트(www.jque..

position 속성 CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정합니다. 많은 경우, position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용됩니다. position: static position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용됩니다. position 속성이 static인 요소는 HTML 문서 상에서 원래 있어야하는 위치에 배치됩니다. 이 말은 요소들이 HTML에 작성된 순서 그대로 브라우저 화면에 표시가 된다는 것을 뜻하며, 따라서 top, left, bottom, right 속성값은 position 속성이 static일 때는 무시됩니다. position: relative ..

article 내용이 독립적이고 따로 떼어져도 흐름이 깨지지 않는 내용일 때 사용 독립적으로 구분되거나 재사용 가능한 영역을 설정. (매거진/신문 기사, 블로그 등) 일반적으로 ~를 포함하여 식별. 작성일자와 시간을 의 datetime 속성으로 작성. * article > section 민초 민초단 반민초단 section 각 section의 내용이 연관성(논리적으로 관계있는 문서) 있을 때 사용 일반적으로 ~를 포함하여 식별. * section > article 경제 경제뉴스1 경제뉴스2 쉽게 풀어내면 article은 독립적인 콘텐츠이다. 예를 들어 블로그 글을 볼 수 있다. 그래서 블로그에는 여러 개의 글이 있지만 그 글들은 연관성이 있든 없든 상관이 없다. 어제는 경제라는 주제에 대해 쓸 수 있고 오..

스페이스와 탭 줄바꿈 자동 줄바꿈 normal 병합(띄어 쓰기는 여러줄이든 한칸 사용) 병합 O nowrap 병합 병합 X pre 보존(입력된 그대로) 보존 X pre-wrap 보존 보존 O pre-line 병합 보존 O white-space: normal; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra lectus in nisl convallis, id mattis tortor ultrices. Quisque a justo non nisl maximus pretium quis sit amet tortor. white-space: nowrap; Lorem ipsum dolor sit amet, consectetur adipis..

속성 설명 background-color 기본값은 transparent, 즉 투명이며 색상명이나 색상 코드를 사용할 수 있습니다. background-image 기본값은 none, 즉 없음이며 이미지의 위치를 상대 경로 또는 절대 경로를 사용하여 나타낼 수 있습니다. background-repeat 배경 이미지가 주어진 영역에 꽉 차지 않는 경우 이미지를 반복할 방식을 결정합니다. 기본값은 repeat인데 배경 이미지를 가로와 세로 모든 방향으로 반복을 해줍니다. repeat-x는 가로 방향으로만 repeat-y는 세로 방향으로만 배경 이미지를 반복합니다. no-repeat는 반복을 원하지 않을 때 사용합니다. background-position 배경 이미지가 주어진 영역에서 어디에 위치할지를 결정합니다..

https://garenchoi.github.io/webs_class/javascript/effect/parallaxEffect06.html let text = document.querySelectorAll(".content__item__desc");//변수 text에 클래스 content__item__desc들 저장 text.forEach(el => {//text의 element값들을 el에 저장 let splitText = el.innerText;//변수 splitText에 el의 텍스트저장 let splitWrap = splitText.split('').join("");//변수splitWrap에 splitText의 글씨 사이에 넣어서 저장 splitWrap = "" + splitWrap + "