본문 바로가기

개발(Develop)82

[CSS] CSS 초기화 / 리셋(reset) CSS / CSS 리셋 하는 방법 / Reset CSS 2.0 Eric Meyer’s / CSS 기초 지식 reset CSS란? 우리가 html로 코드를 작성하고 브라우저로 실행을 해보면 내가 적용을 하지 않았는데도 자동으로 margin이 들어간 경우를 흔히 봤을 것이다. 이는 '웹 브라우저'마다 default 값으로 스타일이 적용되어 있기 때문에 우리는 브라우저마다의 기본 디폴트 스타일 값이 아니라 동일한 CSS 스타일을 보여주기 위해 이런 default 디폴트 값을 초기화 해주어야 한다. 아래와 같이 자동으로margin: 8px; 값이 들어간 것을 확인할 수 있다. 그러면 같이 CSS 초기화를 해보도록 하자. 1. 구글에 "Reset CSS"라고 검색을 하고 초기화 코드를 찾는다. 나는 아래 사이트에서 가져왔다. https://cssdeck.com/blog/scripts/eric-meyer-reset-cs.. 2022. 1. 5.
비주얼스튜디오 코드 색상 바꾸기 / 테마 추천 / 노마드 코더가 사용하는 글꼴 색상, 코드 테마 / 비주얼스튜디오 코드 색상 테마 추천 및 비교 / Material Theme 오늘은 '노마드 코더'라는 인기 프로그래머 유튜버가 사용하는 비주얼스튜디오 코드 편집기를 봤는데 코드 색상이 너무 예뻐 해당 테마 정보를 가져와 보았습니다. 아래 유튜브 영상을 보면 코드가 빨강, 보라, 초록, 하늘색 등 대조적인 색깔로 코드가 작성이 되어 기존의 코드보다 더 한 눈에 들어올 수 있을 거 같아 저도 해당 테마를 적용해보려고 합니다. 노마드 코더가 사용하는 비주얼 스튜디오 코드 색상 테마 바로 해당 테마를 말씀드리면 'Material Theme'이다. 그러면 바로 설치하고 설정을 같이 해보도록 하자. 1. 비주얼스튜디오 코드를 실행하고, 왼쪽 블럭모양을 클릭한다. 2. 검색창에 'material theme'를 검색한다. 그리고 아래와 같은 프로그램을 찾아 설치한다. 3. 설치를 하면 아래와.. 2022. 1. 5.
웹에서 색상 추출하기 / 16진수 색상 값, RGB값 추출 프로그램 / color picker 사용법 / 웹 요소 색상 값 가져오기 / CSS 색상 추출하기 이번에 소개해드릴 프로그램은, 웹 개발을 할 때 가장 유용하게 사용될 프로그램입니다. 웹 사이트를 디자인 할 때, CSS에서 레이아웃을 짜고 색상을 입힐텐데, 원하는 색상을 추출해 사용할 때 좋을 거 같네요! 바로! 웹을 검색하면서 어떤 요소에 있는 색상이 마음에 들 때 그 색상의 RGB, 16진수 색상 값을 가지고 올 수 있습니다. 웹에서 RGB, 16진수 색상 값 추출하는 프로그램 프로그램 이름을 먼저 말씀드리면 'Color Picker'라는 프로그램입니다. 정확히 말씀드리면 따로 컴퓨터에 다운로드 받아야 하는 프로그램이 아니라, 구글 '크롬'에서 사용할 수 있는 확장 프로그램입니다. 그러면 같이 다운로드하고 사용해보도록 하겠습니다. 1. 구글 크롬 확장프로그램에 들어가준다. 2. 왼쪽 하단에 Chr.. 2021. 12. 31.
바탕화면 캘린더 / 데스크탑 캘린더 다운로드 및 사용법 / 바탕화면 달력 / PC 일정 관리 프로그램 개발자나 컴퓨터로 업무를 보는 사람들은 매일 컴퓨터를 키고, 바탕화면을 보게 된다. 컴퓨터를 부팅했을 때, 매일 보는 바탕화면에 짠!! 하고 캘린더가 있다면? 일정을 한 눈에 파악하고 할 일을 더욱 더 잘 실천할 수 있을 것이다. 그러면 유용한 프로그램 하나를 소개하겠다. 바로 '바탕화면 달력' 같이 다운로드를 받아보도록 하자 . 아래 주소를 클릭한다. http://www.desktopcal.com/ 바탕화면 달력 저는 바탕화면위에 방치하는 아주 근사한 일력소프트웨어이다. 바탕화면일력은 당신을 도와 약속、처리할 사항、일정안배를 쉽게 관리하게 한다…바탕화면위에 사소한 일들을 기록한다 ... Eve www.desktopcal.com 1. 자신의 컴퓨터 운영체제에 맞게 윈도우, 맥 중에 다운로드를 받는다. 2.. 2021. 12. 27.
[CSS] 반응형 웹 만들기 / 뷰포트(viewport) 크기 확인하기 / 미디어 쿼리 알아보기 / 뷰포트란 / 뷰포트 사이트 / yesviz 요새 웹 디자인은 데스크탑으로 웹 사이트를 접속하나 모바일을 통해 웹 사이트를 접속하나 맞춤형으로 웹 디자인이 변경이 된다. 사용자의 접속 환경에 맞추어 사이트의 레이아웃을 자연스럽게 바꾸어 보여주는 것을 '반응형 웹 디자인'이라고 한다. 이런 반응형 웹 디자인에서 가장 기본적인 개념은 '뷰포트(viewprot)'라는 것이다. 뷰포트는 스마트폰 화면에서 실제 내용이 표시되는 영역으로 뷰포트를 지정해주게 되면, PC화면이나 모바일 화면에 맞추어 확대하거나 축소해서 레이아웃을 표시할 수 있다. 이런 뷰포트는 태그를 이용해 태그 사이에 작성을 하는데 기본형태는 이다. 뷰포트(viewport) 단위 뷰포트의 단위는 vw (viewport width) : 1vw는 뷰포트 너비의 1%와 같다. vh (viewpro.. 2021. 12. 26.
깃(Git) 사용법(1) / 리눅스 명령어 익히기 / vim 기본 편집기 / bash 오류 해결 / 깃 사용자 정보 설정 깃을 처음 사용해보는 사람이라면, 우선 환경을 설정하고 기본 명령어들을 숙지해야 한다. 깃을 처음 다운로드 받았을 때 먼저 '사용자 정보'를 입력해야 한다. 그 이유는 깃의 버전을 저장할 때마다 해당 버전을 만든 사용자 정보도 함께 저장하기 때문이다. 그러면 같이 사용자 정보를 설정해보자. 깃에 사용자 정보를 설정할 때는 'config' 명령어 를 사용한다. 아래와 같이 git config --global user.name "사용자 이름" git config --global user.email "사용자 이메일" 명령어를 사용하여, 사용자 정보를 저장한다. 이때 --global 옵션은 현재 컴퓨터에 있는 모든 저장소에서 깃을 사용하기 위한 명령은 리눅스 명령과 같다. 리눅스를 다룰 줄 알면 깃도 간편히 다.. 2021. 12. 26.
코딩한 코드 바로 확인하기 / 라이브 서버 설치 / HTML 웹 브라우저 코드 바로 확인 / 비주얼 스튜디오 확장 기능 / live server 설치 및 사용방법 HTML, CSS, Javscript 등의 웹 언어를 프로그래밍 하다보면, 웹 편집기에서 코드를 작성하고, 저장하고, 저장된 웹브라우저를 열어서 새로고침을 하는 등의 번거로운 작업이 동반된다. 그런데 이 번거로운 작업을 조금 간략하게 줄여주는 확장 기능이 있다. 이 기능을 활용하기 위해선 우선 "Visual Studio Code" 프로그램이 있어야 한다. 해당 프로그램은 개발자들이 많이 사용하는 코드 편집기라서 믿고 사용해도 된다. 설치 방법은 아래에 있다. Visual Studio Code 쉬운 설치 Visual Studio Code 쉬운 설치/ VSCode 코드 편집기 추천 및 설치/ Vscode 한글 설정방법 / VSCode 코드 확대 Visual Studio Code란? 윈도우(Windows), .. 2021. 12. 15.
웹 공부 꿀팁/ Web Developer 확장 기능 사용/ HTML, CSS 공부 꿀팁 / 구글 크롬 확장 프로그램 Web 웹 개발을 위해 꼭 알아야 할 기본 언어로 HTML, CSS, JavaScript가 있다. 그 중 CSS를 공부할 때 도움이 되는 프로그램을 소개하겠다. 그러기 위해서는 '구글 크롬 브라우저'가 컴퓨터에 깔려 있어야 한다. 없다면 아래에서 다운 받자 ▼ https://www.google.com/intl/ko/chrome/ Chrome 웹브라우저 더욱 스마트해진 Google로 더 간편하고 안전하고 빠르게. www.google.com 그럼 구글 크롬 브라우저가 컴퓨터에 깔려 있다고 가정하고 크롬 브라우저를 연다. 1. https://chrome.google.com/webstore 해당 URL 링크를 입력한다. 링크로 들어가면 'Chrome 웹 스토어'로 들어가진다. 2. 왼쪽 검색창에 'web develop.. 2021. 10. 21.
웹편집기/ 비쥬얼 스튜디오 코드 이외의 다양한 웹 편집기 모음_노트패드, 텍스트메이트 등 웹 문서를 만들기 위해 HTML 태그와 CSS, 자바스크립트 소스를 입력하는 프로그램이 필요합니다. 그 프로그램을 웹 편집기(Web Editor) 또는 코드 편집기(code editor)라고 합니다. 컴퓨터에 기본적으로 깔려 있는 메모장도 웹 편집기로 사용이 가능하지만 기능 측면에서는 좋지 않습니다. 코드의 태그와 속성, 일반 텍스트를 다른 색상으로 구분을 해주거나 자동 완성 기능, 오류 검사 기능 그런 것이 없기 때문입니다. 그렇다면 어떤 웹 편집기가 있을까요 ? 윈도우용 웹 편집기에는 노트패드++ (Notepad++) https://notepad-plus.softonic.kr/ Notepad++ 완전한 소스 코드 편집기와 메모장 대체 notepad-plus.softonic.kr 에디트 플러스(Edit.. 2021. 10. 16.

티스토리툴바