계발하는 개발자

z-index 속성은 요소의 쌓임 순서(stack order)를 정의하는 속성입니다. 정수 값을 지정하여 쌓임 맥락(stacking context)에서의 레벨을 정의하는 방식으로 적용되며, 위치 지정 요소에 대해 적용할 수 있는 속성입니다. -> 위치 지정 요소(positioned element)란, position 속성이 정의되어 있는 요소를 말합니다. (relative, absolute, fixed, static, sticky 등 ) 우리가 html문서를 작성해서 요소들을 만들어주면 요소들은 문서의 흐름에 따라 차곡차곡 배치된다는 게 우리가 알고있는 기본입니다. 그러나 포지션 속성들을 통해 요소의 위치를 조작해주는 경우에는, 요소들이 동일한 위치에서 겹쳐버리는 현상이 발생할 수 있는데요..! 이런 경..

box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성이다. [ Box-sizing 속성 ] 1) border-box: - 테두리를 기준으로 크기를 정함 - border, padding, margin은 따로 계산되어 전체 영역이 설정값보다 커질 수 있음 2) content-box: - 콘텐트 영역을 기준으로 크기를 정함 - border, padding, margin을 모두 합산하여 콘텐트 영역이 설정값보다 작을 수 있음 [ 문제 인식 ] box1 box2 위 코드로 짜여진 블록요소들(box1, box2) 의 크기는 같을까? 테두리를 제외한 알맹이(=콘텐트)만 본다면 같다 할 것이다.box1은 border: 10px을 줘서 약간 커진 데 반해, box2는 border: 30px을 준..

우리가 특정 사이트에 로그인 할때, 해당 계정의 접속을 위해 아이디와 비밀번호를 입력하라는 로그인 관문을 맞닥뜨리게 된다. 내가 기존에 가입한 사이트는 데이터베이스 서버로 나의 계정 정보를 이미 가지고 있기 때문에, 나의 아이디 & 비밀번호를 입력해서 서버에 내 정보와 일치하면 로그인을 할 수 있다. 이때 웹페이지에서 서버로 내 계정 정보를 보내야 되는데 이때 사용되는 HTML의 태그가 FORM 이다! 📂 FORM(폼) 태그란? 사용자로부터 입력받은 양식 전체를 감싸는 태그로, form태그 내부에 있는 input 태그에 회원가입이나 로그인, 글 작성에 필요한 정보들을 입력 후 제출하면 웹사이트에서 받은 사용자 정보를 바탕으로 사용자에게 할당된 데이터를 서버(=백엔드)로 전송한다. Form 속성 Form ..

Emmet이란? 자동완성 기능을 통해 HTML 작성 속도를 크게 향상시켜주는 텍스트 편집기 플러그인 Emmet (에밋)을 사용하면 HTML & CSS의 작업 속도를 엄청나게 향상시킬 수 있다!!👐🙆‍♀️ VS Code는 emmet을 기본적으로 지원하고 Tab키를 통해 사용한다. 에밋(Emmet) 플러그인 설치하는 법> 1. 우측 블럭모양 [확장 기능 관리자] - [설치 가능] 탭 - 검색창에 "ammet" 입력 - 설치 2. [설치됨] 탭 - 에밋 정상적으로 활성화 되었는지 확인 오래 기다릴 것 없이 빠르게 설치가 진행된다 ! HTML5 boilerplate (표준문서): 2가지 단축키> !+[tab] html:5+[tab] “!”치고 tab 또는 “HTML:5”입력 후 tab 클릭 위 2가지 방법대로 ..