본문 바로가기

취준생26

211019 필기내용(css, overflow, visiblity, border-radius, html, form, input) css overflow hidden : 넘치는 영역 숨기기 visible : 넘치는 영역 보이기 scroll : 넘치는 영역 스크롤로 보여주기 auto : 스크롤이 없다가 내용이 넘치는 순간 스크롤을 만들어줌 overflow-x : x축으로 넘치는 부분만 처리 overflow-y : y축으로 넘치는 부분만 처리 visiblity visible : 보여주기 border-radius border-radius: 수치; : 수치만큼 테두리를 둥글게 만듦 border-radius: 0 50px; : 왼쪽 상단 0, 오른쪽 상단 50, 오른쪽 하단 0, 왼쪽 하단 50 border-radius: 0 50px 40px; : 왼쪽상단 0, 오른쪽 상단 50, 오른쪽 하단 40, 왼쪽 하단 50 border-radius.. 2021. 11. 21.
211018 필기내용 css transform: translate() : 위치 이동 translate(x, y); : x축, y축으로 이동 / 1개의 값만 쓰면 x축 translateX(); : x축으로 이동 translateY(); : y축으로 이동 translateZ(); : z 축으로 이동 (00%) : translate에 % 는 부모의 값이 아닌 자신이 기준 scale() : 크기 scale(x, y); : x축, y축으로 크기 변경 ex) 1.2배 - 120%, 1.2 둘 다 가능 scale() : 한개만 쓰면 x, y동시에 같은 비율로 크기 변경 scaleX(); : x축으로 길어지거나 줄어듬, 안의 글자나 내용물도 같이 변경 scaleY(); : y축으로 길어지거나 줄어듬, 안의 글자나 내용물도 같이 변경 ske.. 2021. 10. 18.
211015 필기내용 21.10.15 이미지 삽입 IR 기법 : image replace 글자를 대체하기 위해 이미지를 삽입하고 처리하는 기술 IS 기법 : image sprite 여러 개의 이미지를 삽입하여 한번에 관리하는 기술 그림자 기법 box-shadow : 요소에 그림자를 주는 기법 text-shadow : 글자(텍스트)에 그림자를 주는 기법 filter: drop-shadow() : 다양한 효과의 기능 중에 filter효과로 처리하는 기법 transform translate() : 위치이동 rotate() : 회전 skew() : 기울기 scale() : 배율(크기) perspective() : 원근법 perspective : background background-repeat: repeat; : 기본 no-rep.. 2021. 10. 18.
211012 필기내용 `overflow-x: auto;` : 가로로 넘치면 스크롤 생성 `overflow: visivle;` : 넘쳐도 보여라 margin -> padding 순으로 작성 entity code사용 class이름을 많이 부여하는 것보다는 코드의 의미를 더 신경 `transform: rotate(각도);` : 각도만큼 돌아가기 `vw` : 브라우저 가로 값에 대한 비율 `img`태그 대신 `baground-image`사용 `word-break: keep-all;` : 단어 위주로 줄바꿈 placeholder.com - lorem image a태그 - `data-href=""` : 사용자 설정 data를 붙이면 개발자가 임의로 붙이는 것 - js사용을 위해 2021. 10. 18.
반응형

티스토리툴바