WEB/HTML
-
2024-03-11 1. 방법 inupt 태그 속성에서 caret-color: transparent; 해당 부분만 추가하면 커서가 블링크 되는 것을 지울 수 있다. caret-color: transparent; 2. 출처 https://stackoverflow.com/questions/9333044/how-to-hide-blinking-cursor-in-input-text
input 태그 커서 없애는 방법 how to remove blinking input?2024-03-11 1. 방법 inupt 태그 속성에서 caret-color: transparent; 해당 부분만 추가하면 커서가 블링크 되는 것을 지울 수 있다. caret-color: transparent; 2. 출처 https://stackoverflow.com/questions/9333044/how-to-hide-blinking-cursor-in-input-text
2024.03.11 -
2024-01-02 1. HTML 2. CSS /* input태그디자인 참고*/ .search_wrap { display: flex; width: 100%; padding: 0.625rem; align-items: center; gap: 0.625rem; border-radius: 0.75rem; border: 1px solid #DBDBDB; background: #FFF; box-sizing: border-box; } .search_txt, /* 여기서 시작 */ input[type="text"].search_txt { border: none; outline: none; color: #353535; /* 입력된 텍스트 색상 */ background: transparent; font-size: inhe..
HTML input 태그 커스텀 디자인 해보기 NO JavaScript!!!2024-01-02 1. HTML 2. CSS /* input태그디자인 참고*/ .search_wrap { display: flex; width: 100%; padding: 0.625rem; align-items: center; gap: 0.625rem; border-radius: 0.75rem; border: 1px solid #DBDBDB; background: #FFF; box-sizing: border-box; } .search_txt, /* 여기서 시작 */ input[type="text"].search_txt { border: none; outline: none; color: #353535; /* 입력된 텍스트 색상 */ background: transparent; font-size: inhe..
2024.03.04 -
2024-01-15 1. css 2. html Fixd AREA long~~~~~~~~ Main AREA 3. JavaScript 메인 이미지 출처 : 사진: Unsplash의Jason Hudson
html 스크롤 시 Fixed 영역 만들기 + resize 이벤트 대응 방법2024-01-15 1. css 2. html Fixd AREA long~~~~~~~~ Main AREA 3. JavaScript 메인 이미지 출처 : 사진: Unsplash의Jason Hudson
2024.01.15 -
2024-01-12 1. 방법 위의 dimensions 와 실제 element 의 최대 넓이가 다른 경우, 기존의 코드의 html 코드는 아래와 같은 형식으로 되어 있을 것이다. 해당 코드에서는 디바이스의 넓이와 페이지 로드시에 초기 줌 레벨에 대한 설정값이 없다. 해당 코드를 추가해 준다. 이 메타 태그는 모바일 브라우저에서 웹 페이지를 올바르게 렌더링한다. width=device-width: 뷰포트의 너비를 디바이스의 실제 너비와 일치시키라는 의미이며, 모바일 기기의 화면 크기에 맞게 웹 페이지가 조절된다. initial-scale=1.0: 페이지가 로드될 때 초기 줌 레벨을 1.0으로 설정한다. 이는 사용자가 페이지를 처음 방문했을 때 기본 확대/축소 레벨을 의미한다. 메인 이미지 출처 : 사진: ..
크롬 개발자 도구의 dimensions 와 html 실제 넓이 차이 해결 meta name="viewport" content="width=device-width, initial-scale=1.0"2024-01-12 1. 방법 위의 dimensions 와 실제 element 의 최대 넓이가 다른 경우, 기존의 코드의 html 코드는 아래와 같은 형식으로 되어 있을 것이다. 해당 코드에서는 디바이스의 넓이와 페이지 로드시에 초기 줌 레벨에 대한 설정값이 없다. 해당 코드를 추가해 준다. 이 메타 태그는 모바일 브라우저에서 웹 페이지를 올바르게 렌더링한다. width=device-width: 뷰포트의 너비를 디바이스의 실제 너비와 일치시키라는 의미이며, 모바일 기기의 화면 크기에 맞게 웹 페이지가 조절된다. initial-scale=1.0: 페이지가 로드될 때 초기 줌 레벨을 1.0으로 설정한다. 이는 사용자가 페이지를 처음 방문했을 때 기본 확대/축소 레벨을 의미한다. 메인 이미지 출처 : 사진: ..
2024.01.12 -
2023-09-08 1. 방법 onError 키워드를 사용하면 현재 리소스가 존재하지 않았을 경우에 노출할 수 있는 이미지를 설정 할 수 있다. 메인 이미지 출처 : 사진: Unsplash의NEOM
[HTML] img 태그 리소스 404 및 불러올 수 없을때 처리방법2023-09-08 1. 방법 onError 키워드를 사용하면 현재 리소스가 존재하지 않았을 경우에 노출할 수 있는 이미지를 설정 할 수 있다. 메인 이미지 출처 : 사진: Unsplash의NEOM
2023.09.08 -
2021-04-18 html 에는 태그 외에도 텍스트에 효과를 주는 태그들이 몇가지 존재하는데 오늘이 이 태그들을 알아보자. - 예제 html 예제에는 기본적으로 div 태그에 폰트사이즈 속성만 부여하였다. Hello World - Hello World strong 기본적으로 텍스트 작업시 자주 쓰는 단축키 ctrl + b 정도로 생각하면 되며, 글자의 기본 굵기가 증가하게된다. Hello World 태그를 써도 보여지는 결과물은 태그와 같다. - Hello World i 태그는 italic 이라는 의미를 가지며, 텍스트에 기울임 효과를 준다. Hello World 태그 역시 기울임 효과를 주며, 보여주는 결과물을 i 태그와 같다. - Hello World small 태그는 말그대로 텍스트의 크기가 ..
[HTML] HTML Text Formatting 태그들 알아보기2021-04-18 html 에는 태그 외에도 텍스트에 효과를 주는 태그들이 몇가지 존재하는데 오늘이 이 태그들을 알아보자. - 예제 html 예제에는 기본적으로 div 태그에 폰트사이즈 속성만 부여하였다. Hello World - Hello World strong 기본적으로 텍스트 작업시 자주 쓰는 단축키 ctrl + b 정도로 생각하면 되며, 글자의 기본 굵기가 증가하게된다. Hello World 태그를 써도 보여지는 결과물은 태그와 같다. - Hello World i 태그는 italic 이라는 의미를 가지며, 텍스트에 기울임 효과를 준다. Hello World 태그 역시 기울임 효과를 주며, 보여주는 결과물을 i 태그와 같다. - Hello World small 태그는 말그대로 텍스트의 크기가 ..
2021.04.18 -
2021-03-25 자신의 사용하고 있는 디렉터리 및 외부 요소를 가져오고자 할 때 link 태그를 사용한다. 주로 외부에 저장되어 있는 css 스타일 시트(stylesheet)를 연결하고자 할때 사용한다. 구체적인 사용법을 알아보도록 하자. - 리소스 css 파일 준비 우선적으로 스타일시트로 사용하고자 하는 css 파일을 만들어주어야 한다. 해당 파일은 어디에 만들어 두었든 크게 상관은 없지만 앞으로 계속해서 사용할 스타일시트 (css)파일이라면 한 곳에 잘 정리해서 두는 것이 좋다. 이후 생성된 파일에 아래와 같은 옵션을 부여해주었다. div태그 중심으로 넓이와 높이 배경색을 지정하였다. @charset "UTF-8"; /* div 태그에 공통된 속성 부여 */ div{ width: 300px; /*..
[HTML] HTML <link> 태그를 통한 리소스 불러오기2021-03-25 자신의 사용하고 있는 디렉터리 및 외부 요소를 가져오고자 할 때 link 태그를 사용한다. 주로 외부에 저장되어 있는 css 스타일 시트(stylesheet)를 연결하고자 할때 사용한다. 구체적인 사용법을 알아보도록 하자. - 리소스 css 파일 준비 우선적으로 스타일시트로 사용하고자 하는 css 파일을 만들어주어야 한다. 해당 파일은 어디에 만들어 두었든 크게 상관은 없지만 앞으로 계속해서 사용할 스타일시트 (css)파일이라면 한 곳에 잘 정리해서 두는 것이 좋다. 이후 생성된 파일에 아래와 같은 옵션을 부여해주었다. div태그 중심으로 넓이와 높이 배경색을 지정하였다. @charset "UTF-8"; /* div 태그에 공통된 속성 부여 */ div{ width: 300px; /*..
2021.03.25 -
2021-03-19 button의 type 크게 3종류로 나누어진다. 종류로는 button / submit / reset 있다 이 세 가지의 버튼 타입의 기능에 대하여 알아보도록 하자. ( 게시글 제일 아래 전체 코드를 같이 올려 두었다.) - button button은 말그대로 클릭을 할 수 있는 버튼이 브라우저 창에 생겨나며, 클릭해도 아무런 기능이 없다. 이와 같은 button은 자바스크립트와 같은 다른 언어의 함수 및 기능을 구현하면, 해당 기능을 실행하기 위한 대상(버튼)의 역할을 한다. 버튼(button) - submit submit은 과 동일한 기능을 수행하며, 서버로 데이터를 전달하는 역할을 하는 타입이다. 참고로 아무런 타입 부여 없이 " 버튼 " 을 설정해도 button의 기본 defa..
[HTML] HTML button 의 type 종류들 (submit/button/reset)2021-03-19 button의 type 크게 3종류로 나누어진다. 종류로는 button / submit / reset 있다 이 세 가지의 버튼 타입의 기능에 대하여 알아보도록 하자. ( 게시글 제일 아래 전체 코드를 같이 올려 두었다.) - button button은 말그대로 클릭을 할 수 있는 버튼이 브라우저 창에 생겨나며, 클릭해도 아무런 기능이 없다. 이와 같은 button은 자바스크립트와 같은 다른 언어의 함수 및 기능을 구현하면, 해당 기능을 실행하기 위한 대상(버튼)의 역할을 한다. 버튼(button) - submit submit은 과 동일한 기능을 수행하며, 서버로 데이터를 전달하는 역할을 하는 타입이다. 참고로 아무런 타입 부여 없이 " 버튼 " 을 설정해도 button의 기본 defa..
2021.03.19 -
2021-03-03 이클립스 사용간 자바 프로젝트와 웹 프로젝트를 번갈아서 만들다 보면, 각 프로젝트 간 인코딩 방식이 상이하여 글자(한글)가 깨지는 현상이 발생하곤 하는데, 이를 해결하는 방법을 알아보자. - 전체 프로젝트 인코딩 방식 설정 1. 상단 메뉴창 Window -> Preferences 클릭 2. General -> Workspace -> Text file encoding Text file encoding에서 자신이 원하는 인코딩 형태를 선택해서 사용하면 된다. (자신의 원하는 타입이 없을 경우 직접 타이핑하여 적어주면 된다. ) - 프로젝트별 인코딩 방식 설정 물론 개별 프로젝트별 인코딩방식을 따로 설정할 수 있다. 1. 프로젝트 우클릭 -> Properties 클릭 2. Resource ..
[HTML] 이클립스 UTF - 8 / EUC-KR 인코딩 변경하는 방법 [한글깨짐해결]2021-03-03 이클립스 사용간 자바 프로젝트와 웹 프로젝트를 번갈아서 만들다 보면, 각 프로젝트 간 인코딩 방식이 상이하여 글자(한글)가 깨지는 현상이 발생하곤 하는데, 이를 해결하는 방법을 알아보자. - 전체 프로젝트 인코딩 방식 설정 1. 상단 메뉴창 Window -> Preferences 클릭 2. General -> Workspace -> Text file encoding Text file encoding에서 자신이 원하는 인코딩 형태를 선택해서 사용하면 된다. (자신의 원하는 타입이 없을 경우 직접 타이핑하여 적어주면 된다. ) - 프로젝트별 인코딩 방식 설정 물론 개별 프로젝트별 인코딩방식을 따로 설정할 수 있다. 1. 프로젝트 우클릭 -> Properties 클릭 2. Resource ..
2021.03.03 -
2020-05-23 우리가 특정 웹사이트를 들어가 정보를 접하게 되면, 아래와 같이 문단과 문장에 끝을 알리는 여백을 손쉽게 볼 수 있는데, 이러한 것을 가능하게 하는 태그가 바로 태그라고 할 수 있습니다. 우선적으로 p태그는 paragraph의 준말로 단락을 나타내는 태그인데, 단락을 표시하고 싶은 곳 앞에 여는 태그 끝나는 곳에 닫는 태그를 해주면 누구나 쉽게 단락을 나눌 수 있게 되는 아주 간편한 태그입니다. -사용법 ex- 2013년 12월, 미국 항공우주국은 허블 우주 망원경의 연구를 바탕으로, 토성의 위성인 엔셀라두스에서 발견된 것과 비슷한 수증기 기둥을 유로파에서 발견했다고 발표했다. [13] 또한, 유로파의 표면에서 유기 물질과 관계가 있는 점토 광물(특히 층상 규산염)이 발견되었다고 발표..
HTML 태그 <p> <br>줄바꾸기 <img>이미지 삽입 <table> 표삽입2020-05-23 우리가 특정 웹사이트를 들어가 정보를 접하게 되면, 아래와 같이 문단과 문장에 끝을 알리는 여백을 손쉽게 볼 수 있는데, 이러한 것을 가능하게 하는 태그가 바로 태그라고 할 수 있습니다. 우선적으로 p태그는 paragraph의 준말로 단락을 나타내는 태그인데, 단락을 표시하고 싶은 곳 앞에 여는 태그 끝나는 곳에 닫는 태그를 해주면 누구나 쉽게 단락을 나눌 수 있게 되는 아주 간편한 태그입니다. -사용법 ex- 2013년 12월, 미국 항공우주국은 허블 우주 망원경의 연구를 바탕으로, 토성의 위성인 엔셀라두스에서 발견된 것과 비슷한 수증기 기둥을 유로파에서 발견했다고 발표했다. [13] 또한, 유로파의 표면에서 유기 물질과 관계가 있는 점토 광물(특히 층상 규산염)이 발견되었다고 발표..
2020.05.23 -
2020-05-21 HTML 또는 하이퍼텍스트 마크업 언어는 웹 페이지를 위한 지배적인 마크업 언어다. 위의 사전 용어만 본다면 해당 용어가 정확히 무엇을 의미하는지 정확히 파악하기에는 조금 어려움이 있는 것 같습니다. 좀 더 쉽게 이해하기 위해서는 HTML을 2가지로 나누어줄 필요가 있습니다. HyperText 하이퍼텍스트는 HTML을 구성하는 핵심적인 부분으로 문서와 문서를 연결해주는 링크라는 의미이며, 쉽게 이야기하자면 네이버 메인 사이트와 뉴스 카테고리 링크의 연결도 하나의 하이퍼 텍스트라고 볼 수 있다! (너와 나의 연결고리ㅎ_ㅎ...) Markup Language 마크업 랭귀지는 웹사이트를 표현하는 언어라고 보면 되는데, 네이버 메인 사이트 내에서 F12를 눌러보면 위와 같이 우측에 나타나게 ..
HTML 기초이론/태그/링크/문법2020-05-21 HTML 또는 하이퍼텍스트 마크업 언어는 웹 페이지를 위한 지배적인 마크업 언어다. 위의 사전 용어만 본다면 해당 용어가 정확히 무엇을 의미하는지 정확히 파악하기에는 조금 어려움이 있는 것 같습니다. 좀 더 쉽게 이해하기 위해서는 HTML을 2가지로 나누어줄 필요가 있습니다. HyperText 하이퍼텍스트는 HTML을 구성하는 핵심적인 부분으로 문서와 문서를 연결해주는 링크라는 의미이며, 쉽게 이야기하자면 네이버 메인 사이트와 뉴스 카테고리 링크의 연결도 하나의 하이퍼 텍스트라고 볼 수 있다! (너와 나의 연결고리ㅎ_ㅎ...) Markup Language 마크업 랭귀지는 웹사이트를 표현하는 언어라고 보면 되는데, 네이버 메인 사이트 내에서 F12를 눌러보면 위와 같이 우측에 나타나게 ..
2020.05.21