본문 바로가기

Web 기초6

[html/css] 트랜스폼( Transfrom) 트랜스폼 트랜스폼(Transform)은 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew) 효과를 함수를 이용하여 부여할수있다. 단, 애니메이션 효과를 제공하지는 않기 때문에 정의된 프로퍼티가 바로 적용되어 화면에 표시된다. 트랜스폼은 애니메이션 효과를 위해 사용하여야 하는 것은 아니지만 애니메이션 효과를 부여할 필요가 있다면 트랜지션이나 애니메이션과 함께 사용하기도 한다. 트랜스폼 표기법 표기법 설명 단위 사용에시 transform : translate(x,y); 요소의 위치를 X와 Y축만큼이동 px, %, em 등 translate(10px,50px) transform : translateX(n); 요소의 위치를 X축으로 n만큼 이동 px, %, em 등 .. 2020. 6. 7.
[html/css] positon 속성 정리 종류 absolute,fixed relative static 너비 최대한 줄어든다 그대로 유지 그대로 유지 본질 유령화,유령의집화 유령의집화 사람화 겹침허용 겹치는게 가능 겹치는게 불가능 겹치는게 불가능 이동 top, left, right, bottom으로 이동 - - 2020. 6. 5.
[html/css] css display 속성 종류 inline-block / inline block none 너비 최소한으로 줄어든다 최대한으로 넓어진다 없어짐 본질 글자화 블록화 - line 사용 한 줄에 최대한 여러개나옴 한줄을 무조건 혼자씀 - 정렬 부모의 text-align에 정렬 스스로 margin-lief,margin-right를 사용해서 정렬 - 예외 a,img,span 엘리먼트는 기본적으로 display:inline 이다. inline 요소에는 width, height, margin, padding 속성이 제대로 적용되지 않는다. display: none 보이지 않음 -박스가 생성되지 않음 display:block 블록 박스 - 요소 앞 뒤로 줄바꿈 display:inline 인라인 박스(기본값) 앞뒤 줄바꿈이 되지 않는다. 가로/높.. 2020. 6. 3.
리액트와 SPA? 유저 인터페이스를 만드는 데 사용되는 오픈 소스 라이브러리. 페이스북에서 개발하였다. 프론트엔드 개발자 사이에서 AngularJS, Vue.js와 더불어 많은 인기를 얻고 있다. 참고로 Github Star 수는 Vue가 가장 많으며, npm package 수는 react가 가장 많다. 이와 더불어 타입스크립트나 Sass 같은 언어들도 지원해준다. SPA란 Single Page Application의 약자이다. 단일 페이지 어플리케이션(SPA)는 현재 웹개발의 트랜드이다. 기존 웹 서비스는 요청시마다 서버로부터 리소스들과 데이터를 해석하고 화면에 렌더링하는 방식이다. SPA형태는 브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식이다. 싱글 페.. 2020. 6. 2.
flex flex-direction justify-content align-items(전체) align-self(개인요소) order center flex-end,start 시작,끝 space-around,between 사이간격 row,column -reverse flex-wrap nowrap:모든요소 한줄 wrap:요소 여러줄 wrap-reverse:여러줄 반대 flex-flow: row wrap 두개 사용가능justify-content: flex-start / flex-end / center / space-between / space-around align-items(self): flex-start / flex-end / center / baseline / stretch align-content:여러줄일때만가.. 2020. 5. 29.
[php]글쓰기,글수정,리스트,삭제,디테일.. # site3 데이터베이스가 이미 존재한다면 삭제 DROP DATABASE IF EXISTS site3; # site3 데이터베이스 생성 CREATE DATABASE site3; # site3 데이터베이스 선택 USE site3; # 게시판 테이블(폴더) 생성 CREATE TABLE article ( id INT(10) UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY, regDate DATETIME NOT NULL, title CHAR(100) NOT NULL, `body` TEXT NOT NULL ); # 1번 게시물 추가(1.txt 생성) INSERT INTO article SET regDate = NOW(), title = '제목1', `body` = '내용1'; #.. 2020. 5. 27.