coding 265
자바스크립트 class 추가하기
자바스크립트에서 class를 추가해봅시다. 1. 자바스크립트 class 추가 element.classList.add("myStyle"); 클래스 추가 추가하는 내용이니 add가 들어가는군요. - 요소 element. 즉, 요소란 html에서 어디에 class를 넣을 것인가 정해주는 부분입니다. 만약 특정 div 태그에 class를 넣는다면 그 div 태그를 선택하면 됩니다. 선택하는 방법은 아래를 참고해주세요. 자바스크립트로 요소 선택하기 - class 관련 classList는 class 관련 명령어라고 여겨주세요. 세부적으로 너무 파고들 필요는 없습니다. 어렵기도 하고요. 아무튼 class 관련이구나 하고 생각해주세요. - class 추가 가장 중요한 부분이 아닐까 합니다. add를 이용해 class를..
자바스크립트 css 추가하기
자바스크립트에서 css 추가하는 방법을 알아보겠습니다. 바로 코드 복사하실 분은 2번으로 >> 1. 자바스크립트 css 추가 document.getElementById(id).style.property = new style 자바스크립트 css 추가 문법 갑자기 나오는 이 코드 한 줄이 당황스러우실 것 압니다. 하지만 기다려보세요. 제가 다 설명할 수 있어요. - 이름 일단 앞쪽의 긴 뭉텅이는 너무 고민하실 것 없습니다. 이 부분은 css를 추가하고 싶은 곳을 알려주는 것으로 id 이름값을 적는다고 생각해주세요. 자바스크립트에서 id 값을 가져오려면 저런 식으로 길어져서 그렇지 어려운 부분은 아닙니다. 나중에 변수 안에 넣고 짧게 줄여서 사용할 수 있으니 너무 걱정하지 마세요. - css 값 넣기 styl..
TCP SCHOOL 코딩 배우기 좋은 사이트
TCP SCHOOL 사이트에 대해 알아봅시다! 1. TCP SCHOOL http://www.tcpschool.com/ 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등 tcpschool.com TCP SCHOOL 메뉴 TCP SCHOOL의 메뉴를 살펴보면 정말 다양한 언어를 설명해주고 있는 걸 볼 수 있습니다. W3C school이나 MDN 사이트처럼 이용하면 좋습니다. - MDN 사이트 사용하기 - 2. TCP SCHOOL 사용법 TCP SCHOOL에서 Python 살펴보기 상단의 메뉴와 동일한데 메인에 있는 게 잘 보여서 메인에서 설명합니다. 배우고 싶은 언어를 하나 골라서 선택합니다. 파이썬을 배우고 싶다면 파이썬을 선택해볼게요. - 파이..
자바스크립트 선택자 querySeletor
자바스크립트에서 요소를 어떻게 선택하는지 알아봅시다. 1. querySeletor document.querySelector("#main"); querySelector 도큐먼트. 즉, 브라우저 상의 요소. html의 요소를 선택할 때 document.querySelector( ) 괄호 안에 선택자를 입력하면 됩니다. 대소문자에 유의하여 적어주세요. - 선택자 선택자 이름 * 전체 선택자 # id 선택자 . class 선택자 선택자 종류 크게 이 세 가지 정도만 알아도 선택하는 데는 문제가 없을 겁니다. 선택자와 함께 본다면 위의 예시는 main이라는 id값을 가진 요소를 선택한다고 볼 수 있죠. - 2. 변수 선언 let main = document.querySelector("#main"); 변수 선언 꼭..
css 테두리 둥글게
css의 border-radius 기능을 이용해 테두리를 둥글게 만들어보겠습니다. 1. 테스트용 코드 각진 테두리 먼저 테스트용으로 코랄색의 박스를 하나 만들었습니다. 디자인은 테스트용이니 원하시는 디자인으로 꾸며주세요. 아래에 예제를 첨부해둘 테니 지금은 그냥 봐주세요~ - 2. 테두리 둥글게 div{ border-radius:50px; } border-radius 테두리를 둥글게 만드는 css 코드는 border-radius 입니다. 값으로는 원하는 만큼의 숫자를 적어주세요. 숫자가 클수록 둥근 모양이 됩니다. - div{ border-top-left-radius:50px; } border-radius 한쪽만 네 꼭짓점 중 하나만 선택해주면 한쪽만 둥글게 만들기도 가능합니다. border-top-le..
