본문 바로가기

Language/CSS

 (16)
<CSS 기초> 16. 3D 기본 1. 3D로 만들기 * 비틀기 - 간단하게 옆으로 살짝 비틀어진 카드를 만든다고 가정하자. 그러면 우리는 다음과 같이 작성할 수 있다. transform: rotateY(45deg); - 3d 형태로 옆으로 45도 돌린 속성을 주기위해 원하는 곳에 위와 같은 트랜스폼 속성을 줄 수 있다. - 하지만 실제로 이렇게 해보면 3D라 하기엔 어색하고 납작하다. 이 때 필요한 것이 perspectiv속성이다. * 속성 - 위의 부모태그를 3D공간으로 만들면 위의 카드가 3d처럼 보인다. perspective : 500px; - 500px은 눈에서의 거리라고 볼 수 있다. 즉 0에 가까워질수록 모양의 변화가 극대화되어 보인다. - 위의 속성에도 불구하고 또 다른 문제가 생긴다. 부모안에 여러개의 3D 카드들을 넣으..
<CSS 기초> 15. Transform & Visibility 1. Transform * 이동 - 이 속성은 앞서 잠깐 다루었던 속성이다. 말그대로 요소의 형태를 변형시킬 때 사용한다. 그러나 다른요소에 영향을 주지 않는다. translate()로 x, y 값을 입력하여 자기 사이즈 기준으로 이동이 가능하다. transform : translateX(50%); : 위와 같이 x에만 적용도 가능하다. - 이 때 transform은 기본적으로 기준점을 가운데로 위치시키지만 이를 변경할 수도 있다. transform-oringin : left top; : 위를 작성하면 기준점이 박스의 왼쪽 위 모서리가 될 것이다. 이는 %나 px로도 작성가능하다. left top은 0% 0%와 같은 의미이며 right top은 100% 100%와 같은 의미이다. * 크기 - scale(..
<CSS 기초> 14. Box-shadow & Opacity 1. Box shadow 이는 말그대로 박스에 그림자를 주는 속성이다. box-shadow 의 값은 다음과 같이 5개의 값이 순서대로 들어간다. h-offset v-offset blur spread color 왼쪽부터 x값 y값 흐린정도 그림자크기 색상을 의미한다. spread를 생략해도 되지만 순서대로 5개를 사용하는 것을 추천한다. box-shadow: 0 10px 16px 0 rgba(255,75,75,0.5) ; 위와 같이 입력하면 붉은색의 그림자가 만들어진다. 참고로 2020년의 UI 트렌드인 빛과 그림자로 사물을 보여주는 Neumorphism도 구현이 가능하다. 위 사이트는 Neumorphism을 만들어서 css코드로 제공받을 수 있다. 2. Opacity Opacity속성은 투명도를 나타낸다..
<CSS 기초> 13. Transition & Animation 이번 장에서 다룰 내용은 트랜지션과 애니메이션이다. 둘다 뭔가 움직이거나 변경되는 것을 나타낼 대 사용한다. 1. Transition 트렌지션의 경우 호버와 같은 곳에 속성의 다른 변화값을 적어 둔 곳이 있을 때, 즉 어떤 조건으로 인해 변화가 생길 때 자연스럽게 그 속성으로 변화하는 것을 보여주는 속성이다. transition : font-size 2500ms ease-in 1s 트랜지션에 적을 수 있는 값은 property, duration, timing-function, delay가 있다. 하나씩 알아보자. - property : 속성은 변화가 일어나는 속성이 무엇인지 적으면 된다. 기본값은 all이다. 작성하지 않으면 현재 개체의 변경이 이루어지는 모든 속성에 대해 트랜지션이 작동한다. - dur..
<CSS 기초> 12. Background 이번 장은 Background 속성이다. 이는 지금까지는 박스의 색이나 텍스트의 배경 색을 입힐 때 사용했으나 실은 주로 이미지를 삽입할 때 사용한다. 하나하나 알아보자. 1. 배경색 가장 기본적인 속성으로 background-color 을 통해 색을 줄 수 있으며 hex코드 rgb, rgba 모두 사용 가능하다. 2. 이미지 삽입 background-image : url(); 을 통해 경로를 삽입하여 이미지를 넣을 수 있다. 기본적으로 원래 크기대로 넣어지며 이미지가 작으면 바둑판배열식으로 반복된다. 3. 반복속성 이미지는 기본적으로 바둑판배열식으로 반복된다. 따라서 background-repeat : no-repeat; 을 통해 반복을 삭제할 수 있다. 4. 사이즈 사이즈는 background-siz..
<CSS 기초> 11. Web Fonts 이번 장은 지난 장에 이어서 텍스트에 관한 내용이다. 지난 장에서 텍스트에 서체를 입히는 방법을 배웠다. font-family를 이용하는 방식이었는데, 이 때 중요한 문제가 있다. 바로 그 웹을 보는 사람이 그 폰트가 없을 수 있다는 것이다. 그래서 web font를 이용해서 온라인 상에서 폰트를 받아서 보여줄 수 있도록 하는 방법을 알아보자. 1. 간접적 방법 먼저 간접적으로 가져오는 방식이다. 이는 예를 위해 구글 폰트사이트에 들어가보자. 원하는 폰트를 클릭하여 select하면 오른쪽 창에 추가된다. 그럼 구글에서 그것을 html문서와 css문서에서 사용할 수 있도록 코드를 제공하는 것을 볼 수 있다. 형태로 제공되는 것은 html문서의 헤드에 넣고, font-family부분은 css에 넣도록 하자...
<CSS 기초> 10. Typography 이번 장에서 배울 내용은 텍스트를 디자인 하는 것이다. 속성들을 알아보기 전에 먼저 텍스트 디자인에서의 요소들을 알아보자. 위에서 왼쪽부터 글자의 크기를 나타내는 폰트사이즈, 글자의 자간을 나타내는 레터스페이스, 글자의 베이스라인, 줄간격이다. 1. Font-size 가장 먼저 알아볼 속성은 역시 글자의 크기이다. 폰트사이즈는 다음과 같이 사용한다. font-size : 12px ; 위는 폰트 사이즈를 12px로 하라는 의미이다. px는 절대단위인데 em과 rem 과 같은 상대단위도 사용할 수 있다. em 은 equal to capital M이라는 의미인데, 부모나 자신에게 주어진 절대단위의 사이즈를 1em 으로 받고 사용한다. rem은 root em 으로써 html을 기준으로 한다. html에 폰트사이..
<CSS 기초> 09. Media Query 이번 장에서 배울 내용은 미디어 쿼리이다. 이는 반응형 웹에서 필수적인 속성이다. HTML에서 view port를 메타데이터로 선언해야만 사용 가능하다. @media screen and (min-width : 768px) { } 위와 같은 방식으로 사용 가능하다. 위는 768이상에서의 스타일을 작성하겠다는 의미이다. 참고로 미디어쿼리를 쓰며 자주 width를 100%를 주는 경우가 많아지는데 이 때 height를 100vh 로 선언하면 보이는 viewport 의 높이만큼 크기를 선언 가능하다. 미디어쿼리는 작은 사이즈(모바일)부터 대응하는게 정석이다. 사이즈별로 수정하고 싶은 부분에 대해서만 미디어쿼리를 선언하고 작성하면 되는데, 위에서 bottom : 0; 에서 선언한 것을 특정 사이즈에서 top : ..
<CSS 기초> 08. Flex Box 이번 장에서 알아볼 내용은 드디어 Flex box 이다. 지금까지 배웠던 박스 타입들은 위치를 잡기가 매우 힘들고 번거로웠지만 Flex box가 있으면 매우 편해진다. Flex box는 크게 4단계의 step을 생각하자. 첫 번째는 선언이다. 플렉스박스를 쓰겠다고 선언하는 것이다. 두 번째는 가로로 정렬할 것인지 세로로 정렬할 것인지를 결정하는 것이다. 세 번째는 반드시 한줄로 나타낼 것인지 사이즈가 모자라면 다음 라인으로 보낼 것인지 결정하는 것이다. 반드시 한줄로 나타낸다면 사이즈가 자동으로 조절될 것 이다. 마지막 네 번째는 예쁘게 사용하는 것이다. 이제 단계별로 하나씩 알아보자. 1. 선언 - 플렉스 박스를 사용하려면 부모에게 display값을 flex 또는 inline-flex로 주면된다. di..
<CSS 기초> 07. Position Position은 요소의 위치를 잡기위해 사용하는 속성이다. 타입은 총 5가지가 있다. static, relative, absoulute, fixed, sticky 이다. 이 중 sticky는 지원하는 브라우저가 적으므로 나머지 4개를 알아보자. 타입에 따라 기준점을 무엇으로 하느냐가 달라진다. 타입을 준 후 속성값으로 top right bottom left를 줄 수 있는데, 4가지를 모두 사용하기보다 가로 중 하나와 세로 중 하나를 쓰는 게 효율적이다. 1. Static static은 별도의 지정없이 모든 요소의 기본 상태이다. 2. Relative relative의 기준점은 원래 있던 자리이다. .class01 { position: relative; top: 20px; right: 5px; } 위와 ..

티스토리툴바