스크롤을 조금 내리면 헤더가 나타나고 scroll to top 버튼도 함께 나타난다. open 버튼을 클릭하면 모달창이 나타나고 뒷배경은 음영처리된다. 또한, 모달창을 확인하는동안 뒷배경이 스크롤되지 않도록 스크롤바는 숨긴다. close 버튼을 클릭하면 모달창이 사라지고 다시 스크롤바가 나타난다. story about contact OPEN header Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis officia, tempora ipsam libero expedita, doloribus velit eveniet delectus omnis nostrum consectetur magnam tempore quas explicabo mol..

https://seokzin.tistory.com/entry/SCSS-SCSS-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC [SCSS] SCSS 문법 정리 프로젝트 규모가 커지고 복잡해질수록 순수 CSS의 한계를 많이 느끼게 됩니다. 그래서 SCSS나 CSS-in-JS의 도입은 사실상 필수가 되었습니다. 이 글을 통해 CSS의 문제점을 개선한 SCSS에 대해 알아보 seokzin.tistory.com 7. 함수 (Function) 박스 1 박스 2 박스 3 $max-width: 100%; // 부트스트랩 그리드 시스템처럼 12개의 컬럼 중에서 특정 비율만큼 가져감 @function columns($number: 1, $columns: 12){ @return $max-width * ..

홈페이지에서 포스트 페이지 링크 연결하기 notifications 글쓰기 home.html 파일의 해당 코드 부분에 글쓰기 버튼을 추가한다. 그리고 글쓰기 버튼 클릭시 포스트 페이지로 이동하도록 링크를 걸어준다. header .navbar ul li a button{ width: 5rem; height: 2rem; background: var(--primary-color); color: #fff; border: none; border-radius: 2rem; cursor: pointer; font-size: .9rem; transition: .2s; } header .navbar ul li a button:hover{ background: var(--secondary-color); letter-spaci..

부트스트랩 5 를 사용하였고, 화면 상단에는 슬라이드 애니메이션이 동작합니다. images 폴더에 pet1.jpg, pet2.jpg, pet3.jpg, pet4.jpg 파일이 있어야 합니다. https://unsplash.com/ko 아름다운 무료 이미지 및 사진 | Unsplash 어떤 프로젝트를 위해서든 다운로드 및 사용할 수 있는 아름다운 무료 이미지 및 사진입니다. 어떤 로열티 프리 또는 스톡 사진보다 좋습니다. unsplash.com 해당 사이트에서 무료 이미지를 다운로드 받으실수 있습니다. Carousel Home Link Disabled Search First slide label Some representative placeholder content for the first slide. S..

images 폴더에 pet1.jpg 라는 파일이 있어야 제대로 화면이 구성됩니다. About Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information. Contact Follow on Twitter Like on Facebook Email me Album Album example Something short and leading about..

컨테이너 container 마진이 적용된 컨테이너 (반응형) 이미지 img-fluid 반응형 이미지 rounded-circle 둥근 이미지 텍스트 text start 좌측정렬 text end 우측정렬 fw-bold 볼드체 fs-1 폰트크기 display-4 fs-1 보다 큰 글씨체 Small 작은 텍스트 text-info 텍스트 색상 text-warning 텍스트 색상 text-dark 텍스트 색상 text-muted 텍스트 색상 (회색) text-center text-sm-start 기본적으로는 텍스트를 중앙에 정렬하고 디바이스 크기가 좀 더 커지면 왼쪽으로 정렬함 배경색 bg-dark 배경색 설정 bg-opacity-75 배경색 투명도 설정 opacity-50 투명도 50% 버튼 btn-info 버튼..

홈페이지 뼈대코드 구성하기 html 폴더에 home.html 파일을 생성하고 위와 같이 작성한다. 폰트아우썸 아이콘과 구글 머터리얼 아이콘을 함께 사용한다. 구글 머터리얼 아이콘은 CDN 형태로 위와 같이 추가하면 사용이 가능하다. 헤더 디자인하기 홈페이지 헤더에는 사용자 정보를 조회하기 위한 아바타 아이콘과 알림 메세지를 조회하기 위한 종모양 아이콘이 위치하고 있다. Sunblog notifications 구독중37 구독자119 최근 내가 업로드한 글 여행 1시간전 공감9 제주도 오른 까페 방문하기 성산의 해안도로를 따라 달리다 보면 보이는 오른 카페는 제주도의 자연요소 중 하나인 오름을 모티브로 한 카페의 콘셉트인 만큼 자연과 함께 커피를 마시며 즐길 수 있었던 것 같아요.😋 촌부 by 농돌이 구독하..

스토리 페이지 뼈대코드 구성하기 html 폴더에 story.html 파일을 생성하고 위와 같이 작성한다. 폰트아우썸 아이콘도 좋지만 이번 시간에는 구글 머터리얼 아이콘도 함께 사용한다. 구글 머터리얼 아이콘은 CDN 형태로 위와 같이 추가하면 사용이 가능하다. 헤더 디자인하기 헤더에는 스토리(블로그)를 검색하기 위한 검색창이 위치한다. 또한, 사용자 계정을 생성하기 위한 시작하기 버튼도 있다. Sunblog search 시작하기 맛집 라이프 IT 연애 시사 여행 1시간전 공감9 제주도 오른 까페 방문하기 성산의 해안도로를 따라 달리다 보면 보이는 오른 카페는 제주도의 자연요소 중 하나인 오름을 모티브로 한 카페의 콘셉트인 만큼 자연과 함께 커피를 마시며 즐길 수 있었던 것 같아요.😋 촌부 by 농돌이 구..

헤더 디자인하기 Sunblog 서비스 스토리 연락처 나만의 스토리를 만들어보세요 Sunblog는 자신의 이야기나 친구들과 공유할 이야기 등 여러분들의 창의성을 마음껏 발휘해볼 수 있도록 많은 서비스를 제공해드립니다. 저희 서비스를 이용하여 일상에서 일어나는 일들을 스토리로 기록해보세요! 글쓰기 다른 사람들의 스토리가 궁금하신가요? Sunblog는 다양한 사람들의 흥미진진한 이야기들을 담고 있습니다. 여러분의 삶에서 일어나는 기상천외한 이야기를 읽어보실 준비가 되셨나요? 스토리 보기 서비스에 대해 하고싶은 말이 있나요? Sunblog는 여러분의 생각과 제안을 기다립니다. 아이디어가 생각나시거나 궁금한 사항이 있으시면 언제든지 저희에게 연락주세요. 연락하기 Sunrise. All rights reserved..

프로젝트 백업을 위한 깃허브 저장소 생성하기 프로젝트를 진행하면서 작업순서를 기억하고, 혹시나 모르는 데이터 손실 상황에 대비하기 위하여 깃허브 저장소를 생성하고 해당 저장소에 백업을 할 수 있도록 준비한다. 프로젝트 루트 디렉토리 생성하기 프로젝트 코드가 저장될 루트 디렉토리를 생성한다. 프로젝트 구조 잡기 프로젝트 루트 디렉토리 내부에 위와 같이 index.html 파일과 html, css, js. imgs 폴더를 생성한다. index.html 기본뼈대 코드 생성하기 index.html 은 웹사이트에서 다른 페이지로 이동하기 위한 안내 페이지다. 뼈대 코드를 위와 같이 생성한다. 아이콘 사용을 위하여 위의 CDN 링크를 index.html 파일의 head 부분에 추가한다. 랜딩페이지의 디자인을 위하여..