[React Native] Layout 다루기(View, margin, padding, ScrollView)

1. View React Native에서 는 박스(box)와 같은 개념이다.여러 컴포넌트를 그룹화하는 용도로 사용된다.화면의 레이아웃을 만들 때 기본적으로 사용되는 가장 중요한 컨테이너. Hello React Native! 2. margin과 padding☾ padding (박스 내부 여백) 박스 안쪽 공간을 의미한다.텍스트나 이미지가 박스 테두리와 겹치지 않게 한다. 안쪽 여백 적용 ☾ margin (박스 외부 여백)박스 바깥쪽 공간을 의미한다.다른 컴포넌트와의 간격을 만든다. 바깥 여백 적용 margin vs paddingpadding: 안쪽 여백 → 내용물과 경계 사이 거리margin: 바깥 여백 → 다른 박스와의 거리 React Native에서는 margin이 겹치지 않는다 (웹과..

• format_list_bulleted Front-end/React Native
• · 2025. 9. 8.
• textsms

[React Native] 텍스트, 이미지, 텍스트 입력창 삽입

1. 텍스트 삽입 app-folder > App.js react-native에서 Text를 임포트한다. 내부에 문자열을 입력하면 화면에 출력된다. fontSize : 텍스트 크기color: 텍스트 색상import { StyleSheet, View, Text } from 'react-native';export default function App() { return ( // 텍스트 삽입 Hello, World Hello, World );} 2. 이미지 삽입react-native에서 Image를 임포트한다.이미지는 파일에서 불러오기(require) 또는 웹 주소로 불러오기(uri) 두 가지 방법이 있다. require : 로컬 프로젝트 안의 이미지 파일을 가져..

• format_list_bulleted Front-end/React Native
• · 2025. 9. 8.
• textsms

[React Native] 개발 환경 세팅

1. node.js 설치아래 링크에서 node.js를 설치한다. https://nodejs.org/en/download/ Node.js — Download Node.js®Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.nodejs.org 잘 설치되었는지 확인하고 싶다면 커맨드 창에 가서 npm 명령어를 입력해보면 된다.문제 없이 설치되었다면 다음과 같은 화면이 나온다.>npm 2. App 생성 >npx create-expo-app 폴더이름 만약 빈 템플릿으로 만들고 싶다면..

• format_list_bulleted Front-end/React Native
• · 2025. 9. 8.
• textsms

[CSS] display - block-level, inline, none, hidden

display : 요소가 화면에 보여지는 방식을 지정 html 태그 : 컨테이너. 칸 전체 코드 : 텍스트 일부분. 특정 단어나 특정 부분 코드 css 속성 block-level element : 항상 새로운 line에서 시작 : 요소들이 각각 라인을 차지(자동 줄바꿈) span { display: block; } inline element : 필요한 만큼만 공간 차지(줄바꿈 직접 해야 함) span { display: inline; } display : none : 화면에 보여지지 않음. 공간 차지 X span { display: none; } visibility : hidden : 화면에 보여지지 않음. 공간 차지 O span { visibility: hidden; }

• format_list_bulleted Front-end/CSS
• · 2023. 11. 11.
• textsms

[HTML] 시맨틱 태그(Semantic tag) (3) - <figure>, <figcaption>, <audio>, <source>, <embed>

태그 - 이미지, 일러스트레이션, 다이어그램, 코드 조각 등의 미디어를 캡슐화 태그 - 미디어를 설명하는 데 사용 This picture shows characters from Overwatch. 태그 - 오디오 콘텐츠를 문서에 포함하는 데 사용 controls : 재생 및 음소거와 같은 오디오 컨트롤을 브라우저에 자동으로 표시 autoplay : 자동 재생 태그 - 요소나 요소, 요소에서 사용할 수 있는 다중 미디어 자원을 정의할 때 사용 src : 오디오 파일의 URL을 지정 태그 - 외부 소스의 비디오, 오디오 파일, GIF를 포함한 모든 미디어 콘텐츠를 포함 - 자체적으로 닫는 태그 - 거의 안 쓰임

• format_list_bulleted Front-end/HTML
• · 2023. 9. 7.
• textsms

[HTML] 시맨틱 태그(Semantic tag) (2) - <section>, <article>, <aside>

태그 - 제목 또는 동일한 주제를 가진 문서의 영역을 정의 Facts About Dogs Dogs have a sense of time. It's been proven that they know the difference between a hour and five. If conditioned to, they can predict future events, such as regular walk times. 태그 - 해당 문서나 페이지와는 완전히 독립적으로 구성할 수 있는 요소를 정의 - 주로 포럼, 블로그 포스트, 보도 기사, 논평 등이 포함 Fun Facts About Cricket A single match of cricket can last up to 5 days. 태그 - 페이지의 다른 콘텐츠들과 ..

• format_list_bulleted Front-end/HTML
• · 2023. 9. 7.
• textsms

[HTML] 시맨틱 태그(Semantic tag) (1) - <header>, <nav>, <main>, <footer>

시맨틱 태그(Semantic tag) - 의미가 부여된 태그 - 여는 태그와 닫는 태그 사이의 내용에 대한 정보를 제공 - 장점 : 접근성, 검색엔진 최적화, 이해하기 쉬움 태그 - 문서나 특정 섹션의 헤더(header)를 정의 - 주로 하나 이상의 제목 요소(h1 ~ h6), 네이게이션 정보, 로고(logo)나 아이콘(icon), 저자(author) 정보 포함 Navigational Links Home Posts Contact 태그 - 메뉴 및 목차와 같은 탐색 링크 블록을 정의 Navigational Links Home Posts Contact 태그 - 웹페이지 내에서 주요 콘텐츠를 캡슐화 Types of Sports Baseball The first game of baseball was played..

• format_list_bulleted Front-end/HTML
• · 2023. 9. 7.
• textsms