HTML5 React에서 행 수 가변 textarea를 만든 이야기 내용에 따라 높이가 바뀌는 textarea가 생겼다. Copipe, 여러 줄을 함께 삭제해도 괜찮습니다. 가볍게 검색해도 나오지 않았기 때문에 비슷한 것을 하고 싶은 사람이나 미래의 자신을 위해서 써 보았습니다 react:15.6.2 redux-form:6.8.0 lodash.isempty:4.4.0 솔직히 react만으로도 괜찮을 것입니다. 폐지되는 라이프 사이클 메소드 등도 사용하고 있지... HTML5ReactJSXredux-form fontawesome을 바삭하게 짜넣기 위한 라이브러리 「wonderful.js」를 만들어 보았다 체크 박스나 라디오 버튼을 간편하게(세련되게) 편입할 수 없는가 생각했을 때, → Jquery 의존적이거나 한다 → 코피페라고 해도 힘든 .. fontawesome은 아이콘 포함에 뭔가 사용되는 것이 많다고 생각합니다. 다만, free판에도 체크 박스의 아이콘도 존재하기 때문에 조합해 사용해 간편하게 실장과 가자고 할까라고 생각했습니다. 덧붙여서, checkbox의 의사 요소(before)를... library자바스크립트FontAwesomeCSS3HTML5 【Rails】 form_with를 Slim으로 쓰고 CheckBox를 가로로 정렬했습니다. 소개 Rails에서 템플릿에 slim을 사용한 form_with의 구현으로 약간 고전했으므로, 정리해 보았습니다! 이번에는 CSS 프레임 워크에 Spectre를 사용하고 있습니다. (Bootstrap에서도 똑같이 할 수 있다고 생각합니다.) Slim에 좀처럼 익숙하지 않습니다 ... 환경 Ruby 2.6.3 Rails 5.2.3 일반 form_with를 작성하는 방법 hoge.html.sli... SpectreRails5슬림HTML5루비 Thymeleaf로 개발하는 동안 HTML의 th 속성에 warning이 붙어 버린다 eclipse나 STS로 Spring boot+Thymeleaf로 개발하고 있을 때, HTML내의 th속성에 warning이 붙어서 귀찮다. Spring Tool Suite 3 html 속성에 xmlns:th="http://www.thymeleaf.org"를 쓰는 것을 잊어 버렸습니다. sample.html HTML 태그의 xmlns 속성을 작성하여 th 속성이 있음을 편집기에 알립니다. s... STSHTML5Thymeleaf input[type="date"]를 Selenium으로 조작할 때의 주의점 <input type="date"/> 의 입력을 Selenium Webdriver의 send_keys 에서 입력하려고 했는데, 의도하지 않은 값이 입력되었으므로 자세히 조사해 보았습니다. 그래서 이하, 3개의 대처 방법을 생각했습니다. 1. 입력값을 <input type="date"/> 의 사양에 대응한 값으로 한다 3. input 태그에 max 속성을 추가한다. 입력을 받아들이는 날짜를 기... Chrome셀레늄selenium-webdriverHTML5루비 Pug에서 HTML 태그를 포함하는 문자열을 변수 확장하고 싶습니다. 실패 예 #{} 를 사용하면 잘 안된다. sample.pug 컴파일 해 보면,,, sample.html #{} 기법은 특수 문자를 이스케이프 처리하고 나서 출력하기 (위해)때문에, 이러한 결과가 됩니다. 성공 예 여기서는 이스케이프하지 않고 HTML 태그로 출력하고 싶으므로 !{} 를 사용하여 이스케이프하지 않고 출력시킵니다. sample.pug sample.html 잘 갔다... pugHTML5 Pug 초학자의 비망록 : 루프편 Pug 초학자의 비망록입니다. 점점 추기해 갑니다. 완성 이미지 ↑와 같이 루프로 li.item 를 생성하면서, 각각에 i1 , i2 , i3 … 와 번호 첨부의 클래스명을 할당하고 싶을 때에. index.pug 더 똑똑한 쓰기가있을 것 같은 느낌 ... 완성 이미지 일반적인 메뉴 목록을 만들 때. index.pug 잘 다룰 수 있으면 즐거워 보인다! 계속 공부하겠습니다.... HTMLpugHTML5초보자 [HTML/CSS/jQuery] 스크롤하면 마커가 끌리는 애니메이션___φ(.. ) 스크롤로 마커가 끌려가는 애니메이션을 배웠기 때문에 정리. JavaScript(jQery)로 동적으로 변경하는 스타일은 SMACSS(스맥스)의 스테이트 클래스를 사용 is- 접두사를 부여. 마커 부분은 요소의 background background 가 움직여 마커가 찢어진 것처럼 보이는 구조이다. 1. 요소의 배경을 그라데이션(linear-gradient)으로 왼쪽 절반을 투명, 오른쪽 절반... 애니메이션스크롤jQueryCSS3HTML5 【Web 크리에이터 능력 인정 시험(전문가)】 합격 체험기 결과는 약 2주 후에 발표되었고 무사히 통과했습니다! 간단히 설명하면 주로 HTML, CSS의 지식 문제와 실기가 묻는 시험이 되고 있습니다. 합격률은 89.9%(2018년도 평균 합격률)이므로, 노력하면 합격할 수 있는 라인입니다! 결과는 약 90%의 점수율이었다! 2019년 7월～현재:web어플리케이션의 운용 보수를 담당(주된 언어는 Java) 2020년 12월～현재:kintone의 커스... CSSHTML5초보자웹 크리에이터 능력 인증 시험 【form_with】text_area의 입력 내용의 「개행」을 반영시킨다 form_with를 사용해 제출 폼을 구현해, 입력 내용에 개행을 넣어도, 개행은 반영되지 않는다. (간단한 메모 앱을 예로 한다) new.html.erb show.html.erb · 투고 작성 화면 표시 ↓ 폼의 내용을 송신하면 「개행」이 반영되어 있지 않다. · 투고 화면 표시 form_with로 제출하는 폼내의 「개행」을 반영시킨다. (개행판) 투고 화면 표시 show.html.erb의... HTML5Rails6루비프로그래밍 초보자 HTML의 기본을 알자 (4) HTML에는 태그라는 것이 존재합니다 (예) , 등. 하나씩 설명합니다. <html> 우선 입니다. 이것은 HTML 문서임을 선언할 때 사용합니다. 보통, 맨 밖에 이 태그가 옵니다. <head> 에는 그 문서가 어떤 것인지를 나타내는 것을 안에 넣습니다. 안으로 들어갑니다. <body> 요소에는 주로 보이는 문장을 씁니다. 안으로 들어갑니다. <!DOCTYPE html> 잊었어요. 중요합니... HTML5 HTML의 기본을 알자 (3) javascript로 계산기를 만들어갑니다. index.html See the Pen by totoa553 ( ) 실행해 보세요. 움직였니? github는 이러한 대단한 계산기도 있습니다. 링크를 올려 둡니다. 이번에는 계산기를 만들 수있었습니다. ← →... HTML5자바스크립트계산기 HTML의 기본을 알자 (2) 이번에는 Javascript로, 같은 것을 표시해 봅시다. 코드입니다. index.html See the Pen by totoa553 ( ) *일순 알림이 나옵니다. 페이지를 다시 로드해 보세요. 저장하고 실행해 보세요. 잘 했니? 이번에는 이것으로 끝입니다. ← →... HTML5자바스크립트 HTML의 기초를 알자 (1) HTML이란 Hyper Text Markup Language의 약자로 브라우저 등이 있으면 실행할 수 있습니다. 이번에는 Windows에서 개발하겠습니다. · Windows 표준 텍스트 편집기 (메모장) · Microsoft Edge (Google Chrome에서도 가능) 우선은, 정평의 「Hello World」를 표시해 봅시다. 메모장을 엽니다. index.html 이 코드를 복사하십시오.... HTML5 input type="file"의 accept 속성을 꽤 사용할 수 있다 오랜만의 투고가 되어 버렸습니다. <input type="file"> 에 accept 속성이라고 하는 것이 존재하는 것 같다. 확장자 또는 MIME을 설정하여 선택할 수 있는 파일 형식을 제한할 수 있습니다. 이런 느낌으로 복수 지정을 할 수 있습니다 나는 지금까지 거의 이것을 사용하지 않는다. 이 경우, 이런 느낌으로 이미지 파일 이외는 그레이 아웃되었습니다.... HTMLHTML5 🔰 "HTML에 부트 스트랩을 통합 한 후 CSS가 반영되지 않음"오류 해결 오늘 공부할 때 발생한 오류 기록입니다. <내용> html에 Bootstrap을 통합하는 중 <hr>,<h1> css가 반영되지 않는 오류가 발생했습니다. index.html style.css <확인 사항 1> 개발자 도구 확인 <확인 사항 2> 코드의 맞춤법 오류 확인 문제가 없으므로 Google 검색을 실시했습니다. <검색 결과> 부트 스트랩과 CSS 파일이 싸우고 있었기 때문인 것 같습... HTMLCSSHTML5Bootstrap PHP 페이지 전환으로 태그를 하나로 결합하는 방법 수고하셨습니다! TaY입니다 지금 PHP로 EC 사이트를 제작 중이며 상품 목록 페이지에서 편집, 삭제, 추가 등을 할 수 있는 버튼을 설치하고 있습니다. ↑이런 느낌 일반적으로 버튼을 사용하는 경우 버튼 당 하나의 form 태그가 클래식이지만 이러한 방식으로 버튼을 추가하면 매번 form 태그를 붙여야합니다. sample_1.html 번거롭고 코드도 엉망이 되어 보기 어렵습니다. 거기서, ... HTML5PHP ⚠️ IE11에서 비디오 요소에 초점을 맞추면 동영상이 사라지고 보이지 않습니다. IE11에서 video 요소에 초점을 맞추면 동영상이 보이지 않습니다. CSS outline 속성 때문에 outline 속성 이외의 포커스 링을 표현하기 위해서 샘플 HTML 성공적으로 재생할 수 있는 video 요소가 있습니다. 이것에 초점을 맞추면 ... 이렇게 동영상이 새하얗게 됩니다. 재생이 중지되었거나 시작된 경우에도 마찬가지입니다. 원인은 outline 프로퍼티가 맞고 있는 것에 ... CSSHTML5IE11 이미지 클릭 시 양식 늘리기 본 기사의 내용은 학습의 비망록입니다. 이미지를 클릭하여 양식의 입력 태그를 늘립니다. input 태그의 id, placeholder의 번호를 일련번호로 한다. css는 생략 우선 HTML로 양식 작성 중요한 JS 부분.... HTML5자바스크립트 텍스트 영역의 문자열을 대체하여 원하는 모양으로 처리 본업에서 광고 운용을 하면서 공부로 프로그래밍을 하고 있습니다. indeed로 운용할 때 일부 수작업이 번거롭다고 느꼈기 때문에, 아웃풋도 겸해 자동화해 보았습니다. indeed에서 광고를 운영하는 경우 어떤 직업을 계정에 연결할지 설정해야 합니다. 아무것도 설정하지 않으면 공개하고 있는 구인 모두가 대상이 됩니다. 그냥 대부분의 기업에서 요청이 있습니다. 그때 의뢰되는 구인수가 많으면 수작... CSSHTML5자바스크립트jQuery Web Video Player, VideoJS 소개 VideoJS는 웹상의 비디오 플레이어입니다. 공식 사이트: OSS Repository: 공식 사이트에 따라 450,000 사이트 이상이 이용되고 있습니다. 이 기사를 기록할 때는 VideoJS의 Github에서는 30.1KStar를 가지고, 다른 플레이어에 비하면 가장 많다고 볼 수 있습니다. 확실히, HTML5에는 <video> 태그가 추가되어, 그것을 사용하면 좋을 것이라고 하는 과제가... HTML5VideoJS 드래그로 이동할 수 있는 dialog 태그를 싹둑 만들기 <dialog> : 대화 요소 - MDN web docs 제대로 움직이는 것은 Chrome과 Chrome 기반 Edge뿐입니다. 사용은 어렵지만, 사내 시스템 등에서 사용하는 분에는 좋을까-라는 느낌이군요. dialog要素 는 기본적으로 숨겨집니다. 화면에는 show 버튼 밖에 표시되지 않네요. dialog要素는 js와 함께 사용되며 dialog要素.showModal()로 표시 할 수 있습니... CSSHTML5자바스크립트 【초학자용】 인라인 요소와 블록 요소를 이해하여 깨끗한 네비게이션 바를 작성한다. 네비게이션 바를 작성할 때, 각 요소의 종류를 이해하지 못했기 때문에 작성에 어려웠기 때문에 초학자용으로 조금 정리해 보았습니다. 아마 여기저기서 넘어지는 사람도 있을까 생각하기 때문에, 조력이 되면 다행입니다. ※뭔가 책이라든가를 바탕으로 만든 것은 아니기 때문에 잘못되었을 가능성도 있습니다. li의 호버 액션 자체는 할 수 있었지만, 중요한 링크가 나오지 않는다・・・ 예, 이것은 태그의 ... CSSHTML5 개인 귀여운 CSS font-family 랭킹 발표 개인적으로 귀엽다고 생각하는 CSS의 font-family의 일본어 랭킹을 발표합니다! 자작의 웹 사이트를 만들기에 있어서 문자를 귀엽게 하고 싶었기 때문에 조사해 보았습니다. 글꼴을 지정하는 속성입니다. 지정한 폰트는 브라우저가 동작하고 있는 환경에 인스톨 되고 있는 것이 사용되기 (위해)때문에, 지정한 폰트를 반드시 사용할 수 있는 것은 아니다. 여러 글꼴을 지정할 수 있습니다. 이 때 ... 글꼴CSS초보자font-familyHTML5 【HTML】video 태그로 동영상 퍼가기 이미지적으로는 img 태그로 이미지를 취급하는 것 같은 느낌입니다. video 태그로 HTML에 동영상을 삽입하는 경우에는, 예를 들면 다음과 같이 기술합니다. index.html 소스 태그를 사용하면 브라우저에서 재생할 동영상을 제시할 수 있습니다. 또한 source 태그에서는 형식이 다른 동영상 데이터를 여러 개 지정할 수 있습니다. 이렇게하면 브라우저가 설명 된 순서대로 재생 가능한 데... HTMLHTML5 background-image에 레이어를 겹치는 방법에 대해. WEB 사이트의 코팅을 하고 있으면, 「background-image에 레이어를 거듭한다」라고 잘 합니다. 뭐였지」라고 생각하거나 하고 시간을 걸려 버리므로 이 마음에 정리해 보았습니다. 조사해 보면 몇 가지 방법이 있습니다. ① 부모 요소에 background-image, 자식 요소에 레이어 ② linear-gradient 사용 ③ position을 사용하여 두 요소를 겹쳐 대체로 이 패턴... CSSHTML5 【CSS】화면 가득 배경색을 붙인다 기본적인 이야기입니다만, 잊기 쉽기 때문에 메모해 둡니다. HTML CSS 표시 확인 준비 완료입니다. 그럼 보자. 간단하게 화면 전체에 배경색을 붙이고 싶은 경우는 body에 배경색을 지정하면 됩니다. body 태그 안에 문자나 이미지 등의 요소를 기술하는 것으로 브라우저상에 표시할 수 있습니다만,body 자체에 배경색을 지정하는 것으로 화면 전체에 색을 붙일 수가 있습니다. 표시 확인 c... CSSHTML5 채팅 앱을 만들었습니다. 웹 앱 연습으로 채팅 앱을 만들어 보았습니다. 로그인제 앱 비밀번호가 해시되어 DB로 관리 세션을 사용한 로그인 관리 기능 계정 생성 기능 메시지 게시 기능 게시물 내용을 DB에 저장 XSS 대책 이스케이프 처리 이미지 투고 기능 이미지를 바이트 배열로 변환하고 저장하고 경량화 입력 체크 기능 로그인 시 계정을 만들 때 메시지 게시시 메시지 삭제 및 편집 기능 (사용자 관점에서 DB에 저장된... MySQL자바스크립트JavaEEHTML5자바 HTML에서 JavaScirpt의 window.alert() 함수를 사용하는 방법 이 기사에서는 이것을 만드는 방법을 소개합니다. 이 사이트의 정보는 우연히 내가 이전 사이트로 돌아갈 수있는 버튼의 소스 코드를 응용하여 발견 한 방법이므로 자세한 것은 모릅니다. 그 때문에 어디까지나 방법만을 본 기사에서는 소개하겠습니다. 덧붙여 이 방법은 아마 추천되어 있지 않은 방법입니다. 미리 승낙 후 사용해 주세요. 방법은 간단합니다. <a href="javascript:alert(... HTML5자바스크립트a 태그버튼 이전 기사 보기
React에서 행 수 가변 textarea를 만든 이야기 내용에 따라 높이가 바뀌는 textarea가 생겼다. Copipe, 여러 줄을 함께 삭제해도 괜찮습니다. 가볍게 검색해도 나오지 않았기 때문에 비슷한 것을 하고 싶은 사람이나 미래의 자신을 위해서 써 보았습니다 react:15.6.2 redux-form:6.8.0 lodash.isempty:4.4.0 솔직히 react만으로도 괜찮을 것입니다. 폐지되는 라이프 사이클 메소드 등도 사용하고 있지... HTML5ReactJSXredux-form fontawesome을 바삭하게 짜넣기 위한 라이브러리 「wonderful.js」를 만들어 보았다 체크 박스나 라디오 버튼을 간편하게(세련되게) 편입할 수 없는가 생각했을 때, → Jquery 의존적이거나 한다 → 코피페라고 해도 힘든 .. fontawesome은 아이콘 포함에 뭔가 사용되는 것이 많다고 생각합니다. 다만, free판에도 체크 박스의 아이콘도 존재하기 때문에 조합해 사용해 간편하게 실장과 가자고 할까라고 생각했습니다. 덧붙여서, checkbox의 의사 요소(before)를... library자바스크립트FontAwesomeCSS3HTML5 【Rails】 form_with를 Slim으로 쓰고 CheckBox를 가로로 정렬했습니다. 소개 Rails에서 템플릿에 slim을 사용한 form_with의 구현으로 약간 고전했으므로, 정리해 보았습니다! 이번에는 CSS 프레임 워크에 Spectre를 사용하고 있습니다. (Bootstrap에서도 똑같이 할 수 있다고 생각합니다.) Slim에 좀처럼 익숙하지 않습니다 ... 환경 Ruby 2.6.3 Rails 5.2.3 일반 form_with를 작성하는 방법 hoge.html.sli... SpectreRails5슬림HTML5루비 Thymeleaf로 개발하는 동안 HTML의 th 속성에 warning이 붙어 버린다 eclipse나 STS로 Spring boot+Thymeleaf로 개발하고 있을 때, HTML내의 th속성에 warning이 붙어서 귀찮다. Spring Tool Suite 3 html 속성에 xmlns:th="http://www.thymeleaf.org"를 쓰는 것을 잊어 버렸습니다. sample.html HTML 태그의 xmlns 속성을 작성하여 th 속성이 있음을 편집기에 알립니다. s... STSHTML5Thymeleaf input[type="date"]를 Selenium으로 조작할 때의 주의점 <input type="date"/> 의 입력을 Selenium Webdriver의 send_keys 에서 입력하려고 했는데, 의도하지 않은 값이 입력되었으므로 자세히 조사해 보았습니다. 그래서 이하, 3개의 대처 방법을 생각했습니다. 1. 입력값을 <input type="date"/> 의 사양에 대응한 값으로 한다 3. input 태그에 max 속성을 추가한다. 입력을 받아들이는 날짜를 기... Chrome셀레늄selenium-webdriverHTML5루비 Pug에서 HTML 태그를 포함하는 문자열을 변수 확장하고 싶습니다. 실패 예 #{} 를 사용하면 잘 안된다. sample.pug 컴파일 해 보면,,, sample.html #{} 기법은 특수 문자를 이스케이프 처리하고 나서 출력하기 (위해)때문에, 이러한 결과가 됩니다. 성공 예 여기서는 이스케이프하지 않고 HTML 태그로 출력하고 싶으므로 !{} 를 사용하여 이스케이프하지 않고 출력시킵니다. sample.pug sample.html 잘 갔다... pugHTML5 Pug 초학자의 비망록 : 루프편 Pug 초학자의 비망록입니다. 점점 추기해 갑니다. 완성 이미지 ↑와 같이 루프로 li.item 를 생성하면서, 각각에 i1 , i2 , i3 … 와 번호 첨부의 클래스명을 할당하고 싶을 때에. index.pug 더 똑똑한 쓰기가있을 것 같은 느낌 ... 완성 이미지 일반적인 메뉴 목록을 만들 때. index.pug 잘 다룰 수 있으면 즐거워 보인다! 계속 공부하겠습니다.... HTMLpugHTML5초보자 [HTML/CSS/jQuery] 스크롤하면 마커가 끌리는 애니메이션___φ(.. ) 스크롤로 마커가 끌려가는 애니메이션을 배웠기 때문에 정리. JavaScript(jQery)로 동적으로 변경하는 스타일은 SMACSS(스맥스)의 스테이트 클래스를 사용 is- 접두사를 부여. 마커 부분은 요소의 background background 가 움직여 마커가 찢어진 것처럼 보이는 구조이다. 1. 요소의 배경을 그라데이션(linear-gradient)으로 왼쪽 절반을 투명, 오른쪽 절반... 애니메이션스크롤jQueryCSS3HTML5 【Web 크리에이터 능력 인정 시험(전문가)】 합격 체험기 결과는 약 2주 후에 발표되었고 무사히 통과했습니다! 간단히 설명하면 주로 HTML, CSS의 지식 문제와 실기가 묻는 시험이 되고 있습니다. 합격률은 89.9%(2018년도 평균 합격률)이므로, 노력하면 합격할 수 있는 라인입니다! 결과는 약 90%의 점수율이었다! 2019년 7월～현재:web어플리케이션의 운용 보수를 담당(주된 언어는 Java) 2020년 12월～현재:kintone의 커스... CSSHTML5초보자웹 크리에이터 능력 인증 시험 【form_with】text_area의 입력 내용의 「개행」을 반영시킨다 form_with를 사용해 제출 폼을 구현해, 입력 내용에 개행을 넣어도, 개행은 반영되지 않는다. (간단한 메모 앱을 예로 한다) new.html.erb show.html.erb · 투고 작성 화면 표시 ↓ 폼의 내용을 송신하면 「개행」이 반영되어 있지 않다. · 투고 화면 표시 form_with로 제출하는 폼내의 「개행」을 반영시킨다. (개행판) 투고 화면 표시 show.html.erb의... HTML5Rails6루비프로그래밍 초보자 HTML의 기본을 알자 (4) HTML에는 태그라는 것이 존재합니다 (예) , 등. 하나씩 설명합니다. <html> 우선 입니다. 이것은 HTML 문서임을 선언할 때 사용합니다. 보통, 맨 밖에 이 태그가 옵니다. <head> 에는 그 문서가 어떤 것인지를 나타내는 것을 안에 넣습니다. 안으로 들어갑니다. <body> 요소에는 주로 보이는 문장을 씁니다. 안으로 들어갑니다. <!DOCTYPE html> 잊었어요. 중요합니... HTML5 HTML의 기본을 알자 (3) javascript로 계산기를 만들어갑니다. index.html See the Pen by totoa553 ( ) 실행해 보세요. 움직였니? github는 이러한 대단한 계산기도 있습니다. 링크를 올려 둡니다. 이번에는 계산기를 만들 수있었습니다. ← →... HTML5자바스크립트계산기 HTML의 기본을 알자 (2) 이번에는 Javascript로, 같은 것을 표시해 봅시다. 코드입니다. index.html See the Pen by totoa553 ( ) *일순 알림이 나옵니다. 페이지를 다시 로드해 보세요. 저장하고 실행해 보세요. 잘 했니? 이번에는 이것으로 끝입니다. ← →... HTML5자바스크립트 HTML의 기초를 알자 (1) HTML이란 Hyper Text Markup Language의 약자로 브라우저 등이 있으면 실행할 수 있습니다. 이번에는 Windows에서 개발하겠습니다. · Windows 표준 텍스트 편집기 (메모장) · Microsoft Edge (Google Chrome에서도 가능) 우선은, 정평의 「Hello World」를 표시해 봅시다. 메모장을 엽니다. index.html 이 코드를 복사하십시오.... HTML5 input type="file"의 accept 속성을 꽤 사용할 수 있다 오랜만의 투고가 되어 버렸습니다. <input type="file"> 에 accept 속성이라고 하는 것이 존재하는 것 같다. 확장자 또는 MIME을 설정하여 선택할 수 있는 파일 형식을 제한할 수 있습니다. 이런 느낌으로 복수 지정을 할 수 있습니다 나는 지금까지 거의 이것을 사용하지 않는다. 이 경우, 이런 느낌으로 이미지 파일 이외는 그레이 아웃되었습니다.... HTMLHTML5 🔰 "HTML에 부트 스트랩을 통합 한 후 CSS가 반영되지 않음"오류 해결 오늘 공부할 때 발생한 오류 기록입니다. <내용> html에 Bootstrap을 통합하는 중 <hr>,<h1> css가 반영되지 않는 오류가 발생했습니다. index.html style.css <확인 사항 1> 개발자 도구 확인 <확인 사항 2> 코드의 맞춤법 오류 확인 문제가 없으므로 Google 검색을 실시했습니다. <검색 결과> 부트 스트랩과 CSS 파일이 싸우고 있었기 때문인 것 같습... HTMLCSSHTML5Bootstrap PHP 페이지 전환으로 태그를 하나로 결합하는 방법 수고하셨습니다! TaY입니다 지금 PHP로 EC 사이트를 제작 중이며 상품 목록 페이지에서 편집, 삭제, 추가 등을 할 수 있는 버튼을 설치하고 있습니다. ↑이런 느낌 일반적으로 버튼을 사용하는 경우 버튼 당 하나의 form 태그가 클래식이지만 이러한 방식으로 버튼을 추가하면 매번 form 태그를 붙여야합니다. sample_1.html 번거롭고 코드도 엉망이 되어 보기 어렵습니다. 거기서, ... HTML5PHP ⚠️ IE11에서 비디오 요소에 초점을 맞추면 동영상이 사라지고 보이지 않습니다. IE11에서 video 요소에 초점을 맞추면 동영상이 보이지 않습니다. CSS outline 속성 때문에 outline 속성 이외의 포커스 링을 표현하기 위해서 샘플 HTML 성공적으로 재생할 수 있는 video 요소가 있습니다. 이것에 초점을 맞추면 ... 이렇게 동영상이 새하얗게 됩니다. 재생이 중지되었거나 시작된 경우에도 마찬가지입니다. 원인은 outline 프로퍼티가 맞고 있는 것에 ... CSSHTML5IE11 이미지 클릭 시 양식 늘리기 본 기사의 내용은 학습의 비망록입니다. 이미지를 클릭하여 양식의 입력 태그를 늘립니다. input 태그의 id, placeholder의 번호를 일련번호로 한다. css는 생략 우선 HTML로 양식 작성 중요한 JS 부분.... HTML5자바스크립트 텍스트 영역의 문자열을 대체하여 원하는 모양으로 처리 본업에서 광고 운용을 하면서 공부로 프로그래밍을 하고 있습니다. indeed로 운용할 때 일부 수작업이 번거롭다고 느꼈기 때문에, 아웃풋도 겸해 자동화해 보았습니다. indeed에서 광고를 운영하는 경우 어떤 직업을 계정에 연결할지 설정해야 합니다. 아무것도 설정하지 않으면 공개하고 있는 구인 모두가 대상이 됩니다. 그냥 대부분의 기업에서 요청이 있습니다. 그때 의뢰되는 구인수가 많으면 수작... CSSHTML5자바스크립트jQuery Web Video Player, VideoJS 소개 VideoJS는 웹상의 비디오 플레이어입니다. 공식 사이트: OSS Repository: 공식 사이트에 따라 450,000 사이트 이상이 이용되고 있습니다. 이 기사를 기록할 때는 VideoJS의 Github에서는 30.1KStar를 가지고, 다른 플레이어에 비하면 가장 많다고 볼 수 있습니다. 확실히, HTML5에는 <video> 태그가 추가되어, 그것을 사용하면 좋을 것이라고 하는 과제가... HTML5VideoJS 드래그로 이동할 수 있는 dialog 태그를 싹둑 만들기 <dialog> : 대화 요소 - MDN web docs 제대로 움직이는 것은 Chrome과 Chrome 기반 Edge뿐입니다. 사용은 어렵지만, 사내 시스템 등에서 사용하는 분에는 좋을까-라는 느낌이군요. dialog要素 는 기본적으로 숨겨집니다. 화면에는 show 버튼 밖에 표시되지 않네요. dialog要素는 js와 함께 사용되며 dialog要素.showModal()로 표시 할 수 있습니... CSSHTML5자바스크립트 【초학자용】 인라인 요소와 블록 요소를 이해하여 깨끗한 네비게이션 바를 작성한다. 네비게이션 바를 작성할 때, 각 요소의 종류를 이해하지 못했기 때문에 작성에 어려웠기 때문에 초학자용으로 조금 정리해 보았습니다. 아마 여기저기서 넘어지는 사람도 있을까 생각하기 때문에, 조력이 되면 다행입니다. ※뭔가 책이라든가를 바탕으로 만든 것은 아니기 때문에 잘못되었을 가능성도 있습니다. li의 호버 액션 자체는 할 수 있었지만, 중요한 링크가 나오지 않는다・・・ 예, 이것은 태그의 ... CSSHTML5 개인 귀여운 CSS font-family 랭킹 발표 개인적으로 귀엽다고 생각하는 CSS의 font-family의 일본어 랭킹을 발표합니다! 자작의 웹 사이트를 만들기에 있어서 문자를 귀엽게 하고 싶었기 때문에 조사해 보았습니다. 글꼴을 지정하는 속성입니다. 지정한 폰트는 브라우저가 동작하고 있는 환경에 인스톨 되고 있는 것이 사용되기 (위해)때문에, 지정한 폰트를 반드시 사용할 수 있는 것은 아니다. 여러 글꼴을 지정할 수 있습니다. 이 때 ... 글꼴CSS초보자font-familyHTML5 【HTML】video 태그로 동영상 퍼가기 이미지적으로는 img 태그로 이미지를 취급하는 것 같은 느낌입니다. video 태그로 HTML에 동영상을 삽입하는 경우에는, 예를 들면 다음과 같이 기술합니다. index.html 소스 태그를 사용하면 브라우저에서 재생할 동영상을 제시할 수 있습니다. 또한 source 태그에서는 형식이 다른 동영상 데이터를 여러 개 지정할 수 있습니다. 이렇게하면 브라우저가 설명 된 순서대로 재생 가능한 데... HTMLHTML5 background-image에 레이어를 겹치는 방법에 대해. WEB 사이트의 코팅을 하고 있으면, 「background-image에 레이어를 거듭한다」라고 잘 합니다. 뭐였지」라고 생각하거나 하고 시간을 걸려 버리므로 이 마음에 정리해 보았습니다. 조사해 보면 몇 가지 방법이 있습니다. ① 부모 요소에 background-image, 자식 요소에 레이어 ② linear-gradient 사용 ③ position을 사용하여 두 요소를 겹쳐 대체로 이 패턴... CSSHTML5 【CSS】화면 가득 배경색을 붙인다 기본적인 이야기입니다만, 잊기 쉽기 때문에 메모해 둡니다. HTML CSS 표시 확인 준비 완료입니다. 그럼 보자. 간단하게 화면 전체에 배경색을 붙이고 싶은 경우는 body에 배경색을 지정하면 됩니다. body 태그 안에 문자나 이미지 등의 요소를 기술하는 것으로 브라우저상에 표시할 수 있습니다만,body 자체에 배경색을 지정하는 것으로 화면 전체에 색을 붙일 수가 있습니다. 표시 확인 c... CSSHTML5 채팅 앱을 만들었습니다. 웹 앱 연습으로 채팅 앱을 만들어 보았습니다. 로그인제 앱 비밀번호가 해시되어 DB로 관리 세션을 사용한 로그인 관리 기능 계정 생성 기능 메시지 게시 기능 게시물 내용을 DB에 저장 XSS 대책 이스케이프 처리 이미지 투고 기능 이미지를 바이트 배열로 변환하고 저장하고 경량화 입력 체크 기능 로그인 시 계정을 만들 때 메시지 게시시 메시지 삭제 및 편집 기능 (사용자 관점에서 DB에 저장된... MySQL자바스크립트JavaEEHTML5자바 HTML에서 JavaScirpt의 window.alert() 함수를 사용하는 방법 이 기사에서는 이것을 만드는 방법을 소개합니다. 이 사이트의 정보는 우연히 내가 이전 사이트로 돌아갈 수있는 버튼의 소스 코드를 응용하여 발견 한 방법이므로 자세한 것은 모릅니다. 그 때문에 어디까지나 방법만을 본 기사에서는 소개하겠습니다. 덧붙여 이 방법은 아마 추천되어 있지 않은 방법입니다. 미리 승낙 후 사용해 주세요. 방법은 간단합니다. <a href="javascript:alert(... HTML5자바스크립트a 태그버튼 이전 기사 보기