본문 바로가기

프로그래밍181

[자바스크립트] 원하는 요소 사라지게/나타나게 만들기 See the Pen block display/none by Jirong (@jirongkim) on CodePen. document.getElementById('alert').style.display = 'block'; 태그의 onclick에 위의 문장을 입력하면 된다. 근데 저렇게 쓰면 뭔가 html이 더러워지기 때문에 addEventListener라는걸 쓴다. 아래처럼 쓸 수 있다. alertbox임. 닫기 button1 button2 뭔가 더 복잡해진것은 착각이다. 저게 훨씬편하다. 2022. 5. 15.
[Web] Flip효과 만들기 이런거 만들어보자. Flip이라고 한다. 자세한 내용은 https://www.w3schools.com/howto/howto_css_flip_card.asp 여기를 참고하면 된다. 대신 영어를 잘해야함. See the Pen flip by Jirong (@jirongkim) on CodePen. 안정적으로 애니메이션을 작동시키기 위해서는 가장 바깥쪽에 outer-wrap이 꼭 필요하다. 이게 없으면 돌아가다가 말고 이런 이상한 동작 함. transform-style: preserve-3d를 이용하면 요소를 3d처럼 표현할 수 있게 된다. 이렇게 화면을 앞, 뒤로 구성하고, 뒤집을 수 있는 이유이다. backface-visibility: hidden; 으로 앞, 뒤 화면이 동시에 보이는 현상을 잡을 수 있다. 2022. 5. 14.
[Web] Sticky를 이용해서 이미지는 가만히 있고 글만 움직이게 비교적 최신에 나온 css 기법이라고 한다. 사용법은 아주 간단하다. position : sticky; top : 10%; 이렇게 해주면 스크롤 내리다가 이미지가 top 10%가 되는 때에 고정된다. 그리고는 부모태그까지 스크롤이 끝나면 sticky가 해제된다. position : fixed랑 비슷한데 조금 더 기능이 심화된 느낌이다. See the Pen Untitled by Jirong (@jirongkim) on CodePen. 2022. 5. 13.
[Web] CSS 그리드 레이아웃 몇가지 예시 그리드 레이아웃은 모눈종이에 색칠하는 식으로 화면을 구성할 수 있는 방법이라고 생각하면 된다. 이런 블로그 같은 레이아웃을 구성하려고 하면 기존에 쓰던 float같은 방법과는 전혀다르다. 훨씬 직관적이고 쉬운것 같다. 9개의 큐브 같은 사각형이 있다고 생각하고, 그곳을 원하는것으로 채운다고 생각하면 된다. 아래의 코드 같은 경우의 상단 4개의 블럭은 nav로, 나머지는 영역을 나눠서 쓰면 된다. grid-template-areas에서 쉽고 보기쉽게 쓸 수 있다. 1 2 3 .grid-container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; grid-template-are.. 2022. 5. 13.
[Web] transform, animation을 이용해서 나름 복잡한 애니메이션 만들기 Animation을 이용하면 신기한 효과들을 만들 수 있다. 특히 왔다갔다 이런걸 쉽게 만들 수 있다. 기본적인 문법은 이렇다. .box:hover { animation-name: shake; animation-duration: 1s; } @keyframes shake { 25% { transform: rotate(-30deg); } 50% { transform: rotate(30deg); } 75% { transform: rotate(-30deg); } 100% { transform: rotate(0deg); } } @keyframes 이름 { } 이렇게 선언한 이후에 내부에 각 %별로 행동을 지정해줄 수 있다. 그리고 애니메이션이 나타나야할 위치에 animation-name, animation-dur.. 2022. 5. 13.
[Web] SASS(SCSS)를 사용해보자(예제, 연습문제) Sass 홈페이지에 들어가보게 되면 이렇게 나와있다. "Sass is the most mature, stable, and powerful professional grade CSS extension language in the world" 대충 번역하자면 짱 좋은 CSS 확장 언어 정도이다. 기존의 CSS 언어가 사용하기 구렸다면 SASS를 통해 프로그래밍적으로 쓸 수 있게 되었다. 즉, CSS를 이용하는건 동일하다. SASS를 컴파일하면 CSS 파일이 나온다. SASS, SCSS가 크게 다른건 아니고, 몇가지 문법적으로 다른게 있다. 전 세계적으로 .scss 확장자를 많이 사용하고 자료도 많다. 그렇지만 보통 SASS,SCSS를 SASS로 일컬어 부른다. C언어 같은것에 비하면 굉장히 쉽게 배울 수 있다.. 2022. 5. 13.

티스토리툴바