CSS3 fontawesome을 바삭하게 짜넣기 위한 라이브러리 「wonderful.js」를 만들어 보았다 체크 박스나 라디오 버튼을 간편하게(세련되게) 편입할 수 없는가 생각했을 때, → Jquery 의존적이거나 한다 → 코피페라고 해도 힘든 .. fontawesome은 아이콘 포함에 뭔가 사용되는 것이 많다고 생각합니다. 다만, free판에도 체크 박스의 아이콘도 존재하기 때문에 조합해 사용해 간편하게 실장과 가자고 할까라고 생각했습니다. 덧붙여서, checkbox의 의사 요소(before)를... library자바스크립트FontAwesomeCSS3HTML5 【Vue 엔지니어가 만든다】 절대 실패하지 않는 CSS 네비게이션 메뉴 정리 13선 이 기사에 기재된 디자인 코드는 모두 자유롭게 사용해 주셔서 괜찮습니다 (필자가 작성했기 때문에) 프로젝트에 넣어보다 충실한 디자인으로 해 주면 ○ 움직임은 아래 이미지처럼 느껴집니다 1. 헤더로 사용하기 쉬운 간단한 네비게이션 메뉴 2. 버튼이 부드럽게 확대되는 귀여운 네비게이션 메뉴 3. 버튼이 축소하면서 입체적으로 떠오르는 네비게이션 메뉴 4. 버튼이 움푹 들어가면서 축소되는 슈퍼 움직... 애니메이션vue-cliVue.jsCSSCSS3 【Vue로 사용할 수 있다】 차이가 나는 CSS 화상 애니메이션 정리 49선 이 기사에 기재된 디자인 코드는 모두 자유롭게 사용해 주셔서 괜찮습니다 (필자가 작성했기 때문에) 프로젝트에 넣어보다 충실한 디자인으로 해 주면 ○ 어땠습니까? 도움이되면 기쁩니다. 마지막으로 메모로 코멘트란에 마음 없는 코멘트를 투고하는 쪽이 드물지만 성가시기 때문에 문답 무용으로 속공 블록 합니다.... 디자인 패턴애니메이션Vue.jsCSSCSS3 【CSS 애니메이션】HTML과 CSS만으로 만들어 보았던 「선풍기」 안녕하세요. 최근에는 CSS 애니메이션이 즐겁고 빠져 있습니다. 이번에도 에 이어 선풍기를 만들어 보았습니다! See the Pen by 미치 ( ) 여기가 선풍기와 프로그램입니다. 코드를 복사하면 똑같이 표시할 수 있다고 생각합니다! 선풍기의 팬 부분에 마우스를 켜면(hover), 목을 흔들기도 합니다. 여기에도 코드를 기재해 둡니다. index.html styles.css 이상입니다! 여... 애니메이션HTMLCSS초보자CSS3 【CSS애니메이션】HTML과 CSS만으로 콜라(탄산쥬와쥬와~)를 만들어 보았다 씨의 기사의 「 」를 보고, 굉장히 타피오카다-! 미안해! 되었습니다 거기서, 자신도 CSS 애니메이션으로 무엇인가 만들고 싶다고 생각하고, 콜라를 만들어 보았습니다! 탄산을 가능한 한 리얼하게 표현하기 위해 노력했습니다! See the Pen by 미치치 ( ) 여기가 콜라와 프로그램입니다. 코드를 복사하면 똑같이 표시할 수 있다고 생각합니다! 색이나 바꾸는 것으로, 다른 탄산 음료수도 된... 애니메이션HTMLCSS초보자CSS3 [HTML/CSS/jQuery] 스크롤하면 마커가 끌리는 애니메이션___φ(.. ) 스크롤로 마커가 끌려가는 애니메이션을 배웠기 때문에 정리. JavaScript(jQery)로 동적으로 변경하는 스타일은 SMACSS(스맥스)의 스테이트 클래스를 사용 is- 접두사를 부여. 마커 부분은 요소의 background background 가 움직여 마커가 찢어진 것처럼 보이는 구조이다. 1. 요소의 배경을 그라데이션(linear-gradient)으로 왼쪽 절반을 투명, 오른쪽 절반... 애니메이션스크롤jQueryCSS3HTML5 【초보자용】HTML+CSS 치트 시트 초보자·신졸 분들에게 HTML·CSS를 가르칠 기회가 늘어나, 자신이 초보자일 때 이런 것이 있으면 고맙다고 생각했기 때문에 간단하게 정리해 보았습니다. 등장하는 쓰는 법은 내가 빚지고있는 쓰는 법이기 때문에 보다 아름다운 쓰는 방법이 있으면 가르쳐 주시면 감사하겠습니다. 로고만 오른쪽 정렬된 헤더 탐색 자주 보는 이러한 형태의 레이아웃. 어떻게 구현합니까? 다음과 같이 구현할 수 있습니다.... HTMLscssCSSCSS3HTML5 이미지를 원형으로 표시하는 방법 절차 ①HTML을 기술한다 ②CSS를 기술한다 ③ 미리보기로 표시 확인 CSS를 작성하기 copy_practice.css 포인트! ①화상을 원형으로 하여 종횡비를 유지하고 싶은 경우는 부모 요소의 width 와 height 와 자 요소의 width 와 height 에는 같은 값을 지정할 필요가 있습니다. ② border-radius 속성은 width와 height의 값과 같은 값을 지정합니다... HTML5CSS3 Flexbox로 회전식 슬라이더 만들기 회전식 슬라이더는 대부분의 슬라이더가 하나의 이미지 등을 표시하는 반면, 여러 가지를 표시하고 좌우 화살표를 누르면 페이지 어처럼 보이지 않았던 다음 쌍을 표시하는 것 가리키고 있습니다. 이미지로서는 이런 느낌의 것 코드 간단히 설명 우선, 좌우의 화살표와 회전 목마의 표시 영역을 Flexbox로 가로 줄이고, 회전 목마는 flex: 1; 로 폭 가득 튀어나온 부분을 표시하고 싶지 않기 때문... Vue.jsflexboxCSS3nuxt.js 웹 페이지 배경 투명도와 문자 투명도를 변경하는 방법 소개 CSS에서 opacity 속성이 아닌 rgba를 사용하여 투명도를 분리하는 방법을 작성합니다. 특히 HTML, CSS를 배우기 시작할 때는 opacity 속성을 배우고 배경을 투명하게 할 수 있다고 배우고 구현합니다. 그러나 opacity 속성을 사용하면 문자까지 동일한 투명도가 되어 버립니다. 배경은 조금 얇게 하고 싶지만 문자는 보이도록 하고 싶다. 라고 생각하기 쉽지만 이번에 기재... rgbaCSS3opacity속성HTML5 IE에서도 흔들리지 않는 헤더 고정이나 왼쪽 메뉴 고정 최근에는 별로 없는 디자인일지도 모르지만, 왼쪽 메뉴, 헤더, 바닥글을 고정한 디자인으로, 디자이너의 의향에 의해, 스크롤 바의 표시 에리어가 지정되어 있었으므로, position: fixed; 를 사용해 실장하고 있었다. IE나 Edge에서는, 스크롤하면 꽤 덜컹 거리고 있어, 사용 상황으로서도, IE 유저가 많았기 때문에, Flexbox를 사용한 쓰는 방법으로 바꾸었습니다. 그 메모입니다... CSS3 Sass에 대해 최소한 알아야 할 5 가지 기본 기능 요 전날 Sass에 대해 실천에서 사용할 수있게되어 가기 위해 책을 구입하고 실제로 코딩하면서 출력했습니다. 솔직히, 앞으로도 점점 사용해 가는 기능이라고 생각하기 때문에 자신의 비망록으로서 Sass의 기본 기능을 남겨 두려고 생각합니다. Sass의 기본 기능에 관해서는 많이 인터넷에 굴러 떨어지고 있습니다만, 초보자 중의 초보자는 이쪽의 책을 보면서 손을 움직이는 편이 습득은 빠를까 생각됩... SassHTML5CSS3 【완전 오리지널 개정판】Vue 프런트 엔지니어가 추천! 망설이지 않는 네비게이션 바 이펙트 정리 23 선 이 기사에 기재된 디자인 코드는 모두 자유롭게 사용해 주셔서 괜찮습니다 (필자가 작성했기 때문에) 프로젝트에 넣어보다 충실한 디자인으로 받으면 ○ 움직임은 아래 이미지처럼 느껴집니다 1. hover한 버튼만 배경색으로 강조하는 네비게이션 바 디자인 2. 원을 그리듯 720도 회전 + 확대 내비게이션 바 디자인 3. 360도 횡 회전하면서 확대하는 직관적인 네비게이션 바 디자인 움직임은 아래 ... 디자인 패턴Vue.jsCSS초보자CSS3 화상 위에 공백이 생긴 경우의 응급 처치 다음과 같이 Chrome에서 img 태그에 margin을 붙이지 않지만 object-fit 속성으로 cover를 붙일 때 상단에 공백이 생길 수 있습니다. safari에는 상단 공백이 없습니다. img 태그의 부모 요소에 img 태그에 가볍게 해설하면 display : grid에서 자식 요소가 부모 요소의 원점 왼쪽 상단으로 이동하기 때문에 img 태그 위에 공백이 없어집니다. grid-te... object-fitCSS3img그리드 빨리! CSS로 Neumorphism 버튼 만들기 2020년 초부터 주목받고 있는 디자인, Neumorphism을 아십니까? 널리 보급된 머티리얼 디자인에 비해 소개합니다. 머티리얼 디자인은 그림자를 사용하여 요소를 떠오릅니다. 한편, Neumorphism(뉴모피즘)에서는, 그림자와 빛을 이용해 요소의 요철을 표현합니다. Neumorphism(뉴모피즘)의 기본적인 파트는 CSS3의 box-shadow를 이용해 간단하게 구현할 수 있습니다. ... NeumorphismHTMLCSS초보자CSS3 CSS만으로 랭킹 상위자 감도는 아바타 만들기 여러분, 랭킹 상위 유저의 아바타를 신성하게 하고 싶어지는 케이스는 자주 있죠? linear-gradient 를 사용하면 이미지를 사용하지 않고 좋은 느낌의 그라데이션이 걸리는 것 같기 때문에 이것을 사용합시다 💪✨ "IE9에 대응하지 않아?" 하나, 뭐라고 말하니? 그런 브라우저는 이미 멸종되었습니다. www 농담 www. Can I use MDN html scss border-radius... CSSCSS3 【비망록: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 설계 스크롤을 따르는 여러 헤더를 만드는 방법 화면 스크롤에 따라 변경되는 끈적한 헤더를 만드는 방법 ✴︎요점은 을 자작으로 만드는 방법 HTML,CSS 샘플로서 다음과 같은 헤더와 블록을 가진 div 요소의 그룹이 있다고 가정합니다. sample.html 글쎄, 이런 느낌입니다. 헤더가 끈적하지 않습니다. 동적으로 끈적 끈적하게 JS를 더합시다. JS sample.js JS 처리로 무엇을하고 있습니까? document.getElemen... 비망록자바스크립트초보자용CSS3 CSS Grid Layout을 사용해보기 CSS Grid Layout 라는 존재를 깨달았으므로 메모로 남긴다. flexbox라고 하는 레이아웃 방법도 있지만 페이지 전체의 레이아웃은 Grid Layout 쪽이 하기 쉽다고 생각했다. 빨리 코드 (HTML) 제시 index4.html 다음 스타일 시트(css) 우선 div 요소를 준비하고 스타일시트에서 "display: grid;"로 한다. 컨테이너의 자식 요소( <header></h... HTMLCSS3IE11gridlayout 【비망록:HTML/CSS】data 속성은 CSS 설계로 소중하네요? 예를 들면, 상기와 같은 버튼이 있었다고 해서, LP 제작이라든가라면, 「그 버튼에 맞는 클래스를 작성한다」라고 하는 느낌이 될까 생각합니다. hoge.html hoge.scss 이 경우 LP이면 좋지만 사이트 운용이나 사이트 리뉴얼 등에서 "버튼의 색을 파란색으로 변경하고 싶다"라든가 된 경우를 생각하면, hoge.scss 위와 같이 되어 버려, · css가 중복됩니다. · 중복 된 분 유... HTMLCSS3 [SASS/SCSS] scss에서 미디어 쿼리를 사용하여 요소의 크기를 동적으로 변경했습니다. 반응형 대응을 하는데 있어서, 대량의 요소의 height나 width를 「나중에」변경하지 않으면 안 되었다... sample.html sample.scss 원래의 스타일을 모두 mixin으로 변경해, 배율을 동적으로 건네주기로 했다 sample.scss 동영상 codepen... SassCSSCSS3scss 【CSS】z-index로 돌출을 막는다(겹침) 제작 중 앱에서, 사진을 올리고 그 자리에서 미리보기하는 기능을 구현하는 동안, z-index를 오랜만에 사용했으므로, 비망록도 겸하고, 자쿠와 소개합니다. 아래와 같이 사진이 오면 문자가 테두리 밖으로 튀어 나옵니다. 사진은 텍스트 위에 올라갑니다. 상자의 겹치는 순서(우선 순위)를 결정할 수 있는 속성입니다. 값은 정수이며 큰 값이 앞에 표시됩니다. 첫째, 텍스트는 사진 아래에 들어가기를... HTML5자바스크립트jQueryCSS3 슬라이드를 jQuery & TweenMax & CSS3의 맞춤 기술로 직접 제작 고객이 "꼭이 사이트의 슬라이드를 구현하고 싶다!"라고 강한 요청이 있었기 때문입니다. 그 사이트의 소스를 보면, 바리 발리의 풀 스크래치! 자신의 팔에서 도저히 흉내낼 수 없습니다 이것은 기존 슬라이더 플러그인이며, 잘 구현할 수 있는지 몰랐기 때문에, 자바 스크립트 라이브러리에서 자체 제작 슬라이드를 사용자 정의하기로 결정했습니다. "표시된 슬라이드" 에 class를 붙여 CSS3 Ani... tweenmax자바스크립트슬라이드jQueryCSS3 CSS에서 테이블의 행과 열을 바꿉니다. 통상의 테이블을 사용한 레이아웃(1행째가 헤더, 2행째 이후가 각 레코드)를 html의 구조는 그대로 종횡을 바꾸고 싶다. flex를 사용한 예(「 」등)도 있지만 이 경우, 빈 컬럼이 있으면 레이아웃이 무너져 버리므로 다른 방법으로 실현을 해본다. Mac이 없기 때문에 Mac 버전 safari에서는 어떻게 될지 알 수 없습니다. Windos10 × Chrome 81.0.4044.92,IE1... HTMLCSS3 【CSS & JS】 매우 간단. 햄버거 아이콘을 클릭하여 ×로 변경 & 메뉴를 슬라이드 아웃하는 방법 햄버거 메뉴를 클릭하면, ×표로 바꾸려면… … CSS로 만드는 방법도 있는 것 같지만, 어떻게 할까. ❶ 햄버거를 클릭하여 × 표시로 변경 ❷ 메뉴를 화면 오른쪽에서 슬라이드 아웃 toggle하려면 input type="checkbox" 이번에는 햄버거 아이콘을 클릭하여 메뉴를 끌어 내고 싶습니다. 그래서 햄버거 아이콘은 <label for="burger"></label> 안에 넣자. 일반적... scss자바스크립트변환CSSCSS3 【CSS만으로 만들 수 있다】 툴팁의 간단한 실장 방법 커서를 맞추면 나오는 툴팁을 작성한다. CSS만으로 만들 수 있는 것 같다. 또한 스마트폰(터치 디바이스)을 고려한 구현. 덧붙여서 툴팁이라는 것은 아래처럼 커서를 맞추면 힌트가 나오는 녀석. 의사 클래스를 조합하면 PC와 스마트폰 모두에 대응할 수 있습니다. 커서를 맞추면 툴팁이 나온다. 의사 클래스입니다.:hover에서 대응. 만지면 툴팁이 나온다. 의사 클래스입니다.:focus에서 대응... HTML5CSS3 이전 기사 보기
fontawesome을 바삭하게 짜넣기 위한 라이브러리 「wonderful.js」를 만들어 보았다 체크 박스나 라디오 버튼을 간편하게(세련되게) 편입할 수 없는가 생각했을 때, → Jquery 의존적이거나 한다 → 코피페라고 해도 힘든 .. fontawesome은 아이콘 포함에 뭔가 사용되는 것이 많다고 생각합니다. 다만, free판에도 체크 박스의 아이콘도 존재하기 때문에 조합해 사용해 간편하게 실장과 가자고 할까라고 생각했습니다. 덧붙여서, checkbox의 의사 요소(before)를... library자바스크립트FontAwesomeCSS3HTML5 【Vue 엔지니어가 만든다】 절대 실패하지 않는 CSS 네비게이션 메뉴 정리 13선 이 기사에 기재된 디자인 코드는 모두 자유롭게 사용해 주셔서 괜찮습니다 (필자가 작성했기 때문에) 프로젝트에 넣어보다 충실한 디자인으로 해 주면 ○ 움직임은 아래 이미지처럼 느껴집니다 1. 헤더로 사용하기 쉬운 간단한 네비게이션 메뉴 2. 버튼이 부드럽게 확대되는 귀여운 네비게이션 메뉴 3. 버튼이 축소하면서 입체적으로 떠오르는 네비게이션 메뉴 4. 버튼이 움푹 들어가면서 축소되는 슈퍼 움직... 애니메이션vue-cliVue.jsCSSCSS3 【Vue로 사용할 수 있다】 차이가 나는 CSS 화상 애니메이션 정리 49선 이 기사에 기재된 디자인 코드는 모두 자유롭게 사용해 주셔서 괜찮습니다 (필자가 작성했기 때문에) 프로젝트에 넣어보다 충실한 디자인으로 해 주면 ○ 어땠습니까? 도움이되면 기쁩니다. 마지막으로 메모로 코멘트란에 마음 없는 코멘트를 투고하는 쪽이 드물지만 성가시기 때문에 문답 무용으로 속공 블록 합니다.... 디자인 패턴애니메이션Vue.jsCSSCSS3 【CSS 애니메이션】HTML과 CSS만으로 만들어 보았던 「선풍기」 안녕하세요. 최근에는 CSS 애니메이션이 즐겁고 빠져 있습니다. 이번에도 에 이어 선풍기를 만들어 보았습니다! See the Pen by 미치 ( ) 여기가 선풍기와 프로그램입니다. 코드를 복사하면 똑같이 표시할 수 있다고 생각합니다! 선풍기의 팬 부분에 마우스를 켜면(hover), 목을 흔들기도 합니다. 여기에도 코드를 기재해 둡니다. index.html styles.css 이상입니다! 여... 애니메이션HTMLCSS초보자CSS3 【CSS애니메이션】HTML과 CSS만으로 콜라(탄산쥬와쥬와~)를 만들어 보았다 씨의 기사의 「 」를 보고, 굉장히 타피오카다-! 미안해! 되었습니다 거기서, 자신도 CSS 애니메이션으로 무엇인가 만들고 싶다고 생각하고, 콜라를 만들어 보았습니다! 탄산을 가능한 한 리얼하게 표현하기 위해 노력했습니다! See the Pen by 미치치 ( ) 여기가 콜라와 프로그램입니다. 코드를 복사하면 똑같이 표시할 수 있다고 생각합니다! 색이나 바꾸는 것으로, 다른 탄산 음료수도 된... 애니메이션HTMLCSS초보자CSS3 [HTML/CSS/jQuery] 스크롤하면 마커가 끌리는 애니메이션___φ(.. ) 스크롤로 마커가 끌려가는 애니메이션을 배웠기 때문에 정리. JavaScript(jQery)로 동적으로 변경하는 스타일은 SMACSS(스맥스)의 스테이트 클래스를 사용 is- 접두사를 부여. 마커 부분은 요소의 background background 가 움직여 마커가 찢어진 것처럼 보이는 구조이다. 1. 요소의 배경을 그라데이션(linear-gradient)으로 왼쪽 절반을 투명, 오른쪽 절반... 애니메이션스크롤jQueryCSS3HTML5 【초보자용】HTML+CSS 치트 시트 초보자·신졸 분들에게 HTML·CSS를 가르칠 기회가 늘어나, 자신이 초보자일 때 이런 것이 있으면 고맙다고 생각했기 때문에 간단하게 정리해 보았습니다. 등장하는 쓰는 법은 내가 빚지고있는 쓰는 법이기 때문에 보다 아름다운 쓰는 방법이 있으면 가르쳐 주시면 감사하겠습니다. 로고만 오른쪽 정렬된 헤더 탐색 자주 보는 이러한 형태의 레이아웃. 어떻게 구현합니까? 다음과 같이 구현할 수 있습니다.... HTMLscssCSSCSS3HTML5 이미지를 원형으로 표시하는 방법 절차 ①HTML을 기술한다 ②CSS를 기술한다 ③ 미리보기로 표시 확인 CSS를 작성하기 copy_practice.css 포인트! ①화상을 원형으로 하여 종횡비를 유지하고 싶은 경우는 부모 요소의 width 와 height 와 자 요소의 width 와 height 에는 같은 값을 지정할 필요가 있습니다. ② border-radius 속성은 width와 height의 값과 같은 값을 지정합니다... HTML5CSS3 Flexbox로 회전식 슬라이더 만들기 회전식 슬라이더는 대부분의 슬라이더가 하나의 이미지 등을 표시하는 반면, 여러 가지를 표시하고 좌우 화살표를 누르면 페이지 어처럼 보이지 않았던 다음 쌍을 표시하는 것 가리키고 있습니다. 이미지로서는 이런 느낌의 것 코드 간단히 설명 우선, 좌우의 화살표와 회전 목마의 표시 영역을 Flexbox로 가로 줄이고, 회전 목마는 flex: 1; 로 폭 가득 튀어나온 부분을 표시하고 싶지 않기 때문... Vue.jsflexboxCSS3nuxt.js 웹 페이지 배경 투명도와 문자 투명도를 변경하는 방법 소개 CSS에서 opacity 속성이 아닌 rgba를 사용하여 투명도를 분리하는 방법을 작성합니다. 특히 HTML, CSS를 배우기 시작할 때는 opacity 속성을 배우고 배경을 투명하게 할 수 있다고 배우고 구현합니다. 그러나 opacity 속성을 사용하면 문자까지 동일한 투명도가 되어 버립니다. 배경은 조금 얇게 하고 싶지만 문자는 보이도록 하고 싶다. 라고 생각하기 쉽지만 이번에 기재... rgbaCSS3opacity속성HTML5 IE에서도 흔들리지 않는 헤더 고정이나 왼쪽 메뉴 고정 최근에는 별로 없는 디자인일지도 모르지만, 왼쪽 메뉴, 헤더, 바닥글을 고정한 디자인으로, 디자이너의 의향에 의해, 스크롤 바의 표시 에리어가 지정되어 있었으므로, position: fixed; 를 사용해 실장하고 있었다. IE나 Edge에서는, 스크롤하면 꽤 덜컹 거리고 있어, 사용 상황으로서도, IE 유저가 많았기 때문에, Flexbox를 사용한 쓰는 방법으로 바꾸었습니다. 그 메모입니다... CSS3 Sass에 대해 최소한 알아야 할 5 가지 기본 기능 요 전날 Sass에 대해 실천에서 사용할 수있게되어 가기 위해 책을 구입하고 실제로 코딩하면서 출력했습니다. 솔직히, 앞으로도 점점 사용해 가는 기능이라고 생각하기 때문에 자신의 비망록으로서 Sass의 기본 기능을 남겨 두려고 생각합니다. Sass의 기본 기능에 관해서는 많이 인터넷에 굴러 떨어지고 있습니다만, 초보자 중의 초보자는 이쪽의 책을 보면서 손을 움직이는 편이 습득은 빠를까 생각됩... SassHTML5CSS3 【완전 오리지널 개정판】Vue 프런트 엔지니어가 추천! 망설이지 않는 네비게이션 바 이펙트 정리 23 선 이 기사에 기재된 디자인 코드는 모두 자유롭게 사용해 주셔서 괜찮습니다 (필자가 작성했기 때문에) 프로젝트에 넣어보다 충실한 디자인으로 받으면 ○ 움직임은 아래 이미지처럼 느껴집니다 1. hover한 버튼만 배경색으로 강조하는 네비게이션 바 디자인 2. 원을 그리듯 720도 회전 + 확대 내비게이션 바 디자인 3. 360도 횡 회전하면서 확대하는 직관적인 네비게이션 바 디자인 움직임은 아래 ... 디자인 패턴Vue.jsCSS초보자CSS3 화상 위에 공백이 생긴 경우의 응급 처치 다음과 같이 Chrome에서 img 태그에 margin을 붙이지 않지만 object-fit 속성으로 cover를 붙일 때 상단에 공백이 생길 수 있습니다. safari에는 상단 공백이 없습니다. img 태그의 부모 요소에 img 태그에 가볍게 해설하면 display : grid에서 자식 요소가 부모 요소의 원점 왼쪽 상단으로 이동하기 때문에 img 태그 위에 공백이 없어집니다. grid-te... object-fitCSS3img그리드 빨리! CSS로 Neumorphism 버튼 만들기 2020년 초부터 주목받고 있는 디자인, Neumorphism을 아십니까? 널리 보급된 머티리얼 디자인에 비해 소개합니다. 머티리얼 디자인은 그림자를 사용하여 요소를 떠오릅니다. 한편, Neumorphism(뉴모피즘)에서는, 그림자와 빛을 이용해 요소의 요철을 표현합니다. Neumorphism(뉴모피즘)의 기본적인 파트는 CSS3의 box-shadow를 이용해 간단하게 구현할 수 있습니다. ... NeumorphismHTMLCSS초보자CSS3 CSS만으로 랭킹 상위자 감도는 아바타 만들기 여러분, 랭킹 상위 유저의 아바타를 신성하게 하고 싶어지는 케이스는 자주 있죠? linear-gradient 를 사용하면 이미지를 사용하지 않고 좋은 느낌의 그라데이션이 걸리는 것 같기 때문에 이것을 사용합시다 💪✨ "IE9에 대응하지 않아?" 하나, 뭐라고 말하니? 그런 브라우저는 이미 멸종되었습니다. www 농담 www. Can I use MDN html scss border-radius... CSSCSS3 【비망록: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 설계 스크롤을 따르는 여러 헤더를 만드는 방법 화면 스크롤에 따라 변경되는 끈적한 헤더를 만드는 방법 ✴︎요점은 을 자작으로 만드는 방법 HTML,CSS 샘플로서 다음과 같은 헤더와 블록을 가진 div 요소의 그룹이 있다고 가정합니다. sample.html 글쎄, 이런 느낌입니다. 헤더가 끈적하지 않습니다. 동적으로 끈적 끈적하게 JS를 더합시다. JS sample.js JS 처리로 무엇을하고 있습니까? document.getElemen... 비망록자바스크립트초보자용CSS3 CSS Grid Layout을 사용해보기 CSS Grid Layout 라는 존재를 깨달았으므로 메모로 남긴다. flexbox라고 하는 레이아웃 방법도 있지만 페이지 전체의 레이아웃은 Grid Layout 쪽이 하기 쉽다고 생각했다. 빨리 코드 (HTML) 제시 index4.html 다음 스타일 시트(css) 우선 div 요소를 준비하고 스타일시트에서 "display: grid;"로 한다. 컨테이너의 자식 요소( <header></h... HTMLCSS3IE11gridlayout 【비망록:HTML/CSS】data 속성은 CSS 설계로 소중하네요? 예를 들면, 상기와 같은 버튼이 있었다고 해서, LP 제작이라든가라면, 「그 버튼에 맞는 클래스를 작성한다」라고 하는 느낌이 될까 생각합니다. hoge.html hoge.scss 이 경우 LP이면 좋지만 사이트 운용이나 사이트 리뉴얼 등에서 "버튼의 색을 파란색으로 변경하고 싶다"라든가 된 경우를 생각하면, hoge.scss 위와 같이 되어 버려, · css가 중복됩니다. · 중복 된 분 유... HTMLCSS3 [SASS/SCSS] scss에서 미디어 쿼리를 사용하여 요소의 크기를 동적으로 변경했습니다. 반응형 대응을 하는데 있어서, 대량의 요소의 height나 width를 「나중에」변경하지 않으면 안 되었다... sample.html sample.scss 원래의 스타일을 모두 mixin으로 변경해, 배율을 동적으로 건네주기로 했다 sample.scss 동영상 codepen... SassCSSCSS3scss 【CSS】z-index로 돌출을 막는다(겹침) 제작 중 앱에서, 사진을 올리고 그 자리에서 미리보기하는 기능을 구현하는 동안, z-index를 오랜만에 사용했으므로, 비망록도 겸하고, 자쿠와 소개합니다. 아래와 같이 사진이 오면 문자가 테두리 밖으로 튀어 나옵니다. 사진은 텍스트 위에 올라갑니다. 상자의 겹치는 순서(우선 순위)를 결정할 수 있는 속성입니다. 값은 정수이며 큰 값이 앞에 표시됩니다. 첫째, 텍스트는 사진 아래에 들어가기를... HTML5자바스크립트jQueryCSS3 슬라이드를 jQuery & TweenMax & CSS3의 맞춤 기술로 직접 제작 고객이 "꼭이 사이트의 슬라이드를 구현하고 싶다!"라고 강한 요청이 있었기 때문입니다. 그 사이트의 소스를 보면, 바리 발리의 풀 스크래치! 자신의 팔에서 도저히 흉내낼 수 없습니다 이것은 기존 슬라이더 플러그인이며, 잘 구현할 수 있는지 몰랐기 때문에, 자바 스크립트 라이브러리에서 자체 제작 슬라이드를 사용자 정의하기로 결정했습니다. "표시된 슬라이드" 에 class를 붙여 CSS3 Ani... tweenmax자바스크립트슬라이드jQueryCSS3 CSS에서 테이블의 행과 열을 바꿉니다. 통상의 테이블을 사용한 레이아웃(1행째가 헤더, 2행째 이후가 각 레코드)를 html의 구조는 그대로 종횡을 바꾸고 싶다. flex를 사용한 예(「 」등)도 있지만 이 경우, 빈 컬럼이 있으면 레이아웃이 무너져 버리므로 다른 방법으로 실현을 해본다. Mac이 없기 때문에 Mac 버전 safari에서는 어떻게 될지 알 수 없습니다. Windos10 × Chrome 81.0.4044.92,IE1... HTMLCSS3 【CSS & JS】 매우 간단. 햄버거 아이콘을 클릭하여 ×로 변경 & 메뉴를 슬라이드 아웃하는 방법 햄버거 메뉴를 클릭하면, ×표로 바꾸려면… … CSS로 만드는 방법도 있는 것 같지만, 어떻게 할까. ❶ 햄버거를 클릭하여 × 표시로 변경 ❷ 메뉴를 화면 오른쪽에서 슬라이드 아웃 toggle하려면 input type="checkbox" 이번에는 햄버거 아이콘을 클릭하여 메뉴를 끌어 내고 싶습니다. 그래서 햄버거 아이콘은 <label for="burger"></label> 안에 넣자. 일반적... scss자바스크립트변환CSSCSS3 【CSS만으로 만들 수 있다】 툴팁의 간단한 실장 방법 커서를 맞추면 나오는 툴팁을 작성한다. CSS만으로 만들 수 있는 것 같다. 또한 스마트폰(터치 디바이스)을 고려한 구현. 덧붙여서 툴팁이라는 것은 아래처럼 커서를 맞추면 힌트가 나오는 녀석. 의사 클래스를 조합하면 PC와 스마트폰 모두에 대응할 수 있습니다. 커서를 맞추면 툴팁이 나온다. 의사 클래스입니다.:hover에서 대응. 만지면 툴팁이 나온다. 의사 클래스입니다.:focus에서 대응... HTML5CSS3 이전 기사 보기