투명한유리구슬처럼보이지만 투명한유리구슬처럼보이지만

flexbox 박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델이다. 1차원 모델이라 부르는 이유는, 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만을 다룬다는 특성 때문 flex컨테이너라고도 한다.(요소들을 포함하기 때문) 컨테이너를 만들기 위해서는 컨테이너에 display:flex를 적용해야 한다. display:flex - 자식요소가 가지고있는 기본 마진값을 무시하고 자기의 진행에 방향대로 요소를 배치한다. 하나 둘 셋 flexbox에는 ‘주축(main-axis)’과 ‘교차축(cross-axis)’이 있다. flex-direction flexbox 내 요소를 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정한다. row - 기본값, 주축은 행이고 방향은 ..

박스모델 (Box - Model) 브라우저가 요소를 렌더링 할 때, 각각의 요소는 기본적으로 사각형 형태로 영억을 차지하게 된다. 이영역을 ‘박스’라 표현하며, css는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정할 수 있다. 하나의 박스는 다음 네 개의 영역으로 구성된다. 콘텐츠 영역 : width, height 안쪽 여백 : padding 바깥쪽 여백 : margin 경계선 (테두리) : border-width padding과 margin 다양한 경우의 수 여백은 상하좌우 네 개의 면에 존재하는 영역이다. 하위속성 정의하기 padding-top,padding-left, padding-right, padding-bottom 여러 값을 한 번에 정의하기 padding: 20px 상, ..

텍스트 관련 속성 font-family 요소를 구성하는 텍스트의 글꼴을 정의한다. 글꼴명을 속성값으로 지정한다. 여러개의 글꼴을 연달아 기입하여 우선 순위를 지정할 수 있다. *{ font-family: Times, monospace, serif; } ⇒ Times를 우선 지정하되, 지원되지 않을 경우 그 다음 글꼴로 변경해서 지정한다. font-size 수치와 단위를 지정해 글자의 크기를 정의할 수 있다. px : 모니터 상의 화소 하나 크기에 대응하는 절대적인 크기 rem : 태그의 font-size에 대응하는 상대적인 크기 em : 부모태그(상위태그)의 font-size에 대응하는 상대적인 크기 span{ font-size: 16px; } 절대적으로 16px로 결정하는 글자크기 span{ font-..

시맨틱 마크업 seo : 검색을 최적화 하기위함. Accessibility : 웹접근성 For us, Maintainability : 개발자들의 봤을때 이해하기 쉬운 - 브랜드를 나타내주는 로고나 사용자들에게 보여질 중요한 메뉴에 사용한다. - header 안에 여러가지 메뉴가 모여있다면 사용한다. - 필수는 아니지만 웹사이트 제일아래 부가적인 정보나 링크들이 들어있다면 사용한다. - 페이지에 중요한 컨텐츠 - 메인안에서도 페이지의 컨텐츠와 직접적인 상관은 없지만 부가적인 내용들 (광고, 페이지의 링크) , - 메인안에서도 필요에 따라서 사용한다. vs - 블로그포스트에서 포스트 하나, 신문기사라면 기사 하나를 보여줄때 사용한다. 독립적으로 고유한 정보를 나타낼때 사용할 수 있다. - 아티클안이나 메인안..

서버측에서 인증번호의 유효시간을 3분으로 정하긴 하겠지만 프론트에서도 명시해주기위해 3분타이머를 생각했고 인증완료를 할때 3분내로 인증번호를 입력하지 못하면 버튼이 비활성화되도록 하며 3분타이머를 만드는걸 했다. timeLeft 상태값은 타이머의 남은 시간을 저장하는 변수입니다. 초기값은 initialTime으로 전달된 값으로 설정됩니다. tick 메소드는 timeLeft 상태값을 1초씩 감소시키는 함수입니다. setInterval 메소드를 사용하여 1초마다 tick 함수가 호출되며, timeLeft 상태값이 변경됩니다. 타이머가 종료되면 clearInterval 메소드를 사용하여 타이머를 중지합니다. 이를 위해 useEffect 훅을 사용하여 컴포넌트가 마운트될 때 setInterval 함수를 호출하고..

시맨틱마크업 디스플레이 블럭 인라인 블럭 폼 태그 기본 개념 폼 태그는 사용자로부터 데이터를 입력할 수 있는 범위를 지정할때 사용되며 주로 내부 input 요소들이 배치되어 있습니다. 추가로 이러한 정보들을 입력받아 서버와 통신할수 있지만 이번 실습에서는 사용자로부터 값을 입력받을 수 있는 폼을 만드는것 까지 진행합니다. fieldset태그 서로 관련이 있는것을 묶을때 사용한다 label태그 체크박스를 클릭할때 네모체크박스가외에도 레이블로 감싼 곳 어디를 눌러도 체크박스에 체크가 된다. 아이디 패스워드 저장 type=”submit” form안에서 모든내용을 제출한다는 의미 제출 아이디 : 비밀번호 : 아이디 패스워드 저장 제출 $("#login").submit(function (event) { event..

퍼블리싱이란? 💡 Figma, Photoshop 등 그래픽 리소스를 html + css + js 로 변환해 브라우저에 표현하는 것. Figma(피그마)란? 💡 Sketch + Zeplin 과 더불어 많이 사용되는 디자인/프로토타이핑 툴입니다. Figma는 하나의 툴로 기획, 와이어프레임, 디자인, 프로토타이핑까지 수행할수 있는 장점이 있어요. CSS 트랜지션란? 💡 CSS 트랜지션은 주로 이전 스타일과 다음 스타일을 부드럽게 연결시켜주는 애니메이션을 구현할 때 주로 사용됩니다. CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. 예를 들어, 여러분이 어떤 요소..

localStorage 브라우저를 닫았다 열어도 데이터가 남아있다. 유효기간 없이 데이터를 저장하고, JavaScript를 사용하거나 브라우저 캐시 또는 로컬 저장 데이터를 지워야만 사라진다. 저장공간이 크다. useEffect(() => { localStorage.setItem('key', 10) }, []) useEffect로 확인해보면 브라우저가 마운트 됬을때 setItem 이용해서 localStorage에 키값은 ‘key’로 value는 10으로 저장하게되면 아래처럼 저장이 된다. 아래처럼 value를 객체형식으로 저장하면 useEffect(() => { localStorage.setItem('item1', 10) localStorage.setItem('item2', "20") localStora..