어리바리 신입 개발자의 얼렁뚱땅 개발 기록 ✨

3. 가상 클래스 선택자 (자주 사용함) 우리가 어떤 행동을 했을 때, 동작하는 개념 (클릭, 마우스 포인터 올리기...) 표기법은 :(콜론)가상클래스 ex) .class이름:hover / :active / input:focus 클래스나 아이디 선택자를 적용했으면 . or # 클래스를 쓰고 :hover 등등 입력해야함 클리스랑 태그 같이 있는데 태그 있다고 태그 선택자로 착각하고 div:hover 이런 짓 하지 않기 ^^! [동작을 나타내는 가상 클래스 선택자] hover : 특정 요소에 마우스 포인터를 올리면 동작함 active : 특정 요소에 마우스를 클릭하고 있는 동안 동작함 focus : 특정 요소에 포커스되면 동작함 / 포커스가 가능한 요소는 HTML의 대화형 콘텐츠(input, a, butto..

2. 복합 선택자 - 복합 선택자는 기본 선택자를 조합해서 사용한다. [ 1. 일치 선택자 ] 두개의 선택자(태그, 클래스, 아이디 선택자)를 붙여서 사용하며, 동시에 만족하는 요소를 선택 태그 선택자와 클래스/아이디 선택자의 위치를 바꿔서 작성하면 찾을 수 없다. 태그 선택자를 먼저 작성하도록 한다. (1번 div) (2번 div) 1번 div의 내용에 2번 div라는 요소가 들어가 있다. 밖에 있는 1번 div 요소를 "부모 요소"라고 하며, 내부에 있는 2번 div 요소를 "자식 요소" 라고 한다. (1번 div) (2번 div) (3번 div) 3번 입장에서 1번과 2번은 조상 요소(상위 요소)라고 부른다. 1번 입장에서 2번과 3번은 후손 요소(하위 요소)라고 부른다. [ 2. 자식 선택자 ] ..

선택자 ★★★★★ CSS를 이용해서 HTML의 어떤 요소를 꾸미려면, 많은 요소들 중 어떤 요소를 꾸밀지 명확하게 지정해야 한다. 선택자는 스타일을 적용할 대상을 지정하는 용도로 사용 [종류] 1. 기본 선택자 (가장 많이 쓰고 중요함) - 전체 선택자 : 스타일을 문서의 모든 요소에 적용할때 사용한다. / 선택자에 * (애스터리스키)기호 사용 - 태그 선택자 : html의 태그 이름을 작성하고 css 속성과 값을 적어주는 방식 / 선택자에 태그에서 제외하고 태그의 이름만 사용 -> W3C 에서 제공하는 선택자에 대한 설명에서는 "타입 선택자 (type selector)"라고 명시되어있다. 뒤에 나올 속성 선택자 에서 input type="text" 만 선택자로 사용할 경우 : input [type="t..

경로 1) 절대 경로 표기법 : / -> root(최상위=프로젝트)를 의미. 어느 파일에 위치해 있어도 root 경로로 이동이 가능. 2) 상대 경로 : 웬만하면 절대 경로 대신 상대 경로 사용하기 출발하는 위치에 따라 경로가 바뀜 표기법 : ./ (생략 가능 - 명확하게 작성하기 위해서 생략하지 말 것) -> 내 주변에서 찾는 것 ./ => 내 폴더에서 나가지 않고 그 안에서 찾는다. A 폴더의 1 파일과 2 파일 일때 -> 1 파일에서 2 파일을 찾는다 -> ./2 or 2 ../ (내 위치에서 상위 폴더로 올라가서 찾는다. / 내가 속해있는 폴더의 위쪽 폴더에서 올라가 찾는다.) ../ => 내 폴더에서 상위 폴더로 빠져나가서 찾는다. A 폴더의 1 파일과 B폴더의 2 파일 일때 -> A 폴더 1 ..

[ ★ 인라인 요소와 블록 요소, 인라인 블록 요소 ] -요소가 화면에 출력되는 특성을 크게 2가지로 구분 1. 블록 요소 : 상자(레이아웃)를 만들기 위한 요소 - 기본적으로 레이아웃 작업에 많이 사용하며, 특별한 의미는 없고 구분을 위해 사용한다. - 특징 1) 한 줄에 한 개만 배치 가능하다. 2) 기본 너비값이 100%를 차지한다. 3) 크기 값을 가질 수 있다. (가로 세로) 4) 상하좌우 마진을 가질 수 있다.- 종류 : div, h*, table(th, td..), header, nav, footer 등 div(Division) : 특별한 기능 없음 / 어떤 영역을 잡을 때 많이 사용 h* (Heading) : 제목 / *에 1~6번 들어갈 수 있음 / 숫자가 작을수록 더 중요한 제목을 정의..

.html 파일을 열고 1번 줄에 !html 치면 자동으로 html 서식 완성 됨. 줄 선택 : 선택할 영역 뒤에 커서 위치 후 shift + home / 선택할 영역 앞에 커서 위치 후 shift + end 드래그 후 ctrl + / : 주석 처리 및 풀림 alt + shift + 방행키 : 복사 붙여넣기 alt + 방향키 : 라인 옮기기 ctrl + space bar : 자동 완성ctrl + 방향키 : 줄 옮김 src="" 에서 "" 사이에 커서 두고 ctrl + space 누르면 같은 작업환경에 있는 파일 목록들 뜬다. emmet 문법? [ console.log 사용 ] 출력 라이브러리 설치하지 않고 코드 문제를 해결하거나 데이터 흐름을 추적할 때 요긴하게 사용하는 기능 왼쪽 아래 톱니바퀴 누르고 ..

CSS(Cascading Style Sheet) : 문서에 옷을 입힌다. / Cascading - 위에서 아래로 흐른다. 스타일 시트의 적용 우선 순위가 위에서 아래 순이다. -> 같은 선택자가 반복해서 존재하면 마지막에 있는 선택자의 값이 적용 된다. html(정보 전달, 기본 뼈대, 구조)을 꾸며주는 디자이너 역할 html 문서 내에서 태그를 선택해서 디자인하고, 배치하는 역할 [기본 문법] 선택자 {속성:값;} [★ 선택자(selector) ] - 스타일(css)을 적용할 대상을 명확히 지정하는 용도 - 속성 : Property - 값 : value [작성 방법] 선택자 {속성:값; 속성:값; 속성:값; 속성:값} -> 한 줄 작성이 가능하지만, 가독성을 위해 줄 바꿈 해준다. 하나의 속성과 값을 ..

form 요소 - form 요소는 서버에 데이터를 전송하기 위한 태그 - 사용자에게 데이터를 입력 받아 작성된 데이터를 전달할 수 있다. - 사용자가 웹 사이트로 정보를 보낼 수 있는 대부분의 요소들은 폼이다. ex ) 로그인, 회원가입 등... [공통 속성] 1) name : 폼의 이름을 지정하며, 서버에 전송될 데이터의 명칭 2) value : 서버에 전송될 데이터의 값 3) action : 데이터가 전송되는 URL(경로) 4) method : 데이터의 전달 방식을 작성하고, 사용자가 입력한 내용을 어떻게 서버에 넘겨줄 것인지 결정. - get : 호출되는 주소에 값을 등록하여 보내는 방식. - post : 데이터를 감춰서 서버에 전달한다. ex) 비밀번호 - enctype : 첨부 파일 전달 시 사..

[ 1-1. 하나의 패키지 / 하나의 클래스 / 리턴 없고 / 입력 없는 / 메서드 선언 및 호출 ] package kr.or.ksmart.a; //class block = body (본체, 몸통) - public class AA01 { } public class AA01 { //main method block = body (본체, 몸통) public static void main(String[] args) { // 메서드 호출할 수 있는 위치 a(); //메서드 호출 a(); b(); } //메서드 선언할 수 있는 위치 //소괄호 중괄호 열고 엔터 치면 자동으로 닫힘 public static void a() { //메서드 선언 System.out.println("01 a 메서드 실행"); } publi..

HTML 기본 구조 1.HTML에서 사용하는 명령어 - 태그(Tag)라고 한다. 로 나타내며, 대부분 한 쌍으로 이루어져 있다. HTML 문서는 웹 브라우저에서 실행된다 => 웹 표준을 준수 - 브라우저 엔진(표준) - 정상적으로 읽을 수 있다. (정상적으로 뷰 포트 영역에 렌더링) smart 요소(Element) - 안녕하세요. : 태그 + 태그 사이에 있는 내용(콘텐츠) = 요소라고 한다. -> h1 요소 - 내용 앞 태그를 시작(열린) 태그 / 뒤 태그 종료(닫는) 태그 * 태그는 대소문자를 구별하지 않는다. 단, W3C에서 소문자를 권장하고 있기 때문에 소문자를 사용하는 것이 일반적인 방법이다. - 빈 요소(Empty Element) : 내용을 가질 수 없는 요소 ex) , , 등 속성(Attri..

자바 문법의 기본 : 패키지 > 클래스 > 메서드 ★ 메서드를 선언하는 원리 12개 & 메서드를 호출하는 원리 1개를 정확하게 이해하기 기억해야 한다. [ 메서드를 선언하는 원리 ] 1-1. 하나의 패키지내 하나의 클래스에서 리턴 없고 입력 없는 메서드 선언 및 호출 1-2. 하나의 패키지내 하나의 클래스에서 리턴 없고 입력 있는 메서드 선언 및 호출 1-3. 하나의 패키지내 하나의 클래스에서 리턴 있고 입력 없는 메서드 선언 및 호출 1-4. 하나의 패키지내 하나의 클래스에서 리턴 있고 입력 있는 메서드 선언 및 호출 2-1 하나의 패키지내 서로 다른 클래스에서 리턴 없고 입력 없는 메서드 선언 및 호출 2-2. 하나의 패키지내 서로 다른 클래스에서 리턴 없고 입력 있는 메서드 선언 및 호출 2-3. ..

[작업 환경] Ctrl + Shift + + / - : 폰트 크기 조정 [실행 / 디버깅] Ctrl + F2 : 프로그램 종료 Ctrl + F11 : 바로 전에 실행했던 클래스 실행 (Run Mode) F11 : 바로 전에 실행했던 클래스 실행 (Debug Mode) F8 : 디버깅 계속 - VS, 크롬디버거(F8) F7 : 디버깅 리턴 F6 : 디버깅 한 줄 씩 실행(step over) - VS, 크롬디버거(F10) F5 : 디버깅 한 줄 씩 실행 함수 내부로 들어감 (step into) - VS, 크롬디버거(F11) [소스 네비게이션] Ctrl + 마우스커서(혹은 F3) : 클래스나 메소드 혹은 멤버를 상세하게 검색하고자 할때 Alt + Left, Alt + Right : 이후, 이전 Alt + ) ..

[ 1. 패키지 ] 소문자로 작성하는 것이 관례이다. 숫자로 시작해서는 안된다. _ (언더바)와 $를 제외한 특수문자를 사용해서는 안 된다. java로 시작하는 패키지는 자바 표준API에서만 사용하기 때문에 사용해서는 안 된다. 배포할 도메인명을 뒤에서부터 작성한다. ex) https://www.gmarket.co.kr -> kr.co.gmarket 최근에는 패키지명이 길어지는 것을 막기 위해 kr.co 대신 com 으로 작성하는 경우가 많다. [ 2. 클래스 ] 한글을 사용할 수 있지만 영어를 사용하는 것이 관례이다. 첫 글자는 대문자를 사용한다. (첫 글자는 숫자가 올 수 없다.) 앞 글자와 연결되는 단어의 첫 글자는 대문자로 작성한다. => 파스칼 표기법 PascalCase ex) MemberInf..

[JAVA 개발 환경 셋팅] [JAVA 환경 변수] 환경 변수 : 운영 체제에서 사용하는 설정 정보가 담겨 있는 변수. 원래 oracle JDK를 사용하면 자동을 경로를 잡아주지만 오픈 JDK를 사용하면 직접 설정해줘야 함. 1. 자바 경로 복사 C:\Program Files\Java\jdk1.8.0_144 2. 내PC - 설정 - 시스템 환경 변수 검색 - 시스템 변수 - 새로 만들기 변수 이름 : JAVA_HOME / 변수 값 : C:\Program Files\Java\jdk1.8.0_144 변수 이름 : CLASSPATH / 변수값 : JAVA_HOME [설정하는 이유 : 컴파일 완료된 class 파일 위치를 잡아 주기 위함.] 3. 시스템 변수에서 path 찾아서 편집 - 새로 만들기 - %JAV..

[ 프로그램 설치 ] 1. Visual Studio Code 사이트 접속 - 윈도우용 다운로드 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 2. 추가 작업 선택에서 모든 체크 박스 선택 후 설..