Kwangkki

tailwindcss를 처음 접하고 몇몇 페이지에 적용해서 사용해 봤다. 사용해 본 결과 그 장점과 단점에 대해 간단하게 정리해 본다 tailwindcss는? tailwindcss는 2017년에 처음 등장한 css 프레임워크로 마크업 태그에 인라인 속성으로 사용하는 것이 특징이다. 아래와 같이 태그의 class에 사용한다. 위 내용을 css로 작성한다면 아래과 같다. width: 20rem; height: 20rem; padding: 10rem; display: flex; flex-direction: row; border-radius: 4px; 보다시피 tailwindcss는 획기적으로 css 코드를 압축/단축한다. 장점 그 외에도 여러 장점이 있다. 명시도에 구애받지 않는다 CSS에서 명시도란 선택..

웹사이트 레퍼런스를 찾다보면 화려한 애니메이션이 난무하는 사이트를 볼 수 있다. 항상 저런 액티브한 사이트를 만들고 싶다는 생각을 했는데 이번에 배운 css 애니메이션 기능으로 어느 정도 구현 해볼 수 있을 것 같다. 근데 막상 많은 애니메이션을 구현하다보니 css파일이 엄청 길어진다 ㅠ css에서 애니메이션을 주는 방법은 2가지가 있다. 하나는 transition, 또 하나는 animation을 사용하는 방법이다. transition transition 단축 속성 트렌지션 사용방법은 간단하다. 아래는 트렌지션 단축 속성으로 순서대로 해당하는 속성을 입력하면 된다. /* transition: property duration timing-function delay */ .info { transition: ..

css에서 background는 배경을 설정하는 기능이다. 배경 컬러 지정, 그라데이션, 이미지 삽입 등 다양한 기능을 가지고 있다. backgorund css 설정 1. background-color 기본적으로 컬러를 설정할 수 있다. 웹브라우저 기본 216컬러 외에도 HEX코드, RGB로도 설정할 수 있다. background-color: #000000; background-color: rgb(255,255,255,0); background-color: green; 2. background-image 요소의 배경 이미지를 한개, 혹은 여러개로 지정한다. 여러개로 지정할 경우 가장 위에 선언한 이미지 레이어가 가장 위로 올라온다. 아래 예제와 같은 경우 이미지 파일이 가장 위로 표시된다. 이미지 외에 ..

이제 부트캠프를 시작한지 일주일이 다 지나간다. 5일 마지막 과제는 극악의 난이도를 자랑한다... 회원가입 인증창 만들기 1주차 파이널 과제, UI만 봤을 때 금방 끝날 줄 알았다. 실제로 HTML CSS로 UI 작업은 1시간 내로 끝났기에 더 자신감이 있었다. 하지만 문제는 기능 구현 ..! 구현해야할 기능 1. 지역선택하기는 서울, 인천, 경기 가능하도록 구현 2. '지역을 선택하세요'는 선택 불가능하도록 비활성화 3. 남성, 여성 성별 선택은 둘 중에 하나만 선택 가능하도록 구현 4. 휴대폰번호 입력칸에서 3자리 혹은 4자리 번호 입력 조건 만족시 다음칸으로 포커스 이동 5. 휴대폰 번호 모두 입력 시 '인증번호 전송' 버튼 활성화 6. '인증번호 전송' 버튼 클릭 시 6자리 수의 랜덤 토큰 생성 ..