일렉치는 취준생

JavaScript 시작하기 1. HTML 파일에 직접 JavaScript 코드 작성 -> HTML 파일을 만든 후 ! + tab 누르면 자동완성됨 Live Server 익스텐션을 사용하여 HTML 창을 바로 켜본다 HTML 창을 열고 개발자 도구에서 console을 확인하면, 입력한 JavaScript 코드가 보임 2. JavaScript 코드 분리하기 JavaScript 코드가 너무 길어지면, js 파일에 쪼개서 사용할 수 있다. 같은 위치에 start.js 파일 생성 ( 1 ) HTML 파일 script 부분 수정 js파일을 참조하도록 추가 ( 2 ) start.js 수정 console.log('hello, js') 동일하게 동작하는 모습 웹 브라우저의 console에 JavaScript 코드를 바..

HTTP HTML 문서와 같은 리로스들을 가져올 수 있도록 해주는 프로토콜(규칙, 규약) 웹에서 이루어지는 모든 데이터 교환의 기초이다. HTML element 데이터가 전송되는 방법을 정의한다. 웹에서 사용자 정보를 입력하는 여러 방식(button, submit 등 ) 제공한다. 사용자로부터 할당된 데이터를 서버로 전송하는 역할을 담당한다. 데이터를 어디(action)로 어떤 방식(method)로 보낼 지 결정 핵심속성 1. action 입력 데이터가 전송될 URL을 지정한다. -> 데이터를 어디로 보낼지 action을 지정하지 않으면, 데이터는 현재 form이 있는 페이지의 URL로 보내진다 2. method 데이터를 보내는 방식을 정의한다. 입력 데이터의 HTTP request methods를 지정..

Float 속성 지정한 요소가 Normal flow를 벗어나도록 만드는 속성 box를 왼쪽이나 오른쪽으로 이동시켜 inline 요소들이 주변을 가리게함 float : none - 기본 값 float : left - 요소를 왼쪽으로 띄운다 float - right - 요소를 오른쪽으로 띄운다 float 전후 비교 1. float 하지 않았을 때 코드 box1 box2 2. float 추가 했을 때 코드 box1 box2 -> float : left를 추가한 것 만으로 box를 왼쪽에 띄울 수 있다 !

+ : 형제 요소 결합자 / 인접 형제 선택자 p + p : p 다음 p일 때 속성을 적용 시켜라 ~ : 후손 선택자 / 일반 형제 선택자 특정 태그 뒤에 나오는 모든 요소들을 선택 p ~ p : p 다음에 나오는 모든 p태그를 선택 0 1 2 3 4 5 기사 6 7 8 9 p + p{ color: red; } p 다음 p 가 오면 red로 바꿔라 1 2 에서 2가 빨간색이 된걸 확인 p ~ span{ color: green; } p 다음에 나오는 모든 span을 green으로 바꿔라 span인 3과 9가 모두 초록색이 된걸 확인

HTML input요소의 name과 id 속성 HTML input 요소의 name 속성은 서버로 전송되는 데이터의 이름(key)를 나타낸다. 이를 통해 서버에서는 클라이언트에서 전송한 데이터를 처리할 때, 해당 데이터의 이름을 key로 사용하여 데이터를 가져오거나 저장할 수 있다. id 속성은 요소를 식별할 수 있는 유일한 이름을 제공한다. 이를 통해 CSS와 JavaScript에서 해당 요소에 대한 스타일 및 동작을 지정할 수 있다. id 속성은 전체 문서에서 유일해야함 !! 중복 XX Label : HTML에서 label 요소는 사용자의 인터페이스 항목의 설명을 나타낸다. input 요소와 함께 사용하기 Input 요소와 label을 함께 사용하여 이를 클릭하면 해당 label 입력 요소가 선택 된다..

HTML ( Hyper Text Markup Language ) - 웹 페이지를 작성하기 위한 언어 1. Hyper Text : HyperLink를 통해 텍스트를 이동 -> 클릭을 통해 자유롭게 이동할 수 있다. 비 선형적으로 이루어짐 2. Markup Language : 태그 등을 이용하여 문서나 데이터의 구조를 명시하는 언어 HTML 기본 구조 1. HTML : 문서의 최상위 요소 2. HEAD : 문서 메타데이터 요소 -> 일반적으로 브라우저에 나타나지 않는 내용이 있다. : 브라우저 상단 타이틀 : 외부 리소스 연결 요소 : CSS를 직접 작성하는 곳 3. BODY : 문서 본문 요소 -> 실제 화면에 보이는 것과 관련된 내용 HTML 요소(element) contents 여는태그 + 내용 + 닫..

HTML 구조 HTML의 구조 ! 이해해야 코드를 칠 수 있지 않을까해서 함 만들어봤다 시멘틱 태그 시멘틱 태그 : 웹 문서의 구조를 만드는 것 !! html css js html css javascript : order list ( 순서있는 목록 ) : unorder list ( 순서없는 목록 ) : list table 표 만들기 월 화 수 목 11 12 13 14 21 22 33 34 : 표만들기 과 가 모두 있어야 셀이 만들어짐 : 제목 행 만들 때 사용 / 가운데정렬+굵게 : 행 : 열 : 표의 구조 중 제목 : 본문 : 요약 폼만들기 회원가입폼 이름 전화번호 비밀번호 이메일 ~ 속성의 종류 ~ method = "post" : 입력한 내용의 길이에 제한X 사용자가 입력한 내용도 안나옴 method..

HTML 웹페이지 만들기 첫번째로 만든 웹페이지 나의 첫 html 페이지 !! 줄 나누기, 공백 만들기 새로운 html 제목줄2 제목줄3 제목줄4 제목줄5 제목줄6 문장을 쓰고 엔터키를 눌러도 줄바꿈은 안된다. 공백도 안된다. 문단을 나눠보자 애국가 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강상 대한사람 대한으로 길이 보전하세 진달래꽃 나 보기가 역겨워 가실때에는 말없이 고이 보내 드리오리다. 영변에 약산 진달래꽃 아름따다 가실길에 뿌리오리다 html은 아무리 엔터를 쳐도, 줄이 안바뀐다. 줄바꿈 공백 주석 리스트 만들기 목록태그(리스트 형태의 태그) 파랗게 난너없이 베러엔베러 투쒜 Feel like 에스프레소 카라멜 마끼아또 카페모카 콜드브루 아메리카노 목록 태그..