Mong dev blog

1. 미리보기 See the Pen text paper animation by KumJungMin (@kumjungmin) on CodePen. 2. html A. 구조 구조는 사진과 같이 frame안에 h1태그(text)가 포함된 간단한 구조이다. SKYBLUE B. 데이터 속성 사용하기 우리는 before, after(가상 클래스)로 글자(SKYBLUE)를 만들고 효과를 줄 것이다. 하나의 방법으로 before에 content를 사용해서 글자를 지정할 수 있다. /*ex*/ &::before { content: 'SKYBLUE'; /*this!*/ } 그런데, 이 글자를 html단에서 작성하여 바로 이용할 순 없을까? 있다! html에서는 데이터 속성을 만들 수 있는데, 이 데이터를 j..

1. preview See the Pen loading_circle by KumJungMin (@kumjungmin) on CodePen. 2. 코드 분석 1) html 안에 세 개의 요소를 자식으로 둔다. 은 이제 로딩할 때의 원이 된다. 대신 를 써도 된다. 대신 class 이름을 지정해야한다. (1) 하나의 div에 원 요소를 자식으로 둔다. 2) css (1) body안의 요소들을 상하좌우 중앙 배치한다. body { margin: 0; display: flex; /*내부 요소들이 차례로 배치 */ justify-content: center; /*내부 요소의 좌우 정렬 상태를 가운데로 설정*/ align-items: center; /*요소는 세로 중앙 배치*/ height: 100vh; /*웹 크..