목차 1. 노션과 우피, 정말 잘 쓰고 계시나요? 2. 우피와 코드 블록으로 다채로운 바카라 가상 머니 사이트 구현하기 3. 탈리 JS library로 팝업 설문 만들기 4. 레퍼런스
노션과 우피, 정말 잘 쓰고 계시나요?
청년마케터의 제안을 받아 노션을 주제로 오프라인 강의를 진행해 왔다.현재 온라인 기반의 교육 도메인에서 창업을 하고 있는데, 오프라인 강의 인사이트를 얻을 수 있다고 판단해 10주 차 강의를 진행하고 있다.최근에 담당자님으로부터 오프라인 연합 강의를 제안받았다.많은 사람들이 가볍게 접할 수 있고, 배우면 큰 도움이 되는 주제를 고민하다가노션을 활용한 랜딩 페이지 제작을 주제로 잡았다.
이제 누구나 쉽게 노션과 우피를 활용해 웹사이트를 만들 수 있기에, 이 주제는 꽤나 진부하게 느껴질 수 있다. 다만,노션으로 만든 웹사이트, 대다수는 우피의 기본적인 기능만을 사용하고 있다.노션의 블록을 활용해 UI를 제작하고, 우피로 변환시킨 게 끝이다.간단한 코딩 지식을 조금만 더 활용하면, 훨씬 더 다양한 기능을 웹사이트에 구현할 수 있는데 많은 분이 모르고 있다.보다 심화된 웹사이트 제작 정보를 알려드리는 걸 목표로 강의를 기획하기로 했다.
우피와 코드 블록으로 다채로운 바카라 가상 머니 사이트 구현하기
1. 웹사이트 구조 이해하기
웹사이트는 HTML, CSS와 JS(JavaScript)의 조합이라고 볼 수 있으며, 각각이 하는 일은 서로 다르다. HTML은 웹사이트의 뼈대를 구축하고, CSS로 이 뼈대에 디자인을 입힌다. 그리고, JS는 웹사이트의 동작을 결정한다.
웹사이트에서 바카라 가상 머니 사이트(Button)을 구현한다고 해보자.HTML로 바카라 가상 머니 사이트 만들 수 있는데, 완성된 버튼은 왼쪽처럼 못 생겨 보인다. 이 바카라 가상 머니 사이트 더 이쁘게 꾸며주기 위해선 텍스트 색깔, 버튼 색깔, 버튼 모서리 등을 설정해야 하며, 이때 CSS가 사용된다. CSS로 스타일링을 완료하면, 오른쪽처럼 이쁜 버튼이 탄생한다.
HTML, CSS를 활용해 이쁜 바카라 가상 머니 사이트 만들 수 있지만, 버튼의 동작은 존재하지 않는다.바카라 가상 머니 사이트 클릭했을 때, 특정 동작이나 모션을 추가하고 싶다면, JS가 추가적으로 사용돼야 한다.예를 들어 바카라 가상 머니 사이트 클릭했을 때, 팝업이 나오게 만들고 싶다면 JS를 별도 설정해야 한다.
2. 우피에서 코드로 바카라 가상 머니 사이트 만들기
우피는 노션의 코드 블록을 웹사이트의 HTML, CSS, JS 코드로 변환시켜 주는 기능을 제공한다. 이 코드 블록을 적극적으로 활용한다면, 웹사이트에 더 많은 기능을 구현할 수 있다.
웹사이트는 크게 <head와 <body 바카라 가상 머니 사이트로 구성되며,<body 바카라 가상 머니 사이트는 웹사이트 화면에 직접 출력이 되는 요소를 갖는다. <body 바카라 가상 머니 사이트 안에 요소를 추가하는 방법은 다음과 같다.아래 방식대로 한다면, 우피가 자동적으로코드 블록 안에 작성된 내용을 웹사이트의 <body 바카라 가상 머니 사이트 안에 반영해 준다.
1. 노션에 /code를 입력해 코드 블록을 생성 2. 코드 언어를 HTML로 설정 3. 캡션에 oopy를 입력 4. <body 바카라 가상 머니 사이트 안에 삽입할 요소를 입력
HTML은 여러 요소(elem)로 구성되며, 각 요소는 특정한 태그로 존재한다. 태그의 유형은 여러 가지이며, 각 태그마다 다른 목적으로 사용된다. 예를 들어 <a 태그는 링크 연결을, <button 태그는 바카라 가상 머니 사이트 구현하기 위해 사용한다. 아래와 같이<button 태그를 코드 블록에 입력하면 "4월 모임 신청하기"라는 이름의 바카라 가상 머니 사이트이 생성된다.
3. 바카라 가상 머니 사이트에 디자인 입히기
멋없는 바카라 가상 머니 사이트 이쁘게 만들기 위해서 CSS 코드가 필요하다. 위 코드 블록을 보면, id 변수가 있는 걸 볼 수 있다.id 값은 해당 바카라 가상 머니 사이트 정의하는 고유 값으로, 이를 활용해 CSS 스타일링을 적용할 요소를 선택할 수 있다. 즉, 앞서 구현한 바카라 가상 머니 사이트은 "Pirmiary-button"라는 id 값을 부여함으로써, 다른 바카라 가상 머니 사이트과 명확히 구분 지은 것이다.
스타일링을 위해 마찬가지로 코드 블록을 새로 생성하고, 언어는 HTML로, 캡션에 oopy를 입력한다. 그리고 이번에<style 바카라 가상 머니 사이트를 호출한다. style 바카라 가상 머니 사이트는 CSS 코드를 특정 요소에 직접 적용하도록 만드는 바카라 가상 머니 사이트다.style 바카라 가상 머니 사이트 안에 CSS 선택자를 활용해 특정 요소를 호출하고, dictionary 형식으로 적용할 스타일 값을 입력하면 된다.
여기서 말한'CSS 선택자'란 스타일링을 적용할 요소를 선택하는 방식이다. <style 바카라 가상 머니 사이트 바로 뒤로 #Pimary-button이라고 적혀 있는데, 이는 요소의 id 값을 활용해 스타일링을 적용할 요소를 선택한 것이다.요소를 선택한 후, dictionary 형태로 적용할 속성 값을 입력하면 된다. 아래를 보면, 바카라 가상 머니 사이트의 width, height, background-color 등의 값을 입력한 걸 볼 수 있다.
4. 바카라 가상 머니 사이트 상태 별 스타일링하기
요소를 각 상태 별로 다르게 스타일링 할 수도 있다.예를 들어, 해당 바카라 가상 머니 사이트에 마우스를 갖다 되는 순간, 다른 스타일을 적용하고 싶다면 CSS 선택자에 :hover를 추가하고, 속성 값을 입력하면 된다.
이렇게 코드 블록을 입력하고, 우피에 적용해 보면 아래와 같이 다채로운 바카라 가상 머니 사이트 만들 수 있다.
탈리 JS library로 팝업 설문 만들기
1. 외부 라이브러리 호출하기
이번에는 바카라 가상 머니 사이트 클릭했을 때, 설문 팝업이 나오도록 만들어 보자.앞서 말했듯, 바카라 가상 머니 사이트 클릭했을 때 동작을 제어하기 위해선 JS를 사용해야 한다. JS 코드는 자체적으로 구현할 수 있지만, 외부 라이브러리를 호출해서 사용할 수도 있다.Tally는 구글 폼과 비슷한 설문 폼 서비스로, 별도 JS Libary를 제공한다.이를 활용해 바카라 가상 머니 사이트 클릭하자마자, 설문 폼을 팝업처럼 띄울 수도 있다.
우선 탈리의 JS 라이브러리를 불러오는 코드를 웹사이트의 <head 바카라 가상 머니 사이트 안에 삽입해야 한다.앞서 말했듯이, 웹사이트는 크게 <head와 <body 태그로 구성된다. <body 태그와 다르게, <head 태그는 화면에 직접 출력되지 않지만, 웹사이트의 중요한 정보를 저장한다. 앞서 구현한 바카라 가상 머니 사이트은 <body 태그 안에 존재하는 반면, 탈리의 JS 라이브러리를 호출하는 태그는 <head 태그 안에 추가해야 한다.
<head 안에 코드를 추가하는 방식은 앞선 <body 바카라 가상 머니 사이트의 코드 추가 방식과 살짝 다르다.우선, 페이지 최상단에 코드 블록을 넣어야 하고, 캡션을 쓰지 않는 대신에 <head 바카라 가상 머니 사이트를 추가적으로 입력해줘야 한다.
1. 페이지 제목 바로 밑에 코드 블록을 추가 2. 코드 유형은 HTML로 선택 3. <head 바카라 가상 머니 사이트를 입력 4. <head 바카라 가상 머니 사이트 안에 삽입할 요소를 입력
이제 <head 바카라 가상 머니 사이트 안에 탈리의 JS 라이브러리를 불러오는 코드를 입력하면 된다.
2. 바카라 가상 머니 사이트 동작 제어하기
팝업을 출력할 버튼 요소에 daya-tally-open과 data-tally-layout 변수 값을 입력하면 된다. 이제 해당 바카라 가상 머니 사이트 클릭했을 때 탈리 JS 라이브러리에 의해서 해당 폼이 팝업 형식으로 나온다.
여기서 쓰인 data-tally-open은 보여줄 탈리 설문 폼의 ID 값이고, data-tally-layout은 보여주는 방식이다. 탈리에서 설문 폼을 생성했을 때, 공유 링크의 마지막 path 값이 ID 값을 뜻한다.
해당 속성 값 외에도 탈리의 JS 라이브러리를 뜯어보면, 더 많은 속성 값을 설정할 수 있다.
