til

배경backgound-color: 배경색 지정backgound-clip: 배경색의 적용 범위 조절border-box: 가장 외곽인 테두리까지 적용. 기본값padding-box: 테두리를 뺀 패딩 범위까지 적용content-box: 콘텐츠 부분에만 적용backgound-image: 배경 이미지 삽입background-image: url('이미지 파일 경로'); div { width: 350px; height: 350px; border: 1px solid #000; background-image: url('./img/profile.jfif'); }backgound-size: 배경 이미지 크기 조절backgound-repeat: 배경 이미지 반복 방법 설정 ..

MPA (Multi Page Application)멀티 페이지 애플리케이션은 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고, 페이지를 로딩할 때마다 서버에서 css, js, 이미지 파일 등의 리소스를 전달받아 화면에 보여주는 방식이다. 각 페이지마다 다른 html 파일을 만들어서 제공하거나 데이터에 따라 유동적인 html을 생성해 주는 템플릿 엔진을 사용한다.싱글 페이지 애플리케이션이란 개념이 생기기 전에는 멀티 페이지 애플리케이션이 사용되었다. MPA는 사용자 인터렉션이 많고 다양한 정보를 제공하는 애플리케이션에는 적합하지 않다. 새로운 페이지를 보여줘야 할 때마다 서버 자원의 사용량과 트래픽이 증가할 수 있기 때문이다.SPA (Single Page Application)싱글 페이지 ..

박스 모델 구성콘텐츠 영역(content)패딩(padding): 박스와 콘텐츠 영역 사이의 여백테두리(border)마진(margin): 박스 모델 사이의 여백width, height 속성콘텐츠 영역의 크기를 지정할 때 너비는 width, 높이는 height 속성을 사용한다.px이나 em 단위로 값을 지정하거나, 백분율(%)로 부모 요소를 기준으로 지정할 수 있다. 콘텐츠 영역 크기 설정하기border테두리의 두께, 모양, 색상 등을 한번에 지정한다.하위 속성으로 개별적으로 적용할 수도 있다.border-style: 테두리의 스타일을 지정. solid(실선), dotted(점선), double(이중선) 등border-width: 테두리의 두께 지정border-color: 테두리의 색상 지정border..

CSS(Cascading StyleSheet)css는 스타일을 정의하는 문서이다. HTML 문서에 스타일을 추가한다.css는 다수의 스타일 선언문으로 구성된다.선택자 { 속성명1: 속성값1; 속성명2: 속성값2;}/* 주석 */CSS 적용 방법1. 인라인 스타일: 스타일 시트를 사용하지 않고 요소에 직접적으로 스타일을 정의. style 속성 사용 인라인 스타일2. 내부 스타일 시트: 웹 문서 내에 스타일을 정리. 인라인 스타일3. 외부 스타일 시트: 스타일을 별도 파일로 저장하여 웹 문서에 연결. 태그 사용 인라인 스타일/* main.css */p { color: red;}선택자선택자는 웹 문서에서 스타일을 적용할 부분을 선택한다.전체 선택자(*)문서의 모든 요소에 스타일 적용* { .....

프로세스(Process)프로그램이 메모리에 적재되어 실행 중일 때 프로세스라 부른다. 예를 들어 크롬을 실행하면 크롬 프로세스가 실행되고, 노트패드를 실행하면 노트패드 프로세스가 별개로 동작한다.운영체제는 프로그램을 실행하면서 디스크에 저장된 데이터를 메모리로 로드한다. 프로세스는 운영체제로부터 독립된 메모리 영역(코드, 데이터, 스택, 힙)을 할당받는다.프로그램: 특정 작업을 수행하기 위한 명령어의 집합 예시)크롬에서 탭마다 독립된 프로세스를 실행시켜 한 탭이 오류나도 다른 탭은 유지될 수 있도록 한다.특징운영체제는 프로그램을 메모리에 적재하고 이를 프로세스로 다룬다. 프로세스마다 고유한 번호(프로세스 ID)를 할당한다.운영체제는 프로세스에 실행에 필요한 메모리를 할당하고 이곳에 코드와 데이터 등을 적..

반응형 웹반응형 웹 디자인은 하나의 웹사이트 레이아웃이 다양한 화면 크기에 따라 유동적으로 변화하도록 설계된다. CSS의 미디어 쿼리를 사용하여 화면의 크기에 따라 스타일과 레이아웃이 조정된다.다음 사이트는 반응형 디자인의 예이다.https://studio-jt.co.kr/category/blog/ 스튜디오 제이티 Story | 스튜디오 제이티웹 에이전시! 스튜디오 제이티의 웹디자인 포트폴리오, 웹개발 관련 기술 포스팅, 일하는 모습을 확인하세요studio-jt.co.kr웹 사이트의 크기를 줄여 일정 비율에 도달하면 디자인에 변화가 생기면서 요소들이 다시 정렬된다.장점다양한 기기와 화면 크기에 일관된 사용자 경험 제공유지보수 용이단점복잡한 레이아웃의 경우 디자인과 개발이 어려울 수 있음동적 콘텐츠를 불러..

1. HTML(HyperText Markup Language)HTML은 웹브라우저를 통해 표시되는 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어이다. 웹 브라우저의 여러 내용 중에서 제목과 본문, 이미지, 표 등 웹 요소를 알려주는 역할을 한다. 2. 기본 문법태그태그는 웹 브라우저가 어느 부분이 제목, 텍스트 또는 표인지 구별할 수 있도록 하는 역할을 한다.여는 태그와 닫는 태그 사이에 콘텐츠 내용을 작성하며 태그의 콘텐츠로 또 다른 태그가 포함될 수 있다.콘텐츠올바른 태그 작성 규칙태그 이름은 소문자로 쓴다.여는 태그와 닫는 태그를 정확히 입력한다.들여쓰기를 적절히 사용하는 것이 좋다.속성속성은 태그의 부가적인 기능을 정의하는 것으로 선택사항이다. 시작 태그 내부에 정의하며 여러 속성을 작성할 때는..

1. 변수와 데이터 타입(1) 변수변수는 하나의 값을 저장하기 위해 확보한 공간을 말한다. 즉 값의 위치를 가리키는 상징적인 이름이며 변수명을 통해 접근 가능하다.변수에 값을 저장하는 것을 할당이라 하고, 변수에 저장된 값을 읽어 들이는 것을 참조라 한다.변수 선언변수를 사용하려면 반드시 선언이 필요하다. 변수를 선언할 때는 var, let, const 키워드를 사용한다. ES6에서 let, const 키워드가 도입되었다.var: 함수 스코프를 가지며, 중복 선언이 가능하다. let: 블록 스코프를 가지며, 중복 선언이 불가능하다.const: 블록 스코프를 가지며, 재할당이 불가능한 상수를 선언할 때 사용된다.중복 선언이란, 같은 이름의 변수를 다시 선언하는 것을 말한다.값의 재할당재할당이란 이미 값이 ..