CSS
1.CSS display : flex 정리
CSS 에서 flex 는 페이지의 레이아웃을 구성할때 쓰이는 속성이다. 원래는 페이지의 레이아웃을 구성할때 position 이나 float 속성을 사용했는데 flex 속성을 이용하면 훨씬 유연하게 레이아웃을 구성할 수있다. flex-box 는 flex 안의 큰 틀인 container 와 그 안에 들어가는 item 들을 이해해보면 된다. 일단 각각 다...
2.CSS height 100% 와 100vh 차이점
CSS 에서 height 속성을 적용할때 100% 와 100vh 의 차이가 궁금했다.이런식으로 코드가 되어있다고 했을때 container 에 height 를 100%를 준다는 것은 컨테이너의 부모인 body를 기준으로 100%를 준다는 것이다. 만약에 부모인 body의
3.CSS display 와 position 속성 정리
div 태그는 대표적인 block 요소이고, span 대표적인 inline 요소인데, block 요소는 한줄에 컨텐츠가 하나씩 차지하는 걸 의미하고 inline 요소는 안의 내용물 만큼 크기가 정해지는 것을 의미한다. 네모난 박스 하나지만 한줄을 다 차지하는걸 볼 수
4.CSS transition transform 속성 정리
transition은 사전적으로는 "변화" 라는 뜻을 가지고 있고 CSS 에서 transition 은 CSS 속성을 변경할때 변화하는 속도를 의미한다.linear : transition 효과가 처음부터 끝까지 일정하게 유지 된다.ease : 기본값으로 transiti
5.CSS rgba 속성
브라우저 내에서 모달창을 하나 띄운다고 했을때, 모달창 외에 다른 배경은 투명색으로 나타나야한다면 어떻게 해야할까 ?이럴때 background color 를 rgba 로 조절해주면 된다. rbg 는 빨간색, 녹색, 파랑색 색의 3원색을 나타내고 a는 불투명도 속성을 나
6.CSS flex-grow, flex-shrink, flex-basis, flex정리
부모 요소가 flexbox 일때, 그 안에 속한 flex 아이템들이 기본 크기 보다 더 커질수 있는지 결정하고, 플렉스 박스 내부에서 할당 받을 수 있는 공간을 상대적으로 정의하는 속성이다. 이런식의 li 태그들이 있다고 가정했을때, li갯수에 맞게 높이와 넓이가 채워
7.CSS linear-gradient() 정리
linear-gradient 두개 이상의 색상이 점진적으로 변화화는 효과를 줄수 있다.(그라데이션)\-사용법방향 또는 각도에서 방향은 기본적으로 to bottom 이 적용된다 (아래를 향하여)방향이 아닌 각도를 지정해줄수도 있는데, 위의 표는 각도 값에 맞는 방향을 나
8.span 태그에 아무 내용도 없을때 border적용하기
div 에서는 안에 내용이 없더라도 div 자체가 block 요소이기 때문에 border 가 적용 되지만span은 inline 요소이기 때문에 적용되지 않는다. 위의 내용을 출력해보면 아무런 효과도 적용되지 않다가, span 안에 내용을 직접 입력 해주어야만 효과가 적
9.CSS grid 속성 정리
CSS 의 grid 속성을 이용하면 row 와 columm을 이용하여 아이템들을 자유자재로 배치할 수 있다. flex 속성은 1차원으로 수평, 수직 영역중 하나의 방향으로만 레이아웃을 나눌 수 있다면, grid 는 2차원으로 수평 수직을 동시에 영역을 나눌 수 있다
10.CSS 간단한 로딩 화면 구현하기
keyframes 를 이용하여 Y축을 기준으로 0부터 10px 를 이동하는 속성을 만들고애니메이션을 이용하여 설정해주었다.다만 저렇게 설정을 해주면 부드럽게 이어지는것이 아니라 아래에서 위로 올라갔다가 뚝 끊기는 효과처럼 보인다.이럴때 애니메이션 진행 방향을 지정하는
11.CSS 카드 뒤집기 만들기
🔍 transform-style : preserve-3d란 transform-style : preserve-3d 를 적용하면 기본적으로 자식 요소들이 3D 공간에 배치 된다. 3D 효과를 먹이고 싶은 상위 컨테이너에 적용시키면 그 밑의 요소들에게 3D 효과가 먹여
12.CSS 이미지 화면창에 다 안담길때
- 수정 전 CSS 코드 - 수정 후 CSS 코드 overflow : hidden 속성을 주니까 전부 다 채워졌다. overflow : hidden 은 넘치는 부분은 가려주는 속성인데,
13.CSS margin-top 속성으로 컨텐츠 위로 보내기
🔍 margin-top 속성 없을때 🔍 margin-top 속성 있을때
14.CSS %로 반응형 만들기
화면 창을 줄이면 Youtube 로고가 덮여서 가려지는 문제가 발생했다.상위에서 flex 속성을 해제하고 %로 width를 지정해주었다. 위와 같은 문제점이 발생하지 않는다.
15.CSS max-width 속성 적용하기
기본적으로 width는 꽉 차지하지만, 창이 줄어들어도 최대 넓이를 70%로 유지하도록 하는 max-width 속성을 적용하였다.
16.CSS grid 속성 이용해서 사진 배치하기
- ul 담고 있는 컴포넌트 - ul 담고 있는 컴포넌트 CSS - 각각 이미지 담고 있는 컴포넌트
17.CSS overflow 부분 스크롤 안되는 문제
Next.js 로 토이프로젝트를 진행하는 도중에, 창을 줄였을때 나머지 부분이 스크롤 되지 않고 다 잘려나가는 문제가 발생했다. 간단히 body 에 fixed 를 지워주니 해결되었다. fixed 를 사용하면 그 자리에서 움직이지 않는다는 뜻이기 때문에, 계속 브라우저
18.CSS max-width, min-width 구분
max-width는 이 안에 지정한 속성들이 max-width 로 지정해놓은 최대 넓이보다 커진다면 적용되는 것이다. 위의 코드를 보면, 원래 컨테이너의 색깔은 ivory 이지만, max-width로 지정해놓은 사이즈보다 작아졌을때 아쿠아마린 색깔로 변하는것이다. 즉,
19.CSS 스크롤 위, 아래로 당겼을때 흰색 노출 막기
리액트에서 body에 배경색을 지정하고 스크롤을 위 아래로 당겼을때 흰색이 노출 되는 문제를 해결 하고 싶었다. - 문제된 css - 문제되는 부분 - 해결 방법 1 linear-gradient 속성은 background-color 속성이 아니라 backgrou