본문 바로가기
styled component, emotion 소개 2020. 6. 3. SASS(or CSS)로 스타일링을 할 경우, 나중에 많은 컴포넌트를 유지보수하기에는 시간이 너무 오래 걸린다. 또한 다른 개발자가 해야할 경우 어느게 어떤 것인지 바로 찾기가 쉽지 않다. 때문에 개발자들은 더 효율적으로 코딩을 하기 위해 최근 css-in-js 스타일링 방식인 styled component와 emotion을 사용하고 있다. 두 가지 모두 자바스크립트 파일 안에 CSS를 작성하는 형태로 차이점이 엄청 크지 않다. Styled Component 홈페이지: https://styled-components.com/ 설치 npm install --save styled-components 사용법 emotion 홈페이지: https://emotion.sh/docs/introduction 설치 npm ..
image vh, vw 속성 2020. 4. 22. 최근 대부분이 다 반응형 웹이다. 브라우저 창을 어떻게 움직이든 웹의 모든 내용이 그에 맞게 보여줘야 한다. 하지만 reset.css에 border-box, margin, padding 값을 다 초기화하더라도 100% 차지 않는 경우가 있다. 이럴 때 사용하는 속성이 image의 vh, vw 값이다. vh는 vertical height, vw는 vertical width의 의미로 브라우저 높이와 너비값에 맞춰진 단위이다. 예를 들어 브라우저 창의 높이가 800px이라면 1vh는 8px이고, 너비가 600이라면 1vw는 6px이다. See the Pen VwvPZbv by howdy-mj (@howdy-mj) on CodePen. 코드를 쳐서 본인의 브라우저 창에서 확인하면 더 빠르게 이해가 갈거라 생각한다.
[CSS] Image-Sprite 2020. 4. 3. Image-Sprite(이미지 스프라이트)란 하나의 이미지 파일에 여러 개의 이미지를 넣어 관리하는 것이다. 백문이 불여일견, 바로 이미지 파일로 보자. 보통 게임같은 애니메이션이 들어간 곳에서 쓰이며, 하나의 이미지에서 픽셀(px) 위치만 다르게하여 잘라 쓴다. 왜냐하면 사용된 이미지가 많을 경우, 웹 브라우저가 이미지 수 만큼 서버에 요청해야 해서 로딩 시간이 오래 걸리기 때문이다. 인스타그램의 좋아요, 댓글, 책갈피 기능도 HTML로 값을 다르게 주면 위치가 바뀌는걸 볼 수 있다. 이미지 스프라이트는 CSS의 background 속성으로 바꿀 수 있다. background 속성 background는 font 속성과 비슷하게 세부적인 속성들을 한 번에 쓸 수 있다. 속성 의미 값 background-..
[CSS] Flex 2020. 3. 30. 홈페이지 레이아웃을 구성할 때 가장 많이 사용되는 것 중 하나가 바로 이 Flex라 생각한다. Flex는 세로로 쭉 나열된 것들을, 가로로 붙이는 역할을 한다. 아래처럼 원래는 로 세로로 붙여져 있을 것을, flex를 활용해 가로 3개로 바꿀 수 있다. See the Pen vYObRNN by howdy-mj (@howdy-mj) on CodePen. 이는 상단 메뉴바를 만들 때에도 자주 쓰인다. Flex에는 감싸고 있는 container가 필수적이며, 그 안의 items들을 주의하면서 속성을 사용해야 한다. container에는 display, flex-flow, justify-content 등의 속성이 있으며, items에는 order, flex, align-self 등의 속성이 있다. Flex Co..
[CSS] float 2020. 3. 23. 보고서 혹은 pt 발표를 할 때, word, ppt에 이미지와 텍스트를 같이 삽입하는 경우가 많다. 이때 우리는 이미지 위치를 어디에 둘 것인지, 텍스트 바로 옆 혹은 하단 혹은 겹치게 둘 때 '이미지 우클릭' - '텍스트 줄바꿈'을 통해 위치를 정한다. 이 같이 이미지와 텍스트의 위치를 변경할 때 사용되는 것이 CSS의 float 프로퍼티이다. 웹페이지의 전체적인 레이아웃을 position으로 바꾼다면, float의 left, right, none 속성을 통해 더 정교하게 바꿀 수 있다. 이미지 출처: https://www.w3schools.com/css/css_float.asp 하지만 자식 모두 float 속성을 가진다면, 부모의 높이가 0으로 측정되어 위로 올라간다. 이를 해결하기 위해 몇 가지 방..
[CSS] inline, block, inline-block 2020. 3. 23. HTML에서 태그를 통해 block과 inline 요소를 나눌 수 있다. block에는 , , , , , 등으로 한 줄을 차지한다. 반대로, inline 요소인 , , 등 태그는 여러개 작성할 경우 같은 줄에 올 수 있다. HTML 첫째줄 둘째줄 셋째줄 CSS div, p, span { background-color: yellow; } 위와 같이 적용할 경우, 아래와 같은 화면이 나온다. div와 p태그는 한줄 전체를 잡아먹지만, span은 딱 텍스트가 있는 곳에만 존재한다. 이처럼 한줄 전체를 먹는 것을 block, 해당 공간에만 있는 것을 inline이라 한다. 이 같은 성질은 HTML 뿐만 아니라, CSS의 display라는 프로퍼티를 통해서도 바꿀 수 있다. span { display: block..
[CSS] position 2020. 3. 23. HTML로 기본 틀을 잡을 수 있다면, CSS로는 그 틀을 자유자재로 바꿀 수 있다. 가장 보편적인 예로는 블로그에서 기본적으로 제공하는 레이아웃 바꾸는 것과 같이, 우리는 CSS의 position을 통해 어느 페이지든 변경할 수 있다. position에는 relative, absolute, fixed가 가장 많이 사용된다. relative relative는 단독으로 사용되지 않고 top, right, bottom, left 프로퍼티가 있어야 이동이 가능하다. HTML 1 2 3 CSS div { position: relative; border: 3px solid #73AD21; height: 50px; } .two { left: 50px; } .three { top: -20px; } 차이점을 보기 위해..

티스토리툴바