본문 바로가기
728x90
반응형

Programming101

[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.
[git ]기본 명령어 git init : 저장소 생성 git init --bare : 작업이 불가능하고 기능만 수행하는 저장소 생성(.git 내 파일만 존재) git clone URL : 원격저장소에서 복제해서 저장소 생성 git clone --depth 숫자 URL : 최신 커밋을 숫자만큼만 복제해서 가져온다 git add 파일 : git이 파일을 추적하도록 명령, 새로 생성되거나 변경된것 등 git status : git 저장소의 상태를 확인 git commit git commit -a : 추적중인 변경된 모든 파일을 add한다(한번도 add안된건 X) git commit -m "메세지" git commit --amend : 바로 이전 커밋을 수정한다. index의 변화없이 쓸 경우 커밋메세지만 수정되고, index가 변.. 2020. 12. 22.
[Spring] IoC, DI, DL IoC (Inversion of control, 제어역전) "누가 작업을 수행하느냐" 라이브러리를 사용할땐 내 코드가 라이브러리 코드(외부코드)를 호출하지만, 프레임워크를 사용할때는 프레임워크(외부코드)가 내 코드를 호출한다. 즉, 프레임 워크에서는 최종호출이 개발자에 의해서 제어되는게 아니라, 프레임 워크 내부에서 결정된 대로 이뤄진다. 이것을 "제어의 역전" 이라고 표현한다. - 개발자가 직접 객체 생성을 하지않고 컨테이너에서 객체 생성/소멸 등을 관리하는 방식 - 개발자가 직접 컨트롤 할 수 없고, 컨테이너가 관리를 해서 제어의 역전이라고 표현 - Spring에서 IoC 컨테이너인 ApplicationContext에서는 bean, xml 또는 annotation을 이용하여 객체 관리 DI (Depe.. 2020. 12. 20.
크리스마스 카드 만들기 봉투를 열어봐! 2020년 수고 많았어! 친구들에게. 올해 이런저런 일이 많았는데 너희 덕분에 하나도 힘들지 않았어 내년에도 우리 우정 변치말자 연말에 다 같이 못 봐서 아쉽다 2020.12.25 길동이가 실행화면 봉투를 클릭하면 봉투가 열린다 결과링크 xmas.spartacodingclub.kr/v1g3QHFEovYA/xmas.html 2020. 12. 19.
728x90
반응형