HTML (8) 썸네일형 리스트형 nodejs로 HTML 파일 띄워보기 명색이 백엔드 공부하는건데 그래도 HTML파일정도는 띄워봐야하지 않겠슴까 자 적당한 HTML파일 하나 만들어주고 서버 소스파일 하나 만듭시다 아 참고로 2023.01.20 - [코딩/NodeJS] - NodeJS로 서버 만들고 실행해보기 NodeJS로 서버 만들고 실행해보기 서버 뭔가 거창하고 어려울 것 같은데 우린 이미 지난 포스팅에서 준비를 다함 2023.01.19 - [코딩/NodeJS] - 백엔드 공부를 위한 NodeJS 알아보기 + 설치 백엔드 공부를 위한 NodeJS 알아보기 + 설치 개발 bebutae.tistory.com 요 포스팅에서 이어지는거니깐 이전 글 참고하세요 // express로 서버 만들기 기본 셋팅 const express = require("express"); const a.. 자바스크립트로 HTML에서 특정 id의 텍스트 바꾸기 자바스크립트는 HTML을 조작할 수 있는 프로그래밍 언어임 바로 예제 갈길게여 안녕? 위 예제를 돌리면 우리는 insa라는 id를 가진 태그의 내용물을 '안녕하세요?'라는 텍스트로 바꿀 수 있음 이게 가능한 이유가 저기 이렇게 글자 색도 바꿔줄 수 있음. style 옵션 뒤에 color도 넣을 수 있고, background-color, font-size 등 CSS 옵션을 넣을 수 있다. 아주 간단함. 인스타그램 멀티링크용 링크트리 페이지 코딩으로 만들기(3) 안녕하세요. 링크트리 페이지 코딩으로 만들기 3탄입니다. 1탄과 2탄은 아래 링크를 참고해주세요. 2022.08.01 - [코딩/웹 프로그래밍] - 인스타그램 멀티링크용 링크트리 페이지 코딩으로 만들기(1) 인스타그램 멀티링크용 링크트리 페이지 코딩으로 만들기(1) 안녕하세요. 오늘은 인스타그램프로필에서 여러개의 링크를 걸기 위해 사용하는 링크트리 페이지를 따라 만들어보겠습니다. 우선 멀티링크, 링크트리가 무엇인지부터 확인해보겠습니다. 개인 bebutae.tistory.com 2022.08.11 - [코딩/웹 프로그래밍] - 인스타그램 멀티링크용 링크트리 페이지 코딩으로 만들기(2) 인스타그램 멀티링크용 링크트리 페이지 코딩으로 만들기(2) 안녕하세요. 링크트리 페이지 코딩으로 만들기 2탄입니다. 우리는.. 인스타그램 멀티링크용 링크트리 페이지 코딩으로 만들기(2) 안녕하세요. 링크트리 페이지 코딩으로 만들기 2탄입니다. 우리는 HTML과 CSS로 코딩한 페이지를 깃허브 저장소에 올리고, Netlify를 깃허브 저장소에 연동시켜 웹페이지를 배포할 예정입니다. 1탄에서는 링크트리 페이지를 HTML과 CSS로 코딩해보았습니다. 2022.08.01 - [코딩/웹 프로그래밍] - 인스타그램 멀티링크용 링크트리 페이지 코딩으로 만들기(1) 인스타그램 멀티링크용 링크트리 페이지 코딩으로 만들기(1) 안녕하세요. 오늘은 인스타그램프로필에서 여러개의 링크를 걸기 위해 사용하는 링크트리 페이지를 따라 만들어보겠습니다. 우선 멀티링크, 링크트리가 무엇인지부터 확인해보겠습니다. 개인 bebutae.tistory.com 2탄에서는 코딩한 페이지를 깃허브 저장소에 올려보겠습니다. 깃허브를.. 인스타그램 멀티링크용 링크트리 페이지 코딩으로 만들기(1) 안녕하세요. 오늘은 인스타그램프로필에서 여러개의 링크를 걸기 위해 사용하는 링크트리 페이지를 따라 만들어보겠습니다. 우선 멀티링크, 링크트리가 무엇인지부터 확인해보겠습니다. 개인 인스타그램 게시글에는 링크를 걸 수 없습니다. 프로필에는 링크를 걸 수 있는데 하나만 걸 수 있습니다. 그래서 블로그와 유튜브, 마플샵 등 다양한 페이지를 운영중인 경우 여러 페이지 중 하나의 페이지만 링크를 걸 수 있습니다. 예를 들면 아래와 같이 인스타그램 프로필에는 하나의 링크만 걸 수 있습니다. 하지만 저 링크에 접속하면? 이렇게 네이버 블로그와 굿즈샵, MBTI 테스트 페이지의 링크가 걸려있는 페이지로 접속할 수 있습니다. 오늘 웹 프로그램이을 통해 만들어볼 페이지가 바로 이렇게 여러개의 링크가 모여있는 멀티링크 페이지.. ATOM[1] - ATOM 설치하기 안녕하세요. 오늘은 텍스트에디터인 ATOM에 대해 알아보고, 설치해보겠습니다. 1. 텍스트에디터란? 텍스트에디터는 쉽게말하면 메모장입니다. 우리가 문서를 작성하기 위해 한글프로그램을 사용하듯이 프로그래밍 언어도 텍스트로 표현되므로 코드를 편집할 수 있는 편집기가 필요합니다. 문서작성을 할 수 있는 프로그램은 한글도 있지만 워드도 있죠? 코딩을 지원하는 텍스트에디터도 다양한 종류가 있습니다. 아래 사진은 가장 유명한 텍스트 에디터인 VisualStudioCode이며, 우리가 오늘 사용해볼 프로그램은 VSC보다는 조금 더 가볍게 사용할 수 있는 텍스트에디터인 ATOM입니다. +) 역시 텍스트에디터인 메모장으로도 코딩을 할 수 있습니다만, 편의성이 떨어져 추천하지는 않습니다. 2. 왜 ATOM인가요? 혹시 H.. HTML[2] - 주요 태그 배우기 안녕하세요. 오늘은 HTML의 핵심인 태그에 대해 배워보겠습니다. 지난 게시글에서 저희는 HTML이 뭔지, 태그의 구조는 뭔지 알아보았습니다. 이번시간에는 태그에 대해서 조금 더 자세히 알아볼겁니다. 먼저 간단히 말씀드리자면, 태그는 마크다운 언어에서 가장 핵심역할을 하는 요소입니다. 앞뒤로 텍스트를 감싸 다양한 옵션을 부여하며 문서의 구조를 만들어줍니다. 그러니 태그의 종류를 잘 알아두셔야 만들고자 하시는 문서를 적절히 구조화하실 수 있습니다. 1. 주요 태그의 종류 (1) head 헤드 태그는 말그대로 문서의 머리 영역을 지정해주는 태그입니다. 문서의 정보와 외부 문서와의 연결링크 등을 담고있는 영역이며 타이틀도 포함하고 있습니다. 아래 사진을 예시로 보자면, 헤드 태그에 메타 태그가 들어있고, 인코.. HTML[1] - HTML이란? 안녕하세요. 오늘은 HTML에 대해 알아보겠습니다. 1. HTML이란? HTML은 HyperText Markup Language의 약자로, 웹페이지를 만들기 위한 마크업 언어를 의미합니다. 마크업 언어는 문서내에 문장이나 그림, 표 등이 어떻게 배치되는지, 글자는 어떤 크기와 모양을 갖고 있는지에 대해 나타내는 언어로써, 쉽게 말해 웹페이지의 골격을 만들어주는 언어입니다. 프로그래밍 언어인 파이썬이나 C언어는 기계에 명령이나 연산을 시키는 목적으로 사용되지만, 마크업 언어인 HTML은 웹페이지의 구조를 만드는 역할만 할수 있습니다. 프로그래밍 언어는 실행을 위한 언어라면, HTML은 표현을 위한 언어라고 할 수 있겠네요. HTML은 태그와 속성, 내용과 요소로 이루어져있는데 여기서 태그는 명령어의 집합이.. 이전 1 다음
