개발감성

간단한 css가 적용된 li태그 다섯개가 있을 때 각 li태그에 클래스를 적용, 제거해본다. 클래스 추가 - addClass( ) menu 클래스를 가진 li태그를 클릭했을 때 클릭된 li 태그에 addClass를 통해 select클래스를 추가해준다. 알기 쉽도록 select클래스가 있는 li태그에 css를 적용시켜뒀다. 1,2번째 li 태그를 클릭하여 select클래스를 추가한다. select클래스의 css가 적용된 것을 확인한다. 한번에 여러개의 클래스도 추가가 가능하다. 1,3,5번째 li태그에 두 개의 클래스가 적용된 것을 확인할 수 있다. 클래스 제거 - removeClass( ) 클릭한 li태그가 select클래스를 가지고 있지 않다면 추가를 하고 select클래스를 가지고 있다면 select..

외부 css가 적용된 div와 li태그의 속성값을 변경해본다. js 로 스타일 속성 변경 js는 한번에 하나씩의 속성값만이 변경가능하다. 테두리와 여백값이 변경되었다. jQuery로 스타일 속성 변경 jQuery에서는 여러 속성값을 묶어서 한번에 변경가능하다. 글자크기와 테두리, 여백이 변경이 되었다. 버튼이 클릭되었을 때 fontSize에 1을 더하도록 해본다. 클릭 시마다 글씨의 크기가 증가되고 콘솔창에 fontsize값이 int값으로 나오도록 한다. 버튼을 열번 클릭하여 li태그 중 select클래스를 가진 li태그의 글자크기를 +10해주었다.

위와 같은 스타일이 적용된 div태그가 있다. js의 속성표기법 js에서는 속성을 표기할 때 카멜표기법을 사용한다. 카멜 표기법은 낙타의 등 처럼 두 단어가 이어져 있을 때 두 번째 이상의 단어부터는 첫 글자를 대문자로 표기한다. 원래의 26px 대신 12px이 적용됬다. jQuery의 속성표기법 jQuery에서는 카멜표기와 css표기 둘다 먹힌다. 각각의 표기 모두 글자크기를 변경한다. jQuery의 속성값 단위 생략 js에서는 속성값에 필히 단위를 적어줘야한다. 단위가 없으면 변경값이 적용되지 않는다. jQuery에서는 단위가 생략된다면 기본 단위가 디폴트로 적용된다. 글자크기로 8픽셀이 적용됬다.

div태그에 내부 스타일로 파란색을, 외부 스타일로 테두리, 여백, 글자 크기 등을 주었다. js의 내부 스타일 접근 - .style.속성 js에서 style을 주면 해당 속성값을 가져올 수 있는데 div에 직접 주었던 인라인 속성인 색상만 가져올 수 있다. color색상만 나타날 뿐 나머지 속성은 빈칸으로 나온다. js의 외부 스타일 접근 - getComputedStyle js에서는 외부 스타일에 접근하기 위해선 해당 메소드를 통해 접근한다. style로 나오지 않던 border속성에 접근 가능하다. getComputerStyle은 외부 스타일 뿐 아니라 내부에도 물론 접근가능하다. jQuery의 스타일 접근 - css jQuery는 내부, 외부 따질 것 없이 css로 모두 접근 가능하다. 모든 속성값..

버튼태그와 6개의 li태그가 있다. html( ) 과 text( )의 차이점 버튼을 클릭했을 시 menu아이디를 가진 ul태그에 각 메소드를 적용했을 시 리턴값을 콘솔에 나타내도록 한다. html 메소드의 경우 ul태그안에 존재하는 내용을 태그까지 합하여 출력한다. 여기서 리턴값은 DOM형태가 아닌 문자열임을 유의한다. text 메소드의 경우 ul태그안에 존재하는 내용 중 텍스트노드의 내용만을 출력한다. html( )을 이용해 노드 내용 변경하기 li태그를 클릭할 시 클릭된 해당 li태그를 item에 지정한다. 지정된 li태그에 html을 적용해 특정 링크가 걸린 a태그로 변경하고 인덱스 값을 이용해 메뉴의 내용을 적어준다. 메뉴4를 클릭하자 링크가 걸린 태그로 변경된다. 하지만 this가 li태그를 가..

6개의 li태그 중 하나 혹은 여러개의 노드를 삭제해본다. 클릭한 노드 삭제하기 menu 아이디를 가진 ul태그 아래의 li태그를 클릭했을 때 해당 노드를 삭제한다. 메뉴3을 클릭하면 해당 노드가 삭제된다. 모든 노드 삭제하기 - remove( ) 삭제 버튼을 누르면 ul태그의 모든 자식태그를 삭제한다. ul태그 안의 모든 li태그가 삭제된다. children으로 자식노드에 접근하는 대신 li태그를 직접 지정하여 삭제한다. li태그 수만큼 메소드를 호출하여 일일히 삭제해준다. 짝수 인덱스 노드 모두 삭제하기 - even li태그에 :even선택자를 주어 짝수 인덱스의 노드를 모두 삭제한다. 0,2,4인덱스 노드가 삭제된다. 홀수 인덱스 노드 모두 삭제하기 - odd li태그에 :odd선택자를 주어 홀수 ..

6개의 li태그가 있고 li태그를 클릭했을 때 원하는 위치로 이동하도록 해본다. 그 전에 이동에 사용되는 함수는 노드의 생성에 사용될 수 있다는 걸 알아둔다. [자바스크립트] 노드 생성하기, prepend, append, insertBefore, insertAfter, before, after, prependTo, appendTo 위와 같은 리스트형태에 버튼이나 li태그를 클릭하면 노드를 추가해본다. jQuery없이 JS로 노드 생성 메뉴가 6까지 생성되어 있으니 cnt변수의 초깃값을 6으로 지정하고 버튼이 클릭될 때마다 cnt값 developefeel.tistory.com append( ) - 마지막 위치로 이동 클릭된 li태그(this)를 menu아이디를 가진 태그의 제일 마지막 위치에 추가한다. 메..

위와 같은 리스트형태에 버튼이나 li태그를 클릭하면 노드를 추가해본다. jQuery없이 JS로 노드 생성 메뉴가 6까지 생성되어 있으니 cnt변수의 초깃값을 6으로 지정하고 버튼이 클릭될 때마다 cnt값을 1씩 증가시킨다. createElement를 통해 li태그를 생성해주는 li createTextNode를 통해 li태그안에 텍스트 내용을 생성해주는 liText getElementById를 통해 menu아이디를 가진 ul태그를 지정해 노드를 생성해줄 위치를 지정 만들어진 텍스트 노드를 li태그안에 appendChild를 통해 자식 노드로 붙여준다. li태그를 menu, ul태그에 붙여주면서 노드를 생성한다. 버튼 클릭 시 ul태그안에 li태그가 새로 생성된다. prepend( ) - 제일 앞 위치에 노..

.NET 설치 Download .NET (Linux, macOS, and Windows) Free downloads for building and running .NET apps on Linux, macOS, and Windows. Runtimes, SDKs, and developer packs for .NET Framework, .NET, and ASP.NET. dotnet.microsoft.com 위 링크에서 위를 클릭해 닷넷SDK를 설치해준다. 설치가 되었는지, 버전을 확인해 본다. dotnet new -l 를 통해 생성가능한 프로젝트의 리스트를 본다. 11번째 라인에 ASP.NET 코어를 통해 리액트를 만들어준다는 것을 확인한다. 프론트엔드단은 React.js를 백엔드단은 ASP.NET을 사용하여..

ul태그안에 li태그가 다섯 개 있다. filter( ) - 선택된 태그 중 원하는 걸 필터링 li태그를 지정하고 filter와 find를 적용시켜봤다. filter만 적용되고 find는 적용이 되지 않는다. filter는 선택된 태그 중에서 찾으므로 li태그 중 filter클래스를 가진 세 번째 태그가 선택됬다. li태그의 하위태그에는 find가 없을뿐더러 하위태그자체가 존재하지 않기에 find는 작동하지 않는다. find( ) - 선택된 태그에 속하는 모든 요소에서 찾음 이번엔 li태그가 아닌 ul태그를 지정하여 똑같이 filter와 find를 실행한다. 이번엔 filter가 먹히지 않고 find의 푸른배경 효과만 나타났다. ul태그중에는 filter클래스를 가진 태그가 없기 때문에 filter는 작..