프론트 엔드

[HTML] HTML - 14.블록과 인라인

이번시간에는 HTML 공간분할에 대해 알아보도록 하겠습니다. HTML 블록과 인라인 HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짖는 display 속성을 가집니다. 대부분의 HTML 요소는 이러한 display 속성값으로 다음 두 가지 값 중 하나를 가지게 됩니다. 블록(block) 인라인(inline) 블록(block) 타입의 요소 display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며 해당 라인은 모든 너비를 차지합니다. p요소는 display 속성값이 block인 요소입니다. 여기서 ,, , ,, 요소는 display 속성값이 블록(block)인 대표적인 요소입니다. 요소 요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 ..

[Go] Go 정적 타입 언어, 동적 프로그래밍 세미콜론, 모호한 요소제거, 주석 사용법

이번 시간에는 Go언어 정적 타입언어와 동적 프로그래밍을 알아보도록 하겠습니다. 정적 타입 언어, 동적 프로그래밍 Go는 엄격하게 타입을 확인하는 정적 타입 언어지만, 동적 타입 언어의 특성도 수용하고 있습니다. 변수의 타입을 지정하지 않더라도 컴파일러가 변수에 할당되는 값의 타입을 알아서 결정하며 인터페이스는 덕 타이핑 방식으로 동작합니다. Go의 모호한 요소제거 Go는 코드를 작성할 때 혼동을 줄 수 있는 모호한 문법을 피했습니다. ++(증가)과 --(차감)같은 증감 연산자는 후치 연산으로만 사용이 가능하고 증감 연산에는 반환 값이 없습니다. 즉 i = i++또는 ++i 같은 코드가 허용되지 않습니다. 그리고 C나 C++처럼 변수의 메모리 주소에 접근할 수 있게 포인터 사용을 허용하지만 포인터 연산은..

[HTML] HTML - 13.리스트와 테이블

이번 시간에서는 HTML 리스트와 테이블을 삽입하는 방법을 알아보겠습니다. HTML 리스트(List) 리스트(list)란 여러 요소들을 일려로 나열한 목록이나 명단을 의미합니다. HTML에서는 이러한 리스트를 표현하기 위해서 다음과 같은 리스트를 제공합니다. 순서가 없는 리스트(unoredered list) 순서가 있는 리스트(ordered list) 정의 리스트(definition list) 순서가 없는 리스트 순서가 없는 리스트는 태그로 시작되며, 여기에 포함되는 각각의 리스트 요소는 태그로 시작합니다. 각각의 리스트 요소 앞에는 기본 마커(marker)로 검정색의 작은 원(bullet) 이 위치합니다. 사과 멜론 바나나 CSS의 list-style-type 속성을 사용하면 리스트 요소 앞에 위치하는..

[Go] Go 코드 분석기와 웹페이지 띄우기, 기본 문법 - 반복문

이번 시간에는 Go언어의 코드 분석과 Go를 이용해 웹 페이지를 띄우는 방법을 알아보도록 하겠습니다. Go 참고 문서 The Go Programming Language DevOps & Site Reliability With fast build times, lean syntax, an automatic formatter and doc generator, Go is built to support both DevOps and SRE. go.dev 위 사이트로 들어가면 Go언어를 직접 출력할 수 있는 도구가 있습니다. 해당 도구로 Go언어를 설치하지 않고도 직접 사이트에서 코드를 입력해 출력할 수 있습니다. Standard library - Go Packages Directories ¶ Expand all ta..

[GO] 리눅스 버전 Go 설치하기 - 헬로우 월드 출력

이번 시간에는 리눅스에서 Go를 설치해보도록 하겠습니다. 리눅스 버전 Go 설치 Downloads - The Go Programming Language Downloads After downloading a binary release suitable for your system, please follow the installation instructions. If you are building from source, follow the source installation instructions. See the release history for more information about Go releases go.dev 해당 사이트로가 Linux 최신버전을 확인해줍니다. root@localhost:~# GO..

[HTML] HTML - 12.링크와 이미지

이번 시간에서는 HTML 링크 주소와 이미지를 삽입하는 방법을 알아보도록 하겠습니다. HTML 링크(Link) 오늘날 웹 페이지에 다른 페이지나 다른 사이트로 연결되는 수많은 하이퍼 링크(hyperlin)가 존재합니다.이러한 하이퍼 링크를 간단히 링크(link)라고도 불리고, HTML에서는 태그로 표현합니다. HTML 링크 태그의 href 속성은 링크를 클릭 시 연결할 페이지나 또는 다이트 URL 주소를 명시합니다. 태그는 텍스트나 단락, 이미지 등 다양한 HTML 요소에 사용할 수 있습니다. 링크를 클릭해서 접속 target속성 태그의 target 속성은 링크로 연결된 문서를 어디에서 열지를 명시합니다. 새창에서 열기 현재 창에서 열기 링크로 연결된 부모 프레임 에서 열기 링크로 연결된 창의 가장 상위..

[HTML] HTML - 11.색과 배경

HTML 색(Color) 표현 이번 시간에는 HTML Style을 사용해서 색을 표현하는 방법을 알아보겠습니다. HTML에서 색을 표현하기 위해서 다음과 같은 3가지 방법이 있습니다. 색상의 이름으로 표현 RGB 색상값으로 표현 16진수를 이용한 표현 색상 이름을 사용해 표현하기 W3C에서 정의한 16가지의 HTML5 표준 색상이름은 다음과 같습니다. 그럼 위 표를 참고해서 만들어 보겠습니다. 색상: 파란색 색상: 브라운 색상: 초콜렛 색상: 아쿠아 RGB 색상값으로 표현 모니터나 스크린에서는 빨간색(Red),녹색(Green),파란색(Blue)를 혼합하여 색을 표현합니다. HTML에서도 위와 같이 세 가지 색을 가지고 색을 표현하기 위해 RGB 색상을 사용합니다. RGB 색상의 기본색은 각각 0부터 25..

[HTML] HTML - 10.스타일

HTML 스타일(Style) 이번 시간에는 HTML 스타일을 사용해 CSS스타일을 HTML요소에 설정하는 방법을 알아보도록 하겠습니다. HTML 요소의 style 속성(attribute)을 이용해 CSS 스타일을 HTML 요소에 직접 설정가능합니다. 하지만 이러한 style 요소를 사용하면 단 하나의 HTML 요소에만 스타일을 적용할 수 있습니다. 배경색 변경 다음 예제에서는 style 속성을 이용해 배경색을 변경 해보겠습니다. style 속성을 이용한 배경색 변경 글자색 변경 다음 예제는 style 속성을 이용해 글자색을 변경하는 방법입니다. style 속성을 이용한 글자색 변경 글자 크기 변경 다음 예제는 style 속성을 이용해 글자 크기를 변경하는 방법입니다. style 속성을 이용한 글자 크기 ..

[Docker] 도커 설치하기

이번 시간에는 도커를 직접 설치해서 서버에 올리는 작업을 해보도록 하겠습니다. 도커 설치하기 우분투를 기준으로 도커를 설치하는 방법을 알아봅시다 $ sudo apt install gnome-terminal 먼저 Gnome Desktop이 설치되어야 하는데 만약 설치하지 않았다면 위에 명령어로 설치합니다. 그 다음 Linux용 Docker Desktop 이 먼저 설치됬다면 아래 명령어로 일단 제거해줍니다. $ sudo apt remove docker-desktop 제거 했다면 설정 파일들까지 완전히 정리해 줘야 합니다. 아래 명령어로 정리해줍니다. $ rm -r $HOME/.docker/desktop $ sudo rm /usr/local/bin/com.docker.cli $ sudo apt purge do..

[Docker] 쿠버네티스란 무엇인가?

이번 시간에는 Doker와는 서로 다른 Kubernetes(쿠버네티스)에 대해 알아보도록 하겠습니다. 2013년 3월 13일 솔로몬 하익스(Solomon Hykes)라는 개발자를 통해 처음으로 세상에 공개된 오픈 소스입니다. 2013년 등장한 도커(docker)는 인프라 세계를 컨테이너(container) 세상으로 바꿔버렸습니다. 수많은 어프리케이션이 컨테이너로 배포되고 Dockerfile(도커파일)을 만들어 이미지를 빌드하고 컨테이너를 배포하는 흔한 개발 프로세스가 되었습니다. 2013년 도커가 처음 등장한 후 약 1년의 시간이 지나고 Docker와 비슷한 Kubernates(쿠버네티스)가 등장하게 됩니다. 쿠버네티스란? 쿠버네티스 컨테이너를 쉽고 빠르게 배포/확장하고 관리를 자동화해주는 오픈소스 플랫..

[HTML] HTML - 9. 주석과 엔티티 그리고 문자셋

이번 시간에는 3가지 항목을 배워볼텐데 먼저 내가 짠 코딩에 대한 해석이 필요할 때 사용하는 주석(Comment) HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위한 문자셋 엔티티(Entity) 웹 브라우저가 HTML 문서를 정확하게 나타내기 위해 사용되는 문자셋(Character Set) 이 3가지의 항목은 한번 배워보도록 하겠습니다. 1. 주석(Comment) 주석(comment)란 개발자가 직접 작성한 해당 코드에 대해 다른 사용자가 보았을때 직접 해석이 가능할 수 있도록 설명이나 디버깅을 위해 작성하는 구문입니다. 주석은 다른 HTML 코드와는 달리 웹 브라우저 화면상에는 나타나지 않습니다. HTML에서 주석을 표현하려면 다음과 같습니다. HTML 주석의 시작 태그( ) 에는 느낌표가 없..

[HTML] HTML - 8.인용구

인용구(Quotation) HTML에서 인용구를 표현하기 위해서는 다음 2가지 방법으로 나뉩니다. 짧은 인용구(Short Quotation) 블록 인용구(Block Quotation) 1. 짧은 인용구 짧은 인용구는 태그(quotation)을 사용해 표현할 수 있으며, 자동으로 앞뒤에 큰따옴표가 붙습니다. HTML 정의는 웹 페이지를 만들고 그리기 위해 만들 하이퍼텍스트 마크업 언어 입니다. 2. 블록 인용구 블록 인용구는 길이가 긴 인용문을 태그(block quatation)을 사용해 표현합니다. 태그는 이러한 인용 부분을 별도의 단락으로 구분해 나타냅니다. Internet Service의 하나인 World-Wide-Web(WWW)을 통해 볼 수 있는 문서를 만들 때 사용하는 Programming La..