코딩 121
자바스크립트 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..
파이썬 for문으로 숫자 증가
파이썬 for문을 이용해 숫자를 1씩 증가시켜보겠습니다. 1. 개발 이슈 숫자 리스트 구현하고자 하는 것은 위의 이미지처럼 한 줄씩 나올 때마다 1 2 3...처럼 숫자가 하나씩 증가하면서 같이 찍히게 만들고 싶습니다. 어려운 말로 인덱스를 정하고 싶은 것이죠. - 2. for 반복문 배열이름 = ['키위', '코코넛', '포도', '메론'] for 반복문이름 in 배열이름: print(반복문이름) for 반복문 한글로 적어보자면 저렇게 위치를 넣어주시면 됩니다. 전체적인 모양을 잘 봐주세요. 반복문의 이름은 정해진 것이 아니니 자유롭게 지어도 괜찮습니다. - 키위 코코넛 포도 메론 출력 내용 for 반복문을 작성하고 Run을 하면 위의 이미지처럼 출력이 됩니다. 자 이제 거의 다 왔습니다. 3. 숫자 ..
