국비지원32 [CSS] CSS 변환_ Transform, perspective, backface-visibility CSS 변환 1. Transform AB 함수를 띄어쓰기로 구분해서 여러가지 효과를 줄 수 있음 transform : 변환함수1 변환함수2 변환함수3 ...; 사용할 수 있는 함수의 종류 trnasform : 원근법 이동 크기 회전 기울임; 1-1. 2D 변환 함수 transform: translate(x,y) 이동(x축, y축) px transform: translateX(x) 이동(x축) px transform: translateY(y) 이동(y축) px transform: scale(x,y) 크기(x축, y축) px transform: rotate(degree) 회전(각도) deg ex)transform: rotate(45deg) transform: skewX(x) 기울임(x축) deg ex) tr.. 2022. 4. 7. [CSS] Flex(플렉스) _ 정렬 플렉스(정렬) container요소와 items요소으로 나뉨! 1. container 1-1. display container 설정해주기. display: flex; 블록 요소와 같이 Flex Container 정의 display: inline-flex; 인라인 요소와 같이 Flex Container 정의 1-2.flex-direction flex-direction 수평 정렬 flex-direction : row; 행이 축 (좌->우) flex-direction: row-reverse; 행이 축 (우 -> 좌 ) 수직 정렬 관련된 cloumn, cloumn-reverse가 있지만 원래 block 요소는 수직으로 정렬 되기 때문에 잘 안씀. 행은 수평/ 열은 수직 시작점과 끝점, 주축(main-axis)과.. 2022. 4. 6. [프론트엔드] Emmet(에밋) 사용하기. Emmet(에밋)이란 에밋(Emmet)은 HTML을 편집할 때 빠른 코딩을 위해 사용하는 플러그인이다. 매우 간단한 몇 가지 코드만 입력하면, 자동으로 완전한 HTML 코드를 생성해 준다. VS Code와 CodePen 등 대부분의 에디터에서 기본으로 쓸 수 있는 기능으로 간단한 코드를 입력하고 tab을 누르면 완전한 코드를 생성한다! 예를 들어서 VS Code에서 'div' + [tab]을 하면 가 자동으로 완성된다! 'div>ul>li*4{s}'라고 입력하면 다음 이미지처럼 미리보기가 뜬다. 맞다면 tab을 눌러서 코드에 적용할 수 있다! div.heropy + [tab]을 하면 가 자동으로 완성된다! 1. Emmet 문법 > : Child(자식) + : Sibling(형제) * : Multiplic.. 2022. 4. 5. [프론트앤드] 기본개념, VS Code 확장프로그램 추천, 브라우저 자동 스타일 삭제하기(VS Code, CodePen) [프런트엔드 개발 기본개념] 프런트엔드 개발 : HTML, CSS, JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고 그것을 사용자와 상호작용할 수 있도록 하는 것!! - HTML(기획자) : 웹의 구조 - CSS (디자이너) : 시각적인 표현(정적) - JS(개발자) : 페이지를 동작시키는 동적 처리 HTML과 CSS는 레이아웃 중심의 사고를 해야하고, JS는 데이터 중심의 사고가 필요하다. 나는 CSS가 어렵게 느껴졌는데 기존 프로그래밍 언어와는 다른 사고방식이 필요하기 때문인 것 같다. 1. 웹앱 (웹애플리케이션) 동작원리 사용자가 주소창에 페이지 주소를 입력하면, 서버에 최초 요청이 간다. 서버는 최초 응답으로 HTML을 먼저 응답으로 보낸다. 이후 사용자 브라우저는 CSS, J.. 2022. 4. 4. 이전 1 ··· 3 4 5 6 7 8 다음
