개발자 Saaad

유효한 참조 범위 (Scope)var함수 레벨 스코프 (function-level scope)let / const블록 레벨 스코프 (block-level scope) var (function-level scope)- 함수 내에서 선언된 변수는 함수 내에서만 유효합니다.(함수 내에서는 블록 내외부에 관계없이 유효합니다)- 하지만 함수 외부에서는 참조할 수 없습니다.사진을 살펴보면 변수 a는 var로 if블록 안에서 선언되었으나, 블록을 벗어나서도 정상적으로 값이 출력되는 것을 확인할 수 있습니다.함수 수준의 스코프를 가지고 있기 때문에 함수 외부에서 console.log(a) 또한 동작하지 않습니다.let / const (block-level scope)- 함수, if문, for문, while문, try/..

var, let, const자바스크립트에서 변수를 선언할 때 var, let, const를 사용합니다.  var중복선언과 재할당이 가능합니다let (ES6)중복 선언은 불가하며, 재할당은 가능합니다const (ES6)중복 선언과 재할당이 불가능합니다 var- 중복 선언과 재할당이 가능하며 할당된 값이 변수에 저장됩니다.- 이런 특징으로 인해서 자율성이 생기지만 소스 코드가 복잡해질 경우 기존 선언해둔 변수를 잊고 다시 선언하거나 재할당을 해서어떤 부분에서 값이 변경되었는지 파악하기 힘들어질 수 있습니다. let- 중복 선언은 불가하며, 재할당은 가능합니다  const- 중복선언과 재할당이 불가능합니다. 하지만 const로 선언했어도 배열과 객체의 값을 변경하는 것은 가능

Flex 구조위는 Flex box 컨테이너인데요, 컨테이너 안의 요소를 원하는 흐름에 맞게 여러 속성을 이용하여 균일하게 배치할 수 있는 장점이 있습니다. 그러면 Grid는 어떨까요 ? GridFlexible Box는 단순한 1차원 레이아웃을 제공합니다. 행(row) 또는 열(column) 방식으로 말이죠.이에 비해 Grid는 행과 열을 동시에 다룰 수 있는 레이아웃을 제공합니다.  Grid CSS 속성들gap위 그림을 살펴보면 Grid CSS 컨테이너 안의 각 요소간 gap이 있는 것을 알 수 있는데요.행 간격(row gap), 열 간격(column) 간격이 있습니다. .container { gap: 20px 10px; /* 열 간격은 20px, 행 간격은 10px */}  Grid CSS 속성들너비 ..

11/19 (화) 유튜브 화면 피드백div 산 조심 태그는 단락을 구분짓기 위한 태그이기 때문에 선 그을 때 사용하기엔 부적합     줄을 그을거면 div에서 border-bottom 을 주는 것이 낫다.픽셀 단위로 작성하는 것은 추천하지 않음브라우저마다 크기가 다름 firefox, chrome 등, 전역적으로 body 폰트 사이즈를 아예 10px로 하면 rem, em 으로 다루기 편하다.html에서 이미지를 불러오지말고 css에서 불러오는 방식을 채택해서 브라우저 로딩속도를 올려라6번 같은 방법으로 스프라이트 기법을 활용할 수 있음. 네이버에서 사용중이라고 함사이드바 같은 경우 li, ul 태그를 사용하는 것을 추천article, section 태그 사용10.h 태그를 자주 사용해줬으면 좋겠다고 함. ..

시작반응형 웹사이트를 디자인할 때 요소가 웹사이트를 사용하는 장치 유형에 따라 너비, 높이, 해상도, 방향 등과같은 요소가 변경되길 원할 것입니다.이번에는 flexbox 레이아웃을 사용하여 요소를 반응형으로 만드는 방법에 대해서 다뤄보겠습니다. + ) 그리고 무엇보다도 이것때문에 고생한 기억이 한두번이 아니라서.. 더 잘 다뤄야함..ㅜ  Flexbox란 ?CSS Flexbox는 요소를 효율적이고 동적으로 배열할 수 있는 레이아웃 모델입니다.이 레이아웃은 1차원(수평 배치 또는 수직 배치)이며 균등하게 분산된 컨테이너 내부에 요소를 배치할 수 있습니다. Flexbox 레이아웃을 이용하면 요소를 반응형으로 만들 수 있습니다. 사용하는 장치에 따라 요소의 동작이 유연하고 적절한 위치에 배치될 수 있도록 할 수..

Transform이란 ?- CSS transform 속성으로 요소에 회전(rotate), 크키 조절(scale), 기울이기(skew), 이동(translate) 효과를 부여할 수 있습니다.- 애니메이션 효과는 제공하지 않습니다.- 트랜스폼은 애니메이션 효과를 위해 사용하여야하는 것은 아니지만 애니메이션 효과를 부여할 필요가 있다면, 트랜지션이나 애니메이션과 함께 사용해야 합니다.  transform 속성값none변환이 없어야 함을 정의합니다initial이 속성을 기본값으로 설정합니다inherit부모 요소에서 이 속성을 상속합니다. trans-form-functionsscale()요소의 크기에 영향을 줍니다. 이는 요소의 글꼴 크기, 패딩, 높이 및 너비에도 적용됩니다. scaleX(), scaleY()의..

Float CSS?float CSS속성은 컨테이너의 왼쪽 또는 오른쪽에 요소를 배치하여 텍스트 및 인라인 요소가 주위를 둘러쌀 수 있도록 합니다.요소는 페이지의 정상적인 흐름에서 제거되지만 여전히 흐름의 일부로 남아 있습니다. "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dol..

오늘 카카오x구름 풀스택(12회차) 과정을 함께 보내게 될 스터디 팀원들과 온라인 메타버스 환경에서 단체 사진을 찍었다. 부트캠프 OT 때 팀장님이 전공자 위주로 팀원을 뽑아 어벤져스를 만들어보겠다는 취지로 만드셨다고 하는데 다들 정말 요것저것 많이 하신 분들이라 내세울게 없는 나는 조금 위축되기도 하는 것 같았다.  다들 포부도 밝히고 이제 팀명도 정하고 하는데 정말 열심히 해야겠다는 생각이 드는 것 같다.지금은 부족할지언정 계속 위축되어있어봤자 달라지는 건 없고 더 잘해져서 스터디나 팀프로젝트에 도움이 되어야겠다는 생각이 든다. 그리고 부트캠프라는게 사실 노베이스든 전공자 출신이든 더 잘해지고 싶어서, 새로 배움을 얻고 싶어서 오는 것이 아닌가?위축될 필요도 없다.  이번 기회에 블로그도 시작하고, ..