CSS9 [CSS100DAYS :: DAY4] 인터렉티브 CSS 다루기 - transfrom을 이용하여 동심원 애니메이션 만들기 DAY2도 했는데 얘가 더 쉬워서 먼저 올린다. CSS 100 챌린지를 하면서 느낀 건 transfrom을 잘만 사용하면 어려워보이는 인터렉티브 동작도 생각보다 쉽게 구현할 수 있고, 그 애니메이션이란 게 대부분 반복적이다 보니 처음에만 잘 방향을 잡아두면 어렵지 않게 만들 수 있다. 가장 먼저 html 코드를 작성해준다. 지난번과 크게 다르지 않다. 이제 CSS로 기본적인 모양을 만들어주자. 배경색과 쉐이드가 있는 각각 크기가 다른 원 세 개를 만들어 준다. 여기서 infinite는 애니메이션을 무한으로 반복시켜 주는 것이고 alternate는 애니메이션을 순방향으로 진행시킨 다음 역방향으로 다시 진행시켜 주는 것을 말한다. 이렇게 하면 동심원이 펼쳐졌다가 다시 사그라드는 동작을 영원히 반복하게 된다... 2022. 1. 21. [css] display:block과 visibility:none의 차이 css의 기능을 사용하여 화면의 어떤 요소를 화면상에 보이지 않게 할 때 보통 display:none를 사용한다. 비슷한 기능으로 visibility:hidden이 있는데 종종 이 두개의 차이점을 묻는 질문을 면접에서 물어볼 때가 있다. 이 두개의 차이는 무엇일까? 먼저 display:inline나 display:block속성을 사용해 보았다면 알겠지만 display는 어떤 요소의 속성 자체를 변화시킨다. 다음은 div{width:200px;height:200px;}를 준 이다. div는 디폴트로 display:block 속성이기 때문에 너비와 높이를 줄 수 있다. 다음과 같은 div 세 개가 나란히 있다고 했을 때 가운데 div에만 display:none을 줘보자. 여기에 display:inline을 .. 2020. 8. 1. [css] 반응형 레이아웃을 위한 flexbox 알아보기 (브라우저별 flexbox 사용하기) display:flex 는 기존 방식에서는 구현하기 어려운 레이아웃을 쉽게 구현할 수 있게 해주는 css 요소이다. 특히 반응형 레이아웃을 만들 때 효과적인데 단점이라면 최근에 나온 요소이기 때문에 과거 버전의 브라우저에서는 동작을 하지 않을 수도 있다. 특히 IE11에서는 부분적으로 지원하기 때문에 display:-ms-flex 라고 추가적으로 명시해 주어야 한다. display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex; 만약 다음과 같은 화면이 있다고 생각해 보자. 1 2 3 4 여기에서 부모 요소(parent)에 display:flex를 주면 바로 아래의 자식 요소를 flex context로 만들 수 있다. .parent{.. 2020. 4. 23. [CSS/JS] 테이블 행열(가로세로) 위치 바꾸기 API에서 데이터를 어떻게 주느냐에 따라 테이블 요소의 행과 열을 바꿔야 할 순간이 올지도 모른다. 테이블 행/열을 바꾸는 방법은 다음과 같다. col col col col row Dolor Dolor Dolor row Dolor Dolor Dolor row Dolor Dolor Dolor table{ display:flex; display: -webkit-box; display: -ms-flexbox; overflow-x: auto; overflow-y: hidden; } tbody {display:flex} th,td{display:block} thead와 tbody를 포기한다면 css를 요렇게만 사용하면 된다. col col col col row Dolor Dolor Dolor row Dolor D.. 2020. 4. 19. [css] 사이즈 단위 px, rem, em, vh, vw 차이 (반응형 화면 제작에 유용) CSS를 공부하다 보면 사이즈가 하나가 아니라는 것을 알게 됩니다. 포토샵 좀 써보신 분이라면 가장 기본이 되는 px 단위에 대해서는 대충 알고 계시겠지만, 오늘은 이 CSS의 자주 쓰이는 단위에 대해 제대로 정리해 보고자 합니다. PX 가장 기본적으로 사용되는 단위입니다. 이것은 픽셀단위라는 고정값에 따라 정해지기 때문에 화면의 크기나 확대와 같이 사용자가 임의로 정의할 수 없는 고정된 값을 말합니다. 이 단위는 가장 기본이 되는 단위이기 때문에 앞으로 설명할 다른 단위들의 기준이 됩니다. em em은 부모 요소를 기준으로 자식 요소의 크기를 정하는 것을 말합니다. .parent{ font-size:12px } .child{ font-size:1.2em } 다음과 같이 부모 요소를 12px로 정의했을 .. 2020. 3. 20. [css] 가상 클래스(pseudo-class)와 가상 요소 선택자 (pseudo-element) 가상 선택자CSS에는 가상 요소(:pseudo-element)와 가상 클래스(:pseudo-class)가 있다. 이것들을 사용해서 html 문서의 수정 없이 CSS만으로 디자인적 요소를 추가할 수 있어 html 문서에 쓸데없는 태그를 사용하여 화면 리더기 등에 쓸데없는 정보가 읽히거나 불필요한 클래스를 남발해 코드 가독성을 낮추지 않게 한다. 선택자:가상클래스 { property: value; } 앵커 가상 클래스앵커 가상 클래스는 화면의 특정 요소에 커서가 향했을 때 특정 디자인을 입혀주는 등 어떤 요소에 동적인 스타일을 입혀준다.앵커 가상 클래스에서 가장 자주 쓰이는 패턴이다. :link는 아직 방문하지 않은 링크를 나타낸다. 다음을 사용해서 아직 방문하지 않은 링크를 파란색으로, 방문한 링크는 밑줄.. 2020. 1. 31. [css] 자식요소가 float / absolute 일 때 부모 요소 height, width 주기 자식 요소가 float일 때 자식 요소가 float 되어 있으면 (말 그대로 자식 요소가 떠 있는 상태이기 때문에) 부모 요소(상위 요소)의 height가 0이 될 수 있다. 이 때 주요 해결방법은 두가지이다. 사실 첫번째 방법으로 어지간하면 해결 가능. 부모 요소에 overflow:hidden .parent{ overflow: hidden; /* 또는 overflow: auto; */ } 부모 요소의 가상 선택자에 clear:both .parent::after { content: ""; display: block; clear: both; } 자식 요소가 position : absolute 일 때 부모 요소와 자식 요소의 크기가 같아야 하는데 자식 요소가 position:absolute 일 때 (예를들어.. 2020. 1. 30. [CSS] 반응형 박스 만들기 / 화면의 크기가 변해도 모양이 망가지지 않도록 css는 아무리 해도 어렵다.... 반응형 박스 만들기 화면크기에 따라 가진 네모 박스는 만들기 쉽다. 일정 고정값을 가진 박스를 만들면 된다. PC 화면에서는 이렇게 만드는 게 낫지만, 반응형 웹이나 모바일 UI를 제작할 때는 디바이스 크기에 따라 콘텐츠 크기가 조절되어야 한다. .square { width: 100px; height: 100px; } 비율(%)에 맞춰서, 만약 다음처럼 작업을 한다면 어떻게 될까? 이럴 경우 상하-좌우 크기가 모두 변할 때는 정사각형 모양이 깨지지 않겠지만, 좌우 또는 상하만 변할 때는 모양이 찌그러지게 된다. 이것을 헤결하기 위한 방법은 무엇일까? .square { width: 50%; height: 50%; } 해결 width :100%만 준 후 다음과 같이 가상 .. 2020. 1. 22. 프론트엔드 개발자 면접 질문 모음 HTML window 객체란 무엇입니까? window 객체 : 실행 시 가장 상위에 존재하는 객체. 변수 또는 함수 선언 시 이 window 객체 안에 선언된다. 이 window 객체의 프로퍼티를 탐색하는 방법에는 여러가지가 있다. window.location : 현재 브라우저의 주소 window.location.href : 창에 입력된 주소 window.navigator : 브라우저 자체에 대한 정보 window.document : 문서의 html/css등에 접근가능 자세한 설명 [프론트앤드 개발자 면접질문 모음] 01. window 객체란 무엇일까? 안녕하세요. 제가 블로그 포스팅을 하는 것 중에 프론트앤드 개발자 면접질문 모음이라는 포스팅이 언제나 가장 많은 조회수를 차지하고 있더라고요. 🤔그런데 .. 2019. 8. 15. 이전 1 다음
