HTML 기초
·
HTML, CSS
1. HTML(HyperText Markup Language)HTML은 웹브라우저를 통해 표시되는 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어이다. 웹 브라우저의 여러 내용 중에서 제목과 본문, 이미지, 표 등 웹 요소를 알려주는 역할을 한다. 2. 기본 문법태그태그는 웹 브라우저가 어느 부분이 제목, 텍스트 또는 표인지 구별할 수 있도록 하는 역할을 한다.여는 태그와 닫는 태그 사이에 콘텐츠 내용을 작성한다. 콘텐츠 내용은 생략이 가능하다. 태그 이름은 소문자로 쓴다.콘텐츠속성속성은 태그의 부가적인 기능을 정의하는 것으로 선택사항이다. 시작 태그 내부에 정의하며 여러 속성을 작성할 때는 공백으로 각 속성을 구분한다.콘텐츠주석웹브라우저에는 표시되지 않는 코드로, 주로 코드에 대한 메모를 남기기 위해 ..
[자바스크립트] 숫자 대결 게임
·
Javascript
두 플레이어 중 숫자가 더 큰 쪽이 이기는 게임var player1 = 30;var player2 = 25;console.log("🎮 숫자 대결 게임! 🎮");console.log(`플레이어 1: ${player1}점`);console.log(`플레이어 2: ${player2}점`);if (player1 > player2) console.log("🏆 플레이어 1이 승리했습니다! 🎉");else if (player1
[자바스크립트] 변수, 데이터 타입, 연산자, 조건문, 반복문, 함수
·
Javascript
1. 변수와 데이터 타입(1) 변수변수는 하나의 값을 저장하기 위해 확보한 공간을 말한다. 즉 값의 위치를 가리키는 상징적인 이름이며 변수명을 통해 접근 가능하다.변수에 값을 저장하는 것을 할당이라 하고, 변수에 저장된 값을 읽어 들이는 것을 참조라 한다.변수 선언변수를 사용하려면 반드시 선언이 필요하다. 변수를 선언할 때는 var, let, const 키워드를 사용한다. ES6에서 let, const 키워드가 도입되었다.var: 함수 스코프를 가지며, 중복 선언이 가능하다. let: 블록 스코프를 가지며, 중복 선언이 불가능하다.const: 블록 스코프를 가지며, 재할당이 불가능한 상수를 선언할 때 사용된다.중복 선언이란, 같은 이름의 변수를 다시 선언하는 것을 말한다.값의 재할당재할당이란 이미 값이 ..
워밍업 - 그릿(Grit)
·
카테고리 없음
성공한 사람들의 공통점은 무엇일까? 앤젤라 더크워스는 그 해답이 그릿, 즉 장기적인 목표를 향한 열정과 끈기에 있다고 말했다. 단기간의 노력이나 높은 IQ가 아니라, 오랜 기간 동안 꾸준히 노력하는 힘이 진정한 성공을 만든다고 한다. 도중에 포기하지 않고 꾸준히 나아가는 힘이 그릿이다. 그릿은 타고난 성향이 아니라 훈련을 통해 길러질 수 있는 능력이다.부트캠프가 시작되면 새로운 개념들을 배우고 프로젝트를 완성하는 과정에서 크고 작은 장애물을 만나게 될 것이다.코드가 예상대로 동작하지 않을 때주변 동료들에 비해 못하는 것 같아 자신감이 떨어질 때등등이럴 때 포기하거나 좌절하지 않고 끝까지 해결 방법을 찾아가는 과정이 진짜 성장의 기회다.어제보다 한 걸음 나아가려는 작은 노력이 쌓이면, 어느 순간 성장한 나..
[자바스크립트] 변수와 함수의 개념
·
Javascript
자바스크립트는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나이다. HTML, CSS와 함께 웹 페이지를 동적으로 만들고 사용자와 상호작용할 수 있도록 도와준다.1. 변수변수는 데이터를 저장하는 공간이며, 자바스크립트에서는 var, let, const 키워드를 사용하여 변수를 선언한다. 값을 할당할 때는 할당 연산자인 =을 사용한다. 이때 할당 연산자는 '같다'라는 의미가 아니라 변수에 값을 할당한다는 의미이다.let name = "Kim"2. 함수함수는 특정 작업을 수행하는 코드 블록이며 코드의 재사용성을 높여준다.문자열의 글자수를 세는 함수를 만들면 다음과 같다.function countLength (string) { return string.length;}function: 함수를 선언하는 ..
CSS 이론 (2) - 박스 모델 / 우선순위 / 단위
·
HTML, CSS
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 +..
워밍업 - 아토믹 해빗
·
카테고리 없음
매일 1%씩 성장하면 1년 뒤에는 37배 성장한 내가 된다.1도만 방향을 틀어도 도착지는 완전히 달라진다. 한 번쯤은 들어본 이야기다. 사실 들어보지 않아도 너무 당연한 말이다. 하지만 알면서도 실천하지 못하고 결국 작심삼일로 끝나버린 적이 많았다. 갑자기 큰 목표를 잡으면 원점으로 돌아오기 마련이다. 중요한 것은 자연스럽게 목표에 도달할 수 있도록 작은 변화를 쌓아가는 것. 1%의 변화가 모여 내 삶을 바꿀 수 있을 것이다. 좋은 습관을 들이려면 행동의 마찰을 줄이고, 나쁜 습관을 없애려면 행동의 마찰을 높이면 된다고 한다. 올해 세웠던 목표 중 하나가 '독서 꾸준히 하기'였다. 그래서 항상 책상 모서리에 책을 올려두고, 카페에 갈 때도 책을 들고 다녔다. 그렇게 두 달가량 실천하니 자기전에 자연스럽게..
CSS 이론 (1) - 적용 방법 / 선택자 / 주요 속성
·
HTML, CSS
CSS(Cascading Style Sheets)는 HTML이나 XML 같은 마크업 언어 요소의 스타일을 지정하는 스타일 시트 언어이다. 웹 페이지의 디자인과 레이아웃을 담당하여 HTML과 함께 웹 개발의 필수 요소로 사용된다.1. 적용 방법(1) 인라인 스타일HTML 요소의 style 속성을 이용하는 방법이다.인라인 스타일(2) 내부 스타일 시트(3) 외부 스타일 시트별도의 CSS 파일을 만들어 HTML 파일에서 연결한다. 요소에 href 속성으로 CSS 파일을 입력한다. 여러 페이지에서 동일한 스타일을 쉽게 관리할 수 있다.2. 선택자(Selectors)CSS에서 특정 요소를 선택할 때 사용된다.(1) class 선택자사용법: .className클래스 선택자는 여러 요소를 그룹화하고 해당 그룹에 스..