본문 바로가기

웹 프론트엔드(Web FrontEnd)22

[JS] JavaScript 기초 2 (변수와 상수, 연산자) 변수 자바스크립트 데이터 저장 공간이다. 변수 선언 변수 이름을 정하고, 저장 공간 할당 'var' 키워드로 선언 var 없이 선언 age가 이미 선언된 변수이면, 존재하는 age에 21 저장한다. 자바스크립트에는 변수 타입이 없고, 변수에 저장되는 값에 대한 제약 또한 없다. 지역변수와 전역변수 지역변수는 함수 내에 var 키워드로 선언할 수 있고, 선언된 함수 내에서만 사용 가능하다. 전역변수는 함수 밖에 선언되거나 var 키워드 없이 선언된 변수로 프로그램 전역에서 사용 가능하다. var x; // 전역변수 지역 변수와 전역 변수의 이름이 같을 땐 'this'를 사용한다. 전역 변수에 접근하고자 할 때 : this.전역변수명 쉽게 말해 this는 지금 현재 위치한 곳의 부모를 지칭한다. functi.. 2023. 1. 2.
[JS] JavaScript 기초 사용 방법 (식별자, 문장, 주석, 데이터 타입) C와 거의 유사한 구조를 갖고 있는 JS의 기초 사용 방법을 알아보자. 식별자 자바스크립트 프로그램의 변수, 상수(리터럴), 함수의 이름 식별자 만드는 규칙 첫 번째 문자 : 알파벳(A-Z, a-z), 언더스코어(_), $ 문자만 사용 가능하다. 두 번째 이상 문자 : 알파벳, 언더스코어(_), 0-9, $ 사용 가능하다. 대소문자는 구분되어 다루어진다. 예를 들어 'CellPhone'과 'cellphone'은 다른 식별자이다. C처럼 자바스크립트의 예약어 사용 불가하다. ex) if, false, null, for 등 식별자 사용 사례 문장 자바스크립트 프로그램의 기본 단위는 문장을 구분하기 위해 세미콜론을 사용한다. 주석문 C와 똑같다. 자바스크립트 언어에서 다루는 데이터 종류 숫자 타입 : 정수, .. 2022. 11. 7.
[JS] JavaScript의 개념과 기초 객체 기반 언어인 JS를 배워보자. 객체의 개념 현실 세계는 객체들의 집합이다. 사람, 휴대폰, 자동차 등 객체는 자신만의 고유한 구성 속성을 가지고 있다. 예를 들어, 자동차 : 사람 : 은행 계좌 : Javascript 1995년 넷스케이프 개발 Netscape Navigator 2.0 브라우저에 최초 탑재. 웹 프로그래밍 개념 창시 특징 -HTML 문서에 내장 -스크립트 언어 -인터프리터 실행(컴파일 필요 없음) -C언어 구조 차용 웹페이지에서 JS의 역할 사용자의 입력 및 계산 마우스와 키보드 입력은 오직 자바스크립트로만 가능하다. - 웹 페이지 내용 및 모양의 동적 제어 - HTML 태그의 속성, 콘텐츠, CSS 프로퍼티 값 동적 변경 - 브라우저 제어 - 브라우저 윈도우 크기와 모양 제어 - .. 2022. 10. 31.
[CSS] Float (레이아웃 구성) 플롯(float, 매우 중요) 웹 페이지 레이아웃을 구성할 때 반드시 사용하는 속성이다. 키워드 left right none 플롯을 사용할 때 주의해야 할 점이 있다. 부모의 높이 값이 지정 안 되는 현상이 일어나는 것이다. 부모 요소에 1. 가상 요소:after { content: ""; display: block; clear: both;} 2. overflow: hidden 중 택 1을 적용해주면 된다. 기존 div 하나에 div 4개 박스를 넣고 border 값을 줘보았다. 자식 박스를 float left 했더니 이렇게 이상하게 돼있다. 지금이야 border를 적용시켜 눈으로 확인이 쉽지만 나중에 오류가 나면 찾기 힘들다. 첫 번째 방법을 적용하여 부모 박스에 .box:after {content: .. 2022. 9. 26.
[CSS] 패딩과 마진 (padding, margin 속성을 통한 레이아웃 구성) 패딩과 마진(매우 중요) border 기준으로 안쪽 여백은 padding 바깥 여백은 margin이다. 개발자 도구로 마우스를 올렸을 때 초록과 주황으로 구분할 수 있다. F12로 접속 후 Element에서 영역 포인터 아이콘 선택 혹은 Ctrl + Shift + C로 개발자 도구의 마우스 포인터를 사용할 수 있다. 스타일 시트에서 p 태그에 패딩을 넣어보겠다. p { border: 1px solid #777; width: 300px; height: 100px; padding: 10px; /* 전부 */ padding: 10px 20px; /* 위아래, 좌우 */ padding: 10px 20px 30px 40px; /* 12시부터 시계방향 */ } padding right, left 등을 사용하여 하나.. 2022. 9. 26.
[HTML, CSS] display 속성 (메뉴 만들기) display 속성 (중요) display 속성은 태그 영역 표현 방식을 지정하는 속성이다. none - 태그를 화면에서 보이지 않게 한다. block - 태그를 block 형식으로 지정 inline - 태그를 inline 형식으로 지정 우리는 html에서 블록과 인라인 속성에 대해 배웠다. HTML 기초지식(태그, 블럭과 인라인, ul, li, 하이퍼링크, table form 예제) 방학 중 특강을 들으며 내가 배운 것을 블로그에 정리해보겠다. 이 글은 간단하게 핵심적인 html, css 기초 문법을 보고 이해하는데 도움이 될 것이다. 교재 : html5 웹 프로그래밍 입문 (3판) 웹이란? anhanryang.tistory.com CSS에서는 HTML에서 선언한 인라인 요소도 블록 형식으로 바꿔줄 수.. 2022. 9. 26.
[CSS] position-fixed (메뉴, 사이드 바 스크롤 시 고정) position-fixed 우리가 사용하는 웹페이지 화면을 보면 오른쪽 하단이나 메뉴 등이 고정돼있는 경우를 많이 봤을 것이다. 예를 들면 밑의 사진처럼 웹에서 블로그 글을 작성할 때 상단 도구 바, 웹에서 쇼핑을 할 때 양측 사이드 광고 블록 등 마우스 스크롤을 해도 화면 내용만 바뀔 뿐 고정된 콘텐츠들이 있다. 이것을 바로 position의 fixed 속성을 사용하여 고정해주는 것이다. z-index 위에 설명한 absolute 3색 예제를 보면 파란색이 빨간색, 노란색 둘 다 덮어 위에 표시되는 것을 알 수 있다. 포지션은 z 축을 사용하는 것이다. 그러므로 z-index 속성을 사용하여 우선순위 등을 정해주어야 하는 경우가 있다. 1번 빨간 동그라미로 콘텐츠의 높이를 스크롤로 확인해야 할 만큼 준.. 2022. 9. 21.
[CSS] float를 활용한 쇼핑몰 물건 판매 예제 float을 활용한 물건 판매 예제 div 큰 블럭 한 개 하위 width 부모 영역의 50%씩 두 개 블럭 생성 왼쪽은 사진 영역, 오른쪽 영역은 내용 영역. 오른쪽 내용 영역은 다시 세 개의 블럭으로 나눠 정보와 버튼 등을 기입한다. 다양한 박스를 어떻게 선언하고 배치시키는지 이해하는 것이 중요하다. 마치 안드로이드 스튜디오를 할 때 다중 linear layout을 수직(vertical), 수평(horizon) 배치하는 것과 비슷하다. 태그의 열고 닫힘과 들여쓰기 정도를 잘 확인하며 하도록 한다. 아래 코드를 확인하여 위 그림의 1, 2, 3, 4, 5가 어떤 클래스와 아이디에 매치되는지 이해한다. 과제2 제목 : 돌고래 급처분 합니다 내용 : 안녕하세요, 돌고래입니다. 저는 새로운 주인을 찾고있어요.. 2022. 9. 19.
[CSS] Overflow 오버플로우 ( 내용이 넘칠 때 ) 오버플로우 텍스트 컨트롤 중 글자가 길어질 때 사용할 수 있다. visible로 설정을 했다. 위처럼 작성하지 않아도 기본 설정은 visible로 돼있다. 글자가 넘쳐도 박스를 뚫고 계속 나오는 것을 확인할 수 있다. hidden 설정으로 넘치는 글자를 안 보이게 할 수 있다. scroll 속성으로 스크롤을 위아래로 내려 확인할 수 있게 한다. auto 속성은 텍스트가 적으면 표시하고 많으면 스크롤을 자동으로 붙여준다. 2022. 9. 5.