본문 바로가기
반응형

전체 글207

[CSS.016] FloxBox로 정렬해보기 [1] Flex 레이아웃의 구조 Flex 레이아웃의 기본 구조는 위 그림과 같습니다. 부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 하고, 자식 요소인 div.item을 Flex Item(플렉스 아이템)이라고 합니다. 컨테이너에서 1차적으로 Flex 레이아웃 설정을 하고, 2차적으로 아이템들을 배치하면 됩니다. [2] 플렉스 컨테이너 [코드 1] [코드1-실행결과] [코드2] display: flex 아래그림의 빨간네모 친 부분처럼, 코드1에서 display:flex를 추가해 줍니다. [코드2-실행결과] display:flex를 적용하면 플렉스 아이템들은 가로방향으로 배치됩니다. 그리고 아이템 각자는 자신의 width(가로길이)만큼만 차지하게 됩니다. height.. 2022. 3. 1.
[HTML.006] vscode 편리한 패키지 추천 VSCODE(Visual Studio Code)에 웹 프로그래밍을 할 때 편리한 패키지를 추천해 드립니다. [1] Auto Rename Tag HTML 태그 수정시 "시작태그"를 수정하면 "닫는태그"까지 자동으로 수정되는 패키지 입니다. 사용법 [설치방법] vscode 패키지 검색창에서 "Auto Rename Tag"를 검색하고 Install 버튼을 눌러 설치하면 됩니다. [2] CSS peek HTML의 태그를 Ctrl+클릭시 해당 CSS 부분으로 화면이 자동으로 옮겨가는 패키지 입니다. 사용법 [설치방법] vscode 패키지 검색창에서 "CSS peek"을 검색하고 Install 버튼을 눌러 설치하면 됩니다. [3] Live Server vscode에서 코딩 후 저장만 하면 웹 브라우저에서 자동으로 .. 2022. 3. 1.
[깃허브.003] 내 코드 깃허브에 올리기 * 먼저 알아야할 개념 이 실습을 하기전에 위 그림의 원격 저장소, 로컬 저장소의 개념을 먼저 알아야 합니다. -원격 저장소:: 깃허브 온라인 사이트의 파일 저장소-로컬 저장소: 내 컴퓨터 속의 오프라인 저장소 * 아래 실습은 "[깃허브.002] 깃허브 데스크탑용 프로그램설치/저장소 연결" 실습을 완료한 후 이어지는 실습입니다. [1] 깃허브의 원격 저장소와 깃허브 데스크탑 프로그램이 연결된 상태에서 아래 그림과 같이 데스크탑 프로그램의 화면에 보면, (1) 저장소의 이름(myfirstTest)을 확인할수 있고, (2) show in Explorer를 클릭하면 내 컴퓨터에 저장된 코드의 폴더(로컬 저장소)로 이동하게 됩니다. [2] Show in Explorer 버튼을 눌렀을 때 나타나는 폴더(로컬 저장.. 2022. 2. 28.
[깃허브.002]데스크탑 깃허브 설치/저장소 연결법 [1] github.com 에 접속하여 회원가입합니다. [2] 오른쪽 상단의 내 계정을 클릭하여 나타나는 메뉴 중, Your repositories를 클릭합니다. 여기에서 repository는 깃허브의 저장소를 말합니다. [3] 새로운 repository를 만들기 위해 나타나는 화면에서 New(초록색 버튼)를 클릭합니다. [4] Repository name에 아무 이름을 적습니다.(나의 코드가 저장될 장소의 주소로 사용되는 이름입니다.) 그리고 Public, Create repository 버튼을 누르면 repository가 생성됩니다. [5] 아래 화면의 빨간네모 부분처럼 주소가 생긴 화면이 나타나면 나만의 저장소인 repository가 잘 만들어 진 것입니다. 지금은 저장된 내용이 없어서 아래와 같이.. 2022. 2. 28.
[깃허브.001] 깃허브란?(What is github?) Git이란 소스코드를 효과적으로 관리하기 위해 개발된 '분산형 버전 관리 시스템'입니다. (원래는 Linux 소스코드를 관리할 목적으로 개발 되었습니다.) Git에서는 소스 코드가 변경된 이력을 쉽게 확인할 수 있고, 특정 시점에 저장된 버전과 비교하거나 특정 시점으로 되돌아갈 수도 있습니다. Git -로컬에서 관리되는 버전 관리 시스템 (VCS : Version Control System) -소스코드 수정에 따른 버전을 관리해주는 시스템 Github -클라우드 방식으로 관리되는 버전 관리 시스템(VCS) -자체 구축이 아닌 빌려쓰는 클라우드 개념 -오픈소스는 일정 부분 무료로 저장 가능, 아닐 경우 유료 사용 -다른 사람들과 협업할 경우, 오픈소스를 공유하고 다른 사람들의 의견을 듣고 싶은 경우 등은 .. 2022. 2. 28.
[CSS-015] 레이아웃 배치(Float활용) [CSS-015] 레이아웃 배치(Float활용) HTML 화면 레이아웃을 배치할 때, CSS에서 Float 명령어를 이용하여 배치를 할 수 있습니다. 그 방법에 대해서 아래와 같이 소개합니다. [1] 레이아웃 1 See the Pen CSS-layout01 by wootekken (@wootekken) on CodePen. [2] 레이아웃 2 See the Pen CSS-layout02 by wootekken (@wootekken) on CodePen. [3] 레이아웃 3 See the Pen CSS-layout03 by wootekken (@wootekken) on CodePen. [퀴즈] 레이아웃 4 아래 그림과 같이 레이아웃을 만들어 보세요. (퀴즈 정답은 아래의 "더보기"에서 확인) 더보기 See.. 2022. 2. 25.
[JS-018] 길이단위 변환기 JS 프로젝트 🚩 HTML/CSS/JS 로 길이단위 변환기 프로그램 만들기 [1] 미리보기 [2] 코드 See the Pen JS_Lotto by wootekken (@wootekken) on CodePen. *퀴즈 : 위의 코드에서 인치, 마일 등의 길이 단위를 더 추가해 보세요. 2022. 2. 24.
[JS-017] Input 요소 입력값 연습문제 [1] 원 둘레와 넓이 계산 프로그램 원의 반지름 Input 창에 숫자값을 입력한 뒤, "계산" 버튼을 누르면 아래에 원둘레와 원넓이 값이 나타나는 프로그램입니다. HTML/CSS 부분을 따라 입력한 뒤, Javascript 부분은 스스로 코딩해 보세요. See the Pen JS_017_Input연습문제_1 by wootekken (@wootekken) on CodePen. [2] 피자 추가주문 자동 계산기 위 그림은 체크박스를 누르면 피자 가격에 추가 주문가격이 자동으로 더해지고 체크박스를 해제하면 합계에서 가격이 빠지는 프로그램입니다. 아래 코드에서 HTML/CSS를 따라 코딩한 뒤, Javascript 부분은 스스로 코딩해 보세요. See the Pen JS_017_Input연습문제_2 by wo.. 2022. 2. 18.
[JS-016] Input 요소의 입력값 수정하기 [1] Input 요소의 값을 다른 Input 창에 복사하기 Input 요소의 값을 가져오거나 수정하기 위한 실습을 하기 위해 아래의 기본코드를 자신의 개발환경으로 복사하세요. See the Pen Untitled by wootekken (@wootekken) on CodePen. 위 코드는 기본적으로 HTML과 CSS로만 이루어진 주분/배송 정보 프로그램 입니다. 체크박스(◻)를 클릭하면 주문정보에 입력한 데이터를 복사해서 배송정보 입력칸으로 자동 복사되게끔 Javascript로 코딩해 보려고 합니다. 그러기 위해서는 다음과 같이 Input 요소의 id값을 이용하여 주문정보에 접근한 뒤 .value 를 이용하면 Input에 입력된 값을 가져올 수 있습니다. [2] 입력 글자의 개수 제한 설정하기 Inp.. 2022. 2. 18.
728x90
반응형

티스토리툴바