개발자를 꿈꾸는 여정

(터미널에서) get-executionpolicy // 확인 set-executionpolicy remotesigned // 체크 get-executionpolicy // 확인 프로젝트 생성 [vue CLI v4.4.4] window기준 1.vue.cmd create vue-form 2.default(babel,eslint) 이렇게해서 프로젝트 생성했습니다.

FLEX Flex 정렬 Container 배치 : Justify content ... ... ... ... ... Flex 정렬 Container 배치 : Align items ... ... ... ... ... Flex 정렬 item 배치 : Align self Aligned flex item Aligned flex item Aligned flex item Aligned flex item Aligned flex item Flex 정렬 item 배치 : Align content ... ... ... ... ... ... Horizontal alignment Center text Center image https://mdbootstrap.com/img/logo/mdb192x192.jpg" class="im..

IMG 및 컨텐츠요소 : CSS 가로 및 세로 정렬하는방법 이미지 보통 수평 가운데 정렬 할 시에는 img { display: block; margin : 0 auto;} 를 주었지만; - 세로 가운데 정렬까지 같이하려면 div 상위 요소랑 같이 설정을 주고 img값에 width; height; 값을 줘야한다. 공통 html : 1. position 이용방법 --------------------------------------------------------- .box { position:relative; } .box > img { position:absolute; max-width:100%; max-height:100%; width:auto; height:auto; margin:auto; top:0; ..

1. 전제사항 - 이클립스 IDE for java EE Dvelopers or Enterprise Ver 설치 http://www.eclipse.org/downloads/eclipse-packages/ Eclipse Packages | The Eclipse Foundation - home to a global community, the Eclipse IDE, Jakarta EE and over 350 open source pro 517 MB 775,864 DOWNLOADS Tools for developers working with Java and Web applications, including a Java IDE, tools for JavaScript, TypeScript, JavaServer Pag..

부트스트랩이란 ? Twitter 에서 개발한 UI 라이브러리 탄생이유 1. 웹사이트 개발의 시간 간소화 2. 모바일 환경에 적합한 반응형 웹사이트 개발 참고사이트 가이드 : http://bootstrapk.com/css/#overview 문법적용 div class="문법" [클래스에는 중복값 다수값이 가능함으로 "" 사이에 이를 이용한다 ] Color bg-white -warning -danger Size fa-3x Padding // Margin mx-숫자 || px-숫자 || my-숫자 || py-숫자 mt- || pt- || mb- || pb- || ml- || pl- || mr- || pr- Align (Container) justify-content-between align-items-cente..

1. 부트스트랩 설치 1-1. html or jsp 파일 내부에 부트스트랩 코드 설치 : https://getbootstrap.kr/ ** CDN : 웹 코드 가져오기 [ 별도 파일 존재하지 않음 ] Bootstrap 세계에서 가장 인기있는 HTML, CSS, JS 라이브러리. getbootstrap.kr - css 설치 - script 설치 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Insert title here Colored by Color Scripter cs HTML 이나 JSP 중 기본 코드에 css 소스파일 script 소스파일을 넣어서 외부 작업파일에서 을 쓰면 되겠다. 2. 부트스트랩 그리드 : Grid system ·..

구분 Inline ㅡ ㅡ Inline Block □ □ Block □ □ 텍스트를 주입 할 때 사용 되는 형태 높이 또한 폰트의 크기만큼 잡힙니다.(line-height로 설정이 가능 하긴 합니다.) width와 height를 명시 할 수 없다. margin은 위아래엔 적용 되지 않는다. (좌우만 됌) padding은 좌우는 공간과 시각적인 부분이 모두 적용 되지만 위아래는 시각적으로는 추가되지만 공간을 차지 하지는 않는다. inline의 특징과 block의 특징을 모두 가진 요소입니다. >> 인라인 요소에 display : inline-block; 선언 줄바꿈이 이루어지지 않는다. block처럼 width와 height를 지정 할 수 있다. 만약 width와 height를 지정하지 않을 경우, inli..

프로그래밍 언어 vs 마크업 언어 프로그래밍언어 종류: 파이썬(Python), 자바스크립트(Javascript), 자바(Java), 루비(Ruby), Go, C언어, C++ 등. 해당 언어 자체로 프로그램을 만들 수 있는 언어를 프로그래밍 언어라고 한다. 컴퓨터와 사용자(user)가 의사소통을 할 때 필요한 언어다. html은 마크업 언어이다. 1. HTML : Hypertext Markup Language - 기본구조 1) doctype - 이 문서가 어떤 버전으로 작성되었는지 브라우저에 알려주는 선언문 - 반드시 문서 최상단에 선언 되어야 함 - 웹표준과 관련 ​ 2) 태그 - lang 속성은 문서가 어느 언어로 작성되었는지를 의미 - 자식으로는 태그와 태그가 있음 ​ 3) 태그 - 태그의 chars..

레이아웃 구성시 수평구조 및 블록 개념은 FLEX 를 써서 보다 유용하게 쓸 수 있었지만, 레이아웃 구성시, 단위별 그룹 및 전체 레이아웃 구성, 전체적인 틀 구성은 Grid 기법이 또한 더 유용할 때가 있다. 선언 [ dispaly : grid; ] grid-template 행 : grid-template-row 표현 예) grid-template-rows: 150px 150px; grid-template-rows: 1fr 1fr; >> 1/n : 비율분배 grid-template-rows: 1fr auto; >> auti : 자동분배 grid-template-rows: repeat(2, 150px); 열 : grid-template-colum 표현 예) grid-templat..

수평 구조를 만드는 속성중 , float, inline-block 등으로도 쓰이지만, 보다 더쉽고 편리한, 그리고 반응형 페이지의 자동적으로 유리한 Flex(Flexible Box)라는 명확한 개념(속성들)으로 레이아웃을 쉽게 구성할 수 있습니다. [ 1 - 콘테이너 ] 1. 시작 : 콘테이터의 디스플레이 플렉스 선언 display : flex; > Block 요소와 같은 성향(수직 쌓임)을 가지며, // ( display : inline-flex; ) > Inline(Inline Block) 요소와 같은 성향(수평 쌓임)을 가집니다. 2. Item 정렬방향 배치 flex-direction row (default) : 요소들을 텍스트의 방향과 동일하게 정렬한다. row-reverse : 요소들을 텍스트의..