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: 블록 스코프를 가지며, 재할당이 불가능한 상수를 선언할 때 사용된다.중복 선언이란, 같은 이름의 변수를 다시 선언하는 것을 말한다.값의 재할당재할당이란 이미 값이 ..

자바스크립트는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나이다. HTML, CSS와 함께 웹 페이지를 동적으로 만들고 사용자와 상호작용할 수 있도록 도와준다.1. 변수변수는 데이터를 저장하는 공간이며, 자바스크립트에서는 var, let, const 키워드를 사용하여 변수를 선언한다. 값을 할당할 때는 할당 연산자인 =을 사용한다. 이때 할당 연산자는 '같다'라는 의미가 아니라 변수에 값을 할당한다는 의미이다.let name = "Kim"2. 함수함수는 특정 작업을 수행하는 코드 블록이며 코드의 재사용성을 높여준다.문자열의 글자수를 세는 함수를 만들면 다음과 같다.function countLength (string) { return string.length;}function: 함수를 선언하는 ..

1. CSS 박스 모델웹 페이지에서 모든 요소는 하나의 박스로 표현된다. 이 박스는 내용, 패딩, 테두리, 마진으로 구성된다.Content (내용): 요소의 실제 내용이 들어가는 영역Padding (패딩): 내용과 테두리 사이의 여백Border (테두리): 요소를 감싸는 경계선Margin (마진): 요소 바깥쪽의 여백. 다른 요소와의 간격을 조정하는 데 사용됨이것은 박스 모델입니다!body { background-color: antiquewhite;}.box { width: 200px; padding: 20px 40px; border: 10px solid gray; margin: 15px; background-color: lightblue;} 요소의 전체 크기는 width + padding +..

CSS(Cascading Style Sheets)는 HTML이나 XML 같은 마크업 언어 요소의 스타일을 지정하는 스타일 시트 언어이다. 웹 페이지의 디자인과 레이아웃을 담당하여 HTML과 함께 웹 개발의 필수 요소로 사용된다.1. 적용 방법(1) 인라인 스타일HTML 요소의 style 속성을 이용하는 방법이다.인라인 스타일(2) 내부 스타일 시트(3) 외부 스타일 시트별도의 CSS 파일을 만들어 HTML 파일에서 연결한다. 요소에 href 속성으로 CSS 파일을 입력한다. 여러 페이지에서 동일한 스타일을 쉽게 관리할 수 있다.2. 선택자(Selectors)CSS에서 특정 요소를 선택할 때 사용된다.(1) class 선택자사용법: .className클래스 선택자는 여러 요소를 그룹화하고 해당 그룹에 스..