Youna

See the Pen Untitled by younajeong (@younajeong) on CodePen. 코드펜을 사용해서 LED조명과 같은 효과를 만들어 보았습니다🌈

애니메이션 효과 코드펜을 사용해서 봄에 어울리는 벚꽃을 만들어 보았습니다. See the Pen Untitled by younajeong (@younajeong) on CodePen.

애니메이션 오늘은 3D 느낌을 살려서 애니메이션을 만들어 보았습니다. 코드

애니메이션 효과 코드펜을 이용해서 애니메이션 효과를 html과 css를 이용해서 만들어 봤습니다! 01.움직이는 두 원 HTMl 만드는 방법 div를 만들어 준 후 span을 만들어 준 후 class요소를 이용해서 loding과 circle1,2를 만들어 주면 html은 끝입니다. CSS body { height : 100vh; background-color : #111; } .loding { left : 50%; top : 50%; position : absolute; animation : loding 1s ease 1000; } .circle1 { display : block; height : 20px; width : 20px; background-color: #fff; border-radius : ..

CSS 문자 관련 스타일 우리가 사이트나 화면을 볼 때 그림과 사진도 눈에 들어오지만 절대적으로 빼먹을 수 없는 것이 있습니다. 바로 폰트! 글인데요 요즘 트랜드로도 강조형 타이포그래피 같은 글자 스타일과 크기로 강조하는 디자인이 떠오르는 만큼 글자에 대해서 잘 알고 활용하는 것이 중요하다고 생각합니다. 그러므로 오늘은 CSS 속성 중 문자 관련한 속성들을 알아보는 시간을 가지도록 하겠습니다. 01. font-family 문자의 글꼴을 지정하는 속성입니다. 여러 단어거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. font-family: "돋움", Dotum, Arial, Helvetica, sans-serif ; ..

Grid layout grid 레이아웃은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조 관점에서 html 기본 요소로 작성된 요소 입니다. 테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다. 그리고 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있습니다. 쉽게 말해 저번 시간에 정리했던 flex는 한 방향 레이아웃 시스템이고 grid는 두 방향 (가로,세로)레이이아웃 시스템입니다. 01. grid를 활용한 레이아웃 grid 레이아웃 만드는 방법 flex와 비슷한 형태로 시멘틱 태그를 만들어 줍니다. 시멘틱 태그로 만들어진 태그에 배경색과 grid area에 각 시멘틱 태그 이름을 붙혀줍니다. 태그들을 총 감싸고 있는 wrap태그 안에 wi..

레이아웃 Flex 요소들이 포함된 크느 박스에 flex를 선언하고, 안에 있는 요소들에게 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것입니다. display: flex; display: -webkit-flex; display: -ms-flexbox; 박스 안에 구문은 해당 요소에 flex로 레이아웃을 계한다고 선언하는 뜻입니다. 01. flex layout flex를 이용해 레이아웃을 만든다 이렇게 코드진행을 할 수 있습니다. 가운데 부분은 class container를 이용해서 만들어 줍니다. 박스가 3개 나열 된다고 생각하고 처음에는 큰 메인 박스를 만들어 준 후 그 아래로 차례로 section1,2,3에 가로와 세로 값 배경색을 부여한 후 display: flex를 main부터 sectio..

선택자(selector) 선택자란 말 그대로 선택을 해주는 요소이며 CSS로 UI의 어느 부분을 디자인할지, 즉 표현하고 규칙을 정할 대상을 선택자라고 부릅니다. See the Pen Untitled by younajeong (@younajeong) on CodePen. CSS로 속성을 하는 부여하는 방법입니다. 여기에서 h1은 선택자 { }는 선언부로 선언부 안에 color라는 속성 그리고 red라는 속성값을 표시하며 속성 설정간에는 ";"를 표시하여 구분해준 후 또 다른 속성과 속성값으로 선언을 할 수 있습니다. 마지막 속성 끝에는 구분자를 생략할 수 있습니다. 01. 태그선택자(type Selector) 태그 선택자는 html문서의 태그 이름을 직접 지칭하는 가장 간단한 선택자입니다. Css에 대한..

보통 레이아웃을 만들게 되면 block요소기 때문에 세로로 나열이 됩니다. 하지만 오늘 이 방식을 사용한다면 우리 모두 세로로 손 쉽게 바꿀 수 있습니다. 바로 float입니다. 01. 레이아웃 - float float은 레이아웃을 쉽게 구성할 수 있도록 도와주는 css요소입니다. float은 요소를 좌측이나 우측으로 붙이고 아래 내용이 그 주변으로 흐르게 하는 속성인데, 세로로만 나열되던 블록들이 가로로 서로 어울리게 배치하려고 할 때 아주 유용한 방식입니다. float한 박스에는 가로 사이즈를 지정해 주여야 속성이 사용됩니다. 하지만 heading요소나 인라인 요소들은 가로 사이즈 없이 float을 해도 레이아웃이 흐트러지지 않습니다. 이렇게 사용 했을시에 첫 이미지에 html이미지에서 css로 변경..

Id 와 Class 01.이름을 불러올 때 클래스를 불러올 때는 클래스명 앞에 마침표를 찍어준다. 아이디를 불러 올 떄는 아이디 값 앞에 샵(#)표시를 해줍니다. 또 여러개의 요소에 같은 class명을 부여해줄 수 있습니다. 또한 하나의 요소에 여러개의 class명을 부여할 수도 있습니다. 자료출처 이미지 처럼 id로 "attendance"를 불러왔고 값 앞에 #표시를 해둔 걸 볼 수 있습니다. 또 class="name"을 사용해서 김영희라는 이름을 사용했습니다. 02. 중복 사용 class는 중복 사용이 가능하지만 id는 중복사용이 불가능 합니다. class는 동일한 클래스명을 페이지 여러곳으로 사용해도 되지만 id는 한개의 id로 딱 한 페이지에서 사용이 가능합니다. 자료출처 사람으로 생각한다면 하나..

HTML 삽입 미리보기할 수 없는 소스

CSS CSS는 HTML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다. HTML 바탕으로 뼈대를 만들어 주고 CSS는 디자인적인 요소를 입혀주는 역할입니다. CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 01. 내부 스타일시트 CSS를 HTML문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. HTML 문서 내의 태그에 태그를 사용하여 CSS 스타일을 적용합니다. 내부 스타일 시트는 해당 HTML 문서에만 스타일을 적용할 수 있습니다. 이미지출저 이처럼 내부에 필요한 스타일을 입력해 주는 방식으로 배경색상, 제목색상, 텍스트 꾸밈을 할 수 있습니다. 내부 스타일시트는 그 스타일이 기술된 페이지에..