june blog

무슨 수업시간에도 못끝내는 수준의 노가다.... 지지

See the Pen Untitled by ture403 (@ture403) on CodePen.

See the Pen Untitled by ture403 (@ture403) on CodePen.

font-family: 글자의 폰트를 지정합니다. font-family: 'arial'; font-size: 글자의 크기를 지정합니다. font-size: 10px; font-weight: 글자의 굵기를 지정합니다. font-weight: bold; font-style: 글자의 기울기를 지정합니다. font-style: italic; font-variant: 글자의 작은 대문자로 설정하거나 재설정을 지정합니다. font-variant: small-caps; line-height: 글자의 줄간격을 지정합니다. line-height: 1.4; font:한줄로 쓰는 표기법입니다. font: bold 12px/1.4 "arial"; color:글자의 색을 지정합니다. color : aqua; letter-spa..

Grid란? CSS에서 제공하는 레이아웃 모듈 중 하나로, 복잡한 레이아웃을 구현할 수 있는 강력한 기능을 제공합니다. CSS Grid를 사용하면 여러 열과 행을 사용하여 레이아웃을 만들 수 있으며, CSS Grid를 사용하려면 먼저 그리드 컨테이너를 정의해야 합니다. display: grid 속성을 사용하여 그리드 컨테이너를 만들고, grid-template-columns 및 grid-template-rows 속성을 사용하여 그리드의 열과 행을 정의합니다. 각각의 열과 행은 크기를 지정할 수 있으며, fr, auto, minmax(), repeat() 등의 값으로 지정할 수 있습니다.이를 통해 유연하고 반응형인 웹 페이지를 만들 수 있습니다. 아래는 CSS Grid의 주요 속성들입니다. display:..

Flex란? CSS에서 제공하는 레이아웃 모듈 중 하나로, 유연하고 반응형인 웹 페이지 레이아웃을 만드는 데 도움이 됩니다. Flexbox 모델을 사용하면 가로 또는 세로 방향으로 유연한 컨테이너를 만들고, 그 안에 배치되는 유연한 아이템들을 쉽게 배치할 수 있습니다. Flexbox는 간단하고 직관적인 레이아웃 설계를 가능하게 하며, 반응형 웹 디자인에서 매우 유용합니다. Flexbox 레이아웃은 컨테이너 엘리먼트와 그 안에 들어가는 자식 엘리먼트들을 정의하는 것으로 시작합니다. display: flex 속성을 사용하여 컨테이너 엘리먼트를 정의합니다. 컨테이너 안에 있는 자식 엘리먼트들을 Flex 아이템이라고 하며, flex-direction, justify-content, align-items, ali..

선택자 : css로 UI의 어는 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다. css로 속성을 부여하는 형식은 다음과 같습니다. 01.type 선택자 html 문서의 태그 이름을 선택자로 사용할 수 있습니다. 다음예제에서는 p 태그 안의 글자들을 파란색으로 표시하도록 속성을 부여하고 있습니다. See the Pen type 선택자 by ture403 (@ture403) on CodePen. 02.id선택자 html 문서의 요소중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다. html 요소에 id로 이름을 붙일 때에는 유일한 이름을 부여해야 하며, 다른 요소에 같은 id명을 또 주어서는 안됩니다. css에서는 id 선택자 앞에 #을 붙여야 합니다. id명이나 cl..

1.float 개요 float 속성은 요소를 좌우 방향으로 띄워서 배치하는 데 사용됩니다. 일반적으로 이미지나 텍스트를 주변에 감싸는 레이아웃을 구현하는 데 많이 사용됩니다. float 속성은 다음과 같은 값을 가질 수 있습니다. 기본식 float : left; 속성값 속성설명 left 요소를 왼쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록함 right 요소를 오른쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록함 none float을 취소할때 사용합니다. 2.float 사용 예제 2-1 float : left 예문 See the Pen flaot 예제 by ture403 (@ture403) on CodePen. 2-2 float : right 예문 See the Pen Untitled by ture..

ID 선택자 HTML 문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다. HTML 요소에 id로 이름을 붙일 때에는 유일한 이름을 부여해야 합니다. 다른 요소에 같은 id명을 또 주어서는 안됩니다. css에서는 id선택자 앞에 '#'dmf 붙여야 합니다. id명이나 class명은 숫자로 시작할 수 없으며, 주로 영문자로 시작합니다. See the Pen css id by ture403 (@ture403) on CodePen. CLASS 선택자 HTML 문서의 여러 요소 중 같은 이름을 갖는 요소들만 모아 따로 속성을 부여할 수 있습니다. HTML 요소에 이름을 부여할 때에는 class로 이름을 붙입니다. 즉, 여러 개의 요소에 같은 class명을 부여할수 있습니다...

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

CSS(cascading style sheets)를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 실제로는 외부 스타일시트를 많이 사용하는 편이지만, 간단한 스타일은 내부 스타일시트 만으로도 사용할 수도 있습니다. 또한 인라인 스타일시트는 태체로 거의 사용하지 않지만, 가장 우선순위가 높아서 꼭 필요한 경우 편리하게 사용할 수 있습니다. 01.내부 스타일 시트 CSS를 HTMl 문서 안에 태그로 기재하여 HTML 문서안에 CSS가 함께 저장되도록 하는 형태입니다. See the Pen Internal Style Sheet by ture403 (@ture403) on CodePen. 02.외부 스타일 시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 ..