본문 바로가기

front-end/html&css19

[CSS100DAYS :: DAY4] 인터렉티브 CSS 다루기 - transfrom을 이용하여 동심원 애니메이션 만들기 DAY2도 했는데 얘가 더 쉬워서 먼저 올린다. CSS 100 챌린지를 하면서 느낀 건 transfrom을 잘만 사용하면 어려워보이는 인터렉티브 동작도 생각보다 쉽게 구현할 수 있고, 그 애니메이션이란 게 대부분 반복적이다 보니 처음에만 잘 방향을 잡아두면 어렵지 않게 만들 수 있다. 가장 먼저 html 코드를 작성해준다. 지난번과 크게 다르지 않다. 이제 CSS로 기본적인 모양을 만들어주자. 배경색과 쉐이드가 있는 각각 크기가 다른 원 세 개를 만들어 준다. 여기서 infinite는 애니메이션을 무한으로 반복시켜 주는 것이고 alternate는 애니메이션을 순방향으로 진행시킨 다음 역방향으로 다시 진행시켜 주는 것을 말한다. 이렇게 하면 동심원이 펼쳐졌다가 다시 사그라드는 동작을 영원히 반복하게 된다... 2022. 1. 21.
[CSS100DAYS :: 2일차] CSS로 인터렉티브 웹 구현 - 햄버거 버튼 만들기 (transform 응용하기) 이 포스트는 100 Days of CSS 사이트의 예제를 직접 구현한 내용을 정리해 포스팅한 것입니다. 제가 아주 오랫동안 블로그를 쉬었고... 그래서 저도 제가 이걸 어떻게 만들었는지 조금도 기억나지 않아서 되새기는 김에 함께 구현 방법에 대해서 알아보도록 하겠습니다. 완성본은 다음과 같습니다. (제가 만들었지만 꽤 잘 만든 편 아닌가요?) 먼저 html 코드를 보겠습니다. 여기서는 CSS 내용이 더 중요하기 때문에 대략적인 모양을 갖출 수 있도록 구성했습니다. 기본적으로 세 개의 바 모양은 같기 때문에 효율적으로 스타일을 주기 위해 bar 클래스를 통일했고, 클릭했을 때의 애니메이션 동작이 세 개가 전부 다르기 때문에 one two three 세 개의 별개의 클래스를 주어 조절하도록 하겠습니다. 가장.. 2022. 1. 19.
[CSS] position: absolute인 아이템 가운데 정렬하기 오늘은 CSS를 통해 아이템 가운데 정렬을 하는 방법에 대해 알아보려고 합니다. 만약 당신이 다음과 같은 방법을 통해 가운데 정렬을 하려다 애를 먹은 경험이 있다면, 이 포스팅이 도움이 될 수도 있습니다. .item { position: absolute top: 50%; left: 50%; } 만약 위와 같은 방법으로 아이템을 가운데 정렬 하려고 했을 경우 아이템이 딱 가운데 정렬이 되지 않고 뭔가 애매하게 오른쪽 대각선 아래로 밀려나 있는 것을 볼 수 있을 겁니다. 왜냐하면 50%씩 밀려나는 기준이 아이템의 왼쪽 위이기 때문입니다. 그러므로 해당 아이템의 높이 및 너비의 절반만큼을 더 이동한 것 처럼 보이게 됩니다. 그러면 해당 아이템을 진짜 가운데 정렬 하기 위한 방법을 알아보겠습니다. 제가 가장 많.. 2021. 7. 20.
[Canvas 공부 2일차] 이미지 업로드 이미지 불러오기 코드 void ctx.drawImage(image, dx, dy); void ctx.drawImage(image, dx, dy, dWidth, dHeight); void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); // sx, sy는 소스의 x,y 이미지 불러오기 예제 기본적으로 이미지를 불러오는 방법은 다음과 같다. const canvas = document.getElementById("board_canvas"); const context = canvas.getContext("2d"); const imageElem = new Image(); imageElem.src = "src/img/medb.jpg";.. 2020. 12. 7.
[HTML5/Canvas] Canvas 공부 1일차 : x축 기본 애니메이션까지 Canvas Day1 Canvas란 Canvas는 HTML5에서 새로 추가된 태그 중 하나로, 페이지에 그래픽 요소를 추가할 때 주로 사용된다. 기본적으로 width, height 속성을 가지고 있는데 이는 레이아웃이 랜더링되어 있기 때문에 CSS로 임의로 크기를 지정할 경우 화면이 왜곡되어 보일 수 있어 비율을 맞춰주어야 한다. 아래 두개의 canvas는 겉으로 보기에는 같은 크기이나 실제 화면에 이미지를 그렸을 때 차이가 난다. Canvas는 일반적인 이미지 속성과 같이 margin, border 등을 줄 수 있지만 실제 캔버스에 그리는 그림에는 영향을 미치지 않는다. 기본적인 사각형 그리기 var canvas = document.getElementById("board_canvas"); var ctx.. 2020. 12. 6.
[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.
[프론트엔드 개발자 면접 문제 02] 인라인 요소와 블록 요소 HTML의 태그에는 인라인 요소와 블록 요소로 이루어져 있습니다. 이것에 대해 제대로 숙지하지 않으면 CSS가 제대로 먹히지 않습니다. 하지만 이것보다 더 큰 문제는 각 요소를 제대로 파악하지 않으면 HTML의 문서 흐름을 방해하고... 만약 면접관이 직접 만들어보라고 했을 때 인라인 요소 안애 블록 요소를 넣는다? 당신의 면접에 아주 악영향을 줄 것입니다... 블록요소와 인라인 요소를 구분하자면 다음과 같습니다. 블록요소 1. 줄 바꿈이 일어남. 2. 블록 요소 안에는 텍스트와 인라인 요소를 포함할 수 있음 3. 블록 요소 안에 또 다른 블록 요소를 포함할 수 있음 블록요소의 종류 address,article,aside,audio,blockquote,canvas,dd,div,dl, fieldset,fi.. 2020. 6. 28.
[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.

티스토리툴바