분류 전체보기(1087)
-
Web/HTML, CSS
2023.05.27
1
[CSS] 미디어 쿼리(media query) 사용법 (반응형 웹)
웹 사이트에 접속할 수 있는 다양한 디바이스들이 있습니다. 그리고 디바이스마다 화면의 크기가 다르죠. 이렇게 다양한 크기를 가진 모든 디바이스를 모두 같은 UI로 웹 사이트를 표현한다면 굉장히 비효율적일 것입니다. 그래서 반응형 웹 디자인은 사이트에 접근하는 기기의 해상도에 따라 서로 다른 스타일을 적용해주어야 하며 이는 CSS의 미디어 쿼리를 활용해서 각각의 디바이스의 크기에 맞는 최적의 UI들을 따로 설정해 줄 수 있습니다. 미디어 쿼리란? @media [only | not] 미디어 유형 [and 조건] * [and 조건] 미디어 쿼리(Media Query)는 웹 개발에서 사용되는 CSS 기술로써 반응형 웹 디자인(Responsive Web Design)의 핵심 요소로 사용됩니다. 미디어 쿼리는 미디..
-
Web/HTML, CSS
2023.05.21
[CSS] 반응형 웹 사이트 레이아웃 만들기 - 가변 그리드(Grid System)
웹 사이트의 레이아웃을 구성하는 방법이 여러 가지가 있겠지만 최근에는 그리드 시스템을 많이 사용합니다. 그리드 시스템은 웹 페이지의 레이아웃과 구성 요소를 조정하기 위한 구조적인 시스템으로 그리드를 사용하면 웹 페이지의 구성 요소를 일관되고 조화롭게 배치할 수 있습니다. 일반적으로 웹 사이트의 그리드 시스템은 열(column)과 행(row)으로 구성됩니다. 각 열은 일정한 너비를 가지고 있고, 이를 기준으로 콘텐츠를 배치합니다. 웹 그리드 시스템 웹 그리드 시스템은 주로 Column, Margin, Gutter로 구성되며 이 세 가지 요소의 비율을 조절하여 원하는 그리드를 구성할 수 있습니다. Margins 여백(Margins)은 콘텐츠 영역의 양 끝에 있는 공간으로, 여백의 넓이는 일정한 값으로 설정되..
-
Web
2023.05.20
[Web] 반응형 웹 사이트를 만드는 다양한 방법
요즘은 PC나 노트북보다 더 작은 스마트폰에서 웹 사이트에 접속하는 경우가 많습니다. 그런데 PC와 스마트폰의 화면 크기가 다르기 때문에 데스크톱 PC용으로 만들어진 웹 사이트를 스마트폰에서 접속하면 매우 작은 글씨로 표시됩니다. 데스크톱에서 보여주던 내용을 스마트폰 화면 안에 다 보여줘야 하기 때문이죠. 이러한 문제점 때문에 과거에는 모바일용으로 사이트를 별도로 제작하였습니다. 하지만 브라우저의 환경이 점차 다양해지는데 매번 PC와 모바일 사이트를 별도로 매번 유지보수하기는 쉽지 않습니다. 그래서 반응형 웹의 중요성이 대두되었습니다. 반응형 웹이란? 반응형 웹(Responsive web)은 다양한 기기와 화면 크기에 자동으로 적응하는 웹 디자인 방식을 의미합니다. 반응형 웹은 사용자가 웹사이트를 모바일..
-
Web/HTML, CSS
2023.05.02
2
[HTML/CSS] 이미지 버튼(image button) 만들기
웹 화면에 일반적인 버튼을 넣으면 밋밋할 수 있습니다. 버튼을 CSS로 꾸며서 조금 더 멋진 웹 사이트를 만들 수도 있지만 이미지 버튼을 만들 수도 있습니다. 이미지 버튼이란 버튼 모양을 가진 이미지를 의미합니다. 이미지 버튼을 만들기 위해서 단순히 이미지 태그에 onclick 메서드를 걸면 되는 거 아니야?라고 생각할 수 있지만 이미지에는 onclick 메서드가 정상 작동하지 않기 때문에 태그를 활용해서 코드를 작성해야 합니다. 이미지 버튼(image button)을 만드는 두가지 방법 만들기 버튼 태그 안에 이미지 버튼을 포함하는 방법 일반적으로 이미지 버튼을 만들기 위해 정보를 찾으면 위와 같은 코드가 나옵니다. 과거에 이미지 버튼을 만들었을 때 주로 사용하던 방식으로 버튼 태그 안에 이미지를 삽입..
-
Web/HTML, CSS
2023.04.30
[HTML] 버튼 만들기 button 태그, (input type = "button")
HTML 버튼은 웹 페이지에서 사용자가 클릭할 수 있는 클릭 가능한 요소를 말합니다. 사용자가 버튼을 클릭하면 개발자가 미리 지정해 놓은 특정 작업이 실행됩니다. HTML 버튼 만들기 버튼의 종류(button type) 버튼 타입 설명 button 버튼 형태를 만들며 자체기능은 없습니다. onClick 메서드를 활용하여 특정 액션을 취하는 기능을 넣을 수 있습니다. submit 폼(form)에서 입력받은 데이터들을 서버로 전송합니다. reset 폼(form)에서 입력받은 데이터들을 초기화 시킵니다. 버튼을 만드는 두 가지 방법 HTML에서 버튼을 만들 수 있는 방법은 두 가지가 있는데 처럼 input type을 사용해서 만들 수도 있고 간단히 태그를 사용해서 삽입할 수도 있습니다. 첫 번째 방법 (inp..
-
Web/HTML, CSS
2023.04.29
1
[HTML] 여러 줄 입력하는 textarea 만들기
태그는 한 줄 이상의 문장을 입력할 때 사용하는 폼을 말합니다. 주로 게시판에서 게시물을 입력하거나 회원가입 양식에서 사용자 약관을 표시할 때 자주 사용됩니다. 태그는 일반적으로 태그와 함께 사용되며, 사용자가 입력한 데이터를 서버로 보내기 위해 사용됩니다. 이 태그는 "name" 속성을 사용하여 입력 필드의 이름을 지정할 수 있습니다. textarea 만들기 name : 다른 폼 요소와 구분하기 위해 텍스트 영역의 이름을 지정합니다. cols : 텍스트 영역의 가로 너비를 문자 단위로 지정합니다. rows : 텍스트 영역의 세로 길이를 줄 단위로 지정합니다. 지정한 숫자보다 줄 개수가 많아지면 스크롤 막대가 생깁니다. See the Pen textarea1 by wjdxo513 (@wjdxo513) o..
-
Web/HTML, CSS
2023.04.28
[HTML] 체크박스 만들기 (input type="checkbox")
체크박스는 사용자가 하나 이상의 옵션을 선택할 수 있도록 할 수 있는 UI 요소입니다. 주로 폼(form) 태그에서 사용되며, 사용자가 선택한 옵션의 값을 폼 데이터로 제출할 수 있습니다. 체크박스는 대개 양식, 설정, 필터링 등의 기능을 구현할 때 사용됩니다. 체크박스 만들기 name : 체크박스가 여러개 있을 경우 폼태그에서 체크박스를 구분하기 위한 이름을 지정합니다. value : 선택한 체크박스들이 선택되었을 때 서버로 넘길 값을 선택합니다. 이 값은 필수 속성입니다. See the Pen Untitled by wjdxo513 (@wjdxo513) on CodePen. 위 코드는 체크박스 3개를 생성합니다. name 속성은 같은 그룹에 속한 체크박스를 식별하기 위한 이름입니다. 만약 각각의 체크박..
-
Web/HTML, CSS
2023.04.27
[HTML] 라디오 버튼 만들기 (input type="radio")
라디오 버튼은 여러 항목 중 원하는 항목 하나를 사용자가 선택할 수 있도록 하는 폼 요소입니다. 딱 하나만 선택할 수 있는 것이 특징으로 사용자가 라디오 버튼 중에서 하나를 선택하면, 다른 라디오 버튼은 선택이 해제됩니다. 라디오 버튼은 주로 폼(form) 태그에서 사용되며, 사용자가 선택한 옵션의 값을 폼 데이터로 제출할 수 있습니다. 예를 들어, 사용자가 성별을 선택하는 폼이 있다면, 라디오 버튼으로 "남성"과 "여성" 옵션을 제공할 수 있습니다. 이렇게 사용자가 성별을 선택하면 그 정보를 서버로 전송하여 후 처리를 할 수 있습니다. 라디오 버튼 만들기 name : 라디오 버튼이 여러개 있을 경우 폼태그에서 라디오 버튼을 구분하기 위한 이름을 지정합니다. 라디오 버튼은 여러 개 중에서 하나만 선택하는..
-
Web/HTML, CSS
2023.04.24
[HTML] 드롭다운 리스트(목록) 만들기
사용자가 여러 옵션 중에서 하나를 선택하도록 하고 싶을 때 드롭다운 리스트를 사용합니다. 드롭다운 리스트란 클릭 했을 때 옵션들이 요소 아래쪽으로 펼쳐지기 때문에 생긴 명칭입니다. 공간을 최소한으로 사용하면서 여러 옵션을 표시하려면 드롭다운 목록이 가장 적당합니다. 드롭다운 리스트는 태그와 태그를 사용하여 생성합니다. 태그로 드롭다운 목록의 시작과 끝을 표시하고 그 안에 태그를 사용해 원하는 항목들을 추가합니다. 드롭다운 리스트 만들기 See the Pen 드롭다운 리스트1 by wjdxo513 (@wjdxo513) on CodePen. 드롭다운 리스트는 위 예제처럼 태그를 사용하여 드롭다운 리스트를 만들고, 태그를 사용하여 드롭다운 리스트 내에 선택할 수 있는 항목들을 만들어주면 됩니다. 여기서 val..
-
Web
2023.04.23
3
[Web] 카카오톡 테마 다운받을 수 있는 블로그 URL 모음(2024년)
카카오톡의 테마는 직접 만들 수가 있습니다. 하지만 초보자들이 만드는 것과 전문가들이 만드는 카카오톡 테마의 퀄리티 차이가 아무래도 많이 날 수밖에 없겠죠. 이번 포스팅에서는 카카오톡 테마를 전문적으로 만드는 고수분들의 블로그들을 소개하고자 합니다. 아래에 소개드리는 블로그들을 서핑하시면서 원하는 테마가 있다면 한번 적용해보는 것도 괜찮을 거 같네요. 혹시 카카오톡 테마를 적용시키는 방법에 대해 모르신다면 아래 글을 참고해주세요. [Mobile] 카카오톡 테마 변경 방법 & 테마 추천 카카오톡 테마 다운받을 수 있는 블로그 모음 1. 늘봄님의 블로그 https://pf.kakao.com/_RPjKxb 봄을 그리다 안녕하세요 늘봄입니다 ◡̈ pf.kakao.com 제 취향인 테마들이 많은 블로그입니다. 심..
-
Web/HTML, CSS 2023.05.27 1[CSS] 미디어 쿼리(media query) 사용법 (반응형 웹) 웹 사이트에 접속할 수 있는 다양한 디바이스들이 있습니다. 그리고 디바이스마다 화면의 크기가 다르죠. 이렇게 다양한 크기를 가진 모든 디바이스를 모두 같은 UI로 웹 사이트를 표현한다면 굉장히 비효율적일 것입니다. 그래서 반응형 웹 디자인은 사이트에 접근하는 기기의 해상도에 따라 서로 다른 스타일을 적용해주어야 하며 이는 CSS의 미디어 쿼리를 활용해서 각각의 디바이스의 크기에 맞는 최적의 UI들을 따로 설정해 줄 수 있습니다. 미디어 쿼리란? @media [only | not] 미디어 유형 [and 조건] * [and 조건] 미디어 쿼리(Media Query)는 웹 개발에서 사용되는 CSS 기술로써 반응형 웹 디자인(Responsive Web Design)의 핵심 요소로 사용됩니다. 미디어 쿼리는 미디..
-
Web/HTML, CSS 2023.05.21[CSS] 반응형 웹 사이트 레이아웃 만들기 - 가변 그리드(Grid System) 웹 사이트의 레이아웃을 구성하는 방법이 여러 가지가 있겠지만 최근에는 그리드 시스템을 많이 사용합니다. 그리드 시스템은 웹 페이지의 레이아웃과 구성 요소를 조정하기 위한 구조적인 시스템으로 그리드를 사용하면 웹 페이지의 구성 요소를 일관되고 조화롭게 배치할 수 있습니다. 일반적으로 웹 사이트의 그리드 시스템은 열(column)과 행(row)으로 구성됩니다. 각 열은 일정한 너비를 가지고 있고, 이를 기준으로 콘텐츠를 배치합니다. 웹 그리드 시스템 웹 그리드 시스템은 주로 Column, Margin, Gutter로 구성되며 이 세 가지 요소의 비율을 조절하여 원하는 그리드를 구성할 수 있습니다. Margins 여백(Margins)은 콘텐츠 영역의 양 끝에 있는 공간으로, 여백의 넓이는 일정한 값으로 설정되..
-
Web 2023.05.20[Web] 반응형 웹 사이트를 만드는 다양한 방법 요즘은 PC나 노트북보다 더 작은 스마트폰에서 웹 사이트에 접속하는 경우가 많습니다. 그런데 PC와 스마트폰의 화면 크기가 다르기 때문에 데스크톱 PC용으로 만들어진 웹 사이트를 스마트폰에서 접속하면 매우 작은 글씨로 표시됩니다. 데스크톱에서 보여주던 내용을 스마트폰 화면 안에 다 보여줘야 하기 때문이죠. 이러한 문제점 때문에 과거에는 모바일용으로 사이트를 별도로 제작하였습니다. 하지만 브라우저의 환경이 점차 다양해지는데 매번 PC와 모바일 사이트를 별도로 매번 유지보수하기는 쉽지 않습니다. 그래서 반응형 웹의 중요성이 대두되었습니다. 반응형 웹이란? 반응형 웹(Responsive web)은 다양한 기기와 화면 크기에 자동으로 적응하는 웹 디자인 방식을 의미합니다. 반응형 웹은 사용자가 웹사이트를 모바일..
-
Web/HTML, CSS 2023.05.02 2[HTML/CSS] 이미지 버튼(image button) 만들기 웹 화면에 일반적인 버튼을 넣으면 밋밋할 수 있습니다. 버튼을 CSS로 꾸며서 조금 더 멋진 웹 사이트를 만들 수도 있지만 이미지 버튼을 만들 수도 있습니다. 이미지 버튼이란 버튼 모양을 가진 이미지를 의미합니다. 이미지 버튼을 만들기 위해서 단순히 이미지 태그에 onclick 메서드를 걸면 되는 거 아니야?라고 생각할 수 있지만 이미지에는 onclick 메서드가 정상 작동하지 않기 때문에 태그를 활용해서 코드를 작성해야 합니다. 이미지 버튼(image button)을 만드는 두가지 방법 만들기 버튼 태그 안에 이미지 버튼을 포함하는 방법 일반적으로 이미지 버튼을 만들기 위해 정보를 찾으면 위와 같은 코드가 나옵니다. 과거에 이미지 버튼을 만들었을 때 주로 사용하던 방식으로 버튼 태그 안에 이미지를 삽입..
-
Web/HTML, CSS 2023.04.30[HTML] 버튼 만들기 button 태그, (input type = "button") HTML 버튼은 웹 페이지에서 사용자가 클릭할 수 있는 클릭 가능한 요소를 말합니다. 사용자가 버튼을 클릭하면 개발자가 미리 지정해 놓은 특정 작업이 실행됩니다. HTML 버튼 만들기 버튼의 종류(button type) 버튼 타입 설명 button 버튼 형태를 만들며 자체기능은 없습니다. onClick 메서드를 활용하여 특정 액션을 취하는 기능을 넣을 수 있습니다. submit 폼(form)에서 입력받은 데이터들을 서버로 전송합니다. reset 폼(form)에서 입력받은 데이터들을 초기화 시킵니다. 버튼을 만드는 두 가지 방법 HTML에서 버튼을 만들 수 있는 방법은 두 가지가 있는데 처럼 input type을 사용해서 만들 수도 있고 간단히 태그를 사용해서 삽입할 수도 있습니다. 첫 번째 방법 (inp..
-
Web/HTML, CSS 2023.04.29 1[HTML] 여러 줄 입력하는 textarea 만들기 태그는 한 줄 이상의 문장을 입력할 때 사용하는 폼을 말합니다. 주로 게시판에서 게시물을 입력하거나 회원가입 양식에서 사용자 약관을 표시할 때 자주 사용됩니다. 태그는 일반적으로 태그와 함께 사용되며, 사용자가 입력한 데이터를 서버로 보내기 위해 사용됩니다. 이 태그는 "name" 속성을 사용하여 입력 필드의 이름을 지정할 수 있습니다. textarea 만들기 name : 다른 폼 요소와 구분하기 위해 텍스트 영역의 이름을 지정합니다. cols : 텍스트 영역의 가로 너비를 문자 단위로 지정합니다. rows : 텍스트 영역의 세로 길이를 줄 단위로 지정합니다. 지정한 숫자보다 줄 개수가 많아지면 스크롤 막대가 생깁니다. See the Pen textarea1 by wjdxo513 (@wjdxo513) o..
-
Web/HTML, CSS 2023.04.28[HTML] 체크박스 만들기 (input type="checkbox") 체크박스는 사용자가 하나 이상의 옵션을 선택할 수 있도록 할 수 있는 UI 요소입니다. 주로 폼(form) 태그에서 사용되며, 사용자가 선택한 옵션의 값을 폼 데이터로 제출할 수 있습니다. 체크박스는 대개 양식, 설정, 필터링 등의 기능을 구현할 때 사용됩니다. 체크박스 만들기 name : 체크박스가 여러개 있을 경우 폼태그에서 체크박스를 구분하기 위한 이름을 지정합니다. value : 선택한 체크박스들이 선택되었을 때 서버로 넘길 값을 선택합니다. 이 값은 필수 속성입니다. See the Pen Untitled by wjdxo513 (@wjdxo513) on CodePen. 위 코드는 체크박스 3개를 생성합니다. name 속성은 같은 그룹에 속한 체크박스를 식별하기 위한 이름입니다. 만약 각각의 체크박..
-
Web/HTML, CSS 2023.04.27[HTML] 라디오 버튼 만들기 (input type="radio") 라디오 버튼은 여러 항목 중 원하는 항목 하나를 사용자가 선택할 수 있도록 하는 폼 요소입니다. 딱 하나만 선택할 수 있는 것이 특징으로 사용자가 라디오 버튼 중에서 하나를 선택하면, 다른 라디오 버튼은 선택이 해제됩니다. 라디오 버튼은 주로 폼(form) 태그에서 사용되며, 사용자가 선택한 옵션의 값을 폼 데이터로 제출할 수 있습니다. 예를 들어, 사용자가 성별을 선택하는 폼이 있다면, 라디오 버튼으로 "남성"과 "여성" 옵션을 제공할 수 있습니다. 이렇게 사용자가 성별을 선택하면 그 정보를 서버로 전송하여 후 처리를 할 수 있습니다. 라디오 버튼 만들기 name : 라디오 버튼이 여러개 있을 경우 폼태그에서 라디오 버튼을 구분하기 위한 이름을 지정합니다. 라디오 버튼은 여러 개 중에서 하나만 선택하는..
-
Web/HTML, CSS 2023.04.24[HTML] 드롭다운 리스트(목록) 만들기 사용자가 여러 옵션 중에서 하나를 선택하도록 하고 싶을 때 드롭다운 리스트를 사용합니다. 드롭다운 리스트란 클릭 했을 때 옵션들이 요소 아래쪽으로 펼쳐지기 때문에 생긴 명칭입니다. 공간을 최소한으로 사용하면서 여러 옵션을 표시하려면 드롭다운 목록이 가장 적당합니다. 드롭다운 리스트는 태그와 태그를 사용하여 생성합니다. 태그로 드롭다운 목록의 시작과 끝을 표시하고 그 안에 태그를 사용해 원하는 항목들을 추가합니다. 드롭다운 리스트 만들기 See the Pen 드롭다운 리스트1 by wjdxo513 (@wjdxo513) on CodePen. 드롭다운 리스트는 위 예제처럼 태그를 사용하여 드롭다운 리스트를 만들고, 태그를 사용하여 드롭다운 리스트 내에 선택할 수 있는 항목들을 만들어주면 됩니다. 여기서 val..
-
Web 2023.04.23 3[Web] 카카오톡 테마 다운받을 수 있는 블로그 URL 모음(2024년) 카카오톡의 테마는 직접 만들 수가 있습니다. 하지만 초보자들이 만드는 것과 전문가들이 만드는 카카오톡 테마의 퀄리티 차이가 아무래도 많이 날 수밖에 없겠죠. 이번 포스팅에서는 카카오톡 테마를 전문적으로 만드는 고수분들의 블로그들을 소개하고자 합니다. 아래에 소개드리는 블로그들을 서핑하시면서 원하는 테마가 있다면 한번 적용해보는 것도 괜찮을 거 같네요. 혹시 카카오톡 테마를 적용시키는 방법에 대해 모르신다면 아래 글을 참고해주세요. [Mobile] 카카오톡 테마 변경 방법 & 테마 추천 카카오톡 테마 다운받을 수 있는 블로그 모음 1. 늘봄님의 블로그 https://pf.kakao.com/_RPjKxb 봄을 그리다 안녕하세요 늘봄입니다 ◡̈ pf.kakao.com 제 취향인 테마들이 많은 블로그입니다. 심..