프론트엔드/CSS (12) 썸네일형 리스트형 CSS 컴포넌트 - 로딩 CSS 애니메이션을 사용해서 로딩 효과를 만들어보겠습니다. 구현 로딩효과를 추가할 요소를 아래와 같이 추가합니다. 해당 컴포넌트는 애니메이션의 딜레이 효과와 before 및 after Selector를 사용하고 시간차로 효과를 주어 하나의 요소만 사용하여 로딩효과를 완성하였습니다. /* main.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; align-items: center; justify-content: center; height: 100vh; } .loading { border: 30px solid transparent; border-radius: 50%; position: relative; bord.. 기본 스타일 - 리셋 CSS의 각 요소는 미리 지정된 기본 스타일을 가지고 있습니다. 예를 들어 요소의 경우 기본적으로 마진을 가지기 때문에 화면에 아래와 같이 표시됩니다. 문제점 기본 스타일은 때에 따라서 필요한 경우도 있지만 스타일 작업 시 기본 스타일도 고려하려야 하기 때문에 스타일링 작업을 힘들게 하는 요소로 작용합니다. 또 브라우저마다 각 요소의 기본 스타일이 다르게 설정되어 있어 같은 웹사이트라도 브라우저마다 다르게 표시되어 사용자에게 부정적인 경험을 줄 수 있겠죠. 기본 스타일 제거하기 따라서, 스타일 작업에 앞서 기본 스타일을 제거하거나 일반화하는 작업이 필요한데요. 아래와 같은 방법 중 하나로 가능합니다. 1. CSS reset 말 그래도 CSS 스타일을 리셋하고 시작하는 방식으로 아래와 같은 코드를 사용합니.. 단위 CSS에는 글자의 크기나 길이를 표현하기 위한 다양한 단위가 존재합니다. 단위는 크게 상대단위와 절대단위로 구분이 가능한데요. 상대단위는 기준이 되는 대상의 크기에 따라 동적으로 변하는 단위로 아래와 같은 단위들이 존재합니다. 1. em 부모에게 상속받은 현재 폰트를 1em으로 두고 그에 비례하여 크게 또는 작게 하는 단위. 부모에 비례하기 때문에 아래와 같이 여러 대의 부모를 가지는 경우 연속적으로 이전 부모에 의존하여 통제가 힘들어질 수 있습니다. 1 1 2 3 다만, 텍스트 요소가 다른 요소를 포함하는 경우 이러한 크기는 상속되지 않습니다. no no 2. rem 기본 폰트를 1rem으로 두고 그에 비례하여 크게 또는 작게 하는 단위. em에 root가 붙은 형태로 항상 루트를 기준으로 하여 통제가.. Inline VS Block and Inline-block 요소는 크게 inline요소와 block 요소로 나누어집니다. inline 요소는 크기를 지정할 수 없고 포함된 콘텐츠만큼만 공간을 차지하며 줄 넘김이 없으나 block요소는 부여된 높이만큼의 공간을 화면에서 차지하며 다른 요소가 같은 줄에 오는 것을 허용하지 않습니다. a inline-block 은 block과 inline의 특성을 조합하여 크기를 지정하지만 다른 요소가 같은 줄에 오는 것도 허용합니다. a block 요소들 , , , , , inline 요소들 (if it has visible controls) 마무리 이상으로 block과 inline요소에 대해 알아보았습니다. 참고 Inline elements - HTML: HyperText Markup Language | MDN In this ar.. Absolute absolute는 position 속성이 가지는 값 중에 하나입니다. 일반적으로 모든 요소는 요소의 흐름을 따라 코드가 설치된 순서대로 표시가 되는데요. absolute는 이러한 흐름에서 벗어나서 원하는 위치에 해당 요소를 위치시키도록 해줍니다. 사용방법 먼저, 관련된 속성들을 보겠습니다. top: 해당 요소가 들어있는 요소의 상단으로부터의 거리 bottom: 해당 요소가 들어있는 요소의 바닥으로부터의 거리 left: 해당 요소가 들어있는 요소의 좌측으로부터의 거리 right: 해당 요소가 들어있는 요소의 우측으로부터의 거리 absolute사용 시 부모요소의 position을 설정하지 않으면 root로부터 산정됩니다. This is a paragraph. 부모를 기준으로 위치를 지정하려면 아래와 같이 부.. Fixed fixed는 position 속성이 가지는 값 중에 하나입니다. 일반적으로 모든 요소는 요소의 흐름을 따라 코드가 설치된 순서대로 표시가 되는데요. fixed는 이러한 흐름에서 벗어나서 원하는 위치에 해당 요소를 위치시키도록 해줍니다. 사용방법 먼저, 관련된 속성들을 보겠습니다. top: root 상단으로 부터의 거리 bottom: root의 바닥으로부터의 거리 left: root의 좌측으로부터의 거리 right: root의 우측으로부터의 거리 Fixed fixed와 absolute 차이점은 fixed는 부모요소의 설정과 관계없이 무조건 windoe (screen)로부터 산정됩니다. 이러한 특성으로 콘텐츠의 길이와 상관없이 항상 화면에 같은 자리에 위치하여 내비게이션이나 모달 등에 유용하게 사용됩니다. .. Grid CSS grid는 레이아웃을 결정하는 디스플레이 요소 중 하나로 테이블처럼 열과 행을 지정해서 원하는 레이아웃을 간편하게 만들 수 있게 해 줍니다. flex와 비슷한 기능을 제공하지만 열이나 행 둘 중 하나의 레이아웃을 지정하는 flex와 달리 grid는 열과 행을 동시에 지정할 수 있습니다. 사용법 먼저 grid와 사용가능한 속성들을 보겠습니다. grid 지정 속성 Template area grid-template-area: grid 레이아웃 지정 (컨테이너에서 지정) grid-area: grid-template-area에 지정된 레이아웃에 들어갈 박스를 지정 (박스에서 지정) Template rows columns grid-template-rows: grid 행의 크기 지정 grid-template-.. Flex CSS flex는 레이아웃을 결정하는 디스플레이 요소 중 하나로 테이블처럼 열 또는 행을 지정해서 원하는 레이아웃을 간편하게 만들 수 있게 해 줍니다. 사용법 먼저 flex와 사용가능한 속성들을 보겠습니다. flex 지정 속성 flex-direction: flex 컨테이너의 방향을 열 또는 행으로 지정 (행이 기본값) flex-shrink: 컨테이너의 크기가 줄어들 때 줄어들 비율 flex-grow: 컨테이너의 크기가 증가할 때 증가할 비율 flex-basis: 기본크기 flex: flex-grow, flex-shrink, flex-basis를 한 번에 지정하는 속성 styling 속성 gap: 간격 정렬 속성 justify-content: 가로 또는 세로 정렬 (플렉스의 방향에 따라 달라짐) align.. 이전 1 2 다음
