HTML5 Darkmode.js 사용 방법 공식 문서에 따라 소개를 진행하겠습니다 때문에 아래 링크를 참조하면서 봐주세요! Darkmode.js URL : 그럼 빨리 가자! Darkmode.js는 쉽게 "다크 모드"를 구현할 수있는 JavaScript 라이브러리입니다. 최근 Twitter나 Instagram에 한하지 않고, 현대적인 어플리케이션에는 거의 확실하게 실장되고 있는 다크 모드. "어플리케이션을 만들었는데 좋지만, 다크 모드... CSSHTML5자바스크립트 Twitter 카드 설정 방법 자신이 운영하고 있는 사이트의 기사를 Twitter로 이런 식으로 링크하고 싶지 않습니까? 이것은 Twitter 카드라고 하고, 한마디로 말하면 「이미지 첨부 링크 정보」가 됩니다. 지금부터 어떻게 하면 트위터 카드를 설정할 수 있는지 설명하겠습니다. Twitter 카드란, 설정하지 않은 경우는 다음과 같습니다. 그에 대해 Twitter 카드가 설정되어 있는 경우는 다음과 같이 됩니다. 역시... HTML트위터HTML5TwitterCards Hello Droid! CSS로 드로이드 군을 그려 보았다 CSS로 안드로이드 캐릭터 '드로이드군' 만들기 다음 이미지에 드로이드 군 만들기 ※완성된 코드는 로부터 확인할 수 있습니다. 모든 디렉토리에 다음 파일 만들기 droid.html droid.css droid.html의 초기 상태 droid.css의 초기 상태 필요한 부품 검토 크게 나누어 3 파트로 나눌 수 있을 것 같아 또한 몸은 사지와 부모와 자식 관계를 구축 할 것입니다. droid.... CSSHTML5 DatePicker를 스피너 지정해도 캘린더 부분이 사라지지 않는다 (Tablet 단말 전용?) 에뮬레이터 및 실제 기기에서 검증 (API 28 이상) html을 WebView로 표시 (Chrome for android) DatePicker를 스피너 만 표시하고 싶었습니다. 결과적으로 스피너 만의 표시를 포기하고 있습니다 우선 기본 설정 Pixel 3a XL의 경우 Nexus 10의 경우 기본 표시라면 스마트폰이나 태블릿에서도 같은 표시 다음으로 스피너만 표시하는 설정 Pixel 3a ... 안드로이드HTML5webView dl태그를 처음으로 이용할 기회가 있었으므로, 조사해 보았다! 비망록 안녕하세요, 어제, 처음으로 dl 태그를 이용한 기념해야 할 하루가되었습니다. 웃음 그래서 dl 태그란 무엇인지 알아보았습니다! ...라는 비망록입니다. 세트로, dt 태그, dd 태그에 대해서도 기술해 갑니다. dl -> description list (설명 목록) 단어나 용어의 정의를 하는 경우나, 설명을 하는 경우에 이용합니다. 리스트 표시의 li 태그와 같이, 정의나 설명을 문장이 아... HTML5 【초보자라도 알 수 있다】jQuery를 사용해, a 태그를 포함한 div를 클릭해도 링크시키는 방법(biggerlink) 라는 분은 의 기사를 부디. 이번에는 jQuery에서 자작하는 방법과 HTML5만으로 쓰는 방법의 2 종류를 소개. jQuery 버전 ⇒ 아마도 아무것도 OK 플러그인 등 ⇒ 이용 없음(자작) (div 요소에도 a 태그와 같은 움직임을 붙인다.) script.js 자바 스크립트를 복사하고 사용하려는 요소에 biggerlink 클래스를 지정하기 만하면됩니다. 그 요소 안에 있는 a 태그의 끝 ... 앞웹자바스크립트jQueryHTML5 인페이지 점프 페이지내(싱글 페이지등으로 사용하기 편리함)로 갱신하지 않고 다운스크롤로 지정한 요소에 날려 주는 기능. ⚠️아래의 「여기를 클릭!」은 화상이기 때문에 실제로 눌릴 수 없습니다 누룻과 지정된 요소에 ⬇️ 점프 버튼 점프 대상 (앵커) sample.html ①HTML html ②jQuery jQuery 속도 조정 jQuery 배속으로 스크롤 jQuery 화면내 스크롤은 싱글 페이지로 꽤 사용할... HTML자바스크립트jQueryCSSHTML5 "input type=time"과 "input type=text + timepicker"의 동작 차이 모처럼 HTML의 디폴트로 「input type=time」이 준비되어 있기 때문에, 가능하면 사용하고 싶다. input type=text + timepicker와의 동작 차이를 확인한다. input type=text + timepicker 쪽이 이하의 관점에서 좋다. 「input type=time」은 브라우저에 의해 묘화·거동이 다르다(참조 사이트 확인) 요청의 내용은 동일하므로 어느 쪽이든... HTML5timePickerjQuery Geolocation API로 현재 위치 가져오기 Geolocation API를 사용하여 현재 위치를 얻는 방법의 간단한 요약입니다. 실제로 현재 위치 가져 오기 Geolocation API는 사용자의 위치 정보를 검색하는 API입니다. GPS, IP 주소, 무선 LAN, WiFi 등에서 위치 정보를 얻을 수 있습니다. 위치 정보를 얻으려면 사용자의 권한이 필요합니다. Geolocation API의 Geolocation 객체는 장치의 위치를... HTML5자바스크립트Geolocation CSS만으로 폭을 자동 조정할 수 있는, 가로 줄맞춤 네비게이션 메뉴의 만드는 방법 부모 요소의 폭은 고정으로, 자 요소의 수가 변동해도 자 요소의 폭이 자동 조정되는 메뉴를 만드는 방법. 제작 끝난 or 어느 정도 만든 홈페이지를 수정·갱신하고 있으면, 자주 메뉴의 수가 변동하는 일이 있습니다. 나중에 추가나 삭제가 일어나면, 그 때마다 그때마다 CSS를 조정할 필요가 있어요. · · · · · · · · · · · · · · · · · · · · · · · · · · ·... HTMLCSS초보자수평HTML5 【초보자용】HTML+CSS 치트 시트 초보자·신졸 분들에게 HTML·CSS를 가르칠 기회가 늘어나, 자신이 초보자일 때 이런 것이 있으면 고맙다고 생각했기 때문에 간단하게 정리해 보았습니다. 등장하는 쓰는 법은 내가 빚지고있는 쓰는 법이기 때문에 보다 아름다운 쓰는 방법이 있으면 가르쳐 주시면 감사하겠습니다. 로고만 오른쪽 정렬된 헤더 탐색 자주 보는 이러한 형태의 레이아웃. 어떻게 구현합니까? 다음과 같이 구현할 수 있습니다.... HTMLscssCSSCSS3HTML5 사이트에 Google 지도 30초 내에 삽입하는 방법 ・독학으로 웹 개발 공부를 하고 있고, Google map을 묻어 보았다고 생각했지만, 어렵고 잘 모르는 사람 ・사이트내에서 목적지까지의 지도를 나타낸 사람 나도 처음에는 Google Maps API를 사용하여지도를 표시하려고했지만 너무 많은 노력이 필요하므로 권장하지 않습니다. 그래서 좀 더 간단한 방법으로 Google Map을 포함할 수 없는지 조사한 곳 간단한 방법을 찾았으므로 소개합니... HTML5GoogleMap 이미지를 원형으로 표시하는 방법 절차 ①HTML을 기술한다 ②CSS를 기술한다 ③ 미리보기로 표시 확인 CSS를 작성하기 copy_practice.css 포인트! ①화상을 원형으로 하여 종횡비를 유지하고 싶은 경우는 부모 요소의 width 와 height 와 자 요소의 width 와 height 에는 같은 값을 지정할 필요가 있습니다. ② border-radius 속성은 width와 height의 값과 같은 값을 지정합니다... HTML5CSS3 Web Storage 사용 방법 이쪽의 페이지를 참고로 했습니다. web_storage.html web_storage.js 1) 페이에 액세스 2) 저장 3) 로딩... HTML5webstorageJQUERY text_field에서 타임 타입 데이터 표시 rails의 form_for에서 text_field에 time형의 데이터를 표시시키고 싶을 때 잘 시간만을 표시할 수 없었기 때문에 그 대책입니다. Rails 5.2.3 html은 haml로 작성되었습니다. ◯◯.html.haml value를 설정해 주면 좋았습니다. next_time이 time형으로 저장하고 있는 데이터가 됩니다. 이것에 strftime('%H:%M')을 붙이면 만사 해결.... HTML5RailsRails5 rails 개발에서 빠진 to_model 오류 rails로 프리마 앱을 팀 개발하고 있을 때, 별로 보이지 않는 에러가 발생했기 때문에, 구체적인 원인은 잘 모르지만, 남겨 둡니다. ruby 버전 : 2.5.1 rails 버전 : 5.2.4.2 데이터베이스 : mysql _product.html.haml product 모델과 image 모델은 일대다 관계로 연결되어 있으며 product 모델에는 accepts_nested_attribut... HTML5루비Rails5 웹 페이지 배경 투명도와 문자 투명도를 변경하는 방법 소개 CSS에서 opacity 속성이 아닌 rgba를 사용하여 투명도를 분리하는 방법을 작성합니다. 특히 HTML, CSS를 배우기 시작할 때는 opacity 속성을 배우고 배경을 투명하게 할 수 있다고 배우고 구현합니다. 그러나 opacity 속성을 사용하면 문자까지 동일한 투명도가 되어 버립니다. 배경은 조금 얇게 하고 싶지만 문자는 보이도록 하고 싶다. 라고 생각하기 쉽지만 이번에 기재... rgbaCSS3opacity속성HTML5 Sass에 대해 최소한 알아야 할 5 가지 기본 기능 요 전날 Sass에 대해 실천에서 사용할 수있게되어 가기 위해 책을 구입하고 실제로 코딩하면서 출력했습니다. 솔직히, 앞으로도 점점 사용해 가는 기능이라고 생각하기 때문에 자신의 비망록으로서 Sass의 기본 기능을 남겨 두려고 생각합니다. Sass의 기본 기능에 관해서는 많이 인터넷에 굴러 떨어지고 있습니다만, 초보자 중의 초보자는 이쪽의 책을 보면서 손을 움직이는 편이 습득은 빠를까 생각됩... SassHTML5CSS3 【비망록:HTML/CSS】css의 스톡 모여 가지고 있는 편이 좋지? -버튼 디자인편- 보통 hover 때 위의 외부 아이콘과 같은 버튼 링크를합니다. index.html style.scss 움직임이 보이지 않습니다만, hover시는 transition이 걸려 있기 때문에, 대단한 움직임이 되지 않고 좋은 악센트를 낼 수 있게 되어 있습니다. 선의 굵기나 색, 배치 장소를 변경할 수 있으므로 css로 설정할 수 있으면 표현의 폭이 넓어질까 생각합니다. 참고원:... HTML5CSS3 【비망록:HTML/CSS】css의 스톡 모여 가지고 있는 편이 좋지? -사선 표제편- 이런 느낌이나 이런 식으로 잘 제목 디자인으로 밑줄이나 왼쪽 세로선을 그리기도 합니다만, 그것을 사선으로 하는 방법입니다. 이전 소개한 제목 디자인의 사선편입니다! index.html style.scss 이것은 여러가지 쓸만한 CSS라고 생각합니다. 내용을 알고 있으면, 색이나 굵기를 변경할 수 있거나 하기 때문에, 여러가지 조정해 보는 것도 좋을지도입니다. 참고원:... HTML5CSS3 【비망록:HTML/CSS】css의 스톡 모여 가지고 있는 편이 좋지? -좌우에 경계편- 위와 같이 잘 좌우에 테두리가 붙는 표제나 디자인이 있습니다. 지금까지 position과 before, after로 배치했지만,,, flex를 사용하여 간단하고 텍스트 증감을 고려한 좌우 테두리 제목을 만들 수 있습니다! index.html style.scss 표제 본체에 flex를 걸고, 가로, 세로 위치를 중앙에 align-items: center;, justify-content: cen... HTML5CSS3CSS 설계 【비망록:HTML/CSS】css의 스톡 모여 가지고 있는 편이 좋지? 표제 밑줄을 2배색 index.html style.scss 제목 밑줄을 중앙에서 2배색 index.html style.scss 참고원:... HTML5CSS3CSS 설계 【CSS】z-index로 돌출을 막는다(겹침) 제작 중 앱에서, 사진을 올리고 그 자리에서 미리보기하는 기능을 구현하는 동안, z-index를 오랜만에 사용했으므로, 비망록도 겸하고, 자쿠와 소개합니다. 아래와 같이 사진이 오면 문자가 테두리 밖으로 튀어 나옵니다. 사진은 텍스트 위에 올라갑니다. 상자의 겹치는 순서(우선 순위)를 결정할 수 있는 속성입니다. 값은 정수이며 큰 값이 앞에 표시됩니다. 첫째, 텍스트는 사진 아래에 들어가기를... HTML5자바스크립트jQueryCSS3 【CSS만으로 만들 수 있다】 툴팁의 간단한 실장 방법 커서를 맞추면 나오는 툴팁을 작성한다. CSS만으로 만들 수 있는 것 같다. 또한 스마트폰(터치 디바이스)을 고려한 구현. 덧붙여서 툴팁이라는 것은 아래처럼 커서를 맞추면 힌트가 나오는 녀석. 의사 클래스를 조합하면 PC와 스마트폰 모두에 대응할 수 있습니다. 커서를 맞추면 툴팁이 나온다. 의사 클래스입니다.:hover에서 대응. 만지면 툴팁이 나온다. 의사 클래스입니다.:focus에서 대응... HTML5CSS3 이벤트가 발생했을 때, 그 형제 요소를 조작하는 방법 jQuery를 사용하지 않고 구현하는 것을 목표로합니다. 동일한 구조를 갖는 요소가 복수 존재할 때, 그 중에서 이벤트가 발생한 형제 요소만을 조작하고 싶은 경우의 실장 방법이다. 클릭하면 그 형제 요소에 해당하는 이미지를 작게하는 버튼을 구현. 이번에는 같은 구조의 요소를 4개 준비. 참고 정도에 게재 HTML SCSS 자바스크립트 사고방식으로는 다음과 같다. jQuery라면 간단하지만, ... HTML5자바스크립트CSS3 CSS에서 문자열 줄 바꿈을 제어하는 word-break와 overflow-wrap의 차이 폭이 좁은 영역에서 긴 영어 단어나 URL의 중간에 폴드를 제어할 수 있는 CSS 프로퍼티인 word-break와 ovverflow-wrap에 대해입니다. 어느 쪽도 접혀 제어를 실시하는 프로퍼티입니다만, 2개의 차이를 모르고, 모야모야하고 있었으므로 자신 나름대로 정리해 보았습니다. 결론부터 말하면, 쓰기로는 overflow-wrap 쪽이 좋은 것이라고 생각하고 있습니다(현재의 자신의 지식... HTML5CSS3 CSS3 : align-items의 end와 flex-end와 baseline의 구분 안녕하세요. web제작회사 취직을 목표로 하고 있는, 트위터상의 「#구출 엔지니어와 연결하고 싶다」로 친숙한 돌출 엔지니어의 혼자입니다. 출력이 중요하다는 것으로 코드 작성 이외의 출력 방법으로 qiita를 시작해 보겠습니다. 틀렸다면 쓰면 화가 난다. 이번은, 플렉스 박스내에서의 아이 요소의 아래 정렬로 조금 헤매었으므로, 나와 같은 초보자를 위해서 써 보려고 생각합니다. 플렉스 박스 내에... HTML5CSS3 【dl인가 ul】뉴스계(신착 정보) 디자인의 코딩 패턴 뉴스계 디자인이란, 웹 사이트에서 자주 보이는 「신착 정보」라든지를 게재하고 있는 디자인입니다. 이런 느낌의 디자인 템플리를 기억해 버리면 낙진인데, 처음부터 코딩을 하려고 하면, 「응?? 뉴스계 디자인의 이해를 보다 깊게 하기 위해서도, 여러가지 패턴을 조사해 보았다. dl 태그로 뉴스 기반 디자인 코딩 See the Pen by kei ( ) 간단하게 쓰려면 "float : left"를 ... HTML5CSS3 jQuery 임시 사이트 작성의 base ②(자신용) 마지막으로 계속: 슬라이드쇼에 대해서만 jquery.js styles.css... HTML5자바스크립트jQueryCSS3 이전 기사 보기
Darkmode.js 사용 방법 공식 문서에 따라 소개를 진행하겠습니다 때문에 아래 링크를 참조하면서 봐주세요! Darkmode.js URL : 그럼 빨리 가자! Darkmode.js는 쉽게 "다크 모드"를 구현할 수있는 JavaScript 라이브러리입니다. 최근 Twitter나 Instagram에 한하지 않고, 현대적인 어플리케이션에는 거의 확실하게 실장되고 있는 다크 모드. "어플리케이션을 만들었는데 좋지만, 다크 모드... CSSHTML5자바스크립트 Twitter 카드 설정 방법 자신이 운영하고 있는 사이트의 기사를 Twitter로 이런 식으로 링크하고 싶지 않습니까? 이것은 Twitter 카드라고 하고, 한마디로 말하면 「이미지 첨부 링크 정보」가 됩니다. 지금부터 어떻게 하면 트위터 카드를 설정할 수 있는지 설명하겠습니다. Twitter 카드란, 설정하지 않은 경우는 다음과 같습니다. 그에 대해 Twitter 카드가 설정되어 있는 경우는 다음과 같이 됩니다. 역시... HTML트위터HTML5TwitterCards Hello Droid! CSS로 드로이드 군을 그려 보았다 CSS로 안드로이드 캐릭터 '드로이드군' 만들기 다음 이미지에 드로이드 군 만들기 ※완성된 코드는 로부터 확인할 수 있습니다. 모든 디렉토리에 다음 파일 만들기 droid.html droid.css droid.html의 초기 상태 droid.css의 초기 상태 필요한 부품 검토 크게 나누어 3 파트로 나눌 수 있을 것 같아 또한 몸은 사지와 부모와 자식 관계를 구축 할 것입니다. droid.... CSSHTML5 DatePicker를 스피너 지정해도 캘린더 부분이 사라지지 않는다 (Tablet 단말 전용?) 에뮬레이터 및 실제 기기에서 검증 (API 28 이상) html을 WebView로 표시 (Chrome for android) DatePicker를 스피너 만 표시하고 싶었습니다. 결과적으로 스피너 만의 표시를 포기하고 있습니다 우선 기본 설정 Pixel 3a XL의 경우 Nexus 10의 경우 기본 표시라면 스마트폰이나 태블릿에서도 같은 표시 다음으로 스피너만 표시하는 설정 Pixel 3a ... 안드로이드HTML5webView dl태그를 처음으로 이용할 기회가 있었으므로, 조사해 보았다! 비망록 안녕하세요, 어제, 처음으로 dl 태그를 이용한 기념해야 할 하루가되었습니다. 웃음 그래서 dl 태그란 무엇인지 알아보았습니다! ...라는 비망록입니다. 세트로, dt 태그, dd 태그에 대해서도 기술해 갑니다. dl -> description list (설명 목록) 단어나 용어의 정의를 하는 경우나, 설명을 하는 경우에 이용합니다. 리스트 표시의 li 태그와 같이, 정의나 설명을 문장이 아... HTML5 【초보자라도 알 수 있다】jQuery를 사용해, a 태그를 포함한 div를 클릭해도 링크시키는 방법(biggerlink) 라는 분은 의 기사를 부디. 이번에는 jQuery에서 자작하는 방법과 HTML5만으로 쓰는 방법의 2 종류를 소개. jQuery 버전 ⇒ 아마도 아무것도 OK 플러그인 등 ⇒ 이용 없음(자작) (div 요소에도 a 태그와 같은 움직임을 붙인다.) script.js 자바 스크립트를 복사하고 사용하려는 요소에 biggerlink 클래스를 지정하기 만하면됩니다. 그 요소 안에 있는 a 태그의 끝 ... 앞웹자바스크립트jQueryHTML5 인페이지 점프 페이지내(싱글 페이지등으로 사용하기 편리함)로 갱신하지 않고 다운스크롤로 지정한 요소에 날려 주는 기능. ⚠️아래의 「여기를 클릭!」은 화상이기 때문에 실제로 눌릴 수 없습니다 누룻과 지정된 요소에 ⬇️ 점프 버튼 점프 대상 (앵커) sample.html ①HTML html ②jQuery jQuery 속도 조정 jQuery 배속으로 스크롤 jQuery 화면내 스크롤은 싱글 페이지로 꽤 사용할... HTML자바스크립트jQueryCSSHTML5 "input type=time"과 "input type=text + timepicker"의 동작 차이 모처럼 HTML의 디폴트로 「input type=time」이 준비되어 있기 때문에, 가능하면 사용하고 싶다. input type=text + timepicker와의 동작 차이를 확인한다. input type=text + timepicker 쪽이 이하의 관점에서 좋다. 「input type=time」은 브라우저에 의해 묘화·거동이 다르다(참조 사이트 확인) 요청의 내용은 동일하므로 어느 쪽이든... HTML5timePickerjQuery Geolocation API로 현재 위치 가져오기 Geolocation API를 사용하여 현재 위치를 얻는 방법의 간단한 요약입니다. 실제로 현재 위치 가져 오기 Geolocation API는 사용자의 위치 정보를 검색하는 API입니다. GPS, IP 주소, 무선 LAN, WiFi 등에서 위치 정보를 얻을 수 있습니다. 위치 정보를 얻으려면 사용자의 권한이 필요합니다. Geolocation API의 Geolocation 객체는 장치의 위치를... HTML5자바스크립트Geolocation CSS만으로 폭을 자동 조정할 수 있는, 가로 줄맞춤 네비게이션 메뉴의 만드는 방법 부모 요소의 폭은 고정으로, 자 요소의 수가 변동해도 자 요소의 폭이 자동 조정되는 메뉴를 만드는 방법. 제작 끝난 or 어느 정도 만든 홈페이지를 수정·갱신하고 있으면, 자주 메뉴의 수가 변동하는 일이 있습니다. 나중에 추가나 삭제가 일어나면, 그 때마다 그때마다 CSS를 조정할 필요가 있어요. · · · · · · · · · · · · · · · · · · · · · · · · · · ·... HTMLCSS초보자수평HTML5 【초보자용】HTML+CSS 치트 시트 초보자·신졸 분들에게 HTML·CSS를 가르칠 기회가 늘어나, 자신이 초보자일 때 이런 것이 있으면 고맙다고 생각했기 때문에 간단하게 정리해 보았습니다. 등장하는 쓰는 법은 내가 빚지고있는 쓰는 법이기 때문에 보다 아름다운 쓰는 방법이 있으면 가르쳐 주시면 감사하겠습니다. 로고만 오른쪽 정렬된 헤더 탐색 자주 보는 이러한 형태의 레이아웃. 어떻게 구현합니까? 다음과 같이 구현할 수 있습니다.... HTMLscssCSSCSS3HTML5 사이트에 Google 지도 30초 내에 삽입하는 방법 ・독학으로 웹 개발 공부를 하고 있고, Google map을 묻어 보았다고 생각했지만, 어렵고 잘 모르는 사람 ・사이트내에서 목적지까지의 지도를 나타낸 사람 나도 처음에는 Google Maps API를 사용하여지도를 표시하려고했지만 너무 많은 노력이 필요하므로 권장하지 않습니다. 그래서 좀 더 간단한 방법으로 Google Map을 포함할 수 없는지 조사한 곳 간단한 방법을 찾았으므로 소개합니... HTML5GoogleMap 이미지를 원형으로 표시하는 방법 절차 ①HTML을 기술한다 ②CSS를 기술한다 ③ 미리보기로 표시 확인 CSS를 작성하기 copy_practice.css 포인트! ①화상을 원형으로 하여 종횡비를 유지하고 싶은 경우는 부모 요소의 width 와 height 와 자 요소의 width 와 height 에는 같은 값을 지정할 필요가 있습니다. ② border-radius 속성은 width와 height의 값과 같은 값을 지정합니다... HTML5CSS3 Web Storage 사용 방법 이쪽의 페이지를 참고로 했습니다. web_storage.html web_storage.js 1) 페이에 액세스 2) 저장 3) 로딩... HTML5webstorageJQUERY text_field에서 타임 타입 데이터 표시 rails의 form_for에서 text_field에 time형의 데이터를 표시시키고 싶을 때 잘 시간만을 표시할 수 없었기 때문에 그 대책입니다. Rails 5.2.3 html은 haml로 작성되었습니다. ◯◯.html.haml value를 설정해 주면 좋았습니다. next_time이 time형으로 저장하고 있는 데이터가 됩니다. 이것에 strftime('%H:%M')을 붙이면 만사 해결.... HTML5RailsRails5 rails 개발에서 빠진 to_model 오류 rails로 프리마 앱을 팀 개발하고 있을 때, 별로 보이지 않는 에러가 발생했기 때문에, 구체적인 원인은 잘 모르지만, 남겨 둡니다. ruby 버전 : 2.5.1 rails 버전 : 5.2.4.2 데이터베이스 : mysql _product.html.haml product 모델과 image 모델은 일대다 관계로 연결되어 있으며 product 모델에는 accepts_nested_attribut... HTML5루비Rails5 웹 페이지 배경 투명도와 문자 투명도를 변경하는 방법 소개 CSS에서 opacity 속성이 아닌 rgba를 사용하여 투명도를 분리하는 방법을 작성합니다. 특히 HTML, CSS를 배우기 시작할 때는 opacity 속성을 배우고 배경을 투명하게 할 수 있다고 배우고 구현합니다. 그러나 opacity 속성을 사용하면 문자까지 동일한 투명도가 되어 버립니다. 배경은 조금 얇게 하고 싶지만 문자는 보이도록 하고 싶다. 라고 생각하기 쉽지만 이번에 기재... rgbaCSS3opacity속성HTML5 Sass에 대해 최소한 알아야 할 5 가지 기본 기능 요 전날 Sass에 대해 실천에서 사용할 수있게되어 가기 위해 책을 구입하고 실제로 코딩하면서 출력했습니다. 솔직히, 앞으로도 점점 사용해 가는 기능이라고 생각하기 때문에 자신의 비망록으로서 Sass의 기본 기능을 남겨 두려고 생각합니다. Sass의 기본 기능에 관해서는 많이 인터넷에 굴러 떨어지고 있습니다만, 초보자 중의 초보자는 이쪽의 책을 보면서 손을 움직이는 편이 습득은 빠를까 생각됩... SassHTML5CSS3 【비망록:HTML/CSS】css의 스톡 모여 가지고 있는 편이 좋지? -버튼 디자인편- 보통 hover 때 위의 외부 아이콘과 같은 버튼 링크를합니다. index.html style.scss 움직임이 보이지 않습니다만, hover시는 transition이 걸려 있기 때문에, 대단한 움직임이 되지 않고 좋은 악센트를 낼 수 있게 되어 있습니다. 선의 굵기나 색, 배치 장소를 변경할 수 있으므로 css로 설정할 수 있으면 표현의 폭이 넓어질까 생각합니다. 참고원:... HTML5CSS3 【비망록:HTML/CSS】css의 스톡 모여 가지고 있는 편이 좋지? -사선 표제편- 이런 느낌이나 이런 식으로 잘 제목 디자인으로 밑줄이나 왼쪽 세로선을 그리기도 합니다만, 그것을 사선으로 하는 방법입니다. 이전 소개한 제목 디자인의 사선편입니다! index.html style.scss 이것은 여러가지 쓸만한 CSS라고 생각합니다. 내용을 알고 있으면, 색이나 굵기를 변경할 수 있거나 하기 때문에, 여러가지 조정해 보는 것도 좋을지도입니다. 참고원:... HTML5CSS3 【비망록:HTML/CSS】css의 스톡 모여 가지고 있는 편이 좋지? -좌우에 경계편- 위와 같이 잘 좌우에 테두리가 붙는 표제나 디자인이 있습니다. 지금까지 position과 before, after로 배치했지만,,, flex를 사용하여 간단하고 텍스트 증감을 고려한 좌우 테두리 제목을 만들 수 있습니다! index.html style.scss 표제 본체에 flex를 걸고, 가로, 세로 위치를 중앙에 align-items: center;, justify-content: cen... HTML5CSS3CSS 설계 【비망록:HTML/CSS】css의 스톡 모여 가지고 있는 편이 좋지? 표제 밑줄을 2배색 index.html style.scss 제목 밑줄을 중앙에서 2배색 index.html style.scss 참고원:... HTML5CSS3CSS 설계 【CSS】z-index로 돌출을 막는다(겹침) 제작 중 앱에서, 사진을 올리고 그 자리에서 미리보기하는 기능을 구현하는 동안, z-index를 오랜만에 사용했으므로, 비망록도 겸하고, 자쿠와 소개합니다. 아래와 같이 사진이 오면 문자가 테두리 밖으로 튀어 나옵니다. 사진은 텍스트 위에 올라갑니다. 상자의 겹치는 순서(우선 순위)를 결정할 수 있는 속성입니다. 값은 정수이며 큰 값이 앞에 표시됩니다. 첫째, 텍스트는 사진 아래에 들어가기를... HTML5자바스크립트jQueryCSS3 【CSS만으로 만들 수 있다】 툴팁의 간단한 실장 방법 커서를 맞추면 나오는 툴팁을 작성한다. CSS만으로 만들 수 있는 것 같다. 또한 스마트폰(터치 디바이스)을 고려한 구현. 덧붙여서 툴팁이라는 것은 아래처럼 커서를 맞추면 힌트가 나오는 녀석. 의사 클래스를 조합하면 PC와 스마트폰 모두에 대응할 수 있습니다. 커서를 맞추면 툴팁이 나온다. 의사 클래스입니다.:hover에서 대응. 만지면 툴팁이 나온다. 의사 클래스입니다.:focus에서 대응... HTML5CSS3 이벤트가 발생했을 때, 그 형제 요소를 조작하는 방법 jQuery를 사용하지 않고 구현하는 것을 목표로합니다. 동일한 구조를 갖는 요소가 복수 존재할 때, 그 중에서 이벤트가 발생한 형제 요소만을 조작하고 싶은 경우의 실장 방법이다. 클릭하면 그 형제 요소에 해당하는 이미지를 작게하는 버튼을 구현. 이번에는 같은 구조의 요소를 4개 준비. 참고 정도에 게재 HTML SCSS 자바스크립트 사고방식으로는 다음과 같다. jQuery라면 간단하지만, ... HTML5자바스크립트CSS3 CSS에서 문자열 줄 바꿈을 제어하는 word-break와 overflow-wrap의 차이 폭이 좁은 영역에서 긴 영어 단어나 URL의 중간에 폴드를 제어할 수 있는 CSS 프로퍼티인 word-break와 ovverflow-wrap에 대해입니다. 어느 쪽도 접혀 제어를 실시하는 프로퍼티입니다만, 2개의 차이를 모르고, 모야모야하고 있었으므로 자신 나름대로 정리해 보았습니다. 결론부터 말하면, 쓰기로는 overflow-wrap 쪽이 좋은 것이라고 생각하고 있습니다(현재의 자신의 지식... HTML5CSS3 CSS3 : align-items의 end와 flex-end와 baseline의 구분 안녕하세요. web제작회사 취직을 목표로 하고 있는, 트위터상의 「#구출 엔지니어와 연결하고 싶다」로 친숙한 돌출 엔지니어의 혼자입니다. 출력이 중요하다는 것으로 코드 작성 이외의 출력 방법으로 qiita를 시작해 보겠습니다. 틀렸다면 쓰면 화가 난다. 이번은, 플렉스 박스내에서의 아이 요소의 아래 정렬로 조금 헤매었으므로, 나와 같은 초보자를 위해서 써 보려고 생각합니다. 플렉스 박스 내에... HTML5CSS3 【dl인가 ul】뉴스계(신착 정보) 디자인의 코딩 패턴 뉴스계 디자인이란, 웹 사이트에서 자주 보이는 「신착 정보」라든지를 게재하고 있는 디자인입니다. 이런 느낌의 디자인 템플리를 기억해 버리면 낙진인데, 처음부터 코딩을 하려고 하면, 「응?? 뉴스계 디자인의 이해를 보다 깊게 하기 위해서도, 여러가지 패턴을 조사해 보았다. dl 태그로 뉴스 기반 디자인 코딩 See the Pen by kei ( ) 간단하게 쓰려면 "float : left"를 ... HTML5CSS3 jQuery 임시 사이트 작성의 base ②(자신용) 마지막으로 계속: 슬라이드쇼에 대해서만 jquery.js styles.css... HTML5자바스크립트jQueryCSS3 이전 기사 보기