티스토리

MOOB 개발 블로그

검색하기

블로그 홈

MOOB 개발 블로그

mber.tistory.com/m

개발 공부 하는 블로그 💻

구독자: 5

방명록 방문하기

주요 글 목록

[CSS100DAYS :: DAY4] 인터렉티브 CSS 다루기 - transfrom을 이용하여 동심원 애니메이션 만들기 DAY2도 했는데 얘가 더 쉬워서 먼저 올린다. CSS 100 챌린지를 하면서 느낀 건 transfrom을 잘만 사용하면 어려워보이는 인터렉티브 동작도 생각보다 쉽게 구현할 수 있고, 그 애니메이션이란 게 대부분 반복적이다 보니 처음에만 잘 방향을 잡아두면 어렵지 않게 만들 수 있다. 가장 먼저 html 코드를 작성해준다. 지난번과 크게 다르지 않다. 이제 CSS로 기본적인 모양을 만들어주자. 배경색과 쉐이드가 있는 각각 크기가 다른 원 세 개를 만들어 준다. 여기서 infinite는 애니메이션을 무한으로 반복시켜 주는 것이고 alternate는 애니메이션을 순방향으로 진행시킨 다음 역방향으로 다시 진행시켜 주는 것을 말한다. 이렇게 하면 동심원이 펼쳐졌다가 다시 사그라드는 동작을 영원히 반복하게 된다... 공감수 0 댓글수 0 2022. 1. 21.
[CSS100DAYS :: 2일차] CSS로 인터렉티브 웹 구현 - 햄버거 버튼 만들기 (transform 응용하기) 이 포스트는 100 Days of CSS 사이트의 예제를 직접 구현한 내용을 정리해 포스팅한 것입니다. 제가 아주 오랫동안 블로그를 쉬었고... 그래서 저도 제가 이걸 어떻게 만들었는지 조금도 기억나지 않아서 되새기는 김에 함께 구현 방법에 대해서 알아보도록 하겠습니다. 완성본은 다음과 같습니다. (제가 만들었지만 꽤 잘 만든 편 아닌가요?) 먼저 html 코드를 보겠습니다. 여기서는 CSS 내용이 더 중요하기 때문에 대략적인 모양을 갖출 수 있도록 구성했습니다. 기본적으로 세 개의 바 모양은 같기 때문에 효율적으로 스타일을 주기 위해 bar 클래스를 통일했고, 클릭했을 때의 애니메이션 동작이 세 개가 전부 다르기 때문에 one two three 세 개의 별개의 클래스를 주어 조절하도록 하겠습니다. 가장.. 공감수 1 댓글수 0 2022. 1. 19.
[CSS] position: absolute인 아이템 가운데 정렬하기 오늘은 CSS를 통해 아이템 가운데 정렬을 하는 방법에 대해 알아보려고 합니다. 만약 당신이 다음과 같은 방법을 통해 가운데 정렬을 하려다 애를 먹은 경험이 있다면, 이 포스팅이 도움이 될 수도 있습니다. .item { position: absolute top: 50%; left: 50%; } 만약 위와 같은 방법으로 아이템을 가운데 정렬 하려고 했을 경우 아이템이 딱 가운데 정렬이 되지 않고 뭔가 애매하게 오른쪽 대각선 아래로 밀려나 있는 것을 볼 수 있을 겁니다. 왜냐하면 50%씩 밀려나는 기준이 아이템의 왼쪽 위이기 때문입니다. 그러므로 해당 아이템의 높이 및 너비의 절반만큼을 더 이동한 것 처럼 보이게 됩니다. 그러면 해당 아이템을 진짜 가운데 정렬 하기 위한 방법을 알아보겠습니다. 제가 가장 많.. 공감수 1 댓글수 0 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";.. 공감수 0 댓글수 0 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.. 공감수 1 댓글수 0 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을 .. 공감수 1 댓글수 0 2020. 8. 1.
[프론트엔드 개발자 면접 문제 02] 인라인 요소와 블록 요소 HTML의 태그에는 인라인 요소와 블록 요소로 이루어져 있습니다. 이것에 대해 제대로 숙지하지 않으면 CSS가 제대로 먹히지 않습니다. 하지만 이것보다 더 큰 문제는 각 요소를 제대로 파악하지 않으면 HTML의 문서 흐름을 방해하고... 만약 면접관이 직접 만들어보라고 했을 때 인라인 요소 안애 블록 요소를 넣는다? 당신의 면접에 아주 악영향을 줄 것입니다... 블록요소와 인라인 요소를 구분하자면 다음과 같습니다. 블록요소 1. 줄 바꿈이 일어남. 2. 블록 요소 안에는 텍스트와 인라인 요소를 포함할 수 있음 3. 블록 요소 안에 또 다른 블록 요소를 포함할 수 있음 블록요소의 종류 address,article,aside,audio,blockquote,canvas,dd,div,dl, fieldset,fi.. 공감수 0 댓글수 0 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{.. 공감수 1 댓글수 0 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.. 공감수 3 댓글수 0 2020. 4. 19.
[IE8 대응] opacity 대응방법 / border-radius 대응방법 IE8까지 지원해야 하는 경우 기존에 아무생각없이 되리라 생각하고 사용하던 CSS를 사용할 수 없는 경우가 발생한다. opacity 같은 경우가 그렇다. IE8에서는 opacity를 사용할 수 없다. 이게 뭔 소리냐... 혹시 내가 사용하는 CSS 클래스가 해당 브라우저에서 사용이 가능한지 알고 싶다면 다음 사이트에서 확인할 수 있다. Can I use... Support tables for HTML5, CSS3, etc Can I use... Support tables for HTML5, CSS3, etc About "Can I use" provides up-to-date browser support tables for support of front-end web technologies on deskt.. 공감수 0 댓글수 0 2020. 4. 3.
[css] 사이즈 단위 px, rem, em, vh, vw 차이 (반응형 화면 제작에 유용) CSS를 공부하다 보면 사이즈가 하나가 아니라는 것을 알게 됩니다. 포토샵 좀 써보신 분이라면 가장 기본이 되는 px 단위에 대해서는 대충 알고 계시겠지만, 오늘은 이 CSS의 자주 쓰이는 단위에 대해 제대로 정리해 보고자 합니다. PX 가장 기본적으로 사용되는 단위입니다. 이것은 픽셀단위라는 고정값에 따라 정해지기 때문에 화면의 크기나 확대와 같이 사용자가 임의로 정의할 수 없는 고정된 값을 말합니다. 이 단위는 가장 기본이 되는 단위이기 때문에 앞으로 설명할 다른 단위들의 기준이 됩니다. em em은 부모 요소를 기준으로 자식 요소의 크기를 정하는 것을 말합니다. .parent{ font-size:12px } .child{ font-size:1.2em } 다음과 같이 부모 요소를 12px로 정의했을 .. 공감수 3 댓글수 5 2020. 3. 20.
[html] form 태그에 대해 알아보자 / POST와 GET 차이 태그는 웹 페이지에서의입력 양식을 말한다. 로그인 창이나, 회원가입 폼 등이 바로 태그를 사용하고 있습니다. 이 태그는 입력된 데이터를 한 번에 서버로 전송합니다. 백엔드를 공부하시는 분들도 이 태그에 대해서는 자세히 알아두는 것이 좋습니다. 폼 태그의 기본적인 구성은 다음과 같습니다. First name: Last name: 여기서 을 구성하는 요소들을 하나씩 살펴보도록 하겠습니다. action : 폼을 전송할 서버 쪽 스크립트 파일을 지정 name : 폼을 식별하기 위한 이름 method : 서버에 전송할 http 메소드 (GET 또는 POST) input의 type : 입력받을 요소의 종류를 정한다. number, text, password 등. 반드시 맞는 것으로 입력해 둘 것! label : 폼.. 공감수 0 댓글수 0 2020. 2. 15.
[HTML/CSS] display 속성 알아보기 (display:none과 visibility:hidden 차이) display는 요소를 어떤 형태로 나타나게 할 것인지를 말하는 속성으로, 기본적으로 네가지가 있습니다. 최신 웹에선 flex나 grid와 같은 새롭고 편리한 속성들이 등장하지만 브라우저 호환도가 떨어지는 등의 이슈가 있어, 나중에 다루도록 하겠습니다. display : block display : inline-block display : inline display : none display : block 항상 새로운 라인에 요소가 배치되고 화면 크기의 전체 가로폭을 영역으로 차지합니다. width 또는 height 지정을 통해 가로 세로폭을 조절할 수 있습니다. 태그가 기본적으로 block을 기본 display 설정으로 갖습니다. 아래 그림의 배경이 빨갛게 된 부분은 영역으로 기본적으로 display .. 공감수 12 댓글수 0 2020. 2. 11.
[css] 가상 클래스(pseudo-class)와 가상 요소 선택자 (pseudo-element) 가상 선택자CSS에는 가상 요소(:pseudo-element)와 가상 클래스(:pseudo-class)가 있다. 이것들을 사용해서 html 문서의 수정 없이 CSS만으로 디자인적 요소를 추가할 수 있어 html 문서에 쓸데없는 태그를 사용하여 화면 리더기 등에 쓸데없는 정보가 읽히거나 불필요한 클래스를 남발해 코드 가독성을 낮추지 않게 한다. 선택자:가상클래스 { property: value; } 앵커 가상 클래스앵커 가상 클래스는 화면의 특정 요소에 커서가 향했을 때 특정 디자인을 입혀주는 등 어떤 요소에 동적인 스타일을 입혀준다.앵커 가상 클래스에서 가장 자주 쓰이는 패턴이다. :link는 아직 방문하지 않은 링크를 나타낸다. 다음을 사용해서 아직 방문하지 않은 링크를 파란색으로, 방문한 링크는 밑줄.. 공감수 2 댓글수 0 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 일 때 (예를들어.. 공감수 5 댓글수 0 2020. 1. 30.
[html/javascript] CANVAS 알아보기 / 기본 사용법 & svg와 성능 비교 HTML5 : Canvas canvas 는 페이지에 그래픽적인 요소를 그릴 때 사용되는 html5 의 새로운 태그이다. 먼저 html 문서에 다음과 같이 를 삽입한다. 위의 요소를 js를 통해 찾아 제어하는 것이 canvas 의 기본적인 동작이다. const canvas = document.querySelector("canvas"); const context = canvas.getContext("2d"); 캔버스에 어떤 요소를 그리기 위해서 가장 처음으로 getContext()를 사용하여 위치를 정의할 필요가 있다. 기본적으로 2d로 정의되며, 위 요소를 사용하면 canvas에 2d 좌표로 위치를 지정할 수 있게 된다. beginPath(); 도형을 그리기 전에 지정해줌 closePath() : 도형의 .. 공감수 1 댓글수 2 2020. 1. 23.
[CSS] 반응형 박스 만들기 / 화면의 크기가 변해도 모양이 망가지지 않도록 css는 아무리 해도 어렵다.... 반응형 박스 만들기 화면크기에 따라 가진 네모 박스는 만들기 쉽다. 일정 고정값을 가진 박스를 만들면 된다. PC 화면에서는 이렇게 만드는 게 낫지만, 반응형 웹이나 모바일 UI를 제작할 때는 디바이스 크기에 따라 콘텐츠 크기가 조절되어야 한다. .square { width: 100px; height: 100px; } 비율(%)에 맞춰서, 만약 다음처럼 작업을 한다면 어떻게 될까? 이럴 경우 상하-좌우 크기가 모두 변할 때는 정사각형 모양이 깨지지 않겠지만, 좌우 또는 상하만 변할 때는 모양이 찌그러지게 된다. 이것을 헤결하기 위한 방법은 무엇일까? .square { width: 50%; height: 50%; } 해결 width :100%만 준 후 다음과 같이 가상 .. 공감수 6 댓글수 0 2020. 1. 22.
[html] form 태그 공부 FORM Tag HTML에서의 입력 양식 action 폼을 전송할 서버 쪽 스크립트 파일 저장 name 폼을 식별하기 위한 이름 지정 accept-charset 폼 전송에 사용할 문자 인코딩 지정 target action에서 지정한 스크립트 파일을 다른 위치에서 열도록 지정 ex)_blank method 폼을 서버에 전송할 메소드를 정함 get 이나 post get과 post 방식의 차이 폼을 구성하는 엘리먼트 fieldset : 폼 태그 안에 관련있는 폼 엘리먼트를 그룹화 할 때 사용. legend 태그를 하위에 사용하여 그룹화 한 폼을 목적에 맞게 이름을 지정할 수 있다. 개인 정보 입력 이름 : 나이 : 개인 정보 입력 이름 : 나이 : tag 속성 type : 태그 모양을 다양하게 변경할 수 있습.. 공감수 0 댓글수 0 2019. 8. 18.
프론트엔드 개발자 면접 질문 모음 HTML window 객체란 무엇입니까? window 객체 : 실행 시 가장 상위에 존재하는 객체. 변수 또는 함수 선언 시 이 window 객체 안에 선언된다. 이 window 객체의 프로퍼티를 탐색하는 방법에는 여러가지가 있다. window.location : 현재 브라우저의 주소 window.location.href : 창에 입력된 주소 window.navigator : 브라우저 자체에 대한 정보 window.document : 문서의 html/css등에 접근가능 자세한 설명 [프론트앤드 개발자 면접질문 모음] 01. window 객체란 무엇일까? 안녕하세요. 제가 블로그 포스팅을 하는 것 중에 프론트앤드 개발자 면접질문 모음이라는 포스팅이 언제나 가장 많은 조회수를 차지하고 있더라고요. 🤔그런데 .. 공감수 3 댓글수 1 2019. 8. 15.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.