ALL

CSS Animation

css로 애니메이션을 만들 수 있는 방법은 크게 두가지인데 transition 과 animation이 있다 Animation box .box { display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; border: 2px solid #222; background: rgba(30, 161, 255, 0.5); } Animation 은 다른 속성과 다르게 keyframes을 추가할 수 있다 keyframes란, 어떤 오브젝트가 오른쪽에서 아래로 향하는 방향을 지정할 때 지정하는 방향을 keyframes으로 설정할 수 있다 keyframes을 지정할 땐 시작점과 끝점을 생각하고 지정해야한다 0% ~ 100..

CSS Transition

Transition은 CSS로 애니메이션을 줄 수 있는 속성이다 .box { width: 100px; height: 100px; border: 2px solid #222; background: rgba(30, 161, 255, 0.5); transition: 1s; } .box:hover { transform: scale(2); } 박스 색 변형 .box { transition: 1s; } .box:hover { width: 200px; background: tomato; }

CSS Transform

Transform이란 뭔가 변형에 관련된 CSS 속성이다 뭔가 굴린다거나 변형시킨다거나 등등.. 심지어 3D도 가능하다 또한 하드웨어 가속으로 꽤 부드럽게 작동한다고하여 성능면에서 모바일 앱에서도 자주 사용하는 편이다 A B C D F .box-container { display: flex; } .box { width: 100px; height: 100px; border: 2px solid #222; background: rgba(30, 161, 255, 0.5); } 박스 변형 일으키기 :hover .box:hover { transform: scale(2); } width와 height의 동작 방식은 조금 다르다 scale 속성과 다르게 width와 height는 아래 텍스트가 밀리게 된다 여러가지 값..

CSS 기초

박스모델 width, height, padding, border, margin html 문서는 박스 형태로 되어있다 박스가 일정한 형태로 모델이 구성되기 때문에 박스 모델로 불린다 content 이 박스에 가로가 width, 세로는 heigth를 담당한다 padding content와 border 사이에 안쪽 여백 공간을 표현하는 것을 일컫는다 테두리사이 공간을 주는 것 css에 padding:top 20px를 작성하면 content 기준으로 위로 20px 밀려나게 된다 border 테두리를 나타낸다 어떤 테두리가 원하는지 알려줘야한다 ( 굵기, 스타일, 색상 ) 등 1px solid #222 margin 바깥 쪽 여백을 뜻하며 요소와 요소 사이의 간격을 나타낸다 box .box { width: 300p..

head에 들어가는 태그(title, link, style, script) (#18)

title, link, style & script는 정말 많이 쓰고 html 문서를 만들 때 거의 무조건 사용됩니다 html문서의 대 제목 지구 모양 대신 다른 이미지도 사용가능합니다 아래 값에서 href 주소만 변경하면됩니다 절대경로, 상대경로 모두 가능합니다 *절대경로,상대경로 뜻 2020/11/10 - [개발은 처음이라] - image 태그(#10) link css 스타일시트에 첨부하는 태그입니다 link:css를 입력하면 자동으로 링크가 생성됩니다 폰트도 링크 태그에서 사용됩니다 https://spoqa.github.io/spoqa-han-sans/ko-KR/ Spoqa Han Sans Spoqa unveil the new version of Spoqa Han Sans, which has evol..

Form - select & option (#17)

셀렉트는 선택을 할 수 있게 하는 태그입니다 셀렉트는 기능을 만들 수 있게 해주고 옵션은 기능 태그입니다 1 2 3 4 5 서로 구분할 수 있게 value를 지정하여 값을 넣어줍니다 단, 서로 값만 다르면 됩니다 드라마 예능 로코 액션 스릴러 제출

Form - Lavel (#16)

라벨 라벨은 부가적인 태그이고 필수로 사용하지 않아도 됩니다 주로 박스에 이름을 달아줄 때 사용됩니다 즉. 폼 양식에 이름을 붙이는 태그라고 할 수 있습니다 라벨은 특정 인풋에 이름을 나타냅니다 어떤 인풋으로 연결되는지 반드시 써야합니다 라벨을 사용할 땐 반드시 "for"가 들어갑니다 라벨 여기서 누구에 들어가는 값은 라벨 라벨 내가 연결시키고자 하는 인풋ID값을 적어주면 됩니다 보통 ID값엔 #이 들어가는게 정상이지만 for에는 #을 적지 않습니다 ID에 적었던 값을 for에 적습니다 그러므로 input에 ID에 적은 값을 for에 넣어줍니다 여기서 코드를 적고 이름 부분을 클릭하면 박스가 활성화되면서 연결된 것을 알 수 있습니다 이름 회원가입 폼 관련 글은 2020/11/13 - [개발은 처음이라] ..

Form - input (#15)

minlength,maxlength는 내가 입력할 수 있는 자체 개수를 정한다면 min,max는 입력할 수 있는 최솟값을 입력할 수 있습니다 minlength,maxlength는 텍스트 개수라면 min,max는 숫자 값을 의미합니다 혹은 파일 형식이 .png 나 .jpg만 삽입 가능했으면 좋겠다라고 한다면 accept=".png, .jpg"를 사용합니다 임시로 만든 word 파일은 비활성화 되어있습니다 여기까지입니다 폼과 알려드린 속성,타입을 활용하여 회원가입 폼을 만들어보세요 많은 도움이 됩니다