Web23 [HTML&CSS] 웹사이트 레이아웃 박스 모델 margin과 padding의 차이 - 각 요소 간 border 간격을 margin, border와 요소 간 간격(콘텐츠 안쪽 여백)을 padding 예시) .margin-left: border 바깥쪽에서 왼쪽에 여백을 만듦 .padding-left: border 안쪽에서 왼쪽에 여백을 만듦 top, right, bottom, left 여백을 만들 수 있다 top right bottom left 순서로 한 줄에 작성 가능 (시계 방향) 태그가 대표적 줄 바꿈 현상 공간 만들기 가능 (width, height 값 사용 가능) 상하 배치 작업 가능 (margin, padding 값 사용 가능) Inline 요소의 특징 줄 바꿈 현상 없음 width/height 값 적용 불가 margin /padd.. 2022. 4. 5. [CSS] CSS 개념 및 구성 요소 CSS란? CSS는 Cascading Style Sheet의 약자로, HTML로 작성된 정보를 꾸며주는 언어이다. CSS 구성 요소 선택자 { 속성 : 속성값; } - 선택자: 디자인을 적용할 HTML 영역 - 속성: 어떤 디자인을 적용할지 정의 - 속성 값: 어떤 역할을 수행할지 구체적으로 명령 CSS 속성 (Property) h1 { font-size: 10px; /* 폰트 사이즈 */ font-family: sans-serif; /* 글꼴 */ color: blue; /* 폰트 색깔 */ background-color: pink; /* 배경색 */ text-align: center; /* 텍스트 정렬 */ } CSS 연동 방법 Inline Style Sheet Internal Style Sheet .. 2022. 4. 5. [HTML] HTML 기본 구조 및 태그 HTML이란? Hyper Text Markup Language의 약자로, 웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어이다. 웹 구성 요소 HTML - 정보 또는 설계도 CSS - 디자인 또는 스타일링 JS - 기능과 효과 (슬라이드 or 팝업 효과 등) 웹사이트 제작 시 고려사항 1. 웹표준 - 웹사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격 2. 웹 접근성 - 장애 여부와 상관없이 모두가 웹사이트를 이용할 수 있게 하는 방식 3. 크로스 브라우징 - 모든 브라우저 또는 기기에서 사이트가 제대로 작동하도록 하는 기법 HTML 태그 기본 구조 컨텐츠 태그명 : HTML이 갖고 있는 고유 기능 콘텐츠 : 열린 태그, 닫힌태그 사이 내용물 속성 : HTML 태그가 갖고 있는.. 2022. 4. 5. [React] Publishing / GitHub Pages에 배포하기 create-react-app을 통해 만든 React 프로젝트를 GitHub Pages에 배포하는 방법을 알아보자. Github Pages는 무료로 정적인 웹페이지를 만들 수 있도록 해준다. html, javascript, css 파일을 올리면 웹사이트로 만들어서 전 세계에 무료로 배포해주는 서비스이다. 1. gh-pages를 설치 npm install gh-pages Github Pages 사용을 위해 우선 gh-pages를 설치해준다. gh-pages란 github pages에 업로드할 수 있게 해주는 패키지이다. 2. Build package.js 파일을 확인해보면 build라는 스크립트가 있다. "scripts": { "start": "react-scripts start", "build": "re.. 2022. 1. 31. [React] Cleanup Cleanup useEffect 사용 시 컴포넌트가 생성될 때뿐만 아니라 사라질 때도 함수를 실행시킬 수 있다. useEffect 참고 [React] useEffect useEffect react.js에서는 component를 새로고침 한다. 즉 새로운 데이터가 들어올 때마다 UI를 refresh 한다. 하지만 필요하지 않은 경우에는 이 장점이 문제가 될 수도 있다. 처음 실행될 때 혹은 컴포넌 yeoeun-ji.tistory.com 아래 코드는 Show 버튼 클릭시 Hello컴포넌트가 생성되고 Hide 버튼 클릭 시 컴포넌트가 사라지는 코드이다. import { useState, useEffect } from "react"; function Hello(){ return ( Hello ); } funct.. 2022. 1. 30. [React] useEffect useEffect react.js에서는 component를 새로고침 한다. 즉 새로운 데이터가 들어올 때마다 UI를 refresh 한다. 하지만 필요하지 않은 경우에는 이 장점이 문제가 될 수도 있다. 처음 실행될 때 혹은 컴포넌트 안에 특정 데이터가 변화할 때만 실행하고 싶은 경우가 있을 수도 있기 때문이다. 이런 경우 useEffect는 컴포넌트가 화면에 나타날 때, 사라질 때, 업데이트 될 때 다시 렌더링을 해주는 함수이다. 아래 코드는 버튼 클릭시 counter변수가 1씩 증가하도록 하는 코드로 로그를 찍어 확인해보면 state가 변경될 때마다 다시 렌더링 된다. import { useState } from "react"; function App() { const [counter,setValue].. 2022. 1. 29. 이전 1 2 3 4 다음
