xoouxa

코드입니다. 완성본 입니다. https://leeyouna21.github.io/web2023/animation/canvas/svg/webgl/webgl01.html" height="900" data-mce-src=" https://leeyouna21.github.io/web2023/animation/canvas/svg/webgl/webgl01.html">

오늘은 문자 관련 스타일 13가지에 대해 알아보겠습니다 😊 ✍🏻 font-family ✍🏻 폰트 종류를 설정하는 속성으로, 여러 단어이거나 한글 글꼴인 경우 따옴표("")로 감싸고 여러 개의 글꼴을 쉼표(,)로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. font-family: 사용자 지정 폰트; ✍🏻 font-size ✍🏻 폰트의 크기를 지정하는 속성으로, 글자 크기는 명시하지 않을 경우 16px이 기본값입니다. px : 해상도에 따라 상대적으로 달라지는 기본 단위 % : 부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위 em : 부모 요소의 글자 크기를 100% 기준으로 계산한 100분의 1단위 rem : em과 비슷하지만 부모 요소가 아닌 최상위 요소의 크기를 ..

grid layout은 비교적 직관적이어서 다른 레이아웃보다 사전지식이 덜 필요합니다. 일단 원하는 레이아웃을 먼저 스케치하고 그것을 위해 필요한 속성을 추가는 방식입니다. 레이아웃 - grid 유형을 flex유형을 사용해서 예시를 만들어 보겠습니다. 1920px * 1080px의 사이즈에 1200px * 1080px 구역 레이아웃을 만들어 보겠습니다. //grid 유형은 각 구역마다 주어야하기 때문에 모든 구역을 나눕니다. ✨ 감사합니다.

✍🏻 레이아웃 - flex 유형 ✍🏻 flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하는 레이아웃을 잡는 것이다. display: flex;​ flex 유형은 부모의 자식에만 사용할 수 있고 부모의 자식의 자식에는 사용할 수 없습니다. 저번 시간 (레이아웃 - float 유형 - 반응형 한 번에 이해하기 : https://xoouxa58.tistory.com/21)에 공부한 예제를 이용하여 flex 작업을 해보겠습니다. //전체 구역을 만들어주고 각 구역을 하나씩 만들어 줍니다. //header 구역, nav 구역, main 구역, footer 구역을 만들어줍니다. //main 구역 안에 3개의 레이아웃을 만들기 위해 asid..

✍🏻 레이아웃 - float 유형 - 반응형 ✍🏻 오늘은 사용자가 모바일을 사용해도 깨지지 않는 반응형에 대해 알아보겠습니다. 1920px * 1080px의 사이즈에 1200px * 1080px 구역 레이아웃을 만들어 보겠습니다. //header 구역, nav 구역, sectioin 구역, footer 구역을 만들어줍니다. //section 구역 안이 반응형에 반응할 수 있도록 자식으로 새로운 태그 //article 구역을 3개 만들어줍니다. ✍🏻 반응형 ✍🏻 style 태그 사이에 @media를 통해 반응형 값을 입력해줍니다. 노트북 같은 최대 width값이 1220px일 때 @media (max-width: 1220px){ #wrap { width: 96%; } } 레이아웃 전체 구역인 wrap 구역..

✍🏻CSS 선택자✍🏻 what is CSS 선택자(selector) ? 선택자란 CSS로 UI의 어느 부분을 디자인할지, 표현할 대상이 되는 부분, 즉 선택을 해주는 요소를 말합니다. 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 됩니다. CSS로 속성을 부여하는 형식은 { } 안에 여러 속성을 지정할 수 있고, 각 속성 설정 간에는 ' ; ' 으로 구분해주며 마지막 속성 끝에는 구분자를 생략할 수 있습니다. 속성은 가로로 붙여 써도 되고 한 줄씩 따로 입력해도 됩니다. 선택자의 종류로는 type 선택자, id 선택자, class 선택자, 전체 선택자, 하위 선택자, 자식 선택자, 인접 선택자, 형제 선택자, 그룹 선택자, 속성 선택자, 가상클래스 선택자, 가상요소 선택자, 종속 선택자 와 ..

✌ 레이아웃 float은 대체 무엇인지 우리 함께 알아볼까요 ? ✍🏻레이아웃 float✍🏻 float ? float : left; float 요소는 좌측이나 우측에 붙이고 아래 내용이 그 주변을 흐르게 하는 것입니다. 왼쪽 또는 오른쪽부터 가로 정렬을 하고 싶은 요소들에 float를 적용하면 됩니다. float 을 사용하지 않으면 block요소라서 세로로 나열 float을 이용하면 가로로 배치할 수 있습니다. float는 블록 개념을 갖고있는 div 태그와 , 인라인개념을 갖고있는 span 태그를 함께 사용합니다. 속성값 속성 설명 left float : left; 요소를 왼쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록 함. right float : right; 요소를 오른쪽에 배치하고 나머지 콘텐츠..

선택자(selector) 선택자란 CSS로 UI의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다. HTMl 문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다. HTML 요소에 id로 이름을 붙일 때에는 유일한 이름을 부여해야 하며, 다른 요소에 같은 id명을 또 주어서는 안 됩니다. css에선 id 선택자 앞에 #을 붙여야 합니다. id 명이나 class명은 숫자로 시작할 수 없으며 주로 영문자로 시작합니다. 선택자의 종류 type 선택자 id 선택자 1. ID 선택자 id 사용할 때 중요한 것은 한페이지에서 한 번만 사용이 가능합니다. id는 페이지 내에서 특정 위치나 태그를 지정하는 것이기 때문에 오직 페이지내에서 한 번만 사용할 수 있습니다...

See the Pen Tail Animation by leeyouna21 (@leeyouna21) on CodePen. CSS를 이용해 꼬리물기 애니매이션을 만들어 보았습니다 ^00^

css를 정의하는 방법으로는 크게 내부 스타일리스트, 외부 스타일리스트, 인라인스타일리스트, @import가 있습니다. 1) 내부 스타일리스트(Internal Style Sheet) CSS를 HTML 문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태이고 HTML문서내에서 사이에 스타일을 정의하는 방법입니다. HTML문서마다 스타일을 매번 지정해 주어야 하지만, 한 문서에만 해당되는 스타일을 지정할때 사용하면 됩니다. 관리가 편하다는 것이 장점이지만 정리를 잘 해둬야지 나중에 어떤 부분에서의 스타일인지 알 수 있습니다. 통상적으로는 본문이 헤드 , 콘텐츠, 사이드바, 풋 부분으로 구별 돼 있듯 마크업도 비슷하게 구별해서 작성하는 편입니다. 2) 외부 스타일 시트(Extern..