DDOstory

👨‍🎓 JSXReact를 사용하여 개발할 때 거의 필수적으로 사용A syntax extension to javaScript자바스크립트의 확장 문법JavaScript + XML/HTML을 결합한 것const element = Hello, world!;👨‍🎓 JSX 역할XML/HTML 코드를 JavaScript로 변환하는 과정을 거침// JSX를 사용한 코드class Hello extends React.Component{ render(){ return Hello {this.props.toWhat}; }}ReactDom.render( document.getElementById('root'));// JSX를 사용하지 않은 코드class Hello extends React.compone..

🖼️  @import 규칙CSS 파일에서 다른 CSS 파일을 추가하는 방법CSS파일의 규모가 커지면 코드를 쉽게 알아보기 위해 파일 분리link 태그의 숫자를 줄일 수 있는 방법 @import url(StyleSheetA.css);@import url(StyleSheetB.css);🖼️  @font-face 규칙웹 폰트를 생성할 때 사용하는 규칙 font-family폰트 이름을 지정src폰트 파일 지정 font-weight폰트 두께 지정font-style폰트 스타일 지정🖼️  @media규칙다양한 장치에서 HTML 문서가 적절한 형태를 갖추게 만들어주는 규칙HTML 페이지가 다양한 장치에서 실행되면서 중요하게 부각된 규칙   🖼️  반응형 웹 징치를 구분하고 장치의 크기나 비율 구분 가능width..

📱  DOM (Document Object Model)html이나 xml 같은 문서에 요소들을 계층적으로 표현해서 생성하고 수정하고 삭제하는 등어떤 조작이 가능하게끔 해주는 하나의 인터페이스를 의미모든 html의 요소들은 html 도움을 통해 우리가 접근할 수가 있고 조작할 수 있게 됨DOM을 배우는 이유는 html 문서에 있는 어떤 요소를 조작하거나 새로운 요소를 만들어서 html 문서에 추가하거나 기존의 요소를 삭제하는 것을 하기 위함요소 선택과 변경, 생성이라는 크게 3가지 분류로 나눠서 이야기요소를 조작하려면 우선 어떤 요소를 조작할 지 요소를 선택하는 과정 필요html 문서에 있는 요소들 중에 내가 원하는 특정 요소를 선택하기 위해서는 html 문서 객체인 Document 객체에서 제공하는 메..

⏱️  원시 데이터 타입객체가 아니면서 메서드도 가지지 않는 데이터string, number, bigint, boolean, undefined, null, symbol⏱️  숫자 데이터 타입정수와 부동소수점 숫자를 나타내는 타입typeof (타입오브) 라는 데이터 타입을 알려주는 연산자를 사용const number = 123;console.log(typeof number);bigint (빅인트)라는 데이터 타입은 숫자 데이터 타입으로 표현할 수 있는 범위를 넘어서는 아주 작은 숫자나 큰 숫자를 표현할 때 사용되는 타입별도의 데이터 타입으로 지정됨빅인트 타입으로 지정하기 위해서는 일반적인 숫자와 구분하기 위해 숫자를 쓰고 뒤에 소문자 n을 붙이면 됨const number = 123n;console.log(..

🔋변수란?프로그램의 피요한 값들을 저장해두는 공간공간마다 서로 다른 이름을 붙여서 그 값을 가져와서 연산을 하거나 연산한 결과값을 저장프로그램 안에서 값이 변경될 수 있는 자료 의미를 부여한 어떤 값으로 정의해 두고 그 값을 출력할 수 있음 -> 저장할 수 있는 공간그 값이 고정된 것이 아닌 나중에 원할 때 변경할 수도 있는 그런 저장 공간이름을 정의하고 들어갈 값을 우측에 정의한 후 변수를 선언하고 할당선언된 값을 어디서든지 사용 가능let 키워드 사용🔋상수란?한 번 정해놓으면 변하지 않고 변경할 수 없는 값을 저장하는 공간선언할 때 const 키워드 사용키워드를 작성하고 사용할 상수 이름을 지정하여 뒤에 값을 넣어주는 것을 의미수정을 하려고 해도 수정되지 않음🔋var, let, constJava..

🚩 크기 단위%백분율 단위em배수 단위px픽셀- 가장 많이 사용하는 단위- %, em, cm, mm, inch, px - %(퍼센트 단위) = 기본 설정된 크기에서 상대적으로 크기 지정- em(배수 단위) = 배수를 나타내는 단위- px(픽셀) = 절대적으로 크기를 지정할 때 사용🚩 색상 단위#000000HEX 코드 단위RGB(red, green, blue)RGB 색상 단위RGBA(red, green, blue, alpha)RGBA 색상 단위HSL(hue, saturation, lightness)HSL 색상 단위 HSLA(hue, saturation, lightness, alpha)HSLA 색상 단위- 단어로 표현할 수 있는 색상은 한정적🚩 URL 단위background-image: url()url..

📱 CSS 선택자특정한 HTML 태그를 선택할 때 사용하는 기능선택자를 사용해 특정한 HTML 태그를 선택하면 해당 태그에 원하는 스타일 또는 기능을 적용HTML 태그를 선택해 스타일을 적용하기 위해 선택자를 사용style 태그 내부에 입력해 사용style 태그 내부에 입력되는 코드를 스타일시트라고 부름h1{color:red;} // 선택자를 사용해 h1 태그를 선택하고 color 속성에 red 키워드를 적용하는 예 //📱 전체 선택자*HTML 페이지 내부의 모든 태그 선택- 모든 웹 페이지에서 빠지지 않고 사용하는 선택자📱 태그 선택자태그특정한 태그를 선택- h1 태그의 color 속성에 red 키워드를 적용하고 p 태그의 color 속성에 blue 키워드 적용📱 아이디 선택자#아이디아이디 속성..

HTML 페이지 구조🖥️ 기본 태그태그와 요소Hello HTML5- 시작 태그와 끝 태그를 별도로 입력하는 요소속성Hello HTML5- h1 태그에 title 속성 부여 - img 태그는 그림을 만들 때 사용하며, src 속성을 사용해 어떠한 이미지를 출력할 지와 관련된 정보 제공주석- 어떠한 기능을 수행하는 코드인지 설명하는 코드- 프로그래밍 언어에서 프로그램 실행에 영향을 미치지 않고 설명을 위한 목적으로 사용하는 코드- 쉽게 이해가 가능한 코드에는 주석이 필요하지 않지만, 주석을 얼마나 잘 활용하는지로 프로그래밍 실력을 평가하기도 함🖥️ HTML5 페이지 태그 html>- 웹 브라우저가 현재 웹 페이지가 HTML5 문서임을 인식하게 만듬- 모든 HTML5 문서는 반드시  html> 태그 표기해..

HTML(Hyper Text Markup Language)웹 페이지를 생성하기 위한 표준 마크업 언어웹 페이지의 구조를 설명일련의 요소로 구성요소를 사용하여 브라우저에 콘텐츠를 표시하는 방법을 알려줌콘텐츠 조각에 레이블을 지정      웹 표준웹 사이트 제작할 때 지켜야 하는 약속을 정리한 것웹 표준을 지켜 사이트를 제작하면 장소나 브라우저 상관없이 쉽게 웹 사이트 연결 가능웹 표준으로 문서를 만들면 어떤 기기에서든 볼 수 있기에 웹 개발자와 디자이너의 시간 절약HTML5로 문서를 만드는 것 = 웹 표준 지킨 문서를 만드는 것HTML5를 공부해야 하는 이유웹은 주인도 국적도 없는 모두에게 공개된 기술이므로 모든 디바이스에서 사용할 수 있음HTML5를 공부하여 알고 있다면, 안드로이드 애플리케이션 개발을 ..

웹 개발웹 브라우저 화면에 보이는 겉모습을 만드는 것이 전부가 아님웹사이트에서 사용자에게 제공할 기능과 서비스까지 모두 담아야 함서버 vs 클라이언트서버인터넷에 연결된 컴퓨터웹 요소와 여러 정보가 저장클라이언트사용자가 웹 사이트에 접근할 때 사용하는 기기웹 브라우저프론트엔트 개발 vs 백엔드 개발프론트엔드 개발웹 브라우저 화면에 보이는 부분 개발 -> 웹 사이트 제작HTML, CSS, JS 사용백엔드 개발사용자 뒤 보이지 않는 영역, 서버를 다룸데이터베이스를 설계하거나 데이터 처리자바, 파이썬, PHP 등 프로그래밍 언어 사용 웹 개발의 기본웹 문서의 뼈대를 만드는 HTML 웹 브라우저 창에 웹 문서의 내용을 보여주기 위한 약속HTML에서 약속한 표기법을 사용하여 문서 작성해야 함웹 문서를 꾸미는 CSS..