'🌕 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/Web Publishing

한솔 홈데코 퍼블리싱하기_2.제품_(인프런 강좌 참고)

2023.04.17

본문바로가기 본문바로가기 한솔홈데크 대메뉴 시공사례 제품정보 고객센터 기업소개 지속가능경영 사업분야 관련서비스 매장찾기 제품찾기 카탈로그 SITEMAP ENGLISH 광고영역 이전 다음 시작 일시정지 한솔홈데코 비전 xxx 신상품 설명텍스트 설명텍스트 설명텍스트 가구소재에서 인테리어 자재까지 한솔홈데코 편리하고 행복한 공간을 만들어 갑니다. 제품정보 바닥재 벽면재 도어재 몰딩재 시트재 가구재 /* 제품 정보 */ /* 제품 정보 영역 크기 64*52*/ .product a { color: #001829; font-size: 15px; } .product a:hover { /*글자 아이콘에 커서 가까이 했을 때*/ color: #2d5b79; /*색 바뀌게*/ font-weight: bold; /*굵기 바..

🌕 Front-end/Web Publishing

한솔 홈데코 퍼블리싱하기_1.헤더+비주얼_(인프런 강좌 참고)

2023.04.09

아래 내용은 인프런_웹퍼블리셔가 알려주는 실무 웹사이트 따라만들기 Seanson1을 보고 작성하였습니다. 사용한 크롬 확장프로그램 1. Full Page Screen Capture ( GoFullPage ) 2. Image Downloader : 현재 웹 페이지에 마크업된 이미지 ( 슬라이스 )를 다 받는다. 사용한 Style sheet 언어 : HTML 5 + CSS3 🤍 포토샵 파일 없이 사이트 만들기 준비하기 바로 다운 받으면 엄청 많은 다운로드 창이 뜨고 일일이 사진을 다운로드 받아야 한다. 그러므로 구글 설정_다운로드 부분에서 기존 설정 Downloads 에서 원하는 폴더로 변경이 필요하다. 다운로드 받았으면 위치 변경을 다시 원래대로 복구해놓는다. 🤍 메인페이지 헤더영역 제작하기 HTML5 본..

티스토리툴바