쵸코쿠키의 연습장

웹 개발자로서 조금이라도 시간을 보내봤다면, CSS가 축복이자 저주라는 걸 잘 아실 거예요. 푸른 빛에 눈이 시리고, 카페인에 의존한 밤샘 작업, 그리고 무엇보다 고통을 유발하는 구식 CSS 코드들. 그런데 이제 상황이 달라졌어요. CSS가 대규모 업데이트를 받았고, 저는 그걸 전해줄 생각에 너무 설레네요.한번 상상해보세요. 반짝이는 새로운 CSS 로고, 이름도 멋지게 '레베카 퍼플' 색깔로요. 맞아요, 그냥 로고일 뿐일 수도 있지만, 이건 우리가 얘기하려는 놀라운 새로운 기능들을 상징하는 거예요. 마치 CSS가 우리에게 윙크하면서 "사실 난 그렇게 나쁘지 않아"라고 말하는 것 같아요. 그리고 가장 좋은 점은 이 모든 기능이 주요 브라우저에서 이미 지원된다는 거죠. 그러니까 바로 사용할 수 있어요!오늘은..

웹 개발 세계에서는 코드의 일관성이 유지보수성과 가독성 높은 프로젝트를 만드는 데 필수적입니다. 특히 HTML 줄바꿈 태그() 사용에서 일관성이 부족한 경우가 자주 발생합니다. 이는 사소해 보일 수 있지만, 태그의 표준 사용 방식을 확립하면 개발 효율성과 코드 유지보수성에 큰 차이를 만들 수 있습니다. 이 가이드에서는 HTML 줄바꿈 태그 사용의 최적의 방법과 그 변형들, 특정 표준을 채택해야 하는 이유에 대해 다룹니다.   태그 사용의 일반적인 접근 방식HTML 태그, 즉 줄바꿈 태그는 콘텐츠에 줄바꿈을 삽입하는 데 사용됩니다. 이 태그는 자체적으로 닫히며 별도의 닫는 쌍이 없기 때문에 개발자들이 이를 구현하는 방식에 여러 가지 변형이 존재합니다. 아래는 태그를 작성하는 세 가지 일반적인 접근 방..

Java 정적 키워드 Java의 static 키워드는 주로 메모리 관리에 사용됩니다. 변수, 메서드, 블록 및 중첩 클래스를 사용하여 정적 키워드를 적용할 수 있습니다. static 키워드는 클래스의 인스턴스가 아닌 클래스에 속합니다. 정적 선언이 가능한 개념 - 변수(클래스 변수) - 메서드(클래스 메서드) - 블록 - 중첩 클래스 1) Java 정적 변수 변수를 정적 변수로 선언하면 정적 변수라고 합니다. 정적 변수는 직원 회사 이름, 학생 대학 이름 등과 같이 모든 개체의 공통 속성(각 개체마다 고유하지 않음)을 참조하는 데 사용할 수 있습니다. 정적 변수는 클래스 로드 시 클래스 영역에서 한 번만 메모리를 가져옵니다. 정적 변수의 장점입니다. 프로그램 메모리를 효율적으로 만듭니다. 즉, 메모리를 ..

다운로드 속성을 사용하는 HTML5 기능을 살펴 보겠습니다. 다운로드 속성은 링크하는 파일을 다운로드하도록 브라우저에 알리는 방법으로, 미디어 파일 또는 PDF 문서 또는 웹 페이지 등이 될 수 있습니다. 이것은 서버 측 코드와 관련이 있습니다. 예를 들어 force-download.php의 서버 측 파일에 연결하고 다운로드하려는 파일의 인수를 전달합니다. Download Webpage HTML 그런 다음 서버 측에서 요청 된 파일의 내용을 가져와 브라우저가 이와 같은 작업을 수행하여 내용을 다운로드하도록 해야 합니다. function downloadFile($file){ $file_name = $file; $mime = 'application/force-download'; header('Pragma: ..

모든 주요 소셜 네트워크에는 자체 공유 버튼이 있으므로 웹 사이트 방문자가 웹 사이트를 떠나지 않고도 페이지를 쉽게 공유 할 수 있습니다. 이것들은 귀하의 웹 사이트에 추가 된 것이므로 소셜 미디어 네트워크에서 페이지를 공유 할 수있는 능력이 없으면 블로그의 발전이 적어질 것입니다. 소셜 네트워크 공유 버튼의 한 가지 문제점은 웹 사이트에 많은 HTTP 요청을 표시하고 모든 외부 스타일, 이미지, 클릭 이벤트를 로드해야한다는 것입니다. 또한 현재 페이지의 수를 요청하려면 API를 호출해야합니다. 이러한 모든 요청은 시간이 걸리며 페이지 로딩 시간에 영향을 줄 수 있습니다. 링크를 사용하여 Twitter, Facebook, Google+, Linkedin 및 Pinterest를위한 자체 소셜 공유 버튼을 ..

검색 엔진에서 순위가 양호하지만 검색 결과에서 발생하는 트래픽 양이 보이지 않으면 클릭률 개선에 대해 고려해야합니다. 클릭률을 높이기 위해 전통적으로 제목 태그를 개선하거나 메타 태그를 개선 할 수있는 몇 가지 방법이 있습니다. 최근 Google은 클릭률에 도움이되는 몇 가지 기능을 출시했습니다. 이제 Google 인증을 통해 콘텐츠를 Google+ 계정에 연결하여 Google+ 프로필 사진을 검색 결과에 배치 할 수 있습니다. HTML을 변경하면 리치 스니펫이라는 기능을 추가하고 schema.org를 HTML에 배치 할 수 있으므로 검색 결과에 더 많은 정보를 배치 할 수 있습니다. Schema.org를 사용하면 다음과 같은 다양한 유형이 있는 페이지에서 정보를 정의 할 수 있습니다. Movies Bo..

대부분의 사람들은 응용 프로그램에서 jQuery 라이브러리 jQuery UI를 사용하므로 colour picker, sliders, accodrions, dialog boxes, menus, progress bars로 구성된 유용한 요소에 액세스 할 수 있습니다. jQuery UI 라이브러리에 있는 가장 유용한 요소 중 하나는 자동 완성 요소입니다. jQuery UI 자동 완성 기능은 자동 완성 텍스트 상자에 텍스트를 입력 할 때 검색되는 여러 옵션으로 채울 수 있는 Javascript 객체를 먼저 생성하여 작동합니다. Tags: HTML5와 함께 제공되는 많은 새로운 기능이 대부분 추가 Javascript API를 사용하고 다른 기능은 양식 유효성 검증과 같은 Javascript를 사용하는 기존 기능을..

Facebook과 같은 소셜 네트워크에서 게시물을 공유하면 공유중인 URL을 스캔하고 특정 정보를 반환하여 피드에 페이지를 표시합니다. Facebook은 페이지 제목, 페이지 설명 및 페이지 축소판 이미지를 받습니다. open graph meta tags를 사용하여 Facebook이 얻는 정보를 변경할 수 있습니다. 이들은 단순히 페이지의 헤드 태그에 추가 할 수 있는 메타 태그이며, Facebook에서 페이지를 스캔하여 제목, 설명 및 이미지를 검색 할 때 해당 태그를 검색 할 경우 태그의 내용을 대신 사용합니다. 페이지 제목 즉, Facebook에 대해서만 페이지 제목을 완전히 사용자 정의 할 수 있습니다. Twitter에는 Twitter에서 메시지를 사용자 정의하는 데 사용할 수있는 메타 태그도 있..

체크박스의 문제는 선택하지 않으면 form과 함께 post되지 않는다는 것입니다. 체크박스를 선택하고 form을 게시하면 $ _POST 변수에 체크박스의 값이 표시되며, 이 확인란을 선택 취소하면 $ _POST 변수에 값이 추가되지 않습니다. PHP에서는 일반적으로 체크박스 요소에서 isset () 검사를 수행하여 이 문제를 해결할 수 있습니다. 예상한 요소가 $ _POST 변수에 설정되어 있지 않으면 확인란이 선택되어 있지 않으며 값이 false 일 수 있습니다. if(!isset($_POST['checkbox1'])) { $checkboxValue = false; } else { $checkboxValue = $_POST['checkbox1']; } 그러나 동적 양식을 만든 경우 체크박스의 이름 속성..

새로운 웹 디자인 작업을 할 때 고려해야 할 사항 중 하나는 반응 형 디자인입니다. 만들려는 웹 사이트가 반응형 디자인이 필요할 수 있습니다. 모든 외부 사이트는 반응형 디자인을 고려해야한다고 생각합니다. 모바일 장치 사용자가 원하는 것을 확대하여 볼 수 있기 때문에 반응형 디자인이 가치가 없다고 생각하는 사람들이 있지만 개발자가 모든 장치에서 웹 사이트를 쉽게 사용할 수 있어야 한다고 생각합니다. 반응형 디자인이란 반응형 디자인은 웹 사이트 디자인이 보고있는 장치의 너비와 높이에 적응할 수 있는 경우입니다. 반응형 디자인은 CSS 파일에서 미디어 쿼리를 사용하여 설정 한 특정 중단 점에 따라 HTML 요소의 스타일을 변경하여 수행됩니다. 일부 요소에 간단한 너비 : 100 % 만 추가하면 모바일 장치에..

HTML5 속성에 placeholder와 같이 HTML5와 함께 제공되는 많은 추가 기능이 있으며 필수 기능입니다. Hidden 속성 Hidden 속성은 이 속성이 있는 요소를 숨기는 모든 요소에 사용할 수 있습니다. 사용 방법은 다음과 같습니다. display: none; 차이점은 디스플레이로 요소를 스타일링하는 것보다 요소에 숨겨진 속성을 배치하는 것이 더 의미가 있다는 것입니다. 브라우저가 HTML5 Hidden 속성을 지원하지 않으면 CSS 파일에서 대체해서 사용할 수 있습니다. *[hidden] { display: none; } Spellcheck 속성 맞춤법 검사 속성은 사용자가 텍스트 상자나 텍스트 영역 안에 입력한 텍스트의 클라이언트 쪽 맞춤법 검사를 수행합니다. 현재 맞춤법 검사는 다음에..

일반적으로 전화 번호는 방문자에게 상호 작용을 제공하지 않는 정적 숫자 텍스트로 웹 페이지에 추가됩니다. 점점 더 많은 사람들이 휴대 전화에서 인터넷을 사용하면서 전화 번호를 클릭 가능한 영역으로 변경하여 휴대 전화에서 직접 전화 번호로 전화를 걸 차례입니다. 휴대 전화에서 여러 웹 페이지로 전화를 걸려면 전화 번호를 복사하여 휴대 전화에 붙여 넣어 다이얼해야합니다. 이 새로운 기능을 사용하면 이메일과 마찬가지로 전화 번호 링크를 통해 전화를 걸 수 있습니다. 방문자가 웹 페이지에서 직접 이메일을 보내도록하려면 페이지에 링크를 만들고 href :에서 mailto :를 사용하십시오. Example Email 이 링크를 클릭하면 기본 메일 클라이언트가 열리고 전자 메일 주소로 채워진받는 사람 주소가 href..

HTML5는 새로운 것이 아니며 모든 사람들이 들어 보았지만 사람들이 모르는 HTML5의 일부 기능이 있습니다. 대부분의 사람들은 모든 HTML5가 문서에서 사용할 수 있는 header, footer, nav, article, section과 같은 태그라고 생각하지만 많은 사람들은 개발자가 사용할 수 있는 멋진 새 기능 중 일부를 알지 못합니다. Geolocation API HTML5 Details Tag HTML5 Form features HTML5 Form Validation HTML5 Placeholders notification API라는 HTML5의 새로운 기능을 살펴 보겠습니다. Gmail 탭이 열려있는 경우 이 기능을 가장 많이 사용하는 것은 Gmail에서 새 이메일을 알리는 것입니다. 화면..

Pinterest는 소셜 미디어 세계에서 가장 최신의 사이트이며, 이 사이트는 이미지 공유 소셜 네트워크입니다. 사용자가 모든 웹 사이트에서 이미지를 고정하여 팔로어와 공유 할 수 있습니다. Pinterest의 저작권 문제에 대해 많은 이야기가 있었습니다. 예를 들어 사진 작가는 이제 인터넷을 통해 이미지를 공유 할 수 있습니다. 이미지 마케팅에 유용하지만 Pinterest에서 공유하고 싶지 않은 이미지가 있는 경우 어떻게해야 할까요? Pinterest에서 이미지를 공유하고 싶지 않을 때 공유되는 이미지에 대해 불평하기 시작한 일부 사용자는 이러한 이유로 Pinterest는 사용자가 사이트에서 이미지를 가져가지 못하도록 메타 태그를 만들었습니다. Pinterest 사용자가 귀하의 콘텐츠를 가져가지 못하게..

Geolocation API를 사용하여 현재 위도 및 경도를 얻는 방법을 배우고 이 결과에서 Google Maps API에 연결하여 브라우저에 위치를 표시 할 수 있습니다. The Geolocation API Geolocation API는 방문자의 위치 정보를 얻는 데 사용되는 인터페이스를 정의합니다. 이 인터페이스에서 현재 방문자의 위도와 경도를 반환 할 수 있습니다. 위치의 일반적인 출처는 GPS 또는 IP 주소입니다. 이 API는 방문자의 현재 위치를 표시하므로 개인 정보 보호 문제가 될 수 있으므로 이 API는 방문자의 권한으로만 작동합니다. Geolocation API Browser Support 지리적 위치는 다음 브라우저에서 지원됩니다. Google Chrome Firefox 3.5 and ..

HTML5와 함께 제공되는 새로운 기능 중 일부에 대해 알아보았습니다. HTML5 Form 및 HTML5 placeholders와 함께 몇 가지 새로운 기능을 살펴 보았습니다. 오늘의 튜토리얼에서는 Details라는 또 다른 HTML5 태그를 조사 할 것입니다. 세부 정보 태그는 클릭을 쉽게 구현하여 더 많은 기능을 표시하는 데 사용됩니다. 태그 안에 제목과 내용을 추가 할 수 있으며, 사용자가 제목을 클릭 할 때까지 내용이 숨겨지고 내용이 표시됩니다. 제목을 클릭하면 토글에서 작동하므로 내용이 다시 숨겨집니다. 이 포스팅에서는 HTML5에서 이 기능을 사용하는 것이 얼마나 쉬운 지, jQuery를 사용하여 다시 작성하는 방법에 대해 학습합니다. detalis 태그에는 클릭하면 나머지 내용이 표시되는 제..

Favicon이란? favicon('즐겨찾기 아이콘'의 줄임말)은 대부분의 브라우저의 URL 표시줄에 있는 사이트 이름 옆에 있는 특정 웹 사이트와 연결된 작은 아이콘입니다. 웹 사이트를 쉽게 알 수 있도록 브라우저의 탭에도 나타납니다. Gravatar 그라바타(Gravatar)는 다른 사이트로 이동하는 이미지이며, 이름 옆에 이미지로 나타날 것입니다. 만약 블로그에 댓글을 달면, 그들은 그라바타를 사용하여 개인화된 이미지를 보여줄 수 있을 것입니다. 그라바타는 사람들이 여러분의 이미지에 익숙해지도록 도와줍니다. 그라바타르는 이메일 주소에 연결되어 있기 때문에 만약 다른 블로그에서 같은 이메일 주소를 사용한다면 같은 그라바타를 갖게 될 것입니다. 텀블러 블로그에서 그라바타를 favicon으로 사용할 것입..

HTML5를 사용한 오디오와 비디오 임베딩 등 HTML5와 함께 제공되는 새로운 기능들을 놓쳤는데, 가장 흥미롭게 생각하는 기능 중 하나는 새로운 HTML5 form 기능입니다. HTML5에는 양식과 관련된 많은 새로운 것들이 함께 제공됩니다. Javascript와 양식, 대부분의 작업을 HTML5로 수행할 수 있습니다. 이제 검증, 날짜 선택기, 슬라이더, 색상 선택기 등을 쉽게 추가할 수 있습니다. HTML5 양식과 함께 새로운 입력 유형이 함께 제공됩니다. 이전 HTML에서는 텍스트, 확인란, 라디오, 단추 및 제출과 같은 정보를 얻을 수 있습니다. 하지만 이제 입력 유형이 더 많아졌습니다. 새로운 입력 유형에는 다음이 포함됩니다. 웹 사이트의 검색 필드에서 사용된 search는 표준 텍스트 입력 ..

HTML5란 무엇인가?라는 기사에서 HTML5와 함께 제공되는 새로운 기능들을 몇 가지 언급했습니다. HTML5의 장점 중 하나는 HTML form의 기능입니다. HTML5의 이점은 HTML form에 JavaScript를 추가할 필요가 없다는 것입니다. 일반적으로 HTML form에는 항상 수행해야 하는 많은 작업이 있습니다. 주요 내용은 항상 유효성 검사 양식에는 항상 클라이언트 쪽 유효성 검사가 있어야 하지만 다른 form에는 날짜 선택기와 placeholders가 있습니다. Placeholders는 HTML5에서 매우 유용한 기능입니다. 이 특성은 기본 텍스트가 비어 있을 때 양식 입력에 표시되지만 포커스가 제거되는 속성입니다. 이 기능은 이전 HTML에서 JavaScript를 사용하여 수동으로 ..

HTML5는 HTML의 다음 버전입니다. HTML을 더욱 쉽게 만들 새로운 기능들을 소개할 것입니다. 웹 사이트 레이아웃을 코더와 검색 엔진 모두에 보다 명확하게 해주는 기능을 도입하는 것입니다. header, footer, nav, article 태그 때문에 검색 엔진에 도움이 될 수 있습니다. 웹 사이트의 주요 영역을 정의하는 새로 도입된 태그입니다. 검색 엔진에 사이트를 탐색하기 위해 Navigation이 링크를 보유할 수 있는 경우, 검색 엔진은 이 섹션의 모든 링크를 사용할 수 있습니다. Content가 페이지에서 가장 중요한 부분이기 때문에 article 태그가 가장 중요한 태그일 수 있습니다. 검색 엔진에서 이 영역이 모든 콘텐츠의 location임을 알 수 있습니다. HTML5에 포함된 새..