본문 바로가기

전체 글52

1. CSS 기본 개념 및 구성 요소 CSS의 기본 개념과 구성 요소에 대해 알아보고, 웹 페이지 스타일링의 기본을 이해하도록 해보겠습니다. 1. CSS란 Cascading Style Sheets(CSS)는 마크업 언어에 스타일을 적용하기 위한 디자인 지침을 작성할 수 있는 스타일 시트 언어입니다. 웹 페이지의 레이아웃, 색상, 글꼴 등을 효과적으로 수정할 수 있습니다. 2. 선택자와 스타일 선언 CSS에서 가장 중요한 개념은 선택자(selector)와 스타일 선언(style declaration)입니다. 2.1 선택자 선택자는 웹 페이지의 특정 요소(들)에 스타일을 적용하기 위해 사용됩니다. 예를 들어, 웹 페이지에 동일한 태그가 여러 개 있을 때 특정 태그에만 스타일을 적용하고 싶다면 선택자를 사용하여 해당 요소를 선택할 수 있습니다. .. 2023. 7. 17.
Button Generator로 티스토리 버튼 스타일(CSS) 추가하기 티스토리 블로그에 버튼을 넣고 싶어서 찾아보다가 Button Generator라는 사이트를 알게 되었습니다. CSS로 간편하게 버튼을 만들어주는 사이트 인데요, 등록된 여러가지 디자인 버튼이 있어 조금만 수정하면 원하는 모양으로 제작이 가능합니다. 티스토리 뿐만 아니라 웹 작업 할때에도 이미지로 버튼을 만들어 넣는것보다 간편하게 버튼을 만들수있어 유용해보입니다. 아래 버튼은 Button Generator에서 복사한 버튼을 넣어봤습니다. 티스토리에 어떻게 넣어서 쓸수있는지 보여드리겠습니다. Button Generator 버튼 만들러가기 CSS 버튼 스타일 만들기 사이트에 들어가면 외쪽에 이미 만들어져있는 버튼들이 있습니다. 이 버튼 중에 내가 만들고싶은 가장 비슷한 버튼 모양을 선택합니다. 왼쪽 버튼 리스.. 2023. 6. 28.
ChatGPT 뤼튼(Wrtn)으로 시작하기 ChatGPT는 Generative Pre-trained Transformer의 준말로, 최근 대화체 챗봇의 발전에 큰 기여를 한 인공지능 기술입니다. ChatGPT는 인공지능 기술 중 하나인 딥러닝의 한 분야로, 대화식으로 대화내용을 바탕으로 대용량 데이터를 학습합니다. 학습된 데이터를 바탕으로, ChatGPT 모델은 대화자의 발화를 분석하여 다음 발화를 예측하고 생성하는 역할을 수행합니다. ChatGPT의 특징은 대용량의 데이터를 학습하고 다양한 주제에 대한 지식을 습득하면서, 자연스러운 대화 문장을 생성할 수 있다는 것입니다. ChatGPT는 챗봇 분야뿐만 아니라, 글쓰기, 음성인식, 번역 등 다양한 분야에서 사용될 수 있습니다. ChatGPT 어떻게 사용할까? ChatGPT는 openai(http.. 2023. 6. 18.
visual studio 수정중인 파일 솔루션 탐색기에서 디렉토리로 이동하기 설치하면 열려진 파일 선택시 솔루션 탐색기에서 해당 디렉토리로 포커스가 이동이 되어서 원래 자동으로 되는건가보다 하고 쓰고있었는데 어느날 갑자기 안되길 찾아보았습니다. 옵션에서 프로젝트 및 솔루션을 선택하고 솔루션 탐색기에서 활성화된 항목 추적 체크하고 확인. 2022. 7. 7.
크롬에서 웹서버 테스트하기 자체적으로 웹서버를 돌려서 테스트해도 되지만, 간단한 예제나 테스트를 할땐 크롬에서 제공하는 Web Server for Chrom을 이용하여 간단하게 실행해 볼 수 있습니다. Web Server for Chrome 설치하기 링크 여기 클릭하시면 크롬 웹스토어에서 Web Server for Chrome을 설치 할 수 있습니다. 링크를 클릭해서 들어가면 아래와 같은 화면이 나옵니다.CHROME에 추가 버튼을 클릭하면 설치가 진행됩니다. 앱 추가 버튼 클릭! 설치가 완료되면 앱화면에 위와 같이 아이콘이 추가된 것을 확인 할 수 있습니다. 아이콘을 클릭하면 위와 같으 창이 뜹니다. CHOOSE FOLDER 버튼을 클릭해서 실행하고자 하는 파일의 디렉토리를 선택해줍니다.선택 후 하단에 보면 Enter Port가 .. 2018. 5. 15.
[HTML] 웹저장소(Web Storage) 웹저장소가 나오기 이전엔 브라우저에 데이터를 저장할땐 주로 쿠키를 사용해왔습니다. 하지만 쿠키는 브라우저 상의 갯수와 크기에 제한이 있으며, 브라우저와 서버가 통신할때 필요하지 않은 경우에도 쿠키가 같이 전송되어 불필요한 데이터 전송을 동반합니다. 이러한 쿠키의 단점을 보완할수 있는 것이 바로 웹저장소입니다.웹저장소에 저장된 데이터는 쿠키와 달리 서버로 전송되지 않습니다. 필요한 경우에는 서버로 전송도 가능합니다. 그리고 쿠키보다 더 많은 양의 데이터 저장이 가능합니다. 웹저장소 사용하기 웹저장소는 localStorage와 sessionStorage라는 두가지 객체를 가지고 있습니다. localStorage는 데이터의 만료날짜 없어 제거하기 전까지 데이터가 유지됩니다.sessionStorage는 브라우저.. 2018. 4. 13.
[Node.js] npm으로 외부모듈 설치하기(feat.jquery) NPM이란? NPM(Node Package Manager)은 자바스크립트 런타임인 Node.js의 기본 패키지 관리자입니다. npm을 사용하여 다른 개발자들이 만든 라이브러리나 프레임워크 등의 패키지를 설치하고 의존성을 관리할 수 있습니다. 또한 개발한 패키지를 배포하고 공유할 수도 있습니다. npm은 오픈소스 생태계에서 가장 큰 패키지 저장소를 보유하고 있으며, 이를 통해 개발자들은 수많은 패키지를 검색하여 다운로드할 수 있습니다. npm은 커맨드 라인 인터페이스(CLI)를 제공하여 패키지를 설치하고 배포하는 등 다양한 작업을 수행할 수 있습니다. NPM 사용방법이란? 사용방법은 npm install `모듈명` 입력하면 설치가 됩니다. 설치하고 싶어도 모듈명을 모르면 설치할수가 없겠죠?https://w.. 2018. 4. 10.
[Node.js] 간단한 웹 서버 구현해보기 이번 포스팅에서는 Node.js 를 이용하여 간단한 웹서버를 구현해보도록 하겠습니다. 웹서버를 만들기 이전에 노드가 설치 되어있어야합니다. 아직 설치가 안되어 있으시다면 이전글을 참고하셔서 설치를 하고 진행해주시기 바랍니다. 2018.03.29 - [JavaScript/node.js] - [Node.js] 설치하기 [Node.js] 설치하기 Node.js 란? Node.js는 구글 크롬의 자바스크립트 엔진(V8)을 기반으로 만들어진 서버에서 실행되는 자바스크립트 런타임입니다. 기존의 자바스크립트는 브라우저에서만 실행할 수 있었지만, Node.js egnmomo.tistory.com 웹 서버 구현 소스 작성하기 아래 코드는 Node.js로 작성한 HTTP 서버 생성 코드입니다. 간략하게 설명하자면 requ.. 2018. 3. 29.

티스토리툴바