Button
-
처음부터 빈 페이지에 그림을 그려 나가려는 습관보다는 잘 짜여 있고, 존재하고 있는 좋은 코드들을 가져다가 잘 조합해서 쓰고, 이 코드들을 가지고 잘 응용하는 게 제일 중요하다. 화면의 영역(레이아웃)을 잡아주는 엘리먼트이다. 현재 App.js 상에서 View는 화면 전체 영역을 가진다. 우리는 이 View 엘리먼트로 다음과 같이 화면을 원하는 대로 분할할 수도 있다. 더보기 import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( ); } const styles ..
앱 화면 만들기 화면을 구성하는 엘리먼트들처음부터 빈 페이지에 그림을 그려 나가려는 습관보다는 잘 짜여 있고, 존재하고 있는 좋은 코드들을 가져다가 잘 조합해서 쓰고, 이 코드들을 가지고 잘 응용하는 게 제일 중요하다. 화면의 영역(레이아웃)을 잡아주는 엘리먼트이다. 현재 App.js 상에서 View는 화면 전체 영역을 가진다. 우리는 이 View 엘리먼트로 다음과 같이 화면을 원하는 대로 분할할 수도 있다. 더보기 import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( ); } const styles ..
2022.09.07 -
JQuery 강의 내용을 바탕으로 복습하는 시간~ 코딩을 만들어 보자! 더보기 jQuery + Javascript의 조합을 연습하자! 1. 빈칸 체크 함수 만들기 1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기 [완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기 클릭 2. 이메일 판별 함수 만들기 2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기 2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기 [완성본]2-3. 이메일 도메인만 얼럿 띄우기 클릭 3. HTML 붙이기/지우기 연습 3-1. 이름을 입력하면 아래 나오게 하기 [완성본]3-2. 다지우기 버튼을 만들기 이름 붙이기 다지우기 세종대왕 임꺽정 1. 빈칸 체크 함수 만들기 버튼..
JQuery + Javascript 연습하기JQuery 강의 내용을 바탕으로 복습하는 시간~ 코딩을 만들어 보자! 더보기 jQuery + Javascript의 조합을 연습하자! 1. 빈칸 체크 함수 만들기 1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기 [완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기 클릭 2. 이메일 판별 함수 만들기 2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기 2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기 [완성본]2-3. 이메일 도메인만 얼럿 띄우기 클릭 3. HTML 붙이기/지우기 연습 3-1. 이름을 입력하면 아래 나오게 하기 [완성본]3-2. 다지우기 버튼을 만들기 이름 붙이기 다지우기 세종대왕 임꺽정 1. 빈칸 체크 함수 만들기 버튼..
2022.09.04 -
이번에는 만들어놓은 index.html에 포스팅 박스를 만들어 보는 시간이다. 위 이미지 처럼 포스팅 박스를 만들어 주면 된다. Box 이름표 만들고 설정하기! 내 생애 최고의 영화들 영화 기록하기 간단한 글씨를 씁니다. body mytitle 밑에 mypost 이름표를 만들어 주고 간단한 글씨를 씁니다.라고 적어주었다. 텍스트를 넣음으로써 어느 위치에 코드를 넣은 것인지 확인이 되었다. 영역확인과 설정 .mypost { background-color: green; width: 500px; } Box 칼라를 넣어 영역을 확인하고 폭을 500px로 설정하였다. Top과 포스팅 박스 사이의 여백을 만들어 주고 중앙으로 이동시켜보자! .mypost { background-color: green; width: ..
포스팅 박스 만들기이번에는 만들어놓은 index.html에 포스팅 박스를 만들어 보는 시간이다. 위 이미지 처럼 포스팅 박스를 만들어 주면 된다. Box 이름표 만들고 설정하기! 내 생애 최고의 영화들 영화 기록하기 간단한 글씨를 씁니다. body mytitle 밑에 mypost 이름표를 만들어 주고 간단한 글씨를 씁니다.라고 적어주었다. 텍스트를 넣음으로써 어느 위치에 코드를 넣은 것인지 확인이 되었다. 영역확인과 설정 .mypost { background-color: green; width: 500px; } Box 칼라를 넣어 영역을 확인하고 폭을 500px로 설정하였다. Top과 포스팅 박스 사이의 여백을 만들어 주고 중앙으로 이동시켜보자! .mypost { background-color: green; width: ..
2022.09.01 -
bootstrap이란? 예쁜 CSS를 미리 모아둔 것으로 미리 완성된 부트스트랩을 가져다 사용하기 좋다. 부트스트랩 컴포넌트 5.0: https://getbootstrap.com/docs/5.0/components/buttons/ Buttons Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. getbootstrap.com 부트스트랩 활용법 index.html 파일을 만들어서 연습하기! 이걸로 시작해보죠! 나는 버튼이다. 첫 번째 h1내용을 지우고 두 번째 button 내용을 붙여 넣기! 부트스트랩 사이트에서 원하는 것을 찾아 ..
bootstrap(부트스트랩) CSS 모음집bootstrap이란? 예쁜 CSS를 미리 모아둔 것으로 미리 완성된 부트스트랩을 가져다 사용하기 좋다. 부트스트랩 컴포넌트 5.0: https://getbootstrap.com/docs/5.0/components/buttons/ Buttons Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. getbootstrap.com 부트스트랩 활용법 index.html 파일을 만들어서 연습하기! 이걸로 시작해보죠! 나는 버튼이다. 첫 번째 h1내용을 지우고 두 번째 button 내용을 붙여 넣기! 부트스트랩 사이트에서 원하는 것을 찾아 ..
2022.08.31