전체 글 (424) 썸네일형 리스트형 [2023 신입부원 심화 스터디] 황현진 #5주차 - React.js 섹션 2. 컴포넌트 제작 리액트가 없다면 🤔💭 만약 코드가 65만 줄, 65억 줄이 된다면 코드를 한 눈에 알아볼 수 없다..😢 → 헉❗ 이 코드를 한 태그로 만들 수 있었으면 좋겠다.. ⇒ 이게 바로 리액트 💻 ex) 컴포넌트 만들기 → 어지러웠던 코드를 정리정돈해주는 것이라고 생각하면 쉽다🧹 주의할 점: 컴포넌트를 만들 때, 항상 최상위 태그로 묶여있어야 한다. ex) 시맨틱 태그 사용하기 참고할 점: 이 코드는 js 코드가 아니다 → 그러므로 콘솔창에 복붙해서 실행해도 실행되지 않는다. import React, { Component } from "react"; import "./App.css"; class Subject extends Component { {/* 컴포넌트를 만드는 기본 틀 */} render() { retu.. [2023 신입부원 심화 스터디] 이정욱 #5주차 React.js ~ 섹션2 컴포넌트 제작 컴포넌트 만들기 컴포넌트란 리엑트에서 화면에 UI 요소 중 가장 작은 단위를 Compoenent라고 한다. 컴포넌트는 class component와 function component 두가지 방식이 있다. 우리가 진행할 방식은 class component 방식이다. class component 의 특징 class 키워드를 사용 Component 클래스를 상속받아 사용한다. render() 메소드를 꼭 사용해야한다. // import logo from './logo.svg'; import { Component } from "react"; import "./App.css"; class Subject extends Component { render() { return ( WEB world wide web! );.. [2023 신입부원 심화 스터디] 박지민 #5주차 React.js 섹션 2 컴포넌트 제작 1. 컴포넌트 만들기 React의 핵심 기능 - 긴 코드들을 사용자 정의 태그를 사용하여 간결하게 만듦 - pure.index WEB world wide web! HTML CSS JavaScript HTML HTML is HyperText Markup Language. - App.js header, nav, article 태그 부분 사용자 태그로 바꿔줌 import React, {Component} from 'React'; import './App.css'; // html에서 태그 부분을 subject라는 이름으로 바꾸고 싶음 class Subject extends Component { // 클래스 이름은 대문자로 시작 // 자바 스크립트에서 클래스 안에 있는 함수는 function 안붙여도 됨 rend.. [2023 신입부원 심화 스터디] 신진욱 #5주차 - 어 리액트 왔어 0,1 섹션은 어떻게 공부할 지와 환경설정에 대한 내용이라 블로깅은 건너 뛰었습니당. 1. 리액트의 중요성 - 유지보수 좋음 - 코드의 복잡성 제거 - 성능 향상 ... 2. 컴포넌트 생성 - React의 핵심 기능 - 긴 코드들을 사용자 정의 태그로 간결하게 만들기 위함 pure.html WEB world wide web! HTML CSS JavaScript HTML HTML is HyperText Markup Language. App.js header, nav, article 태그 부분 사용자 태그로 바꿔주기 import React, {Component} from 'React'; import './App.css'; // html에서 태그 부분들을 subject라는 이름으로 바꾸고 싶다. // 클래스 .. [2023 신입부원 기초 스터디] 김찬중 3주차 - CSS 총정리 + 4주차 과제 반응형 자기소개 웹페이지 코드 리뷰 3주차 블로그 3주차 블로그 너무 늦어서 그랜절 올립니다.. 이번 글에서는 CSS 섹션 5, 6, 7을 한꺼번에 정리하였고, 4주차 과제로 만든 반응형 자기소개 페이지에 대한 리뷰 또한 같이 올렸습니다. (블로그 중간부터) [CSS 폰트] 1-1 글꼴 관련 속성 font-family : 글꼴 종류를 지정 font-size : 글자 크기 지정 font-style : 글자 크기를 이텔릭체로 할 지 지정 font-weight : 글자의 굵기를 지정 font-varitent : 소문자를 대문자로 바꾸어줍니다. 2. 웹 폰트 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시합니다. 이 부분은 2주차에 설명했어서 넘어가도록 하겠습니다. 3. 단위 em, rem px : 픽셀의 단위입니다. 예비군 고.. [2023 신입부원 기초 스터디] 도승준 4주차 -JS는 사실 ... JavaScript의 약자이다 JMH 보고이써? 나 사실 HTML CSS보다 JS가 훨씬 적성에 맞는거가타...... 1.변수 변수 선언 let 변수명; 변수 초기화 변수명 = '값'; (숫자 자료형일경우 따옴표는 쓰지 않는다.) 변수 선언과 초기화 동시에 let 변수명 = '값'; 상수 선언과 초기화 동시에 const 상수명 = '값'; console.log() -> 콘솔에 괄호 안의 값을 출력해준다. 값을 바꿀때, let을 다시 쓰면 변수를 재할당해주는 것이므로 오류가 난다. 상수를 선언해주었을때는 수정이 불가능하고, 선언과 초기화가 동반 되어야 한다. 변수 선언 규칙 1. 변수나 상수이름의 첫번째 글자는 영어,$, _ 만 가능하다. (숫자 불가) 2. 첫 글자를 제외하고는 숫자도 사용 가능하다. 3. 소문자와 대문자는 구별하여 .. [2023 신입부원 기초 스터디] 박승환 #4주차- js야 안녕!!^^ @@드디어 HTML과 CSS를 배우고 Java Script를 배울 시간이 왔다...! 처음에는 파이썬과 비교하면서 자바스크립트를 배우려 했지만 다시 생각해봤더니 그냥 자바스크립트 그대로를 처음 프로그래밍 언어를 배우는 것 처럼 배워야겠다는 생각이 들었다. 새로운 프로그래밍 언어인 만큼 기초를 탄탄하게 잡아야겠다!!!!@@ 확장자 파일 --> 확장자파일명.js 변수 변수를 할당할 때는 let 변수명 = 값;으로 변수를 할당한다. let hi = '박승환'; hi = '안녕하세요'; 변수의 값을 변경하기 위해서는 그다음 줄에 변수명 = 값2;를 작성 하면 되는데 여기서 중요한 것은 또 다시 let 변수명 = 값2를 하면 에러가 뜬다는 것이다. html파일에 script 태그 를 이용하여 js파일을 연결하고 .. [2023 신입부원 기초 스터디] 이총명 5주차 - JS 입문 1 . JS란 JS는 Jeongmyeong is Sexy의 약자로 윙크 회장의 섹시함을 알리기 위해 만들어진 언어이다. (그럼 JMS 아님?) 2. JS 사용법 let 변수명; 이렇게 변수를 선언 할 수 있고 같은 변수명을 재선언 할 수 없다. (그냥 변수에 다른값을 넣는건 당연히 됨) const 상수명; 이렇게 상수를 선언 할 수 있고 이름 그대로 값을 바꿀 수 없다. console.log(내용); live server을 열고 개발자 도구를 연 뒤 콘솔창에서 로그를 볼 수 있다. 배열 const 이름 = [값] 이렇게 선언 할 수 있고 파이썬의 리스트와 유사한듯하다. 객체 const 이름 = {key : value} 이렇게 선언 할 수 있고 파이썬의 딕셔너리와 유사한듯하다. 3. 원시 데이터 타입 객체.. [2023 신입부원 기초 스터디] 조상혁 5주차 - JS가 뭐야? JavaScript란? 웹 브라우저에서 HTML 문서에 내장한 JavaScript 를 읽으면 즉시 해석되어, 소스코드가 실행된 결과를 눈으로 볼 수 있는 클라이언트 사이드( 프론트 엔드 ) 언어이다. 웹페이지에서 특정 부분을 클릭하거나 입력했을 때, '팝업 창 띄우기', '애니메이션 효과', '통신' 등의 다양한 기능들을 추가할 수 있다. html에 js 연결하는 방법 변수 let 변수명; 동일한 변수명으로를 재할당하면 오류가 생긴다. 상수 const 상수명; 상수는 선언후에 재할당이 불가하다 const 선언은 반드시 초기화를 해야한다 예시 const potato; #선언불가 올바른 예시 const potato = ''; console.log(변수명); 로그를 볼 수 있다 변수,상수 주의할 점 변수 상수.. [2023 신입부원 기초 스터디] 최종은 #5주차 JS 입문 1. 변수와 상수 변수: 변할 수 있는 값 let: 변수 작성 상수: 변할 수 없는 값(변수와 다르게 수정 불가능) const: 상수 선언 *변수 이름 규칙* 1.첫글자는 영어,$,_만 가능 2.첫글자 이외에는 숫자도 사용 가능 (Ex: _1234, &1234 등) 3.대소문자 구분 4.예약어 (Ex: let,const)사용 불가능 5.공백 불가능 기본적으로 const를 사용하고 값 변경이 필요하다면 let 사용 권장 var을 사용하지 않는 이유: var에서 개선된 const,let이 있기에 딱히 사용할 이유가 없음 2.원시 데이터 타입 number: 정수 bigint: -(2^53-1) ~ (2^53-1) 까지의 범위 표현 string: 문자열 문자열 따옴표: "" , '' 둘 다 사용 가능 백틱(ba.. [2023 신입부원 기초 스터디] 정찬우 4주차 안녕.js. html이랑 css은 살짝 맛을 봤고, 드디어 js를 배웠다. 프리코스때 살짝 했었어서 강의 듣는데 반가웠다 가장 먼저 js에서 변수 선언하는 방법은 3가지가 있다. 1. var(요즘에는 잘 안쓴다고 한다) 2. let - let은 말 그대로 우리가 평소에 사용하는 int, string처럼 사용하는 js용어이다. 하지만 let은 변수가 선언된 블록, 구문 또는 표현식 내애에서만 유효한 변수를 선언한다. 3. const -블록 범위의 상수를 선언한다. (let과 같은 블록 유효범위) 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없다. 그래서 처음 선언할 때, 반드시 초기화를 해야한다. 원시 데이터타입 vs 참조 데이터타입 원시 데이터타입 변수에 할당될 때, 메모리의 고정 크기로 원시 값을 저장하고 해.. [2023 신입부원 심화 스터디] 이정욱 #4주차 - 예제 만들기(연습 문제) 1. modal창 만들기 const openButton = document.querySelector(".open"); //open 버튼 불러오기 const container = document.querySelector(".container"); // close 버튼을 담은 container const closeButton = document.querySelector(".close"); // close 버튼 openButton.addEventListener("click", () => { //openButton 에서 click 이벤트 발생하면 container.style.display = "flex"; //container를 보여주고 openButton.style.display = "none"; //open.. [2023 신입부원 심화 스터디] 김윤희 #4주차 - Part 6(예제만들기) 1. modal 만들기 const openButton = document.querySelector(".open"); const container = document.querySelector(".container"); const closeButton = document.querySelector(".close"); openButton.addEventListener("click", () => { container.style.display = "flex"; openButton.style.display = "none"; }); closeButton.addEventListener("click", () => { container.style.display = "none"; openButton.style.display .. [2023 신입부원 심화 스터디] 황현진 #4주차 - 예제 만들기(연습 문제) 1️⃣ 모달 만들기🔘 const openButton = document.querySelector(".open"); const container = document.querySelector(".container"); const closeButton = document.querySelector(".close"); openButton.addEventListener("click", () => { // open 버튼을 눌렀을 경우 container.style.display = "flex"; openButton.style.display = "none"; // open 버튼을 없애주는 기능 }); closeButton.addEventListener("click", () => { // close 버튼을 눌렀을 경우 c.. [2023 신입부원 심화 스터티] 박지민 #4주차 Part. 6 예제 만들기 (연습문제) 그동안 강의를 통해 배운 js를 이용하여 예제 만들기 1. 모달 만들기 👉 Click 버튼을 누르면 모달 내용만 보이고 Close 버튼 누르면 👉 Click 버튼만 보이기 - index.html 👉 Click Lorem, ipsum dolor. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, excepturi? Close - style.css ... .container { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; display: none; // 기본 container 클래스의 display는 none 속성 -> 첫 화면에 보임 X flex-directi.. [2023 신입부원 심화 스터디] 신진욱 #4주차 - Part 6 그동안 강의를 통해 배운 js를 이용하여 예제 만들기 실습 1. 모달 만들기 - 모달 만들기는 👉 Click 버튼을 누르면 모달 내용만 보이고 Close 버튼을 누르면 👉 Click 버튼만 보이게 하기 index.html 👉 Click Lorem, ipsum dolor. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, excepturi? Close style.css - 기본 container class의 display는 none 속성이기에 모달 내용이 첫 화면에 보이지 않는다. ... .container { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; di.. [2023 신입부원 심화 스터디] 조현상 4주차 - Part 6 그동안 배운 js를 가지고 연습 문제들 만들어보기 1.모달 만들기 2.할 일 앱 만들기 3.디지털 시계 만들기 4.가위바위보 게임 만들기 5.업그레이드 된 할 일 앱 만들기 1.모달 만들기 모달 만들기는 버튼을 통해서 내용이 보이고 안 보이는 기능을 만들어주는 예제였다. 👉 Click Lorem, ipsum dolor. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, excepturi? Close 우리는 open 클래스에 버튼을 통해서 container 클래스 속 내용들이 보여주고 안 보여주는 기능을 만들 것이다. .container { position: absolute; top: 0; left: 0; width: 100vw; .. [2023 신입부원 심화 스터디] 김윤희 #3주차 - Part 4, Part 5 11강 문자열 메소드 1. 대소문자 변환 const str = ‘Hello World!’; console.log(str.toUpperCase()); → 대문자로 바꾸어주기 console.log(str.toLowerCase()); → 소문자로 바꾸어주기 2. 문자열 공백 제거 const str = ‘ haha ’; console.log(str.trim()); → 공백을 제거해줌 (haha가 출력) console.log(str.trimStart()); → 앞쪽 공백 제거 console.log(str.trimEnd()); → 뒤쪽 공백 제거 3. 새로운 문자열 생성 const str = ‘Hello’; console.log(str.repeat(3)); → str을 세 번 반복함. 하지만 원본 객체는 변함x c.. [2023 신입부원 기초 스터디] 도승준 3주차 기리보이의 flexbox 세션 6 Float : 이미지가 둥둥 떠다니며 인접한 텍스트 혹은 인라인 요소가 이미지를 감싸게 해줌 float 속성 none : 기본값. 요소를 띄우지 않음 left : 왼쪽에 띄움 right : 오른쪽에 띄움 inherit : 부모 요소로부터 상속받은 값을 사용함 initial : 기본값으로 설정한다. clear 속성 none : 기본값. left : float: left 값을 취소 right : float: right 값을 취소 both: 둘 다 취소 Position : HTML 요소가 어느 한쪽에 고정되어 있거나 위치를 변경하는 것 속성 start - 일반적인 배치. relative - static 위치에서 top/right/left/bottom 에 의한 상대적인 위치 absolute - stat.. [2023 신입부원 기초 스터디] 한승훈 3주차 - CSS 0.인사말 안녕하세요. 모두 즐거운 한 주 보내고 계신가요. 오늘은 안좋은 소식을 하나 전하드리게 되어 진지한 모습으로 찾아뵙게 되었습니다. 이미 아시는 분들은 알고 계시겠지만, ... 1.CSS Float, Clear float 속성 float 의 사전적인 의미는 '뜨다"라는 뜻입니다. 만약 HTML 요소에 float이 적용되면 HTML 요소는 원래의 흐름에서 벗어나 둥둥 떠다니듯 배치가 됩니다. 그리하여 인접한 텍스트 또는 인라인 요소가 그 주위를 자연스럽게 감싸게 합니다. 자주 사용하는 float 속성 값은 아래와 같습니다. none - 기본값으로 요소를 띄우지 않음 left - 왼쪽에 띄움 right - 오른쪽에 띄움 inherit - 부모 요소로부터 상속함 initial - 기본값으로 설정함 c.. [2023 신입부원 기초 스터디] 정찬우 3주차 - css 너 정말... CSS Float float 속성 값 none - 기본값으로 요소를 띄우지 않음 left - 왼쪽에 띄움 right - 오른쪽에 띄움 inherit - 부모 요소로부터 상속함 initial - 기본값으로 설정함 clear 속성 값 clear: none; - 기봇값 clear: left; - 왼쪽을 취소 clear: right; - 오른쪽을 취소 clear: both; - 왼쪽 오른쪽 둘다 취소 CSS Position position 속성 static(기본 값) - relative -요소가 자신의 static 위치에서 top right bottom left와 같은 속성에 의한 상대적인 위치에 배치된다. absolute - absolute는 position: static속성을 가지고 있지 않은 부모를 기준으.. [2023 신입부원 기초 스터디] 박민규 #3주차 - 기초부터 화악시일히이잉 float 속성 - none : 기본값으로 요소를 띄우지 않음 - left : 웹페이지의 왼쪽에 띄움 [2023 신입부원 기초 스터디] 최종은 #3주차 - CSS 딥-하게 학습하기 float 속성 HTML 요소에서 이미지를 어떻게 텍스트와 함께 배치할 것인가에 대한 속성 none left right inherit initial 요소를 띄우지 않음 왼쪽에 띄움 오른쪽에 띄움 부모 요소로부터 상속함 기본값으로 설정 clear 속성 clear:none; clear:left; clear:right; clear:both; 기본값 왼쯕 취소 오른쪽 취소 좌우 취소 position 속성 HTML요소 배치 방법을 지정 static relative absolute fixed sticky 기본 배치상태 기본 배치상태이지만 top,right,bottom,left와 같은 속성을 자신 기준으로 적용 어려웡.. 다시 공부하겠습니다 움직이더라도 요소가 특정 위치에 고정되어있음 움직이다가 특정 위치에 도착하면.. [2023 신입부원 기초 스터디] 김승혁 #3주차 Float 이미지 삽입 시 사용, 인접한 텍스트 or 인라인 요소가 그 주위를 자연스럽게 감싼다 none : 기본값, 요소 안 띄움 left : 왼쪽에 띄움 right : 오른쪽에 띄움 inherit : 부모 요소로부터 상속 initial : 기본값으로 설정 -> 글자가 그림 감싸게 하기 clear float 속성이 적용 다음 끊고 싶을 때 사용 -> 글자가 그림 감싸게 하는 거 끝내기 Position static : 일반적인 흐름을 따라 배치가 됨, 기본 값 relative : 일반적인 흐름에 따라 배치, 상대적인 위치에 배치, 상하좌우양옆으로 옮길 수 있음. absolute : 일반적인 흐름을 따르지 않게한다, position: static속성을 가지고 있지 않은 부모를 기준으로 움직임. fixed .. [2023 신입부원 스터디] 박승환 #3주차 - CSS를 마무리하며..... @@ 시험기간으로 인해 1 주 정도 건너뛰고 들으니 다시 복습해야 하는시간이 필요했다. 내가 쓴 블로그를 보고 강의도 다시 보며 복습하니 문뜩 내 블로그가 너무 설명만 한다는 느낌이 들었다. 그래서 설명보다는 내가 느낀 점에 대해서 기술해보려한다. @@ float 속성 띄운다는 사전적 의미를 가지는 것 처럼 이는 HTML요소들을 왼쪽 오른쪽에 배치를 하는 것이다. 배치한다는 의미는 다른 요소들과 어울리도록 띄워지는 것으로 이해 하였다. 사진을 예를들면 본문에 글이 있다면 글 왼쪽에 사진을 띄우고 싶다면 float: left; 글 오른쪽에 사진을 띄우고 싶다면 float: right 를 사용하면 된다. float: left를 한 모습 여기서 주의할 점은 float를 할 경우 주위에 모든 것을 포함하기 때문.. 이전 1 ··· 7 8 9 10 11 12 13 ··· 17 다음
