CSS

반응형으로 웹디자인을 하다보면 넓이와 높이, 사이즈 단위에 대한 고민을 하게 된다. 반응형을 고려하지 않고 디자인을 할 때는 px를 썼지만, 좀 더 유연한 페이지를 디자인 하고자 한다면 em, rem단위를 사용하는 것이 좋다. 이 단위들은 어떤 차이가 있고, 어떤 단위

☝️ float이란 '둥둥뜨다'의 뜻을 가지고 있으며 normalflow를 벗어나 객체를 둥둥 띄워서 정렬시키는 특징이 있다.☝️ float은 아래의 이미지처럼 텍스트 배치 용도였지만, float:left, float:right을 이용해 왼쪽 오른쪽으로 정렬이 용이해서

프로젝트를 진행하면서 이미지 파일을 저장할때마다 어떤 형식으로 저장해야 될 지 고민이 될 때가 있다. 그래서 기본적으로 png나 jpg 위주로 사용을 했었는데 가끔 다른 사이트에 들어가서 찾아보면 svg 파일을 사용한 곳들이 많아서 각자 어떤 상황에 따라서 png나 s

💁 오늘은 가변단위인 em과 %의 개념에 대해서 알게되었다.그전에는 가변단위를 활용할 줄 몰라서 고정단위인 px단위만 사용했었는데가변단위를 알면 웹사이트를 제작할 때 화면의 크기에 관계없이 자유롭게 늘어나거나 줄어들 수 있도록 만들어줘서 반응협 웹 만들기에 좋다는 사

💡 position은 '위치'란 뜻으로 요소들의 위치를 지정해주는 속성이다.이 속성을 이용해 페이지의 레이아웃을 결정할 수 있다.1\. Static & relative & absolute 💡 static은 position의 기본값이다. 기본적으로 특정한 positi

grid도 flex처럼 layout을 만들 때 사용하다.grid또한 display:grid로 설정해주면 된다.flex는 한 방향 레이아웃 시스템인 1차원적인 레이아웃이고grid는 행(row)+열(column) 두 방향 레이아웃인 2차원적인 레이아웃이다.이 행과 열은 각

flex는 정렬이나 공간을 구분해서 레이아웃을 만들 수 있는 '레이아웃 배치 전용' 기능으로 사용되는 요소이다.1\. display의 속성으로 display:flex; 이렇게 작성한다.2\. flex는 block의 성질을 가지고 있으며, 부모 요소인 container와

가상 클래스 선택자는 실제로 Html에 존재하지 않는 클래스지만 마치 클래스를 놓은것 처럼 작동한다고 하여 가상 클래스 선택자라고 부른다.구조 가상 클래스:first-child 첫 번째 자식 요소 :nth-child(n) 상위 요소의 n번째 자식 요소:last-las

그동안의 모달창은 그냥 네모난 직사각형 정사각형으로 만들면 되었는데..이번엔 말풍선 모양처럼 꼬리를 붙여서 띄워주는 형태의 모달창을 만들어야 했다. 세모모양으로 만들어내야 하는데 이걸 css로 어떻게 구현해야 될 지 모르겠어서 여러 서치를 통해 방법을 찾아냈다!!근데