코딩

오늘은 카드 타입의 레이아웃을 만들어보겠습니다~!! 카드 유형 페이지 만들기 피그마에서 만든 디자인을 그대로 코딩해보도록 하겠습니다. 기본 CSS 리셋값 설정해주기 CSS 리셋(CSS Reset)은 웹 사이트의 스타일링을 일관되게 만들기 위해 사용되는 기술입니다. 초기 설정을 해두면 폰트라던지 마진, 패딩값이 먹혀서 편하겠죠?? 이런식으로 헤드 안쪽에 웹폰트와 스타일 선언을 해주어 기본 설정을 해줍니다. 그리고 바디 안쪽에 섹션들을 나누어주겠습니다. 카드 타입 섹션들을 지정해주고 CSS를 설정해줍니다. (제목, 설명글 등등) 향수, 그 날의 기분 향수는 보통 향기로 연결되어 있는데, 향수의 이미지는 여러 가지로 표현될 수 있습니다.향수나 화장품의 조향은 소비자에게 매우 중요한 요소 중 하나입니다. 좋은 ..

안녕하세요~ 오늘은 데이터 불러오는 방법에 대해 알아보겠습니다! 종류가 굉장히 많기 때문에 깔끔하고 보기좋게 정리해보겠습니다 ! 데이터를 저장하는 방법을 알았으면, 불러오는 방법도 알아야겠죠?~~ 데이터 불러오기 📣 변수 : 데이터 불러오기 변수 안에 저장된 데이터를 불러오는 방법으로, 괄호 안에 문자를 입력해 값을 불러옵니다. { let x = 100, y = 200, z = "javascript"; console.log(x, y, z); } 결과 - 100 200 javascript 📣 상수 : 데이터 불러오기 상수 안에 저장된 데이터를 불러오는 방법으로, 괄호 안에 문자를 입력해 값을 불러옵니다. { const x = 100, y = 200, z = "javascript"; console.log(x..

오늘은 데이터 저장하는 방법들을 알아보겠습니다~~ 데이터 저장하기 👻변수 : 데이터 불러오기 변수 안에 저장된 데이터를 불러오는 방법입니다. 괄호 안에 문자를 입력해 값을 불러옵니다. let x = 100, y = 200, z = "javascript"; console.log(x, y, z); 👻상수 : 데이터 불러오기 상수 안에 저장된 데이터를 불러오는 방법입니다. 괄호 안에 문자를 입력해 값을 불러옵니다. const x = 100, y = 200, z = "javascript"; console.log(x, y, z); 👻배열 : 데이터 불러오기 배열 안에 저장된 데이터를 불러오는 방법입니다. const arr = [100, 200, "javascript"]; console.log(arr[0]) con..

안녕하세요~! 오늘 블로그는 수업시간에 배우면서 부족하다고 느꼈던 레이아웃 중에서도 미디어 쿼리! 반응형 웹에 대해 알아보려고 합니다~~ 레이아웃 짜는 것까진 어느 정도 이해했는데.. 반응형 웹에서 또 막히더라고요.. 그러니 열심히 공부해야겠어요!! 미디어 쿼리 (media query) 다양한 디바이스들이 웹브라우징을 지원하면서 뷰포트(viewport) 너비에 따라 유연하게 컨텐츠를 배치하는 기술이 점점 중요해지고 있습니다. 뷰포트의 해상도에 따라 CSS를 분기시키는 미디어쿼리는 반응형 프로젝트에서 반드시 필요한 기법입니다. 1. 기본적인 사용방법 @media (조건문) { 실행코드 } 를 사용하는 방법은 권장하지 않습니다. (브라우저는 모든 css를 내려받기 때문에 사이즈가 커짐) 2. 모바일/데스크톱..

틀린 문제를 꼼꼼히 살펴보고 다시는 틀릴 일 없게 잘 기억해둡시다! 자바스크립트 테스트 - 데이터 불러오기 01. 다음의 출력값을 보고 빈칸을 채우시오! { var x = 100; var y = 200; var z = "javascript"; console.log(__); console.log(__); console.log(__); //100 //200 //300 } 더보기 x, y, x+y 02. 다음의 출력값을 보고 빈칸을 채우시오! { let x = 100; let y = 200; let z = "javascript"; x = ___; y = ___; z = ___; console.log(x); console.log(y); console.log(z); //300 //400 //jquery } 더보기..

오늘은 모던 자바스크립트 프로그래밍의 정석 책에 나온 155, 156쪽의 함수에 관한 마무리 문제들을 풀어보겠습니다!! 양수, 음수 판단하여 창에 보여주기 (마무리 문제_1) 사용자가 프롬프트 창에 숫자를 입력했을 때 그 숫자를 함수로 넘겨주고, 함수에서는 숫자가 양수인지, 음수인지, 또는 0인지 판단해서 알림 창에 보여주는 프로그램을 작성해보세요. ✍️길라잡이 숫자를 받아서 양수, 음수, 0을 판단하고 알림 창에 표시하는 함수를 선언합니다. parseInt ( ) 함수를 사용해 프롬프트 창에 입력한 내용을 숫자로 변환합니다. (프롬프트 창에 입력한 내용이 숫자가 아니면 parseInt( )함수는 NaN을 반환합니다. 반환값이 숫자일 경우에만 함수를 실행합니다. 양수, 음수, 0인지 판단하는 프로그램 풀..

안녕하세요 오늘은 데이터 제어하기의 여러가지 종류들을 살펴보겠습니다!! 양이 좀 많지만.. 최대한 간단하게 정리해보겠습니다 ㅎㅎ; 데이터 제어하기 데이터 제어하기의 종류에는 모두 12가지가 있는데요! (if문, if문 생략, 다중 if문, 중첩 if문, 삼항연산자, switch문, while문, do while문, for문, 중첩 for문, continue문, break문) 하나하나씩 살펴보겠습니당~~ 🚫if문 if문은 가장 기본적인 조건문으로서 조건이 참일 경우 실행할 코드를 작성합니다. if(조건){ document.write("실행되었습니다. (true)"); } else { document.write("실행되었습니다. (false)"); } 값에 따라 true, flase 나누어짐 true : 0..

안녕하세용@_@ 오늘은 CSS 문자 관련 스타일에 대해 알아보겠습니다! 여러분들은 사이트에서 중요한게 뭐라고 생각하시나요? 전 내용도 당연히 중요하지만 개인적으로 폰트나 자간 행간등을 중요하게 본답니다!! 보기 좋은 떡이 먹기도 좋다는 말이 있잖아요~~? 그래서 이번엔 그와 관련된 스타일을 정리해볼게요! 책을 참고해보니 총 13가지가 있네요~ ✨font-family 폰트 종류를 설정하는 속성으로, 여러 단어이거나 한글 글꼴인 경우 따옴표("")로 감싸고 여러 개의 글꼴을 쉼표(,)로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. 표현방법 font-family: 사용자지정 폰트; ✨font-size, 단위의 고찰 폰트의 크기를 지정하는 속성입니다. 글자 크기는 명시하지 않을 경우..