728x90

Front-end 10

[JavaScript] 전역함수, 객체, 배열, Date, String, Math(+random 난수발생)

자바스크립트에서 제공하는 전역 함수 대표적인 자바스크립트 함수eval()parseInt()isNaN()eval()eval("")함수의 파라미터 값을 연산하여 결과값을 출력 ex)var res = eval("2*3+4*6"); // 30 리턴parseInt()숫자형문자열을 숫자로 변환하여 리턴 ex)var number = parseInt("32"); //숫자32var number2 = parseInt("0x32"); // 10진수로 변환해서, 정수 50을 리턴 isNaN()값이 숫자이면 false 리턴 ex) isNaN(32); // false 리턴 자바스크립트 객체객체 : object ex) in 현실세계자동차 :  추상적인 내용을 프로그래밍 가능하게 구체화 하는 작업이 필요하다.자바스크립트 객체 구성프..

Front-end 2024.08.30

[JavaScript] 특징, 작성위치, 다이얼로그, 문장, 변수

자바스크립트 특징  HTML 문서에 내장 : 조각 소스 코드 스크립트 언어 : 인터프리터 실행, 컴파일이 필요 없다. 단순함 : C언어 구조 차용, 배우기 쉽다.번역에 따른 분류 인터프리터중간에 일정 프로그램이 컴퓨와 사람사이를 통역해준다.  처리속도가 느리다. 대용량 처리에 적합하지 않다. (server - client) Visual Basic (visual studio ms), Python  컴파일사람이 작성한 프로그램을 한꺼번에 번역해서 컴퓨터 처리할 수 있도록 하는 방식 처리속도가 빠르다. 대용량 작업에 적합하다. 소스 코드가 수정이 되면  처음부터 다시 컴파일 작업을 진해해야 한다. 서버를 내리고 작업을 진행해야한다. C , C++ , C# , JAVA(두가지 요소를 다 가지고 있다.).......

Front-end 2024.08.01

CSS 배치, 블록/인라인/인라인블록박스(display, position), 리스트/표/폼 꾸미기

배치CSS3로 HTML 태그가 출력되는 위치 지정 HTML 태그는 웹 페이지에 작성된 순서와 달리 배치 가능 배치 기능의 CSS3 프로퍼티들display , position , left, right, top, bottom , float , z-index,  Visibility, overflow 블록 박스와 인라인 박스HTML 태그는 블록 태그와 인라인 태그로 나누어짐.블록박스 - 블록 태그 , 인라인 박스 - 인라인 태그      DIV    DIV    DIV 박스의 유형 제어 : displaydisplay : block(블록박스) | inline(인라인 박스) | inline-block(인라인블록 박스)블록박스인라인박스인라인블록박스항상 새 라인에서 시작새라인에서 시작 못함라인 안(inline)에 있음..

Front-end 2024.08.01

CSS 기본_ 셀렉터, 색/텍스트/폰트/박스/배경/커서

셀렉터 (selector)HTML 태그의 모양을 꾸밀 스타일 시트를 선택하는 기능 여러 유형의 셀렉터를 작성할 수 있다. 예) 웹 페이지의 모든 태그에 color:brown 스타일 적용하는 h3 셀렉터 생성h3(셀렉터) {  color : brown; } 태그 이름 셀렉터태그 이름이 셀렉터로 사용되는 유형.셀렉터와 같은 이름의 모든 태그에 CSS3 스타일 시트 적용h3, li { color : brown; }class 셀렉터셀렉터 앞에 점 (.)을 찍어준다. 점으로 시작하는 셀렉터 HTML 태그에서 사용하려면 class 속성으로 접근해야 된다. .warning { color : red; }body.main { background : aliceblue; }태그에 적용이 되지 않고, 태그에만 적용 -->60..

Front-end 2024.07.31

CSS 스타일 시트

CSS (Cascading Style Sheet)HTML 문서의 색이나 모양 등 외관을 꾸미는 언어CSS로 작성된 코드를 스타일 시트(style sheet)라고 부른다.현재 CSS3 : CSS level 3CSS3의 기능색상, 배경텍스트폰트박스 모델(Box Model)비주얼 포맷 및 효과리스트테이블사용자 인터페이스CSS3 스타일 시트 구성셀렉터 { 프로퍼티 : 값 ; }셀렉터 : CSS3 스타일 시트를 HTML 페이지에 적용하도록 만든 이름(태그 이름)프로퍼티 : 스타일 속성 이름, 약 200개정도의 프로퍼티가 있음.값 : 프로퍼티의 값ex) 텍스트를 20픽셀 blue로 출력하는 CSS3 스타일 시트 정의span { font-size : 20px; color : blue; } +) 기타 CSS 특징대소문..

Front-end 2024.07.31

[HTML5] 웹 폼

웹 폼웹 페이지에서 사용자 입력을 받는 폼로그인, 등록, 검색, 예약, 쇼핑 등 요소폼을 만드는 다양한 태그, , .......+) 태그는 종료 태그가 없다.작성폼 태그( )로 둘러싸는 형태, 컨테이너 action = "웹 서버의 응용프로그램의 URL(보낼 데이터를 처리할 url)" method = "데이터의 전송 방식 GET | POST" name = "폼이름" enctype = "데이터의 인코딩 타입(폼 데이터를 웹 서버로 전송할 때 암호화 방식(동영상 자료, 파일 크기가 큰 자료 전송시에만 사용함)" target = "윈도우이름"> name 속성폼이름 지정 action 속성폼 데이터를 처리할 웹 서버 응용프로그램의 이름 (보낼 url)submit 버튼이 눌리면 브라우저는 action에 지정된 웹..

Front-end 2024.07.31

[HTML5] 시맨틱 웹 _ 문서 구조화

기존 HTML 한계웹 문서 구조를 표현하는 태그가 없었다. 기존 태그 - 등 : 문서의 구조나 의미 전달 어려움이 있었다. 그~~래~~서~~!문서 구조화문서 구조화를 해보자! 왜?검색 엔진이 좋아하는 웹 페이지 작성의 필요성 대두정보탐색이 중요해진 시대.사물 인터넷으로 IT 장치들이 스스로 정보 탐색하는 시대사용자가 만든 웹 페이지 가치 극대화 - 탐색이 쉽게끔태그나, 태그로 구조화되어 보이게 작성. 시맨틱 웹웹 문서를 구조화하여 의미있는 내용 탐색이 용이한 웹 시맨틱 태그문서의 구조와 의미를 전달하는 태그. CSS3를 이용하여 직접 위치와 색, 모양을 지정해줘야 한다.지정하지 않으면 텍스트만  출력됨.  등등 구글의 검색엔진 사례웹 페이지에서 시맨틱 태그 검색.리뷰, 사람, 제품, 업체, 이벤트, 음..

Front-end 2024.07.31

[HTML5] <a>태그, <iframe>태그, 미디어 삽입

태그 : Anchor(배의 닻) 항해 : 하이퍼링크를 따라 다른 웹 페이지를 방문하는 것. 태그의 필수 속성 : href 하이퍼링크 만들기 하이퍼링크란?다른 html 페이지의 연결 고리(같은 웹 페이지의 다른 html 페이지)(다른 웹 사이트의 html 페이지로 모두 연결 가능) 하이퍼링크는 텍스트나 이미지로 작성할 수 있다. 형식 예시같은 사이트에 있는 웹 페이지 연결 클릭하면, 해당 페이지로 이동합니다.다른 웹 사이트의 웹 페이지 연결구글이미지로 하이퍼링크 만들기  하이퍼링크 텍스트의 색 (default값)링크 텍스트의 처음 색 : 밑줄과 함께 blue방문 후 링크 색 : 보라색 purple마우스로 링크를 누르고 있는 동안 : 빨간색 red +) 링크 색 변경 가능 - css3를 이용하여 링크 색 지..

Front-end 2024.07.31

[HTML5] 기초

HTML 기본 구조태그가 기본이다. 기본 태그,  문서의 본문, 텍스트, 이미지, 테이블, 자바스크립트 코드, 동영상 등 - html문서의 종료HTML 태그의 특징구성imgsrc"heart.jpg"alt"사랑합니다."태그이름속성1속성값속성2속성값 각 속성은 공백문자(띄어쓰기)로 구분해준다. 시작태그 & 종료태그대부분의 태그는 시작태그와 종료태그로 구성되어 있다. ,  시작태그O, 종료태그 X시작태그만 있고 종료태그가 없는 태그도 있다., 대소문자 구분태그와 속성은 대소문자 구분하지 않는다. ,  무방하다.  속성값은 대소문자를 구분해야 된다.heart.jpg != Heart.jpg 공백 문자태그의 속성 값에 불필요한 공백문자는 사용하지 않는다. 기타 TIP - 문자, 기호, 심볼 입력HTML5의 ..

Front-end 2024.07.29

웹 기초

웹의 기본 목적과 구성웹(web)의 기본 목적 다른 여러 컴퓨터에서 문서를 공유하거나 보는 목적.웹에서 다루는 문서를 웹 문서라고 부른다.웹의 구조인터넷을 활용하여 거미줄처럼 연결된 정보 소통 망 (World Wide Web)웹의 구성웹서버와 웹 클라이언트 컴퓨터들로 구성웹서버웹 사이트를 탑재하는 컴퓨터, 구글, 네이버.... 등웹문서, 이미지, 동영상 등의 데이터 저장 관리웹 클라이언트의 요청을 받아 웹 문서 전송웹 서버로 작동하도록 하는 소프트웨어 실행웹 클라이언트사용자 인터페이스 담당 웹 서버에 웹 문서를 요청하고 받아서 사용자에게 출력인터넷 != 웹인터넷웹의 개념이 나오기 전부터 만들어진, 컴퓨터 네크워크 여러 대학들과 계약 업체 사이의 컴퓨터를 연결 컴퓨터마다 고유한 주소(IP주소)를 부여하여 ..

Front-end 2024.07.29
728x90