분류 전체보기 130

23. 03. 02 목요일.

Chanter01. 월요일이 아닌데 왜 월요병? morning. 오늘은 아침부터 매우 힘들었다. 어제 분명 학원에서 마실 카누를 사고 아침에 가방에 넣은 것 같은데 학원에 와서 보니까 카누가 없었다... 학원에 이미 와서 커피를 사마시지도 못하고... 카누도 없고... 학원 올 때만 해도 정신이 멀쩡했는데 커피가 없다는 걸 깨닫자마자 정신이 혼미해지기 시작했따... 혼미한 정신으로 Javascript 수업을 들었다. 선생님께서 정신이 말짱한 아침에 Javascript 수업을 들어야한다고 하셨는데 아침에 정신이 말짱하지는 않는 것 같다.. 아무튼 스크립트 수업이 끝나고 점심을 먹으러 갔다. afternoom. 점심은 고독한 미식가들과 함께 미쓰싸이공에 가서 쌀국수를 먹었다. 나름? 괜찮았다. 양도 꽤 넉넉..

Archive/일상 2023.03.02

CSS에 대해 공부해 봅시다!-07. grid

grid란 - CSS 그리드 레이아웃은 웹페이지를 위한 이차원 레이아웃 시스템입니다. - 이 기능을 통해 콘텐츠를 행과 열에 배치할 수 있으며 복잡한 레이아웃을 직접 직관적으로 구축할 수 있는 많은 기능이 있습니다. - 그리드 레이아웃은 비교적 직관적이어서 다른 레이아웃보다 사전지식이 덜 필요합니다. HTML 삽입 미리보기할 수 없는 소스 - 위의 예제는 그리드를 이용해 레이아웃을 만든 것 입니다. - 이제 코드를 보면서 설명을 해보겠습니다. - 일단 body에 부모요소인 wrap 하나와 그안에 각 박스를 구성할 요소들을 5개 만들어 주었습니다. - 그 후 style에 wrap을 제외한 나머지 요소들에게 색과 gird-area: 이름; 을 넣어주면 준비는 끝났습니다. #wrap { width: 1200p..

Archive/CSS 2023.03.01

CSS에 대해 공부해 봅시다!-06. flex

flex란 - display 속성 중 하나로써 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것입니다. - flex 레이아웃을 만들기 위해서는 부모 요소에 display: flex; 속성을 지정해주면 됩니다. display: flex; display: -webkit-flex; display: -ms-flexbox; - 위 구문은 해당 요소에 flex로 레이아웃을 설계한다고 선언한다는 뜻입니다. flex의 속성들 - flex에는 여러가지 속성들이 있습니다. 어떠한 것들인지 한번 알아보겠습니다. flex-direction (배치 방향 설정) - 자식 요소를 나열하는 방향을 지정하는 속성입니다. 부모 요소에게 지정합니다. 속성 값 속..

Archive/CSS 2023.03.01

CSS에 대해 공부해 봅시다!- 05. 문자 관련 스타일

- 오늘은 CSS 문자 관련 스타일에 대해 알아보겠습니다! - 이번 주에 학원 쌤이 해주시던 말씀이 생각이 나네요 페이지에서 폰트만 달라져도 사이트가 달라보인다고 하시더라구요 - 그만큼 문자의 스타일이 주는 효과가 매우 큰 것 같습니다. ㅎㅎ - 열심히 배워서 보기 좋은 사이트들을 만들어 봐요!! 내용출처 : 김광수 | 조혜경 저 Responsive Web Publishing 문자 관련 스타일 01.font-family - 폰트 종류를 설정하는 속성으로, 여러 단어이거나 한글 글꼴인 경우 따옴표("")로 감싸고 여러 개의 글꼴을 쉼표(,)로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. font-family: '돋움', Arial, Helvetica, sans-serif; 02..

Archive/CSS 2023.03.01

Javascript를 공부해 봅시다! - 번외편. 예제를 풀어봅시다.2

마무리 문제 01. 사용자가 프롬프트 창에 숫자를 입력했을 때 그 숫자를 함수로 넘겨주고 함수에서는 숫자가 양수인지 음수인지, 또는 0인지 판단해서 알림 창에 보여주는 프로그램을 작성해 보세요. 길라잡이 숫자를 받아서 양수,음수,0을 판단하고 알림 창에 표시하는 함수를 선언 합니다. parseInt() 함수를 사용해 프롬프트 창에 입력한 내용을 숫자로 변환합니다. 반환값이 숫자일 경우에만 함수를 실행합니다. let user = prompt("숫자를 입력해 주세요")//사용자가 숫자를 입력할 입력창을 불러옵니다. if(user0){ document.write("양수");// 만약 입력한 숫자가 0보다 크다면 "양수"를 출력합니다 }else{ document.write("0");// 만약 입력한 숫자가 0이..

Archive/Javascript 2023.02.28

Javascript를 공부해 봅시다! - 07. 데이터 제어하기

데이터 제어하기 - 데이터를 제어하는 방법은 여러가지 방법이 있습니다. - 저희가 앞에서 배웠던 if문, 삼항 연산자, switch문, for문 같은 것들도 모두 데이터를 제어하는 방법 중 하나입니다. - 오늘은 그 것들을 제외한 나머지 방법들에 대해서 알아보도록 하겠습니다. while 문 - 조건식이 true 일 경우에 계속해서 반복하는 함수입니다. - 조건식에는 비교 또는 논리 연산식이 주로오는데, 조건식이 false가 되면 반복 행위를 멈추고 while문을 종료합니다. let num = 0; while(num

Archive/Javascript 2023.02.28