'🌕 Front-end' 카테고리의 글 목록

[ React ] VSCode 개발 환경 설정하기

2023.07.23

VSCode에서 타입스크립트로 리액트 프로젝트를 개발할 때 몇 가지 환경을 설정해주면 좀 더 편리하게 개발할 수 있다. 프로그램명 용도 운영체제 기타 프리티어 코드 정렬 윈도우/macOS 권장 테일윈드CSS CSS 스타일링 필수 헤드윈드 테일윈드CSS 클래스 분류기 선택 포스트 CSS CSS 구문 강조 표시 선택 🤍 편집기 설정 파일 & 설치 및 설정하기 VSCode는 설정 화면에서 바꾼 내용을 settings.json 파일에 저장해 놓는다. Ctrl + Shift + P 를 눌러 나타난 메뉴에서 "User Settings"를 입력하고 Open User Settings (JSON) 를 선택한다. 해당하는 키와 값을 볼 수 있다. ✉ 프리티어 설치 및 설정 프리티어 Prettier 코드에서 띄어쓰기, 들여..

🌕 Front-end/React

[ React ] 윈도우에서 리액트 개발 환경 만들기

2023.07.16

🤍 설치할 개발 도구 프로그램명 용도 운영체제 기타 Node.js 웹 서버 개발 플랫폼 윈도우/macOS 필수 VSCode 소스 코드 편집기 윈도우/macOS 권장 scoop 윈도우용 설치 프로그램 윈도우 권장 Homebrew macOS용 설치 프로그램 macOS 권장 touch 파일 관리 유틸리티 윈도우 선택 Chrome 웹 브라우저 윈도우/macOS 권장 더보기 https://product.kyobobook.co.kr/detail/S000200550965 🤍 scoop 설치하기 scoop : 명령 줄에서 프로그램을 쉽게 설치하게 해주는 프로그램. scoop update * 명령 한 번이면 scoop으로 설치한 모든 프로그램을 한꺼번에 업데이트할 수 있다. scoop으로 설치할 프로그램의 위치 (C:\..

🌕 Front-end/Web Publishing

[ Bootstrap 5 ] Break & Offset & Ordering 이해

2023.05.01

📌 Column Break Column Break 1 2 3 4 1 2 3 4 📌 Offset column의 시 순서를 디바이스에 따라 임의로 바꾸는 것. Offset 1 2 1 2 1 2 col 클래스 값을 변경하겠다. Offset 1 2 1 2 1 2 이것은 2번 column이 맨 뒤로 이동한 것이 아니라 2번 column의 offset 즉, 시작을 col-4 (4칸) 뒤에서 시작한 것이다. Offset 1 2 1 2 1 2 넓은 화면에서는 레이아웃이 비슷하다. 작은 화면에서는 offset이 사라진다. 왜? 1 2 offset이 md ( 미듐 사이즈 화면 )에서만 작동되기 때문이다. 1 2 offset-sm-4 를 추가하면 화면 사이즈를 줄일 때 적용되는 것을 알 수 있다. Offset 1 2 1 2..

🌕 Front-end/Web Publishing

[ Bootstrap 5 ] Justify Align & Gutters 이해

2023.05.01

📌 Justify-Content : 가로 배열 정렬 Justify-Content는 CSS의 display : flex 속성에서 나온 것이다. Justify content 1 2 3 CSS로는 display : flex 개념임을 알 수 있다. 가로방향의 정형을 할 때는 justify-content 사용. 세로방향의 정형을 할 때는 align-items 사용. 원하는 배치로 적용해보자. Justify content 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 📌 Align-Items : 세로 배열 정렬 Align items 1 2 3 1 2 3 1 2 3 📌 Align-Self : 개별적 세로 정렬 row 클래스 안에 있는 col들을 일괄적으로가 아니라 각각의 col 위치도 개별적으로 조절할 수 있..

🌕 Front-end/Web Publishing

[ Bootstrap 5 ] Grid 이해

2023.05.01

📌 Grid Column Column Column 이는 기본적으로 CSS의 flex box 개념을 도입한 것이다. 🤍 Break point 부트스트랩에서 Break point 는 터닝 포인트 같은 것이다. 모니터 사이즈에서 가로폭의 경계선을 정해둔 것이다. xs는 ExtraSmall 로 가로가 576px미만일 때 sm은 small 로 가로가 576px이상일 때 md는 midicum으로 가로가 768px 이상일 때 lg는 large로 가로가 992px 이상일 때 xl은 ExtraLarge로 가로가 1200px보다 이상일 때 xxl은 ExtraExtraLarge로 가로가 1400px이상일 때 ( Bootstrap 5에서 추가 ) 이 Break poin가 들어가면서 별도의 미디어쿼리를 만들지 않고 반응적인 프..

🌕 Front-end/Web Publishing

한솔 홈데코 퍼블리싱하기_6.푸터 영역_(인프런 강좌 참고)

2023.05.01

📌 푸터 만들기 현재 이 이미지는 배경이미지에서 center로 두게 된다. 가운데 4가지는 ul li로 float : left 해서 각 링크를 걸어준다. 고객상담 개인정보처리방침 기업지배구조 윤리경영 HOMEDECO SALES PORTAL E-Purchase 고객상담050-777-2299 FAMILY SITE 한솔홈데코 서울동작구 보라매로5길 15(신대방동, 전문건설회관 27층) Tel 080-777-2299 개인정보취급관리자 서범석 E-mail homedeco@hansol.com Copyright HANSOLHOMEDECO All rights reserved. 구조를 일단 만들었다. 🤍 배너에 배경이미지 추가하기 배너 부분에 배경이미지를 줘야 한다. /*푸터 영역 시작*/ .banner { backgr..

🌕 Front-end/Web Publishing

한솔 홈데코 퍼블리싱하기_5.공지 영역_(인프런 강좌 참고)

2023.05.01

📌 공지 영역 만들기 요소를 이용해 영역 1개를 만들고, 세부 영역 2개는 로 만들 것이다. 블로그소소한 한솔 인테리어 이야기 대리점 찾기가까운 한솔홈데코 매장 이야기 제품 찾기 제품 전체검색 검색하기 공지사항 한솔홈데코 홈페이지 메뉴얼 오픈 기념 공지사항 2018.03.06 이벤트 응모 블로그 바로가기 스토리 보드 PET (영상) 2018.03.15 가구의 품격을 높이는 한솔 스토리 PET, 새증준의 상태와 최근 사외적 문제 감심 확인 뉴스 [봄 스며드는 우리집] 한솔홈데코, 친화녕 온돌마루 * 벽지 * 도어 '집안이 산뜻' 2018.03.27 습기에 강하고 열효율성 높은 'SB마루'로 집안을 산뜻하게! 2018.03.16 한솔홈데코가 제안하는 인테리어 트랜드 1.강마루, 월, 중문 활용 활용한 '소프..

🌕 Front-end/Web Publishing

한솔 홈데코 퍼블리싱하기_4.배너 영역_(인프런 강좌 참고)

2023.05.01

📌 배너 영역 만들기 흰색 배경에 가운데 컨텐츠 영역만 가운데 정렬이다. 가운데 정렬인 컨텐츠 뒤에 흰 배경이 있는 셈이다. 위 부분만 따로 묶어줄 것이다. 좌측은 ul , li 요소로 구성해서 각각 배너를 표현할 것이고, 우측은 제품찾기 ( 검색 ) 영역이다. 테마 갤러리 블로그 대리점 찾기 제품 찾기 제품 전체검색 검색하기 section : 흰색 바탕이 될 부분. : 가운데 절렬이 되는 영역이다. class = "top" : 배너 영역 중 윗부분. , : 좌측 배너 영역. : 검색 영역. 이 부분의 검색 입력칸, 검색 버튼은 ul,li 요소 or div 요소로 표현하면된다. 하지만 div 요소로 구성하는 것이 좋다. 그 이유는 ul, li는 시각장애인 분들이 사용하시는 센스리더에서 list를 많이 사..

🌕 Front-end/Web Publishing

한솔 홈데코 퍼블리싱하기_3.매거진 영역3_(인프런 강좌 참고)

2023.05.01

📌 매거진 영역 마무리하기 .magazine .slide_box > div { /*슬라이드 박스의 자식을 잡아서 크기 지정*/ width: 1180px; height: 430px; position: absolute; left: 50%; } 여기서 왼쪽으로 반만큼 더 오려면 transform 을 사용한다. .magazine .slide_box > div { /*슬라이드 박스의 자식을 잡아서 크기 지정*/ width: 1180px; height: 430px; position: absolute; left: 50%; transform:translate(-50%,0); } .magazine .slide_box > div { /*슬라이드 박스의 자식을 잡아서 크기 지정*/ width: 1180px; height: ..

🌕 Front-end/Web Publishing

한솔 홈데코 퍼블리싱하기_3.매거진 영역2_(인프런 강좌 참고)

2023.05.01

📌 매거진 좌측 영역 만들기 텍스트 영역이 떨어져 있다. 이것을 붙이려면 라솔라 APP터치터치 터치 한번으로 인테리어 시뮬레이션 자세히보기 ... .magazine .slide_box .left { float: left; width: 800px; /*왼쪽 영역 크기 잡기*/ height: 430px; overflow: hidden; /*요소의 지정 크기 안에서 넘치지 않게 잡음*/ position: relative; /*텍스트 영역을 붙이기 위해*/ } .magazine .slide_box .left div { background: rgba(0,0,0,0.5); /*투명도*/ position: absolute; right: 0; top: 0; } 매거진 영역에 높이를 준다. .magazine { back..

🌕 Front-end/Web Publishing

한솔 홈데코 퍼블리싱하기_3.매거진 영역1_(인프런 강좌 참고)

2023.05.01

비주얼 쪽의 next, prev 아이콘을 쓰려고 한다. 지금 만들 것은 매거진 영역이니까 원래 있던 클래스 명은 바꾸겠다. 광고영역 이전 다음 ... /* 원래 코드 */ .visual .prev, /*공통 요소 묶기*/ .visual .next { display: block; position: absolute; top:50%; width: 25px; height: 47px; transform: translateY(-50%); background: url("../img/sp_com.png") no-repeat; color: transparent; /*이전,다음 글씨 없애기*/ } .visual .prev { left: 82px; /*50+32 여백*/ background-position: -128px -..

🌕 Front-end/CSS

[ CSS ] position 속성

2023.04.27

🤍 position 문서 상에 요소를 배치하는 방법을 지정한다. top, right, bottom, left 속성이 배치할 최종 위치를 결정한다. 예제 position: static; 더보기 https://developer.mozilla.org/en-US/docs/Web/CSS/position position: relative; top: 40px; left: 40px; 더보기 https://developer.mozilla.org/en-US/docs/Web/CSS/position position: absolute; top: 40px; left: 40px; 더보기 https://developer.mozilla.org/en-US/docs/Web/CSS/position position: sticky; top: ..

티스토리툴바