CSS
1.[CSS #1] Float를 잘 띄워봅니다
CSS의 float은 1) 본문에 이미지를 자연스럽게 삽입할 때 2) 레이아웃을 잡을 때 주로 사용하는 속성으로 block이 길막하는 특징을 해결하고 가로배치 해준다. 최근에는 float을 잘 사용하지 않기 때문에 이전 코드를 유지보수할 때 필요하다. 즉, "How t
2.[CSS #2] Position으로 움직여봅니다
CSS position은 요소를 원하는 위치에 자유롭게 이동시키기 위한 속성으로 static, relative, absolute, fixed, sticky(지원하는 브라우저 많지 않음)가 있다. 출처: '김버그의 HTML&CSS는 재밌다'를 학습하고 정리한 내용입니다
3.[CSS #3] position 관련 속성으로 디테일을 잡아요
'변형시키다'라는 뜻으로 스타일 요소의 모양을 변형시키는 CSS property.rotate(각도 조정), scale(크기 조정), translate(위치 이동) 등 다양하다.transform: translate(x, y);자기 자신을 기준으로 x축과 y축, 혹은 각각
4.[CSS #4] Flexbox로 flex하기😎
정렬의 끝판왕! 플렉스 해버린 플렉스박스는 그간 CSS 정렬의 어려움을 깨버렸다. 알아두면 쓸모 많은 flex. 'How to use it?'를 잘 알고 잘 활용하자설정나, 플렉스박스 쓸거임! (단호하게 선언하기)가로 정렬할까? 세로 정렬할까?무조건 한 줄 안에 다 정
5.[CSS #5] Media Query와 함께라면 반응형도 문제없지
Media Query는 web뿐 아니라 mobile 기기에서 접속했을 때도 문제없이 웹 사이트를 사용할 수 있는 반응형 웹(responsive web)을 만들기 위한 CSS property로 브라우저에 접속한 디바이스에 따른 사이즈에 맞게 보여준다. HTML : hea
6.[CSS #6] Background로 웹을 아름답게🌟
Background(배경) 속성 background-color : 배경에 색상을 넣어준다. hex, rgb, rgba로 표현할 수 있다. background-image : 배경에 이미지를 넣어준다. url(*이미지 경로) background-repeat : 배경 이
7.[CSS #7] Transition으로 스르륵, Animation으로 확! 변화주기💫
요소의 속성값에 애니메이션을 줘서 '스르륵' 변화할 수 있게 도와준다.position의 4가지 요소 1) property: 변화값(CSS 속성) 2) duration: 지속시간 (ms, s) 3) timing-function : 변화속도 (ease-in, eas
8.[CSS #8] HTML/CSS Wrap up
그동안 공부했던 CSS에서 앞으로 꼭 기억해야 할, 작업할 때 잊어서는 안되는 키포인트를 정리해보았다. (feat. 도현님😍) 1. box-sizing : border-box vs content-box 다합쳐서 100, content 기준 레이아웃을 잡기 위해 초기