분류 전체보기 164

코딩 스터디(모각코) 3일차 - 한 입 웹개발(JS)

✅ 오늘의 문제 : 모각코 삼행시 버튼 만들기 ❗'모' 버튼, '각' 버튼, '코' 버튼을 누르면 각 운에 맞는 텍스트로 변경되도록! 👉 예시 [클릭 전] [클릭 후] ✅ 오늘의 문제 풀이 인증 모 각 코 모 각 코 *{ font-family: 'Gamja Flower', cursive; } .wrap{ width: 450px; margin: auto; } .text{ color: black; font-size: 50px; } button{ width: 140px; height: 70px; font-size: 30px; border:none; background-color: lightgray; color: black; text-decoration: none; cursor: pointer; margin-t..

코딩 스터디(모각코) 2일차 - 한 입 웹개발(JS)

✅ 오늘의 문제 : 1일차에서 숙제로 진행한 코드의 DOM 구조 그려보기 ✅ 오늘의 한마디 👉 DOM은 무엇인가? Document Object Model 은 웹 페이지에 대한 인터페이스입니다. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 스타일을 읽고 조작할 수 있도록 API를 제공합니다. DOM은 원본 HTML 문서의 객체 기반 표현 방식이며 DOM의 개체 구조는 노드 트리(하나의 부모 줄기가 여러개의 자식 나뭇가지, 나뭇잎들을 가질 수 있는 나무와 같은 구조)로 표현됩니다.

코딩 스터디[모각코] 1일차 - 한 입 웹개발(JS)

✅ 오늘의 문제 풀이 인증 냐앙~ 시키기 *{ font-family: 'Gamja Flower', cursive; } .box{ text-align: center; line-height: 200px; width: 500px; height: 200px; border-style: solid; border-color: rgb(126, 91, 66); border-width:4px; border-radius: 5px; margin-bottom: 30px; margin-left: auto; margin-right: auto; font-size: 30px; position: relative; } img{ display: block; width: 300px; margin-bottom: 30px; margin-left..

프론트엔드 ? 백엔드 ? 그게 뭐죠......༼ ༎ຶ ෴ ༎ຶ༽

코딩공부를 시작하면서 가장 처음 접한 단어는 바로 프론트엔드와 백엔드입니다. 이게 뭐지?하고 검색을 해봤지만 온통 모르는 단어로 된 설명은 더 어렵게만 만들었죠......... 제가 이해한 결과 프론트엔드와 백엔드를 나눌 수 있는 가장 쉬운 방법은 바로 눈에 보이냐 보이지 않느냐 입니다. 네이버, 다음, Google을 생각했을 때 어떤 이미지가 떠오르시나요? 네이버하면 초록색 화면, 다음하면 파란색 화면과 같이 각 포털마다 생각나는 이미지가 있을 것입니다. 웹사이트에 이런 이미지를 그리는게 바로 프론트엔드에서 하는 일 입니다. 즉 프론트엔드는 사용자(user)의 화면에 나타나는 웹 화면을 말합니다. 프론트엔드에서 이미지를 만들기 위해서는 Html, Css, Javascript와 같은 기술이 필요합니다. ..