본문 바로가기
728x90
반응형

분류 전체보기185

[CSS] Flex 1 2 3 div.container 부모요소/flex container/ flex의 영향을 받는 전체 공간. div.item 자식요소/flex item/설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것. flex container에 display: flex를 적용하는게 시작. 아이템들은 기본적으로 위 그림같이 배치가 된다. (가로방향으로) 그리고 자신이 가진 내용물의 width만큼만 차지하게 된다 (inline요소와 비슷) flex-direction (배치 방향 설정)- 아이템들이 배치되는 축의 방향을 결정하는 속성 row; (기본값) 가로 방향으로 배치 column; 역순으로 가로 배치 row-reverse; 세로 방향으로 배치 column-reverse; 역순으로 세로 배치 flex-wr.. 2020. 12. 26.
[CSS] 크리스마스 트리 만들기 수정 며칠전에 css 공부하다 만든 크리스마스 트리.. 캡쳐해놓고 보면 그럴싸하지만.. 창 크기를 조절하면 지멋대로.. 기존 작성한 코드 ○ ★ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ 기존 코드에서 container의 width를 지정해주지 않아서 발생한 문제였다. width: 900px; 만 추가해주니 이제 창크기에 따라서 지멋대로 움직이지 않는다!!! .container { display: flex; flex-wrap: wrap; text-align: center; width: 900px; } 2020. 12. 26.
[프로젝트] UI 상세설계 및 UI flow chart 12/25 프로젝트 진행을 위한 ui상세설계 및 ui flow chart 인덱스페이지 회원가입 및 로그인, 관리자 페이지 게시물 등록 게시판 목록 조회 페이지 마이페이지 두명이서 나눠서 작업했는데도 8시간이 걸렸다. 이 전에 했던 ui설계를 너무 기본적으로 해놔서 만들면서 후회했다. 진작 이렇게 할껄.. 그래도 더 늦기전에 제대로 작업해서 다행이다. 2020. 12. 26.
[CSS] grid grid는 flex보다 더 복잡적인 레이아웃 표현이 가능 -flex는 한방향 레이아웃 -grid는 두방향 레이아웃 grid 레이아웃을 만들기 위한 기본적인 HTML구조 A B C D E F G H I grid 설정하기 .container { display: grid; } 행배치 : grid-template-rows 열배치 : grid-template-columns 예) grid-template-columns: 200px 200px 500px; column을 200px, 200px, 500px로 만들겠다는 의미. grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; ※ fr(fraction)은 숫자 비율대로 트랙의 크기를 나눔. 1.. 2020. 12. 26.
[HTML] form 이해하기 form태그 속성 action : form이 전송되는 서버 (url 또는 html 링크) name : form의 이름 (서버로 보내질 때 이름의 값으로 데이터 전송) accept-charset : 문자 인코딩 지정 target : action에서 지정한 스크립트 파일을 다른 위치에 열도록 지정 method : 전송 방법 설정 (get, post) form 내부의 태그와 속성 type : 입력 형식 name : 서버로 전송되는 데이터 이름 : text 입력란 : password 입력란 (입력 내용이 안보임) : 버튼 : form에 입력한 데이터를 서버로 보내주는 버튼 : form에 입력한 모든 데이터 삭제 : 단일선택 : 다중선택 : file 업로드 : 눈에 보이지 않는 정보를 서버쪽으로 보낼 때 사 여러.. 2020. 12. 24.
[CSS] inline, block, inline-block display 속성은 HTML요소 (Element)들을 시각적으로 어떤 형식으로 보여줄지 결정하는 속성 dispaly: inline; 텍스트처럼 dispaly: block; 상자처럼 inline 요소들 , , , - 기본적으로 옆으로 쭉 나열 되다가, 공간이 모자라면 다음 줄로 넘어감. block 요소들 , - width, height으로 크기를 설정할수 있고, 옆에 공간이 남아도 다음 줄로 넘어감. inline-block속성은 위 두가지의 특징을 모두 가짐, inline처럼 텍스트 흐름대로 쭉 나열되고, block처럼 박스 형태라 width, height로 크기 설정 가능. .box1 { display: inline-block; width: 300px; } .box2 { display: inline-b.. 2020. 12. 24.
[CSS] flex사용 배치 연습 Flex란 레이아웃 배치 전용 기능. Flex 레이아웃을 만들기 위한 기본적인 HTML구조 helloflex abc helloflex dispaly: flex; 한줄로 아래와 같이 배치. .container { dispaly: flex; } flex-wrap 줄넘김 처리 연습 연습하다가 만든 트리.. 2020. 12. 24.
[Web] 쿠키(Cookie)와 세션(Session) 쿠키와 세션이 필요한 이유는 HTTP프로토콜의 특징 때문이다. HTTP프로토콜은 Connectionless 프로토콜 (비연결지향)과 Stateless프로토콜(상태정보 유지안함)의 특징이 있다. 그래서 쿠키와 세션이 필요하다. 쿠키(Cookie) -클라이언트 로컬에 저장되는 키와 값이 들어있는 파일이다. -이름, 값, 경로 등을 포함한다. -클라이언트의 상태정보를 브라우저에 저장하여 참조한다. 쿠키 사용 예) 아이디, 비밀번호 저장 쇼핑몰 장바구니 세션(Session) -웹 브라우저마다 별도의 세션을 갖는다. (세션 고유ID 할당) -세션의 정보는 접속해서 종료되기까지 유지된다. -접속시간에 제한을 두어 일정시간 응답이 없으면 유지를 못하게 설정이 가능하다. 세션 사용 예) 로그인 2020. 12. 23.
[git] branch git branch 여러 개발자들이 동시에 다양한 작업을 할 수 있게 만들어 주는 기능. 각자 독립적인 작업 영역안에서 마음대로 소스코드를 변경할 수 있음. 각각의 브랜치는 다른 브랜치의 영향을 받지 않기 때문에 여러 작업을 동시에 진행할 수 있음. 이렇게 만들어진 브랜치는 다른 브랜치와의 병합(merge)을 통해 다시 새로운 브랜치로 모을 수 있음. 2020. 12. 22.
728x90
반응형