[Go] Go 라이브러리를 사용해 HTML 띄우기

1. Go 웹 서버 설정Go 언어로 웹 개발을 하기위해서 기본적인 레이아웃을 만드는 방법은 HTML 템플릿과 Go http를 사용하면 됩니다. 먼저 Go를 사용해서 웹 서버를 설정해줍니다.package mainimport ( "html/template" "net/http")type PageVariables struct { Title string}func main() { // 정적 파일을 사용하기 위한 핸들러 설정 http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("static")))) http.HandleFunc("/", HomePage) http.ListenAndServe(":8080", nil);}func Ho..

• format_list_bulleted Back-End/Go
• · 2025. 3. 6.
• textsms

[HTML] HTML 플렉스 박스와 그리드 레이아웃을 사용한 레이아웃 구성방법

1. 플렉스 박스(flexbox) HTML에서 플렉스박스(flexbox는) 컨테이너 내의 아이템을 배치하는 데 유용한 CSS 레이아웃 모델로, 주로 1차원 레이아웃을 구성할 때 사용됩니다. 플렉스 박스의 기본 사용법은 아래와 같습니다.display: flex를 사용해 플렉스 컨테이너를 설정justify-content: space-between 속성으로 아이템간 여백을 조정align-items: center로 수직 정렬을 조정  See the Pen flexbox by Koras02 (@koras02-the-lessful) on CodePen.">See the Pen flexbox by Koras02 (@koras02-the-lessful) on CodePen. 2. CSS 그리드 (Grid) 레..

• format_list_bulleted Front-End/HTML
• · 2025. 2. 26.
• textsms

[HTML] Canvas와 SVG의 차이점

1. HTML 캔버스(Canvas) 예제HTML의 캔버스  요소를 사용해 비트맵 이미지를 그릴 수 있는 2D 그래픽 API 입니다. 주로 Javascript를 통해서 동적으로 그래픽을 렌터링합니다. 사용 방법:HTML에  요소 추가: HTML 문서에 태그를 추가해. width와 height 속성으로 크기를 지정하고, style 속성으로 테두리를 설정할 수 있습니다.Javascript로 그래픽 그리기: JavaScript를 사용해 캔버스의 2D 컨택스트를 가져와, 다양한 메소드를 사용해 그래픽을 그립니다.기능 및 옵션:2D 컨텍스트: getContext('2d') 메소드로 2D 렌더링 컨텍스트를 얻음선 그리기: beginPath(), moveTo(x,  y), lineTo(x,  y), stroke() ..

• format_list_bulleted Front-End/HTML
• · 2025. 2. 16.
• textsms

[HTML] HTML과 XHTML의 차이점

1. HTML과 XHTML 이란?HTML(HyperText Markup Language)과 XHTML(eXtensible HyperText Markup Langauge)는 웹 페이지를 구성하기 위한 마크업 언어로  서로 다른 차이점을 가지고 있습니다.문법 규칙HTML: 유연한 문법을 가지고 있어 태그를 닫지 않거나 대소문자를 구분하지 않아도 됨예: 태그 또는 , 태그는 닫지 않아도 됨XHTML: XML 기반언어로, 더욱 엄격한 문법을 요구함, 모든 태그를 반드시 닫아야 하고, 대소문자를 구분함예: , 반드시 태그르 썻다면 닫아야함DOCTYPE 선언HTML: 다양한 DOCTYPE을 사용할 수 있으며, HTML5에서는 을 사용XHTML: 반드시 XHTML 1.0 또는 XHTML 1.1의 DOCTYPE을..

• format_list_bulleted Front-End/HTML
• · 2025. 2. 16.
• textsms

[CSS] CSS 반응형 이해하기

웹 반응형 사이트를 만들기 위해 우선 HTML,CSS,Javascript의 기본적 개념을 이해하고, 이를 활용해서 반응형 사이트를 구현하는 방법에 대해 설명해 보겠습니다. 1.반응형 웹 디자인이란반응형 웹 디자인(Responsive Web Design, RWD)은 사용하는 플랫폼 별로 다양한 화면 크기와 해상도에서 웹사이트 이용자에 최적의 경혐을 제공하도록 설계하는 방식으로, 이를 통해서 데스크톰,태블릿, 스마트폰 등 다양한 웹 사이트가 자동으로 조정되어 보이도록 구성합니다.  반응형 웹 디자인은 여러분들이 사용하는 컴퓨터 데스크톱에 크롬 웹 브라우저에서 직접 어떤 방식으로 반응형 디자인이 구성되는지 쉽게 알 수 있습니다. 이로써 개발자들은 반응형 웹 디자인 더욱 섬세하고 센스있게 구성할 수 있습니다.2..

• format_list_bulleted Front-End/CSS
• · 2025. 2. 16.
• textsms

[HTML] 6.HTML nav, ol, option, span, strong

1. HTML nav HTML 태그는 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 태크로 메뉴, 목차, 색인을 구현하는 태그입니다. 분류 전체보기 웹/HTML 1.HTML의 탄생 1.HTML의 탄생 HTML은 1981년 하이퍼 텍스트 마크업 언어로 탄생한 언어다 2.HTML Ol 요소 HTML 요소는 목록을 정렬할때 사용합니다. 보통 숫자 목록으로 표현합니다. Number1 li Number2 li Number3 li Number4 li Number5 li last station 로마 숫자로도 표기할 수 있습니다. Construct Style Forme..

• format_list_bulleted Front-End/HTML
• · 2025. 2. 1.
• textsms