whatisthis?

FlexBox 💡 key points dispaly: flex 선언 가로정렬? 세로정렬? (flex-direction) 무조건 한줄안에 다 정렬? (flex-wrap) 아이템 정렬(align-items, justify-contents) 1 / 플렉스박스 사용 선언 - 정렬하고자 하는 요소를 감싸는 부모(=container)에게 선언함. display: flex; 혹은 display: inline-flex; flex도 우선은 'box'의 타입이다. inline-flex는 인라인블럭과 비슷하게 동작함. 2 / 가로 or 세로 정렬 (flex-direction) 가로 row(default) 세로 column +) 그 외에도 row-reverse와 column-reverse가 있다. flex를 하면 두개의 축이..

z-index - CSS: Cascading Style Sheets | MDN CSS z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다. developer.mozilla.org /* 키워드 값 */ z-index: auto; /* 값 */ z-index: 0; z-index: 3; z-index: 289; z-index: -1; /* 음수 값으로 우선순위를 낮출 수 있음 */ /* 전역 값 */ z-index: inherit; z-index: initial; z-index: unset; 수직방향으로 붕 뜨게되면, z-index라는 레벨이 생김. 만약 포지션이 겹친다면 나중에 오는 요소..

1. 뒤에 나오는 CSS가 우선순위가 높다. 2. 우선순위가 같다면 개수가 많은 것이 먼저 실행. (부모-자식 관계가 많은 경우) !important ∨ inline style attribute ∨ id ∨ class, 다른 속성(attribute), 가상클래스(:) ∨ tag element, 가상요소(::) !important 우선순위를 무시하고 꼭 적용시킬 속성은 속성 값(value) 뒤에 !important 키워드를 붙인다. .content{ color: black !important } - 우선순위 뿐만 아니라 디자이너와 개발자간 소통시 '중요한 속성임'을 나타냄. +) !important와 inline style attribute는 보통은 사용을 제한한다. ref. CSS 적용 ..

정렬 (align) 텍스트나 태그를 왼쪽 / 가운데 / 오른쪽에 배치하는 작업. - 보통 가운데 정렬이나 오른쪽 정렬 등 특수 형태를 많이 사용함. 부모 태그에 text-align을 사용하면? > 자식 태그들이 정렬된다. #parent { text-align: center; } 가로 정렬은 쉽지만, 세로로 가운데 정렬을 하는 것이 어렵다. 보통은 vertical-align: middle 속성을 시도하지만, vertical-align은 다른 태그를 기준으로 수직 정렬이 되는 것이라서옆에 다른 태그가 있어야만 그 태그에 맞춰서 세로 정렬이 된다. @css display: flex; align-items: center; 가장 쉬운 방법은 flex를 이용하여 align-items를 center로 설정하는 것이다..

CSS 포지션(Position) 모든 태그들은 position: static이라는 디폴트 상태를 갖는다. 차례대로 왼쪽>오른쪽, 위>아래로 쌓인다. position static default relative static을 픽셀만큼 이동시킴 (top,right,bottom,left 속성 有) absolute static이 아닌 포지션의 조상을 기준으로 정렬 (없을시 body) fixed 스크롤을 내려도 위치 고정되게 relative 태그의 위치를 살짝 변경하고 싶을 때, position: relative를 사용한다.이제 top, right, bottom, left 속성을 사용할 수 있다. relative는 각 방향을 기준으로 태그 안쪽 방향 으로 이동한다.(바깥쪽으로 이동하고 싶다면? 음수의 값을 주자.)..

CSS part 1 - (1) 박스 모델(Box Model) content > padding > border > margin 순으로 바깥으로 뻗어나간다. 또한 각 값은 left, right, top, bottom으로 나눠져서 값을 따로 지정해줄 수 있다. 예> border-right : 20px; img cr : https://www.geeksfo.. mywebproject.tistory.com 이전에 업로드한 CSS의 박스 모델에 대한 개정판 포스팅입니다. HTML 태그들은 모두 박스모델(Box-model)을 가지고 있다. 브라우저에서 개발자도구를 켜서 Elements 탭에서 아무 태그나 눌러보면 position, margin, border, padding, content 순으로 나오게 된다. 이것이 ..

HTML/DOM. Form Data 보통은 AJAX로 폼(form) 전송을 할 일이 거의 없다. 주로 JSON구조 (key-value)값 데이터를 전송함. But. 이미지를 AJAX로 업로드 할때 폼 전송이 필요함. >> input type="file" ___ - HTML: Hypertext Markup Lan.. mywebproject.tistory.com formData에 이미지를 담고 싶다면 formData.append('img', document.getElementById('파일 인풋').files[0]) 과 같이 해주고, 서버로 formData 자체를 보내면 된다. (파일이 여러개라면? > 반복문을 사용해서 append를 해줌. 단, 키값은 같아야함.) 키값이 같아야 여러 파일이 같은 키로 업로..

보통은 AJAX로 폼(form) 전송을 할 일이 거의 없다. 주로 JSON구조 (key-value)값 데이터를 전송함. But. 이미지를 AJAX로 업로드 할때 폼 전송이 필요함. >> input type="file" ___ - HTML: Hypertext Markup Language | MDN file 유형의 요소에는 저장 장치의 파일을 하나 혹은 여러 개 선택할 수 있습니다. 그 후, 양식을 제출해 서버로 전송하거나, File API를 사용한 JavaScript 코드로 조작할 수 있습니다. developer.mozilla.org 파일 입력 칸의 value 특성은 선택한 파일의 경로를 나타내는 DOMString을 담습니다. 사용자가 여러 개의 파일을 선택한 경우 value는 파일 목록의 첫 번째 파일을..

Cascading Style Sheets(CSS) - HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어 - 프로그래밍 언어도 아니고, 마크업 언어도 아님. 📌 HTML 문서에 CSS 적용 1 / inline 방법 css 적용 - 수정하기 힘듬 2 / style태그 이용 (head 내) - 이 또한 페이지가 많아진다면 수정 힘듬. 3 / link:rel 이용 - 권장 👍 📌 Rule Set CSS의 전체 구조를 rule set 이라고 한다. (=rule) 선택자(selector) rule set 맨 앞에 있는 HTML 요소의 이름. 꾸밀 요소(대상)을 의미함. 선언(declaration) color: red와 같은 단일 규칙. 꾸밀 대상, 즉 선택자의 속성을 명시함. 속성(p..

local storage와 session storage는 HTML5에 추가된 저장소로, 간단한 key와 value를 저장할 수 있는 key-value storage의 형태이다. Local Storage 사용자가 지우지 않는 한 계속 브라우저에 남아있음. (영구성) 예> 자동 로그인 정보 ❗ 비밀번호는 저장하면 안됨. (클라이언트에 저장하는 거라 털릴수 있음) Session Storage 윈도우나 브라우저 탭을 닫을 경우 소멸됨. 예> 일회성 로그인 정보 쿠키(Cookie) - 브라우저에 있는 저장소 역할. - 만료 기한이 있는 key-value 저장소 - 4kb 용량제한 有. - 매 서버 요청마다 서버로 쿠키가 같이 전송됨. document.cookie; document.cookie를 하면 현재 쿠키 정..