공부블로그

CSS nth에 대해 알아봅시다! CSS에서 nth는 특정 요소의 순서에 따라 스타일을 적용하는 데 사용되는 유용한 선택자입니다. nth 선택자는 nth-child(), nth-of-type(), nth-last-child(), nth-last-of-type()와 같은 다양한 유형이 있습니다. nth-child( n ) 선택자는 해당 요소의 부모 요소의 모든 자식 요소 중 n번째 요소에 대한 스타일을 적용합니다. n은 정수 값이며, 0 또는 음수 값을 사용할 수도 있습니다. 사과 바나나 딸기 오렌지 포도 li:nth-child(3) { color: red; } 위의 코드는 ul 요소의 모든 자식 li 요소 중에서 세 번째 li 요소에 대해 color: red 스타일을 적용합니다. 결과적으로 딸기라는 텍스..

VSCode

카드 타입 사이트 카드UI란, 카드 형식으로 된 UI 요소를 말하며, 대표적으로 SNS에서 사용되는 피드(FEED)나 쇼핑몰에서 사용되는 상품 목록 등에서 활용됩니다. 카드UI 사이트에서는 이러한 카드UI를 구현하는 방법과 관련된 디자인 가이드, 코드 및 라이브러리 등을 제공하여 웹 개발자나 디자이너들이 카드UI를 보다 쉽게 구현할 수 있도록 돕습니다. 피그마 제가 만들어볼 사이트를 피그마로 디자인 한 사진입니다. VSCode 어떤 간식을 먹어볼까요 어떤 간식이 야무지게 나를 만족시킬수 있을까요? 아무리 먹어도 질리지 않는 간식을 어떤 종류를 먹어야 자신을 만족시킬 수 있을까 하고 행복한 고민을 해보아요. 케이크는 어떠신가요? 케이크는 특별한 이벤트나 기념일을 축하하기 위해 자주 사용되는 디저트입니다. ..

grid CSS 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 아주 탁월합니다. CSS Grid 레이아웃은 Flexbox보다 더 복잡한 레이아웃을 구현할 수 있는 방법입니다. CSS Grid를 사용하면 2차원 레이아웃을 만들 수 있으며, Flexbox보다 더 다양한 배치와 정렬을 할 수 있습니다. CSS Grid 레이아웃에서 사용되는 주요 속성은 다음과 같습니다. display: grid: Grid 컨테이너를 정의합니다. grid-template-rows: Grid 컨테이너에서 각 행의 높이를 정의합니다. grid-template-columns: Grid 컨테이너에서 ..

문자 관련 스타일 여러가지 문자 관련 스타일이 어떤 종류가 있고 무엇인지 알아 봅시다. font-family 폰트 패밀리는 비슷한 디자인 요소를 공유하는 서체의 그룹을 말합니다. 이러한 공유된 디자인 요소는 굵기, 비율 및 문자형 등이 포함됩니다. 폰트 패밀리는 보통 Regular, Bold, Italic 및 Bold Italic 등 다양한 스타일의 서체를 포함합니다. 예를 들어, "Helvetica" 폰트 패밀리는 Regular, Bold, Italic 및 Bold Italic 스타일을 포함하며, 이러한 서체 스타일은 모두 비슷한 디자인 요소를 공유합니다. 폰트 패밀리는 웹사이트나 문서 등에서 일관된 서체 스타일을 유지하는 데 도움이 되며, 디자인적 통일성을 제공합니다. font-size, 단위의 고찰..

많은 선택자(selector)들이 있는데요, 무엇이 있는지 한번 알아볼까요? 1. 타입(type) 선택자 타입 선택자(Type Selector)는 HTML 태그의 이름으로 스타일을 적용하는 선택자입니다. 예를 들어, h1 태그에 스타일을 적용하려면 아래와 같이 작성합니다. h1 { color: red; font-size: 36px; } 위 코드는 모든 h1 태그에 적용됩니다. 따라서, 문서 내 모든 h1 태그의 색상은 빨강이 되고, 글꼴 크기는 36px이 됩니다. 2. id 선택자 아이디 선택자(ID Selector)는 HTML 요소의 고유한 아이디를 사용하여 스타일을 적용하는 선택자입니다. 아래와 같이 작성합니다. #my-id { background-color: yellow; font-weight: b..

css float은 뭘까요? 또 어떻게 사용하는걸까요? 함께 알아봅시다! 1. float 이미지 출처 CSS float는 HTML 요소를 좌우 방향으로 부유시키는 레이아웃 기능입니다. float 속성을 적용하면 해당 요소는 normal flow에서 벗어나 부모 요소의 왼쪽이나 오른쪽에 위치할 수 있습니다. float 속성은 일반적으로 이미지나 텍스트 블록을 페이지에 배치하거나, 다중 열 레이아웃 등을 만들 때 사용됩니다. float 속성에는 left, right, none, inherit의 값이 있습니다. left 값은 요소를 왼쪽으로 부유시키고, right 값은 요소를 오른쪽으로 부유시킵니다. none 값은 부유를 해제하고 normal flow로 돌아가게 합니다. inherit 값은 부모 요소에서 상속..

ID와 Class의 어떻게 다른 한번 알아봅시다. 클래스와 아이디의 차이점은 클래스는 여러개를 사용할 수 있지만 아이디는 고유성을 가지므로 한 문서에 한번만 사용할 수 있습니다. 홈페이지 전체적인 스타일을 일관성있게 지정하기 위해서는 클래스(class)의 사용이 필수적입니다. id 선택자와 class 선택자의 차이는 문서 안의 '복수'의 요소에 스타일을 적용하는 것인가 아니면 '유일'한 요소에 스타일을 적용하는 것인가입니다. 결론적으로 말하면 id는 '유일'한 요소에 적용, class는 '복수'의 요소에 적용할 수 있습니다. class : '복수'의 요소에 스타일을 적용 id : '유일'한 요소에 스타일을 적용 1. Class 선택자 일반적인 아무말 입니다. blue 라는 이름의 클래스가 지정된 문단입니..

See the Pen Tail Animation by ehcjswo (@ehcjswo) on CodePen.

CSS 4가지 스타일은 무엇인지 알아봅시다. 1. 내부 스타일시트(internal style sheet) 내부 스타일 시트를 이용하는 방법은 HTML 문서 내의 외부 스타일 시트를 이용하는 방법은 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해줍니다. 외부에 작성된 이러한 스타일 시트 파일은 .css 확장자를 사용하여 저장됩니다. 스타일을 적용할 웹 페이지의 태그에 태그를 사용하여 외부 스타일 시트를 포함해야만 스타일이 적용됩니다. 3. 인라인 스타일(Inline style) 인라인 스타일을 이용하여 적용하였습니다. 인라인 스타일이란 HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법입니다. 이러한 인라인 스타일은 해당 요소에만 스타일을 적용할 수 있습니다. 태..