프로그래밍/Web38 [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. [Web] Shadow dom에 대해 알아보자 파일 선택 버튼, placeholder를 보면 기존 태그와는 뭔가 다르다. div 태그 같은것은 그냥 네모난 박스가 하나 생기는건데 얘네들은 뭔가 결합된 형태같다. 실제로 결합이 되어있고, 각 하나하나의 속성값을 바꿔줄 수 있다. 근데 css selector 이름이 굉장히 단순하지 않다. 외워서 할 수 있는 놈들이 아니다. 애초에 결합되서, 스타일을 바꾸기 힘든 애들을 Shadow Dom이라고 한다. 이것들 어떻게 바꾸냐면, 답은 역시 크롬이다. 우선 크롬 -> 속성 -> preferences -> Show user agent shadow DOM을 활성화 시켜야한다. 그럼 숨겨있던 shadow DOM이 개발자도구에 보일 것이다. 위에서 주목해야할 부분은 pseudo="-webkit-file-upload-.. 2022. 5. 9. [Web] pseudo element 간단한 소개 pseduo class는 .container i:hover{ opacity: 0.5; } 이런식으로 주면 됐다. 자세한건 여기를 참고. See the Pen Untitled by Jirong (@jirongkim) on CodePen. mail이라는 클래스를 사용하면 굳이 머리말 꼬리말을 적을 필요없이 자동으로 입력되는 클래스를 작성한다고 하자. HTML에서 구현할 수도 있다. 하지만, 아주 많이 쓰이는 클래스라면 HTML이 너무 복잡해지고 더러워질 경우가 있기 때문에 이런걸 쓴다. 이외에도 다양한 element-pseudo가 있다. 또한 크롬 개발자 도구에서는 ::after를 클릭하면, 적용된 css를 확인할 수 있다. 2022. 5. 9. 이전 1 2 3 4 5 ··· 7 다음
