티스토리

Building value
검색하기

블로그 홈

Building value

developer-michael.tistory.com/m

Welcome

구독자
1
방명록 방문하기

주요 글 목록

  • [스프링 부트]HTTP 접속 시에 HTTPS로 강제 리다이렉트 시키는 방법 웹사이트를 안전하게 유지하기 위해 HTTP 접속을 HTTPS로 강제하는 것은 중요합니다. HTTPS는 데이터 보안을 강화하고 사용자의 개인 정보를 보호합니다. 스프링 부트 환경에서 HTTP를 HTTPS로 강제 리다이렉트하는 간단한 방법입니다. server: port: 443 http: port: 80 server.port: 443: 이 설정은 웹 서버가 HTTPS를 통해 요청을 처리할 포트를 지정합니다. server.http.port: 80: 이 설정은 HTTP 요청을 받을 포트를 지정합니다. @Configuration public class RedirectConfig { @Bean public ServletWebServerFactory servletContainer() { TomcatServletWeb.. 공감수 0 댓글수 0 2024. 3. 11.
  • [스프링 부트]reCaptcha 적용하기 리캡차의 가장 큰 특징 중 하나는 사용자가 단순히 "나는 로봇이 아닙니다"(I'm not a robot)란 확인란을 클릭하는 것만으로도 로봇이 아님을 인증할 수 있다는 점입니다. 그러나 이것만으로는 부족합니다. 리캡차는 사용자에게 간단한 퍼즐이나 이미지 인식을 요청하여 인간임을 확인하고, 동시에 로봇이나 자동화된 프로그램에게는 이를 우회하기 어렵게 만듭니다. 리캡차는 웹사이트나 앱 개발자들에게 무료로 제공되며, 사용자들에게는 보다 안전하고 신뢰할 수 있는 온라인 환경을 제공합니다. 이러한 혁신적인 보안 기술은 인터넷을 더욱 안전하고 접근하기 쉽게 만들어줍니다. 따라서 리캡차는 우리가 인터넷을 자유롭게 이용할 수 있도록 도와주는 중요한 도구입니다. 최근에 솔루션 소개하는 페이지에 문의하기하는곳에 리캡차 적.. 공감수 1 댓글수 0 2024. 3. 8.
  • [스프링 부트]파일 다운로드 기능 회사에서 솔루션을 소개하는 랜딩 페이지를 리뉴얼하면서 겪게 된 문제를 해결한 경험을 적어보았다. 제품소개서를 다운받고 페이지 내에서 문의하기 하면 영업팀 메일로 수신되게끔만 했으면 되었다. 파일 다운로드하는 기능은 로컬에서 테스트할 때는 잘 되었는데 배포하니까 계속해서 500 에러가 떠서 왜인지 찾다가 시간 낭비를 오래 했다 파일의 경로는 프로젝트 내부 최상단 디렉터리에 위치시키고 배포하였으나 서버 디렉리에도 물리적으로 올려주었어야 했다. 프로젝트 내부에 있 경로에 brochure 디렉터리를 만들어서 안에 파일을 넣어주고 @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addResourceHa.. 공감수 0 댓글수 0 2024. 3. 7.
  • OSI 7계층 OSI (Open Systems Interconnection) 7 계층은 네트워크 통신을 일곱 개의 계층으로 나눈 모델로, 각 계층은 특정 기능과 역할을 담당합니다. 1. 물리 계층 (Physical Layer): 주로 하드웨어적인 부분을 다룸. 전송 매체, 신호, 전압 등의 물리적인 특성을 다룸. 케이블, 허브, 리피터 등의 장치가 여기에 속함. 2. 데이터 링크 계층 (Data Link Layer): 프레임으로 데이터를 나누고, 에러 검출 및 수정을 수행. MAC 주소를 사용하여 네트워크 디바이스 간 통신을 관리. 스위치 등의 장치가 이 계층에 속함. 3. 네트워크 계층 (Network Layer): 패킷을 목적지까지 최적의 경로로 전달. 라우팅, 서브넷팅 등의 기능을 수행. 라우터가 이 계층에서 동.. 공감수 0 댓글수 0 2024. 1. 29.
  • TCP와 UDP의 차이 TCP(Transmission Control Protocol)와 UDP(User Datagram Protocol)는 네트워크 통신에서 주로 사용되는 프로토콜로, 데이터를 전송하는 방식에 차이가 있습니다. TCP (Transmission Control Protocol) 연결 지향형 프로토콜: 통신 전에 연결을 설정하고, 연결이 설정된 후에 데이터를 안정적으로 전송합니다. 신뢰성 있는 전송: 데이터 전송 시 오류 검사, 재전송, 흐름 제어 등을 통해 신뢰성 있는 전송을 보장합니다. 순서 보장: 전송한 순서대로 데이터를 받아오므로, 데이터가 정확한 순서로 도착합니다. 흐름 제어와 혼잡 제어: 수신자의 처리 속도에 맞게 데이터를 조절하여 네트워크 혼잡을 방지하고 효율적으로 데이터를 전송합니다. 주로 웹 브라우저.. 공감수 0 댓글수 0 2024. 1. 5.
  • DB 트랜잭션 DB 트랜잭션은 데이터베이스에서 여러 작업을 하나의 논리적 단위로 묶어 일관성을 유지하는 개념입니다. 이 트랜잭션은 여러 작업을 모두 성공하거나 실패할 때 데이터베이스가 일관된 상태를 유지할 수 있도록 합니다. 트랜잭션은 데이터베이스의 무결성과 일관성을 보장하며, 원자성, 일관성, 격리성, 그리고 지속성이라는 특성을 갖고 있어요. 이러한 특성들은 데이터베이스 조작 시 안전성과 정확성을 확보하는 데 중요한 역할을 합니다. 예를 들어 은행에서 송금 트랜잭션을 생각해보겠습니다. 송금 트랜잭션은 일련의 단계를 거칩니다. 예를 들어, A라는 고객이 B라는 고객에게 100달러를 송금하는 상황을 생각해보죠. 트랜잭션 시작: A 고객의 계좌에서 100달러가 출금되고, B 고객의 계좌로 입금될 예정입니다. 출금: A 고.. 공감수 1 댓글수 1 2023. 11. 28.
  • MVC 패턴 MVC는 Model-View-Controller의 약자로, 소프트웨어 디자인 패턴 중 하나입니다. 이 패턴은 소프트웨어를 세 가지 주요 부분으로 나누어 개발하는 방법을 의미합니다. 모델 (Model): 데이터와 데이터를 처리하는 부분을 담당합니다. 데이터베이스에서 정보를 가져오거나 업데이트하고, 비즈니스 로직을 처리하는 역할을 합니다. 뷰 (View): 사용자에게 보여지는 부분으로, 데이터를 시각적으로 표현하는 역할을 합니다. HTML, CSS, JavaScript 등으로 이루어질 수 있습니다. 컨트롤러 (Controller): 사용자의 입력을 받아 모델과 뷰를 연결시켜주는 부분입니다. 사용자가 요청한 것에 따라 적절한 데이터를 모델에서 가져와 뷰에 전달하거나, 사용자 입력을 받아 모델에 전달하는 역할을.. 공감수 1 댓글수 1 2023. 11. 28.
  • JSON JSON(JavaScript Object Notation)은 데이터를 효율적으로 표현하고 전송하기 위한 경량의 데이터 교환 형식입니다. 이것은 사람이 읽고 쓰기 쉬우며, 기계가 파싱하고 생성하기도 용이합니다. 주로 웹에서 데이터를 주고 받는 데 사용되며, 최근에는 다양한 응용 분야에서 널리 사용되고 있습니다. JSON은 키-값 쌍의 집합으로 구성되어 있으며, 다른 프로그래밍 언어에서도 쉽게 이해하고 사용할 수 있습니다. 대부분의 현대 언어들은 JSON을 다루기 위한 내장된 라이브러리나 함수들을 제공하고 있어, 데이터를 직렬화하고 파싱하는 작업을 간단하게 수행할 수 있습니다. 간단히 말해, JSON은 데이터를 구조화하여 표현하는 포맷으로, 데이터를 주고 받거나 저장하는 데 유용하며, 웹 애플리케이션을 비롯.. 공감수 0 댓글수 1 2023. 11. 25.
  • 자바의 장점 자바는 많은 특징을 가지고 있지만, 자바의 주요 특징을 다음과 같이 요약할 수 있어요: 객체 지향 프로그래밍 (OOP): 자바는 객체 지향 프로그래밍 언어로, 클래스와 객체를 기반으로 하며 상속, 다형성, 캡슐화 등의 개념을 지원합니다. 상속 (Inheritance): 상속은 객체 지향 프로그래밍에서 기존 클래스의 특성을 그대로 물려받아 새로운 클래스를 생성하는 개념입니다. 이를 통해 코드의 재사용성을 높이고 클래스 간의 계층 구조를 형성할 수 있습니다. 부모 클래스의 모든 특성과 기능을 자식 클래스가 물려받아 사용할 수 있습니다. 다형성 (Polymorphism): 다형성은 하나의 객체가 여러 형태를 가질 수 있는 성질을 의미합니다. 이를 통해 같은 메소드 호출이지만 실제 실행되는 메소드가 다를 수 있.. 공감수 1 댓글수 1 2023. 11. 25.
  • 오버로딩(Overloading)과 오버라이딩(Overriding) 1. 오버로딩(Overloading) 오버로딩은 같은 메서드 이름을 가지면서 매개변수의 개수나 타입을 다르게 정의하는 것을 의미합니다. 오버로딩을 사용하면 같은 이름의 메서드를 다양한 매개변수로 호출할 수 있습니다. 메서드 시그니처(메서드 이름, 매개변수 개수, 매개변수 타입)이 서로 다른 경우, 자바는 이를 다른 메서드로 인식합니다. public class Calculator { // 정수형 두 개를 더하는 메서드 public int add(int a, int b) { return a + b; } // 실수형 두 개를 더하는 메서드 (매개변수 타입이 다름) public double add(double a, double b) { return a + b; } // 세 개의 정수를 더하는 메서드 (매개변수 .. 공감수 0 댓글수 0 2023. 9. 29.
  • http와 https의 차이 HTTP(하이퍼텍스트 전송 프로토콜)와 HTTPS(하이퍼텍스트 전송 프로토콜 보안)는 인터넷을 통해 정보를 전송하기 위한 프로토콜 중 두 가지 주요한 프로토콜입니다. 이 두 프로토콜 간의 주요 차이점은 보안과 데이터 암호화에 관련이 있습니다. 1. 보안: HTTP: HTTP는 데이터를 평문으로 전송합니다. 즉, 정보가 암호화되지 않고 노출될 수 있습니다. 이는 중요한 개인 정보나 민감한 데이터를 전송할 때 보안 문제가 발생할 수 있음을 의미합니다. HTTPS: HTTPS는 데이터를 암호화하여 전송합니다. 이를 위해 SSL(보안 소켓 계층) 또는 TLS(전송 계층 보안) 프로토콜을 사용하여 데이터의 기밀성과 무결성을 보장합니다. 따라서 중간에서 데이터를 가로채거나 변조하는 공격으로부터 보호됩니다. 2. 포.. 공감수 0 댓글수 0 2023. 9. 26.
  • Spring과 Spring-boot의 차이 스프링(Spring)과 스프링 부트(Spring Boot)는 둘 다 자바 기반의 프레임워크로, 웹 애플리케이션 및 서비스를 개발하기 위해 사용되지만, 목표와 사용 시나리오, 특징 등에서 차이가 있습니다. 1. 목표 및 설계 철학 - 스프링(Spring): 스프링은 엔터프라이즈급 애플리케이션 개발을 위한 포괄적인 프레임워크로, 높은 유연성과 확장성을 갖고 있습니다. 스프링은 설정의 자유도가 높고 다양한 기능을 모듈로 제공하여 개발자가 필요한 기능을 선택적으로 사용할 수 있습니다. - 스프링 부트(Spring Boot): 스프링 부트는 스프링의 생산성을 향상시키기 위해 만들어진 도구입니다. 주요 목표는 개발자가 빠르게 애플리케이션을 개발하고 설정에 대한 번거로움을 줄이는 것입니다. 스프링 부트는 기본 설정을.. 공감수 0 댓글수 0 2023. 9. 25.
  • Git 명령어 1. git init: 새로운 Git 저장소를 생성합니다. 2. git clone: 기존 Git 저장소를 복제합니다. 3. git add: 변경된 파일을 Git에 추가합니다. ㄴ git add 파일명 ㄴ git add . 공감수 0 댓글수 0 2023. 4. 24.
  • Git과 Github Git은 분산형 버전 관리 시스템이며, 소스 코드의 변경 이력을 기록하고 관리할 수 있습니다. Git은 개발자들이 협업하면서 코드를 공유하고 관리하는 데 매우 유용합니다. Git은 로컬 저장소(Local Repository)와 원격 저장소(Remote Repository)로 구성되어 있습니다. *로컬 저장소 -개발자가 코드를 수정하고 변경 이력을 관리하는 저장소입니다. -로컬 저장소는 개발자의 컴퓨터 내부에 저장됩니다. *원격 저장소(Remote Repository) -여러 개발자들이 공유하고 협업하는 저장소입니다. -대표적으로 GitHub, GitLab, Bitbucket 등의 웹 호스팅 서비스를 제공하는 사이트에서 제공됩니다. https://git-scm.com/ Git git-scm.com GitH.. 공감수 0 댓글수 0 2023. 4. 7.
  • CSS[Grid] CSS Grid는 웹페이지의 레이아웃을 구성하는 데 사용되는 2차원 그리드 시스템입니다. Grid는 각각의 요소들이 위치할 수 있는 행과 열을 제공하며, 요소의 크기와 위치를 상대적으로 지정할 수 있습니다. CSS Grid는 다음과 같은 주요 개념들을 포함합니다. -그리드 컨테이너(Grid Container): 그리드가 적용될 영역을 지정합니다. -그리드 아이템(Grid Item): 그리드에 포함될 각 요소들을 지정합니다. -그리드 행(Grid Row): 그리드의 수평 방향을 나타냅니다. -그리드 열(Grid Column): 그리드의 수직 방향을 나타냅니다. -그리드 라인(Grid Line): 그리드를 나누는 가상의 수평선과 수직선을 말합니다. -그리드 셀(Grid Cell): 그리드의 한 칸을 나타냅니.. 공감수 0 댓글수 0 2023. 4. 6.
  • CSS[Flexbox] Flexbox는 CSS의 레이아웃 모델 중 하나로, 컨테이너와 그 안에 있는 아이템들을 유연하게 배치할 수 있도록 해주는 방법입니다. Flexbox는 수직 중앙 정렬이나 아이템 간의 간격 조절 등 다양한 레이아웃 요구사항을 쉽게 해결할 수 있습니다. Flexbox는 display 속성을 이용해서 적용할 수 있습니다. 컨테이너에 display: flex 속성을 주면, 컨테이너 안의 아이템들은 flex item이 되어 배치됩니다. 이때, 컨테이너의 주 축(main axis)과 교차 축(cross axis)이 결정됩니다. 주 축과 교차 축은 flex-direction 속성으로 결정됩니다. 기본값은 row입니다. 주 축과 교차 축을 기준으로 컨테이너와 아이템의 배치를 설정하는 속성들이 있습니다. -justify.. 공감수 0 댓글수 0 2023. 4. 6.
  • CSS[Media Query] CSS에서 Media Query는 뷰포트 크기, 장치의 종류, 해상도 등의 특성에 따라 CSS 스타일을 조정하는 데 사용됩니다. 이를 통해 반응형 웹 디자인을 구현할 수 있습니다. Media Query는 @media 규칙을 사용하여 작성되며, 미디어 타입과 조건부 블록을 포함합니다. 미디어 타입은 스타일이 적용되는 장치의 유형을 정의하며, 다음과 같은 타입이 있습니다. -all: 모든 장치에 적용되는 기본값 -screen: 컴퓨터 모니터, 태블릿, 스마트폰 등 스크린 기반의 장치에 적용 -print: 프린터에 적용 -speech: 음성 합성 장치에 적용 미디어 쿼리의 조건부 블록에는 미디어 쿼리가 참조하는 특성과 그 값을 정의합니다. 다음은 일반적인 미디어 특성과 그 값입니다. -width: 뷰포트의 너.. 공감수 0 댓글수 0 2023. 4. 5.
  • CSS[Display 속성] CSS의 display 속성은 요소를 어떻게 표시할지를 결정하는 데 사용됩니다. 이 속성은 각 요소의 기본 동작을 제어하며, 레이아웃을 구성하는 데 매우 중요합니다. 가장 일반적으로 사용되는 값은 다음과 같습니다. block: 요소가 블록 레벨 요소가 됩니다. 즉, 요소는 새 줄에서 시작하며, 너비, 높이, 여백 및 패딩 등을 지정할 수 있습니다. inline: 요소가 인라인 요소가 됩니다. 즉, 요소는 텍스트와 같은 다른 인라인 요소 옆에 표시됩니다. 너비, 높이, 여백 및 패딩 값을 지정할 수 없습니다. inline-block: 요소는 인라인 박스로 표시되지만, 요소에 너비, 높이, 여백 및 패딩 값을 지정할 수 있습니다. none: 요소가 표시되지 않습니다. 즉, 해당 요소는 문서 흐름에서 제거되지.. 공감수 0 댓글수 0 2023. 4. 4.
  • CSS[Position 속성] CSS에서 position 속성은 요소의 위치를 지정하는 데 사용됩니다. position 속성은 일반적으로 다른 CSS 속성과 함께 사용되어 요소의 위치, 크기 및 레이아웃을 조정하는 데 사용됩니다. position 속성에는 4가지 값이 있습니다. static: 기본 값으로, 요소의 위치를 변경하지 않습니다. relative: 요소의 위치를 현재 위치를 기준으로 상대적으로 이동시킵니다. absolute: 요소를 가장 가까운 상위(조상) 요소를 기준으로 위치를 지정합니다. fixed: 요소를 뷰포트(Viewport)의 상대적인 위치로 고정합니다. relative 값은 top, bottom, left, right 속성과 함께 사용되어 현재 위치를 기준으로 요소를 상대적으로 이동시킬 수 있습니다. absolu.. 공감수 0 댓글수 0 2023. 4. 3.
  • CSS[Float&Clear] Float와 Clear는 CSS 레이아웃에서 중요한 속성 중 하나입니다. Float 속성은 요소를 왼쪽이나 오른쪽으로 떠있게 하여 다른 요소들이 그 주위를 감싸는 형태로 배치될 수 있도록 합니다. 반면, Clear 속성은 Float 속성이 적용된 요소를 강제로 한 줄에 배치되게 하기 위해 사용됩니다. Float 속성은 다음과 같이 사용합니다. float: left; /* 왼쪽으로 떠있게 함 */ float: right; /* 오른쪽으로 떠있게 함 */ float: none; /* 떠있지 않은 상태 */ Float 속성은 일반적으로 이미지나 텍스트와 같은 컨텐츠를 감싸는 요소에 적용됩니다. 예를 들어, 다음과 같이 HTML 코드가 있다고 가정해봅시다. 이미지 설명 위와 같이 float: left; 속성을 .. 공감수 0 댓글수 0 2023. 4. 3.
  • CSS[색상] CSS에서는 색상을 지정할 때 다양한 방법을 사용할 수 있습니다. 여기에는 색상 이름, RGB/RGBA 값, HEX 코드, HSL/HSLA 값 등이 포함됩니다. 아래에서는 이러한 색상 지정 방법에 대해 자세히 살펴보겠습니다. 1. 색상 이름 CSS에서는 미리 정의된 색상 이름을 사용하여 색상을 지정할 수 있습니다. 예를 들어, 'red', 'blue', 'green'과 같은 단어를 사용하여 색상을 지정할 수 있습니다. 이러한 색상 이름은 쉽게 기억하고 사용하기 쉬우며, 많은 브라우저에서 지원됩니다. /* 색상 이름을 사용한 예시 */ .color-name { color: red; background-color: green; } 2. RGB/RGBA 값 RGB 값은 빨강, 녹색, 파랑의 각각의 색상 값으로.. 공감수 0 댓글수 0 2023. 3. 31.
  • CSS[단위] CSS에서 사용되는 단위에는 크게 상대 단위와 절대 단위가 있습니다. *상대 단위 1. em em은 요소의 폰트 크기를 기준으로 상대적인 크기를 가지는 단위입니다. 즉, em 단위로 지정한 크기는 요소의 폰트 크기에 상대적으로 결정됩니다. 예를 들어, 부모 요소의 폰트 크기가 16px일 때, 1em은 16px과 같습니다. 만약 자식 요소의 폰트 크기가 0.8em으로 지정되어 있다면, 자식 요소의 폰트 크기는 부모 요소의 폰트 크기의 0.8배인 12.8px이 됩니다. 2. rem rem은 root em의 약자로, html 요소의 폰트 크기를 기준으로 상대적인 크기를 가지는 단위입니다. 따라서 rem 단위로 지정한 크기는 항상 html 요소의 폰트 크기에 상대적으로 결정됩니다. 이를 통해 전체적인 레이아웃의.. 공감수 0 댓글수 0 2023. 3. 31.
  • CSS[박스 모델] CSS 박스 모델은 HTML 요소가 화면에 어떻게 배치되고 크기가 결정되는지를 결정하는 모델입니다. 박스 모델은 요소의 내용(content), 안쪽 여백(padding), 테두리(border), 바깥쪽 여백(margin)으로 구성됩니다. 박스 모델의 구성 요소는 다음과 같습니다. content: HTML 요소의 내용을 감싸는 영역으로, width와 height 속성으로 크기를 지정할 수 있습니다. padding: content와 border 사이의 간격을 조절하는 영역으로, padding-top, padding-bottom, padding-left, padding-right 속성으로 상하좌우 각각 크기를 지정할 수 있습니다. border: content와 padding을 감싸는 테두리로, border-t.. 공감수 0 댓글수 0 2023. 3. 31.
  • CSS[선택자와 속성] CSS 선택자는 웹 페이지에서 스타일을 적용할 HTML 요소를 선택하는 데 사용됩니다. 선택자는 요소의 태그 이름, 클래스, ID, 속성 등을 기반으로 선택됩니다. 가장 간단한 선택자는 태그 선택자입니다. 태그 이름을 기반으로 웹 페이지의 모든 해당 요소에 스타일을 적용합니다. 클래스 선택자는 요소에 대한 특정 클래스를 가진 HTML 요소에 스타일을 적용합니다. 클래스 선택자는 마침표(.)와 클래스 이름으로 지정됩니다. ID 선택자는 특정 ID를 가진 요소에 스타일을 적용합니다. ID 선택자는 해시 기호(#)와 ID 이름으로 지정됩니다. 속성 선택자는 특정 HTML 속성을 가진 요소에 스타일을 적용합니다. 대괄호([]) 내에 속성 이름과 속성 값이 지정됩니다. 선택자는 CSS에서 스타일을 적용할 HTML.. 공감수 0 댓글수 0 2023. 3. 31.
  • CSS CSS는 Cascading Style Sheets의 약자로, 웹 페이지의 디자인을 꾸미기 위한 스타일 시트 언어입니다. HTML과 함께 웹 페이지를 구성하는 데 사용됩니다. CSS는 웹 페이지의 텍스트, 이미지, 배경색 및 레이아웃 등을 디자인하며, HTML의 내용과 구조와 분리되어 스타일을 적용합니다. CSS는 HTML 요소와 연결하여 스타일을 적용합니다. HTML 요소는 CSS 선택자를 통해 참조됩니다. 선택자는 스타일을 적용할 요소를 선택합니다. 선택된 요소에는 스타일 속성이 적용되며, 이 속성은 값을 갖습니다. 속성 값은 CSS 스타일 시트에 미리 정의될 수도 있으며, HTML 요소의 style 속성에 직접 지정될 수도 있습니다. CSS는 구체성 및 상속을 사용하여 스타일 속성의 우선 순위를 결정.. 공감수 0 댓글수 0 2023. 3. 31.
  • HTML[HTML 문서의 구조화] HTML 문서의 구조화는 웹 사이트를 구성하는데 가장 중요한 요소 중 하나입니다. 올바른 구조화를 사용하면 검색 엔진 최적화(SEO)뿐만 아니라 웹 사이트의 접근성과 사용자 경험(UX)도 향상할 수 있습니다. 이 글에서는 HTML 문서의 구조화를 어떻게 하는지 알아보겠습니다. HTML5에서는 시맨틱 태그라고 불리는 새로운 태그들이 추가되었습니다. 시맨틱 태그는 기존의 레이아웃 태그와는 달리 웹 사이트의 구조를 설명하는 의미론적인 태그입니다. 이러한 태그들을 사용하면 웹 사이트의 내용이 어떤 것인지 검색 엔진이 더 잘 이해하고 검색 결과에서 더 잘 노출될 수 있습니다. 시맨틱 태그에는 다음과 같은 것들이 있습니다. header: 웹 사이트 또는 섹션의 머리말을 나타냅니다. nav: 웹 사이트의 메뉴나 내비.. 공감수 0 댓글수 0 2023. 3. 30.
  • HTML[HTML 폼(Form)] HTML 폼(form)은 사용자로부터 정보를 입력받을 수 있는 방법을 제공하는 요소입니다. HTML 폼을 사용하면 사용자가 데이터를 입력하고 제출 버튼을 클릭하여 서버로 데이터를 전송할 수 있습니다. 폼은 입력 필드, 버튼, 레이블 등의 요소로 구성됩니다. HTML 폼 요소의 종류: : 폼을 정의하는 요소입니다. : 사용자로부터 데이터를 입력받을 수 있는 요소입니다. type 속성을 통해 입력 필드의 종류를 지정할 수 있습니다. : 여러 줄의 텍스트를 입력받을 수 있는 요소입니다. : 드롭다운 목록을 생성할 수 있는 요소입니다. : 드롭다운 목록의 선택지를 정의하는 요소입니다. : 입력 필드와 레이블을 연결하는 요소입니다. : 버튼을 정의하는 요소입니다. HTML 폼 요소는 name 속성을 사용하여 서버.. 공감수 0 댓글수 0 2023. 3. 30.
  • HTML[HTML 테이블(Table)] HTML에서 테이블은 데이터를 표 형태로 나타내는 데에 사용됩니다. 테이블은 태그를 사용하여 정의되며, 태그를 사용하여 행을, 태그를 사용하여 셀을 정의합니다. 테이블의 기본적인 구조는 다음과 같습니다. Header 1 Header 2 Row 1, Cell 1 Row 1, Cell 2 Row 2, Cell 1 Row 2, Cell 2 HTML 삽입 미리보기할 수 없는 소스 : 테이블을 정의하는 태그입니다. 테이블의 경계선을 테두리로 표시하는 HTML 속성인 border의 값이 1인 속성을 적용합니다. : 테이블의 행을 정의하는 태그입니다. : 테이블의 헤더 셀을 정의하는 태그입니다. 일반 셀보다 더 굵은 글씨로 표시됩니다. : 테이블의 일반 셀을 정의하는 태그입니다. 공감수 0 댓글수 0 2023. 3. 30.
  • HTML[HTML 리스트(List)] HTML 리스트는 항목 목록을 나타내는 데 사용되는 태그입니다. 리스트는 순서가 있는(ordered) 리스트와 순서가 없는(unordered) 리스트 두 가지 유형으로 구성됩니다. 순서가 있는 리스트는 ol 태그를 사용하며, 각 항목은 li 태그로 나타냅니다. 예를 들어, 순서가 있는 리스트로 1부터 3까지의 항목을 나열하려면 다음과 같은 코드를 작성할 수 있습니다. 첫 번째 항목 두 번째 항목 세 번째 항목 HTML 삽입 미리보기할 수 없는 소스 순서가 없는 리스트는 ul 태그를 사용하며, 각 항목도 li 태그로 나타냅니다. 예를 들어, 순서가 없는 리스트로 여러 가지 과일을 나열하려면 다음과 같은 코드를 작성할 수 있습니다. 사과 바나나 딸기 HTML 삽입 미리보기할 수 없는 소스 순서가 있는 리스트.. 공감수 0 댓글수 0 2023. 3. 30.
  • HTML[HTML 요소] HTML 요소는 웹 페이지를 구성하는 단위입니다. 각 요소는 태그로 구성되며, 태그는 요소의 이름을 지정하고 속성을 포함할 수 있습니다. 각 요소는 일련의 컨텐츠를 갖게 되며, 이는 텍스트, 이미지, 비디오 등의 다양한 형식이 될 수 있습니다. 예를 들어, 다음은 단순한 텍스트 요소를 나타내는 태그입니다. 이것은 단락입니다. 여기서 는 "paragraph"의 약어로 단락 요소를 나타내며, 는 단락 요소의 끝을 나타냅니다. 또한 다음은 이미지 요소를 나타내는 태그입니다. 이미지 요소는 다른 요소와는 달리 닫는 태그가 필요하지 않습니다. src 속성은 이미지 파일의 위치를 나타내며, alt 속성은 이미지가 로드되지 않을 경우 대신 나타날 텍스트를 지정합니다. 요소는 블록 요소와 인라인 요소로 분류됩니다. 블.. 공감수 0 댓글수 0 2023. 3. 30.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.