티스토리

Hiio.com

검색하기

블로그 홈

Hiio.com

hiio.tistory.com/m

octo54 님의 블로그입니다.

구독자: 3

방명록 방문하기

728x90

주요 글 목록

[포트폴리오] 포트폴리오 리뉴얼 해보자 ! #10 Sidebar를 만들어 보자! 이전까지 헤더를 만들어 보았습니다. 이제 우측에 배치시킨 버튼을 누르면 사이드바가 나오게끔 만들어 보려고 합니다. 1. 버튼 클릭시 useState의 set을 통해 toggle 을 변경시켜 줍니다. 2. 변경된 toggle을 통해 현재 버튼 상태를 가져오고, True, False 일때 각가의 상태에 맞춰 사이드바를 노출시키고 사라지게 하면 될거 같습니다. 먼저 toggle 초기 상태를 false 로 해서 hooks을 만들어 줍니다. // components/Header/index.js import { faBars } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome".. 공감수 0 댓글수 0 2023. 3. 27.
[포트폴리오] 포트폴리오 리뉴얼 해보자 ! #7 Azure에 서버를 만들어 보자! 포트폴이로 사이트를 만들면서 그냥 보여주는 것만 하면 재미가 없을거 같기때문에 Cloud 서버를 이용해 데이터를 받아와 보여 주는 방식을 취해 보면 어떨까 해서 시도해 보려고 합니다. Cloud 서비스를 이용할 수 있는 곳은 아마존, MS,구글,오라클 등등 있지만, AWS나 GCP는 기존에 사용을 해본 경험이 있어, 아직 사용해 보지 못한 MS Azure를 이용해 Cloud VM 인스턴스를 생성해 이곳에 서버 어플리케이션을 배포해 보면 어떨까 싶어 도전! Azure의 경우 한달기간동안 사용 가능한 크레딧을 제공하고, 이 기간이 끝나고 나면, 12개월 동안 사용가능한 서비스들이 있습니다. 12개월동안 사용해보고 나서 어떻게 하면 좋을지는 그때 가서 결정을 해봐야 겠네요. https://azure.micro.. 공감수 0 댓글수 0 2023. 3. 22.
[포트폴리오] 포트폴리오 리뉴얼 해보자 ! #5 - Main 페이지를 만들어보자! / 화면 구현 이제 화면을 구현해 보는 단계입니다. 먼저 화면을 구현하기위해 작성한 화면 구성은 크게 로고 + 상단 텍스트 + 하단 텍스트 +페이지 링크 네비게이션 4부분으로 나눌 수 있습니다. 양옆으로 70px 정도로 padding이 있고 각 세로로 가운데 정렬이 필요합니다. div id="main" 태그안에 id="intro" 태그를 추가하고 총 4개의 div 태그를 추가해 줍니다. 1. 첫번째 div 안에 3개 div 를 추가해 주고 각각 FOR, FULL STACK , DEVELOPER 텍스트를 넣어 주었습니다. 2. 두번째 div 안에는 img 태그를 사용해 로고 이미지를 넣어 줬습니다. 2-1. 로고 이미지는 svg 파일로 resources 디렉토리에 저장 되어있어 import logo form ~~ 로 s.. 공감수 0 댓글수 0 2023. 3. 8.
[포트폴리오] 포트폴리오 리뉴얼 해보자 ! #4 - Main 페이지를 만들어보자! / 기존 파일 수정 이번 포트폴리오는 모바일 환경에 맞춰 만들어 보려고 합니다. 먼저 포트폴리오 사이트 접속시 제일 처음 보이게 되는 Main Page를 만들어 보려고 합니다. 원하는 모양으로 화면 계획을 잡기 위해서 Figma를 이용해 하나씩 그려나가볼 생각입니다. Figma 작업은 하단의 링크로도 확인을 할 수 있습니다. 먼저 기존에 있던 코드들을 수정해 주겠습니다. - index.css 에는 기존에 있던 코드들을 지우고 reset css style을 입력해 줍니다. https://hiio.tistory.com/101 /* index.css */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html.. 공감수 0 댓글수 0 2023. 3. 8.
[포트폴리오] 포트폴리오 리뉴얼 해보자 ! #3 - 커스텀 도메인을 설정해 보자! github pages를 사용하기위해 만들었던, repository 이름 그대로 도메인을 사용해도 되지만, 저는 제가 구입한 도메인을 연결해서 사용하고 싶었습니다. 도메인은 hiio420.com 으로 가비아에서 구입했습니다. https://www.gabia.com/ 가비아에 로그인 후 My가비아에 들어가면 현재 이용중인 도메인 1개가 있습니다.클릭! 관리로 들어가 줍니다. 관리페이지에 있는 DNS 정보에서 도메인 연결 설정 > 수정으로 들어가 줍니다. github에서는 CNAME으로 현재 github page 주소를 적어 줍니다. 뒤에 .을 붙여줍니다. 또는 A 에 아이피를 입력해 줍니다. 저는 그냥 다 했습니다. 저장! 가비아에서 설정이 끝나면 Gihub repository에서 settings > pa.. 공감수 0 댓글수 0 2023. 3. 8.
[포트폴리오] 포트폴리오 리뉴얼 해보자 ! #2- github에 배포해보자! https://docs.github.com/ko/pages/getting-started-with-github-pages/creating-a-github-pages-site github pages를 사용하기 위해서는 3가지가 필요합니다. 1. git 2. github repo 3. gh-pages 먼저 https://git-scm.com/downloads 에서 파일을 다운로드 받아 설치해 줍니다. github에 회원가입 후 접속하면 repository를 만들 수 있습니다. New 버튼을 클릭하면 repository 생성 페이지로 이동하게 되고, 필요한 내용을 작성합니다. github pages를 사용하기 위해서 repository는 .github.io 의 이름을 가져야하고, public으로 만들어줘야 합니.. 공감수 0 댓글수 0 2023. 3. 7.
[포트폴리오] 포트폴리오 리뉴얼 해보자 ! #1 - CRA ! CRA ! React 개발환경을 구성하는 방법은 webpack + babel 부터 하나씩 하나씩 하는 방법도 있으나, 그냥 CRA ( create-react-app) 을 해서 리액트 프로젝트에 필요한 부분을 만들어 주자 npx create-react-app https://create-react-app.dev/ 공식 사이트로 접속을 하면 필요한 Document들을 보고 따라해 볼 수 있다. 추가적으로 --template 인자를 통해서 원하는 template 프로젝트를 만들수 있는데, typescript,pwa등등 나는 이번에는 pwa로 한번 포트폴리오 프로젝트를 시작해 보려고 한다. npx create-react-app --template cra-template-pwa PWA (Progressive Web App) .. 공감수 0 댓글수 0 2023. 3. 7.
[포트폴리오] 포트폴리오 리뉴얼 해보자 ! #0 - 시작 블로그 작성을 중단한지 엄청 오래 된거 같다. 직장 생활도 하고 개인적인 시간도 보내고, 공부도 하고 많은 일들이 있었다. 그러다가 문득 블로그를 다시 써봐야한다는 생각이 들었고, 그런김에 포트폴리오 사이트를 리뉴얼하는 제작기를 시작으로 차근차근 하나씩 작성해 보고자 한다. 포트폴리오는 React를 통해서 Github Page를 이용해 배포를 하고, 포트폴리오에 들어갈 프로젝트나 시연 Demo를 위한 초간단 서버를 네이버 클라우드를 통해서 배포해보고자 한다. 퀄리티는 어떨지 모르겠지만, 차근히 하나씩 다시 해봐야지 공감수 0 댓글수 0 2023. 3. 7.
[Web]포트폴리오 웹사이트 제작 - 21. 웹 페이지 추가 기능 및 디자인 수정 / index 페이지 반응형 웹 페이지 / Main 컨텐츠 Main 컨텐츠 - 이번 포스팅에서는 index 페이지에 있는 텍스트와 이미지 컨텐츠들을 수정하여 반응형 웹에 적용되도록 해보겠습니다. Index 페이지 태그 추가 - index 페이지에 있는 컨텐츠들을 감싸주는 index 클래스 태그를 추가 시켜 줍니다. Welcome to My PortFolio Breath - Everything will be made by me. Index 페이지 - CSS 수정 - 기존에 있는 index 페이지의 css를 수정해 주겠습니다. #main { float: left; width: 100%; position: relative; } #index { height: calc(100vh - 100px); float: left; position: relative; width: 8.. 공감수 0 댓글수 0 2020. 10. 28.
[Web]포트폴리오 웹사이트 제작 - 20. 웹 페이지 추가 기능 및 디자인 수정 / index 페이지 반응형 웹 페이지 / 사이드바 반응형 웹 (Responsive Web) - 반응형 웹은 디바이스의 종류에 따라 웹페이지의 크기가 자동으로 변경되는 것을 말합니다. - 지금 제작하고 있는 포트폴리오 웹사이트의 경우 크기가 고정되어 있어, 모바일이나 태블릿 환경에서는 웹페이지가 잘리게 됩니다. - 기존의 css코드를 %, vw, vh 등을 사용해서 media query (미디어 쿼리)를 사용해서 반응형으로 수정해 보겠습니다. - 아래의 단계에 따라 진행해 보겠습니다. 단계 1. media.css 링크 / 태그 추가 2. 전체 페이지 크기 수정 3. 사이드 바 수정 4.사이드바 - 미디어 쿼리 5.사이드바 - jQeury 6.사이드바 - css 수정 1. media.css 링크 - 미디어 쿼리를 사용하는 법은 간단합니다. @media (m.. 공감수 0 댓글수 0 2020. 10. 28.
[Web]포트폴리오 웹사이트 제작 - 19. 웹 페이지 디자인 - footer Footer - Footer부분은 웹사이트의 가장 하단에 위치하고 있습니다. - 웹사이트의 중요하고 우선순위가 높은 컨텐츠들은 보통 상단이나 사이드에 위치해 있습니다. - 그만큼 Footer부분은 작은 폰트사이즈로 링크만 제공되어 왔습니다. - 하지만 이제는 웹사이트의 디자인이나 레이아웃에 맞게 끔 footer에도 많은 정보가 담기기도 하고, 기능이 변화하고 있습니다. - 또 하지만, 제가 원하는 디장인에서 Footer부분은 아주 작은 영역에 불과 하기 때문에 그리 중요하지는 않습니다. - 아주 간단한 텍스트만 추가 하면 됩니다. 텍스트 추가 및 크기/ 위치 지정 - footer에 들어갈 컨텐츠들이 많다면 footer페이지를 따로 분리하면 좋겠지만, 텍스트만 들어가므로 layout.html 페이지에서 바.. 공감수 0 댓글수 0 2020. 10. 23.
[Web]포트폴리오 웹사이트 제작 - 18. 웹 페이지 디자인 - Contact 페이지 컨텐츠 추가 및 완성 (2) Contact 페이지 컨텐츠 추가 - 이전 포스팅에서 contact 페이지의 레이아웃을 구성하고 form 태그 안의 label 태그와 input 태그의 스타일과 크기,위치를 지정해줬습니다. - 이번 포스팅에서는 div.contactinfo의 title과 iquirise 부분을 추가 하여 contact 페이지를 완성 시켜 보겠습니다. 단계 1. div.title 크기 위치 지정 2. span 추가 및 구분선 만들기 3. div.inquiries 크기 위치 지정 1. div.title 크기 위치 지정 - div.title의 크기와 위치 / 폰트 크기와 스타일을 지정해 주겠습니다. - div. title의 폰트 크기와 스타일은 font-size : 60px , font-weight : 900 입니다. - di.. 공감수 0 댓글수 0 2020. 10. 23.
[Web]포트폴리오 웹사이트 제작 - 17. 웹 페이지 디자인 - Contact 페이지 디자인 / 레이아웃 (1) Contact 페이지 - Contact 페이지는 웹사이트 방문자가 저에게 메세지를 보내는 기능을 하는 곳입니다. - 직접적으로 E-mail을 보낼수 있지만, Contact 페이지를 통해서도 보낼 수 있습니다. - 먼저 Contact 페이지의 구성을 살펴보겠습니다. - Contact 페이지는 크게 제목 / 필요 정보 / 그리고 메세지를 보낼 수 있는 form 부분으로 나누어져 있습니ㅏㄷ. - form 은 Name / E-mail / subject / Message로 나뉘어져 있습니다. - 아래의 단계에 따라 먼저 Contact 페이지의 레이아웃을 구현해 보겠습니다. 단계 1. contact.html 태그 추가 2. div#contact 크기 및 위치 지정 3. div.contactinfo 크기및 위치 지정.. 공감수 0 댓글수 0 2020. 10. 23.
[Web]포트폴리오 웹사이트 제작 - 16. 웹 페이지 디자인 - Portfolio 페이지 / 레이아웃(layout) / 컨텐츠 채우기(2) 컨텐츠 채우기 - 이번 포스팅에서는 portfolio 페이지에 들어갈 image 와 text content 내용을 채워 보겠습니다. - 우선 1개의 content를 채운뒤 나머지 content들을 추가하는 방식으로 진행합니다. - 아래의 단계별로 진행 해 보겠습니다. 단계 1. image 추가 2. text Content 채우기 3. content 태그 추가 4. CSS 수정 1.image 추가 - subimage 태그 안에 img태그를 추가합니다. - 경로는 static > img > portfolio 디렉토리 안에 Trading_predict_price.png 를 지정해 줍니다. - 대체 문자로는 ' 주식가격예측'을 넣어 줍니다. - img 태그의 max-width 값으로 100% 를 지정해 줍니다... 공감수 0 댓글수 0 2020. 10. 22.
[Web]포트폴리오 웹사이트 제작 - 15. 웹 페이지 디자인 - Portfolio 페이지 / 레이아웃(layout)(1) Portfolio 페이지 - 이제 Portfolio 페이지를 완성할 차례입니다. - Portfolio 페이지는 그동안 제가 해온 작업물들에 대한 소개와 이미지 그리고 링크 등이 들어 갑니다. - 기본적인 레이아웃 작업을 우선적으로 진행하고, 이후에 JavaScript를 통해 기능을 추가해 보겠습니다. - Portfolio 레이아웃 구성을 위한 작업물등중 3가지를 선택했습니다. - 이 작업물들을 통해서 레이아웃을 구성했습니다. - Portfolio 페이지의 타이틀이 가장 상단에 들어갑니다. - 그 밑으로 이미지가 좌측에 텍스트들이 우측에 배치 됩니다. - 텍스트는 작업물 제목 / 소개 / 링크로 구성되어있습니다. - 이제 아래의 단계에 따라 기본적인 레이아웃을 구성해 보겠습니다. 단계 1. portfoli.. 공감수 0 댓글수 0 2020. 10. 20.
[Web]포트폴리오 웹사이트 제작 - 14. 웹 페이지 디자인 - About 페이지 만들기 (4) - 프로그레스바 progress bar 만들기 / JavaScript / jQuary 를 사용하기 jQuary 적용하기 - 각 스킬들의 게이지 크기를 각각 적용 시키기 위해 Jquery를 사용하기로 했습니다. - jQuary 를 설치하는 방법은 js파일을 다운로드하여 웹 디렉토리안에 저장하거나 CDN 방법이 있습니다. - 저는 다운로드하여 디렉토리에 저장한 후 사용하기로 했습니다. - jQuary는 아래의 링크를 통해 접속하면 받을 수 있습니다. jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much .. 공감수 1 댓글수 2 2020. 10. 16.
[Web]포트폴리오 웹사이트 제작 - 13. 웹 페이지 디자인 - About 페이지 만들기 (3) - 프로그레스바 progress bar 만들기 프로그레스바 progress bar - 프로젝트의 진행 정도나 내 스킬 숙련도를 나타내기 위한 방법으로 프로그레스바 progress bar를 넣어주려고 합니다. span 태그 추가 - 프로그레스 바를 만들기 위해 span.progressbar태그와 추가적으로 이 태그 안에 span.guage 태그를 만들어 줍니다. gauge css 스타일 추가 - css 에서 값을 지정해 주겠습니다. - span.gauge의 속성은 display를 inline-block 으로 만들고 width 값을 숙련도에 맞게 줍니다. Python 에는 95%를 주었습니다. - 높이 값은 span.progressbar의 높이와 똑같이 줍니다. - background-color #3abff7 색상 코드를 입력해 줍니다. - 게이지의 크.. 공감수 0 댓글수 0 2020. 10. 16.
[Web]포트폴리오 웹사이트 제작 - 12. 웹 페이지 디자인 - About 페이지 만들기 (2) - 이미지 / 텍스트 추가 이미지 / 텍스트 추가 - 이번 포스팅에서는 저번 포스팅에서 추가 한 about 페이지에 추가한 div 태그들안에 컨텐츠들을 채워넣어보겠습니다. - 이미지 추가는 img 태그를 사용하고, 텍스트는 span 또는 p 태그를 이용해 보겠습니다. - 아래의 단계에 따라 진행해 보겠습니다. 단계 1. about 페이지 - aboutimg 추가 2. myname 텍스트 추가 3. moto 텍스트 추가 4. introduce 텍스트 추가 5. myskills 텍스트 추가 1. about 페이지 - aboutimg 추가 - about 페이지에 이미지를 추가해 보겠습니다. - 사용할 이미지는 아래의 이미지입니다. - 먼저 div #aboutimg 안에 img 태그를 추가하고, 이미지 경로를 지정해 줍니다. - 이미지 .. 공감수 0 댓글수 0 2020. 10. 15.
[Web]포트폴리오 웹사이트 제작 - 11. 웹 페이지 디자인 - About 페이지 만들기 (1) - 레이아웃(layout) 구성 및 구현 웹 페이지 - 웹사이트에서 초기 Home 화면과 메뉴에 있는 버튼이나 텍스트를 클릭하면 이동하여 나타나는 웹페이지들등 다양한 컨텐츠 들이 있습니다. - 현재 제작하고 있는 포트폴리오 웹사이트의 경우 Home / About / Portfolio / Blog / Contact 카테고리가 있습니다. - Blog는 hiio.tistory.com 블로그로 링크가 걸려 있습니다. - 나머지 카테고리에 해당하는 웹페이지를 제작해 줘야합니다. - 이번 포스팅에서는 About 페이지 제작을 시작해 보겠습니다. About 페이지 레이아웃 구성 - About 페이지는 layout.html 을 상속받아 제작됩니다. - main 태그 안에 about 페이지의 구성 내용들이 들어가게 됩니다. - 먼저, About 페이지를 어떻게.. 공감수 0 댓글수 0 2020. 10. 15.
[Web]포트폴리오 웹사이트 제작 - 10. 레이아웃 상속 / 재사용 / 타이틀 변수 선언 및 적용 레이아웃 템플릿 상속 / 재사용 - 현재 만들어진 모든 페이지들의 레이아웃은 공통된 코드 및 부분들이 많습니다. - 이를 jinja2 템플릿 상속 기능을 사용해 공통된 부분은 상속받아 사용하고, 변화되는 부분만 수정하여 사용하겠습니다. - jinja2 템플릿 상속 방법은 아래의 링크에 정리되어있습니다. hiio.tistory.com/44 [Python] 5. Flask(플라스크) -jinja2 템플릿 엔진 / 템플릿 상속하기 / 재사용 jinja2 템플릿 상속 기능 - jinja의 가장 강력한 기능 중 하나는 상속 기능입니다. - php에서 include() 와 require() 함수와 비슷한 기능을 제공합니다. - 웹사이트를 제작하다보면 공통된 코드가 자주 사�� hiio.tistory.com - 이 .. 공감수 0 댓글수 0 2020. 10. 14.
[Web]포트폴리오 웹사이트 제작 - 9 .css reset - css 속성 초기화 CSS Reset - CSS Reset은 고유 css 속성값들을 초기화 시켜서 다른 브라우저에서도 웹사이트가 똑같이 표시 되게끔 하기위해 초기화 시키는 것입니다. - CSS 초기화란 각 태그들의 css속성값들(margin, padding, line-weight)들을 0 이나 none값으로 만드는 것입니다. - reset.css를 통해서 초기화 시킨후 style.css를 통해서 새 속성값을 지정합니다. CSS Reset 참고 사이트 cssreset.com/ CSS Reset - 2019's most common CSS Resets to copy/paste, with documentation / tutorials This short post talks about creating a stylish focus .. 공감수 0 댓글수 0 2020. 10. 14.
[Web]포트폴리오 웹사이트 제작 - 8 . <a> 태그 - nav 리스트 -하이퍼 링크 / 정적 / 동적 라우팅 태그 - 태그는 특정 텍스트나 이미지 등에 하이퍼 링크를 걸어 주는 태그입니다. - 이전에 이어서 웹사이트를 먼저 살펴 보겠습니다. - 웹페이지에서 하이퍼링크가 필요한 부분은 nav태그안에 있는 Menu를 구성하는 컨텐츠들입니다. - Home / About / Portfolio Blog Contact에 각각 a태그를 추가해 하이퍼링크를 걸어보겠습니다. 태그 추가 - 태그를 추가 할때 어디에 위치시킬지 중요합니다. - 예를들어 Home이라는 텍스트에 하이퍼링크를 걸어준다고 한다면, 태그가 를 감싸는 위치에 올 수 있고, 태그 하위로 들어 갈 수도 있습니다. - 그럼 먼저 태그를 감사도록 태그를 추가 해 보고 css로 border값을 줘서 확인해 보겠습니다. Home a{ border : 2px solid .. 공감수 0 댓글수 0 2020. 10. 14.
[Web]포트폴리오 웹사이트 제작 - 7 . 레이아웃 구성 (6) - main / Main Image 추가 / 레이아웃 완성 Main Image - 계속해서 이번 포스팅에서는 mainimg 부분에 이미지를 삽입해 완성하겠습니다. - 이미지를 삽입 하기 위해서는 태그를 사용합니다. - Main Image에 삽입할 이미지는 아래의 이미지를 사용합니다. - 이미지는 아래의 링크를 통해 들어가면 무료 이미지 사이트들을 몇군데 모아놨습니다. - 마음에 드는 사이트에 들어가 이미지를 다운로드 받은 후 제가 원하는 데로 편집했습니다. 무료 이미지 사이트 모음 [Web] 무료 이미지 사이트 모음 - Free image website ##1 1. pixabay 2.freepik Freepik | Graphic Resources for everyone Discover millions of copyright-free vectors, photos .. 공감수 0 댓글수 0 2020. 10. 13.
[Web]포트폴리오 웹사이트 제작 - 6 . 레이아웃 구성 (5) - main / Main Text 추가 Main Text - 웹사이트에 처음 접속하게 되면 먼저 보이는 페이지인 index.html 의 가운데 부분에 인사말 또는 웹사이트 방문객에게 전하는 가장 큰 메세지를 MainText에 넣을 생각입니다. - 저는 'Welcome to My PortFolio'라는 문구와 함께 Main Sub Text 를 추가해 'Breath - Everything will be made by me.'라는 문구를 넣어 주었습니다. - 각 단계별로 진행해 보겠습니다. 단계 1. index.html 파일에 텍스트 추가 2. Main Text 폰트 스타일 변경 3. Main Text 위치 변경 4. Main Sub Text 추가 5. Main Sub Text 스타일 지정 1. index.html 파일에 텍스트 추가 - maint.. 공감수 0 댓글수 0 2020. 10. 13.
[Web]포트폴리오 웹사이트 제작 - 5 . 레이아웃 구성 (4) - 구글 폰트 사용하기 / Noto Sans KR 구글 폰트 - 웹사이트에 폰트를 적용하는 방법은 서버에 폰트 파일을 업로드하고 불러오는 방법과 CDN을 이용한 방법들이 있습니다. - 이번 포스팅에서는 구글 폰트 CDN을 이용해 웹사이트에 적용 시켜 보겠습니다. 구글 폰트 사이트 접속 - 아래의 링크로 연결된 구글 폰트 웹사이트로 접속합니다. fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com - 구글 폰트 API 에서 제공하는 다양한 폰트들을 확인 할 수 있습니다. - Search를 통해서 원하는 폰트를 찾아 사용할 수 있습니다. 폰트 고르기 - 구글 폰트에서는 '단어'를 입력 하면 각 폰트가.. 공감수 0 댓글수 0 2020. 10. 13.
[Web]포트폴리오 웹사이트 제작 - 4 . 레이아웃 구성 (3) - 전체 디자인 / main 컨텐츠 수정 - sidebar Sidebar 수정 - 지난번 포스팅에서는 main의 위치와 크기를 수정해 봤습니다. - 이번 포스팅에서는 main 안에 있는 컨텐츠 sidebar / maintext / mainimage 중에서 sidebar 부분을 수정해 보겠습니다. - 먼저 이전까지 구현해놓은 웹사이트의 모습을 살펴 보겠습니다. - sidebar 부분이 main보다 작게 설정 되어 있습니다. - Menu Nav에 해당하는 텍스트들을 입력합니다. - 각 크기와 위치를 조정합니다. 단계 1. sidebar 크기 수정 2. nav태그 추가 3. ul/li 태그 추가 4. li 크기 지정 5. nav 정렬 1. sidebar 크기 수정 - sidebar의 크기를 수정합니다. - 위치는 좌측에 잘 붙어 있습니다.지금당장 따로 수정할 필요는 .. 공감수 0 댓글수 0 2020. 10. 13.
[Web]포트폴리오 웹사이트 제작 - 3 . 레이아웃 구성 (2) - 전체 디자인 / main 크기 / 위치 수정 레이아웃 전체 디자인 - 이전의 레이아웃을 이제 색상과 텍스트를 정확하게 입력해서 전체 디자인을 완성해 보겠습니다. - 먼저 이전의 레이아웃 디자인을 살펴 보겠습니다. - 각 부분들의 크기와 위치를 살펴 보기 위해 임의의 배경색을 입혀 놨습니다. - 위치는 그럭저럭 제가 생각한 곳에 위치해 있습니다. - 제가 원하는 디자인은 Simple하면서 깔끔한 디자인입니다. - 이제는 각 컨텐츠에 넣고 싶은 텍스트와 이미지를 입력하여 전체적인 디자인을 구성했습니다. 디자인 수정 - 전체 디자인 - 디자인을 썩 잘하는 편은 아니라 심플하게 구성을 했습니다. - 전체적인 바탕은 흰색으로 하고, 좌측 sidebar에 Menu Nav들 넣고 가운데에 Main text와 Main img를 넣었습니다. - 이제 위 이미지를 .. 공감수 0 댓글수 0 2020. 10. 13.
[Web]포트폴리오 웹사이트 제작 - 2 . 레이아웃 구성 (1) - 계획 / 구현 레이아웃 구성 계획 - 이전 포스팅에서 만들어 놓은 index.html 과 style.css 파일을 사용해 이어가 보겠습니다. - 별다른 레이아웃이라고 볼 것 없이 header / main / footer 텍스트와 색상만 들어가 있는 모습입니다. - 이제 기본적인 레이아웃 구성을 계획해 보고 이를 코드로 구현해서 웹사이트를 수정하겠습니다. 레이아웃 구성 참고 - 레이아웃을 구성하는 방법은 여러 가지가 있습니다. - 구성 전에 다양한 웹사이트들을 보면서 참고 하거나, 템플릿등을 보면서 참고하면 많은 도움이 됩니다. - 아래 링크로 이동하면 무료 템플릿들을 제공하는 사이트들을 볼 수 있습니다. 무료 템플릿 사이트 모음 1. 웹 사이트 제작 - Reference _무료 웹 템플릿 사이트 형식의 웹사이트를 제작.. 공감수 1 댓글수 0 2020. 10. 12.
[Web]포트폴리오 웹사이트 제작 - 1 . 레이아웃 구성 (0) - 기본 구조 / 코드 레이아웃 (Layout) - 웹사이트 제작에 있어서 가장 먼저 시작하는 것은 어떤 웹사이트를 만들지 , 어떻게 레이아웃을 구성할지 인 것 같다. - 제작하는 과정에서 수정사항이 생기겠지만, 어떻게 구성을 할지 계획을 세워두고 진행을 한다면 개발하는 과정에서 조금 더 속력을 낼 수 있을 것이라고 생각하고, 항상 레이아웃을 어떤 식으로 구성할지 먼저 생각을 하는 편이다. - 웹사이트 레이아웃에는 많은 참고자료들이 있고, 구성이 다양하다. - 먼저 레이아웃을 계획하기 전에 크게 어떤 식으로 나누어지는지 알아보고자 한다. - 태그나 명령어에 관한 것은 진행하면서 포스팅 하려고 하낟. 레이아웃 기본적인 구성 - 레이아웃의 구성은 크게 Header / Nav / Main / Footer로 나뉘게 된다. - Head.. 공감수 0 댓글수 0 2020. 10. 8.
[Web]포트폴리오 웹사이트 제작 - 0 . 시작하기 / 개발환경 / 포트폴리오 웹사이트 제작 - 나만의 포트폴리오를 올리면서 이력서 겸 내가 진행 한 프로젝트에 관한 사이트를 만들어 보는 프로젝트를 진행하려고한다. - 이전에 만들고 중단한 프로젝트가 있지만, 새로이 시작하면서 html,css,js에 대해 다시한번 공부해보려고 한다. 개발환경 - window 10 - 서버 : flask - 에디터 : brackets, 파이참 - node.js나 apache,php로 구성된 백엔드를 사용할까 했지만, 현재 python 관련 프로젝트를 진행하고 있어서 flask로 백엔드 서버를 구성 하고, python 언어를 사용하기로 했다. 예상 진행 과정 - 레이아웃 구성 부터 시작해 데이터를 저장하고 사용하는 과정과 전체적인 디자인을 구성해보는 식으로 진행해 보려고한다. 공감수 0 댓글수 0 2020. 10. 8.

728x90

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.