디자인8 Windows PowerShell - 글꼴, 배경화면 색상 바꾸기 / 가독성 향상 파워쉘 디자인 바꾸기 안녕하세요. 고코더 입니다. 윈도우 파워쉘은 예전 BBS 시절 대화창 같이 생긴 바탕화면이 인상적입니다. 파랑에 가까울수록 오래보면 눈이 피곤하기도 하고 글꼴도 마음에 안들기에 이것들을 변경해보려 합니다. ● 1. 파워쉘을 실행 후에 상단 테두리에서 마우스 우클릭을 클릭 후에 속성으로 이동 합니다. ● 2. 탭에서 색으로 이동 후에 화면 배경을 검은색으로 변경했습니다. 원하는 색이 있다면 여기서 변경하시면 됩니다. ● 3. 그리고 기본 글꼴도 MS Gothic을 사용하였습니다. ● 4. 수정된 파워쉘은 커맨드 라인창과 비슷하게 변경 되었습니다. 아마도 비슷한 디자인을 피하려고 진한색상이 기본이진 않았을까요? 마무리 진리의 검은색 바탕에 흰색 글자 2019. 10. 28. CSS - li 점 대신 다른 모양으로 / list-style-type , list-style-image li 디자인 속성 변경 안녕하세요. 고코더 입니다. ● 1. li 특별한 CSS 속성 없이 태그를 작성하면 점 이 기본으로 앞에 붙습니다. ● 2. 이 li에 기본 모양은 변경이 가능 합니다. list-style-type : li 앞에 모양을 변경 가능 list-style-image : li 앞에 모양을 이미지로 변경 ● 3. 그리고 속성 옵션은 아래와 같습니다. disc : 검은 원 circle : 공백 원 square 사각형 decimal : 십진수 lower-alpha : 알파벳 소문자 lower-roman : 로마자 소문자 upper-alpha : 알파벳 대문자 upper-roman : 로마자 대문자 none : 표시 안함 initial : 기본값 cjk-ideographic : 한자식 수 (一,.. 2019. 6. 21. CSS - 책 제목 처럼 왼쪽에 색 기둥 만들기 왼쪽에 색상 있는 제목 형식 안녕하세요. 고코더 입니다. 가끔 블로그나 홈페이지를 보다보면 책의 소제목처럼 왼쪽에 네모 박스에 색이 입혀진 디자인을 볼 수 있습니다. ● 1. 오늘은 이 모양과 같은 CSS를 만들어 보겠습니다. ● 2. 아래 코드를 HTML로 실행해보세요. 123456789101112131415161718192021222324252627282930313233343536 .div_gocoder_point_1 p { padding: 0px 5px 0px; border-bottom: 0px solid #000; border-left: 10px solid #000; color: #000; } .div_gocoder_point_2 p { padding: 0px 5px 0px; border-bott.. 2019. 6. 20. 개편 - 고코더 블로그가 디자인을 새롭게 하였습니다. 반응성 스킨 Flatinum 적용 후기 안녕하세요. 고코더입니다. 2018년 봄이 다가오고 있습니다. 그리고 반년간의 블로그 활동과 이제 1000명 방문자 시대를 맞이하여 새롭게 블로그를 개편하였습니다. 지난주부터 개편 된 스킨을 노출하고 있었지만 기타 버그들과 부족한 부분까지 하여 오늘을 오픈일로 생각하려 합니다. 기존에는 스퀘어 스킨에 로고를 박고 운영하였습니다. 반응성 웹중에 가장 간편하여 블로그 생성 후 30분만에 작업하였습니다. 블로그를 조금 크면 변경하려고 임시방편이었습니다. ▼이전 스킨 모습 기본적인 스킨이라 방문자에게는 깊은 인상을 주지 못하였습니다. 그래서 인기 스킨인 Flatinum을 이용하여 스킨을 변경하였습니다. ▼ 현재 스킨 모습 제 캐릭터를 그려 상단에 블로그의 정체성을 직관적으.. 2018. 3. 17. Bootstrap | 강의 | 04 - 부트스트랩으로 이미지를 다루어 보자. / caption을 달아보자. 1. 부트스트랩으로 이미지를 다루어 보자 - 초보 개발자들에게는 어렵게 CSS와 HTML 조합으로 홈페이지 디자인을 만들어도 이미지 다루기 어려웠던 기억이 있을 것입니다. - 부트스트랩은 이 이미지 마저 쉽게 다룰수 있도록 각종 방법을 만들어 놓았습니다. - 이번 시간에는 가볍게 이미지를 다뤄 보겠습니다. 2. 우선 이미지를 노출 시켜보자 1. 이미지를 아래처럼 추가시켜 보자 - 위치는 게시판에 맨위다. - div 안에 img 태그로 이미지를 첨부해보자. - 이미지는 이걸 다운 (무료이미지) ▼ 위치는 게시판에 맨위다. 이름 나이 주소 지브이 26 상수동 하이리 26 태릉입구 래부기 26 망원동 글쓰기 1 2 3 ▼이런 웹에서 확인해보니 엉망이다. 반응형 웹에서 이미지만 반응하지 않고 있습니다.멋진 이미.. 2017. 7. 9. Bootstrap | 강의 | 03 - 버튼을 달고 전체 폭을 조종 / Button / container 1. 이번 시간에는 - 게시판이 생겼으니 "글쓰기"와 같은 버튼이 필요하겠죠? - 그리고 좌우로 가득찬 게시판도 좋지만 보통은 좌우에 적당한 폭이 있어 - 한눈에 보기 편한 모양으로 만들어 볼것입니다. - 역시나 이번에도 부트스트랩 매력에 푹 빠져봅시다.! 2. 버튼을 다뤄보자 2.1 버튼을 만들어 보자 ▼ 아래처럼 코딩해보겠습니다. 버튼 버튼 ▼ 화면에 띄워보니 기본 버튼, 부트스트랩 버튼이 보입니다. 딱 봐도 부트스트랩 버튼은 디자인 들어갈 준비가 되어 있네요.이제 디자인을 입혀 봅시다. ▼ 아래 코드를 입력하고 웹으로 봐볼까요? Basic Default Primary Success Info Warning Danger Link Large Medium Small XSmall ▼ 디자인을 보는 직관적인 .. 2017. 7. 2. Bootstrap | 강의 | 02 - 게시판 모양을 만들어 보자! / 테이블 / 페이징 1. 깔끔한 게시판 모양을 한방에! 부트스트랩 매력 느껴보자! - 홈페이지를 꾸미려다가 CSS와 HTML을 작성하다. 포기해버린 경험들이 있으실 겁니다. (저부터..) - 기본 뼈대는 나와도 디자인 입힐려면 디자이너 퍼블리셔가 아닌 이상 고역일거고 정작 프로그램 공부가 뒷전 입니다. - 이전 강의에서도 말했듯이 부트스트랩은 아주 훌륭한 디자이너와 퍼블리셔가 제공한 CSS입니다. - 이번 강의에서 부트스트랩 매력에 푹 빠져 보시죠!!! 2. 테이블을 만들어 보자! 2.1 Table 이란 - 실무에서 혹은 좋은 강의를 제공하는 곳에서 선행 되신분들은 보단 태그가 많이 활용되는걸 알고 있을 겁니다. - 데이터를 FM으로 나타내는 요소는 이므로 두번째 시간이니 부트 스트랩으로 이쁜 을 만들어 보는 시간을 가지겠.. 2017. 7. 2. Bootstrap | 강의 | 01 - 부트스트랩 이란? / 설치 / 다운로드 1. 부트스트랩이란 1.1 제작사 http://getbootstrap.com/ (한글 번역 개인사이트 http://bootstrapk.com/) - 부트 스트랩은 트위터에서 개발한 UI 라이브러리 입니다. - 마크 오토(Mark Otto)와 제이콥 손튼(Jacob Thornton)이 개발하였습니다. (둘이 안사귐 게이아님) 1.2 목적 - 모바일 환경에 적합한 반응형 웹을 개발하기 위한 라이브러리 - 디자인으로 인한 개발시간을 단축하기 위한 개발도구 2. 부트스트랩 설치 2.1 설치설명 - 부트스트랩 설치는 압축을 풀기만 하면 됩니다. - 프로젝트 할때 디자인과 퍼블리셔가 css,js 폴더를 만들어주고 나서 개발을 시작할텐데 바로 그 CSS 폴더를 제공해주는 것 입니다. - 웹스톰 같은 IDE를 프로젝트.. 2017. 7. 1. 이전 1 다음
