CSS

1. CSS의 뜻 > CSS는 Cascading Style Sheet의 약자로서 웹 페이지의 화면에 스타일과 레이아웃을 담당하는 문서이며, 보통 html(프레임), css(스타일), javascript(동작) 이 세가지가 프론트엔드의 메인 구성 언어가 된다. > 이러한

CSS는 그 존재 의의에 맞게 해당 HTML의 컨텐츠들을 다양하게 꾸며줄 수 있습니다. 일반적으로는 CSS 파일 안에 직접 색상 코드를 디테일하게 지정하는 방법이 있고, 외부 라이브러리(BootStrap, Tailwind, Saas 등)을 사용해 색상을 편하게 지정하는

절대 단위는 주변 요소에 영향을 받지 않고 고정된 수치를 의미합니다. 주로 픽셀(px) 단위를 사용하며 그 외에도 다양한 절대 단위가 존재합니다.px (픽셀): 화면에서 가장 작은 단위로, 보통 컨텐츠의 크기를 나타내는 대표적인 절대 단위입니다.in, cm, mm (인

CSS를 적용 할때 해당 내용들이 중첩 되었을 경우, 우선 순위에 따라 기본적으로 지정된 HTML(1) -> 사용자 지정 시트(2) -> 개발자 스타일 시트(3) 순으로 지정이 됩니다. 프론트 엔드 개발을 하는 우리들의 입장에서 보자면, 우리가 적용하는 CSS 스타일은

CSS에서는 폰트에 다양한 속성을 지정 하는 것이 가능하며 폰트의 스타일을 꾸며주는 속성은 보통 해당 기기(랩탑 or 모바일 기기) 안에 설치 되어있는 폰트로 적용하는 방법이 있지만, 적용하고 싶은 폰트가 없을 경우 다음 세가지 방법으로 외부 사이트의 경로에 존재하는

CSS에서는 텍스트 뿐만 아니라 배경 또한 꾸미는 것이 가능합니다. 이러한 배경의 값은 텍스트의 설정값과 동일하게 절대 단위 및 상대 단위 적용이 가능합니다.background-color: 배경의 색상을 설정합니다. 기본적으로 색상 이름, >>background-ima

HTML 코드의 태그를 CSS에서 선택하는 방법은 크게 두가지로 방법이 존재하는데요. 첫번째는 HTML 파일의 특정 태그를 선택하는 선택자(Selector)와 해당 선택자에게 속성(Property)과 속성 값(Property value)을 부여하는 선언(Declarat

CSS 속성을 HTML 태그에 적용 할 때에는 그 태그의 컨텐츠가 가지고 있는 박스 모델의 너비 및 생성 여부를 생각하며 추가해야 합니다. 그렇지 않을 경우 CSS를 적용하기 전에 생각했던 이미지에 비해 생성된 후의 이미지를 보고 당황하는 일을 겪을 수 있을 겁니다.기

padding과 margin 사이에 생성되는 border도 마찬가지로 방향 지정이 가능하며, border 네이밍 단독으로 쓰이든 방향과 함께 네이밍 되어 쓰이든 width→style→color 순으로 각각의 해당하는 값들을 지정 할 수 있습니다. 마찬가지로 border

기본적으로 태그들은 블록 요소이거나, 인라인 요소입니다.블록 요소는 앞에서 말씀 드렸다시피 컨텐츠 마다 패딩과 마진을 가지고 있고 해당 컨텐츠가 차지하는 줄 전체를 차지하는 요소이며, 인라인 요소는 그와는 반대 되는, 패딩과 마진 뿐만 아니라 보더도 없을 뿐만 아니라

CSS에서 해당 특정 요소의 위치의 기본값을 다양하게 조정 할 수 있습니다. 대표적으로 position 속성이 있는데, 이 position이 어떻게 지정 되었느냐에 따라서 top, bottom, left, right, z-index(요소가 겹칠 경우 쌓이는 우선 순위,

1. Float 이전과 이후 > CSS에서 레이아웃은해당 컨텐츠들의 배열을 얼마나 호율적으로 배치하는 것에 있어서 가장 중요한 요소라고 할 수 있겠습니다. 이러한 레이아웃을 효율적으로 배치하기 위해서 사용되는 속성은 크게 세 가지, Float, Flex, Grid 속성

Grid는 가장 최근에 등장한 레이아웃 속성으로 단차원 정렬(1차원 정렬)에 제한되는 flex에 비해 다차원 정렬(2차원 정렬) 이 가능합니다. 이 Grid를 활용하면 container를 여러번 생성하여 다차원 정렬을 구현해야 하는 flex에 비해 다차원 속성을 통한

어원은 이행, 변화를 의미하는데요. CSS에서는 상호작용에 의한 콘텐츠 변경의 용도로 주요 사용되는 속성으로서 해당 속성을 사용해 다양한 애니메이션 효과를 부여하는 것이 가능합니다. 이러한 효과는 주로 해당 컨텐츠에 마우스를 올렸을 때 (:hover)에나 겹치는 이미지

1. Transition과의 차이점 > 앞서 다루어봤던 Transition과의 차이점이라고 한다면, Transition의 경우 변화가 일어나는 방점이 2D인 애니메이션인데 반해 Transform의 경우 3D의 영역까지 애니메이션 적용이 가능하며, > 그러나 이 둘의 차

Transition 속성은 주로 특정 이벤트 발생에 반응하여 아이템의 간단한 상태를 전환할 목적으로 사용됩니다. 그리고 Animation은 좀 더 세부적인 상태 전환을 가능하게 하며, 반복과 무한 루프 등의 효과를 줄 수 있기 때문에 웹페이지에서 반복적으로 움직이는 로