Hello_coding

🚀 CSS 1. RESET CSS reset css 란? 브라우저의 모든 기본적인 스타일 속성들을 완전히 초기화 시키는 것 . Q. 왜 reset 해주어야할까? - 각각 브라우저가 제공하는 요소의 스타일이 모두 다르다! - 하지만 개발자가 구현해야하는 디자인은 동일해야한다! - 그렇기에 초기화를 해준다! 🪱 에릭마이어 Reset CSS - 오래전부터 널리 사용되던 방법 - 2011년도 이후 업데이트 x /* reset.css */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, i..

HTML - Tabular data 🚀 : 테이블 생성시 사용 : 테이블의 제목이나 설명을 의미 / table요소의 첫번째 자식으로 사용해야한다!! 이달의 책 판매량 구분 이름 판매량 HTML 삽입 미리보기할 수 없는 소스 🚀 , , 각각 머리글, 본문, 바닥 글을 의미한다. 테이블의 내용이 많을때 테이블의 구역별로 나누는 요소로 사용한다. 이 요소들은 레이아웃에 영향을 미치진 않으나 css를 통해 디자인 스타일을 지정할 수 있다. 구분 이름 판매량 1 해리포터 100 2 헝거게임 200 3 반지의제왕 300 총 판매량 600 - colspan : 열과 열을 병합한다 (보이는것 : row병합) - rowspan : 행과 행을 병합한다 (보이는것 : col병합) HTML 삽입 미리보기할 수 없는 소스 🚀 ..

🚀 Form태그 - 이전글에서 간단한 form의 동작원리를 보았다면 이 글에선 태그를 살펴보자. 🥲 의 속성 - action : 입력 값을 전송할 페이지 - method : 폼의 데이터를 전송할 방법 , get과 post가 있다. 🥲 get vs post? get post 데이터가 어디실리는가 http 헤더에 데이터가 드러난다. http 바디에 데이터를 실어 보내기 때문에 데이터가 외적으로 드러나지 않는다. 데이터의 양 서버에 자원을 위한 키워드를 보내거나 경로와 관련된 정보를 전송한다. 서버에서 작업하는데 필요한 데이터를 보내줘야한다. 멱등성 보장 (자원의 요청이므로 서버에 영향을 받지 않는다.) 보장X (데이터를 서버에 전송해서 특정 작업을 처리하는것이기 때문에 결과가 요청마다 달라질수 있다.) 🥲 ..

🚀git 과 github? git : 분산 버전관리 툴 github : git을 관리해주는 웹 호스팅 서비스 즉, git을 클라우드 환경에서 사용할 수 있게 제공하는 공간 (단순히 저장소 역할 뿐만아니라 다른 개발자의 인기있는 코드를 볼수있고 , 이슈를 제기할 수 있다.) 🚀git 🥲 해당폴더기준으로 .git(로컬저장소)가 생성된다. $ git init 🥲 파일 상태 확인 $ git status - untracked : 관리대상이 아님 (한번도 git add하지않은 상태) - Tracked : 관리대상임 (git이 관리하는 파일) 🥲 변경사항 확인 $ git diff 🥲 커밋 히스토리 조회 $ git log 🥲 무시할 파일 추가 ( .gitignore ) # a comment - 이 줄은 무시한다. # ..

✔️ 점진적 향상기법 - 기본적으로 예전 기술 환경에서 동작할 수 있는 기능을 구현해두고 , 최신 기술을 사용할 수 있는 횐경에서는 최신 기술을 제공하여 더 나은 사용자 경험을 제공할수 있는 방법 - 브라우저가 차례대로 지원하는 포맷인지 탐색하여 만약 지원하지 않는 포맷이라 판단되면 다음요소로 넘어가며 사용하는 기법 ex) type속성 1. 위에서부터 차례대로 브라우저가 지원하는 포맷인지 탐색한다 2. 만약 지원하지 않는 포맷이라고 판단되면 다음 source로 넘어간다 3. 만약 모든 source 요소의 이미지 사용이 불가능 하다면 요소의 이미지를 랜더링한다. (WebP나 AVIF와 같은 최신 포맷의 이미지를 지원하고싶다면 크로스브라우징을 위해 요소와 함께 사용하는것이 좋다.) ✔️ 이미지 포맷의 종류 ..

🚀 Text-level semantics 🪢 : 줄바꿈 🪢 : 텍스트박스가 한 줄로 모두 표시가 안될 경우 줄바꿈 🪢 : 링크를 만들때 사용 *button과 같이 사용자와 인터렉션이 가능한 요소를 자식으로 두지 않음 🪢 : 현재 문맥에서 정의하고 있는 용어를 나타냄 ex) WWW WWW는 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다. - 위키백과 HTML 삽입 미리보기할 수 없는 소스 🪢 : 준말,약자를 나타낼때 사용 -보통은 홀로 쓰이고 dfn 태그로 감싸주기도 한다. WWW HTML 삽입 미리보기할 수 없는 소스 🪢 : 윗첨자,아랫첨자 H20 x2=4 HTML 삽입 미리보기할 수 없는 소스 🪢 : 묶는 용도 (의미 x) *div와 마찬가지고 최후수단으..

✔️인터넷 통신 인터넷에서 컴퓨터 둘은 어떻게 통신할까? - 클라이언트와 서버가 통신 할때 중간에 인터넷이 존재 , 이 인터넷망은 굉장히 복잡하다. 이 경우 통신 메시지가 어떻게 서로에게 안전하게 넘어갈까? ✔️IP ♢ 클라이언트 ➜ 인터넷 ➜ 서버 로 전송하는 과정 1. 클라이언트에서 지정한 ip 주소(서버주소)에 메시지를 전달한다. (패킷단위로 전송) 이때 그냥 메시지를 보내는것이 아니라 출발지ip , 도착지ip , ... 의 내용을 넣고 패킷을 만든 다음 전송한다. 2. 그러면 인터넷 상의 노드끼리 도착치 ip를 찾아가서 도착지에 데이터 전송을 완료! 3. 여기서 끝나지 않고, 데이터를 잘받았다고 다시 서버에서 클라이언트에게 잘받았다고 ip패킷을 전달 1번 : 요청(request) / 3번: 응답(..

🚀 URL, IP, PORT 정리 url? 어느 사이트에 접속하기 위해서 입력해야 하는 주소를 포함한 일련의 문자 (이름과 같음) ip? 송신 호스트와 수신 호스트가 패킷교환 네트워크에서 정보를 주고받는 데 사용하는 정보의 규약이며, osi 네트워크 계층에서 호스트의 주소지정과 패킷 분할 및 조립 기능을 담당 (주소와 같음) port? 직역하면 '항구' 라는 뜻으로 인터넷 프로토콜 스위트에서 포트는 운영 체제 통신의 종단점이다. (문과 같음) ex) www.naver.com 도메인,url 이름 223.130.195.95 ip 주소 22 , 80 , 3000 등등.. Port 문 🚀 HTML Living Standard란? HTML 문법 등을 규정한 표준이다. 비공식적으로 HTML5라고 불린다. HTML과..

🚀html 태그들 크게 html문서는 아래로 구성 🚀태그 종류 : 웹문서가 어떤 버전의 HTML 언어로 작성되었는지 결정하는 기능 : html 파일의 인코딩을 알려주는 태그 (한글,특수문자가 깨지지 않게) : 웹페이지 제목 : 내용을 구분하는데 사용 : div와 같은 역할 : 제목태그 (숫자가 작을수록 글씨가 커짐) : paragraph의 약자, 하나의 문단을 만들때 사용 🚀css 태그들 - 타입선택자, 클래스선택자 구별하기 (타입은 그냥, 클래스선택자는 . 을 찍고 사용) - paddin / margin / border 중요! - float를 사용할 경우 다른요소와 겹치지 않기위해 반드시 div로 묶어준다! - 묶은 div 태그 속성에 overflow : hidden; 적용! - box-shadow (..

인프런에서 자바스크립트 알고리즘 문제풀이 강의를 사게 되었다. 아직 1/4정도밖에 수강하지 않았지만 기초를 다지고 차근차근 배워가는 느낌이라 좋다. (간혹 쉬워보이는 문제는 pass하는데 막상 풀다보면 안풀리는 문제가 종종 있기에 ... 이런부분을 확실히 이해하기 좋았던것 같다. ) 푸는 문제들의 해답은 github에 커밋중이다. 쉬운문제부터 차근차근 공부하기에 좋은 강의 인것 같다. 강의는 아래링크 참고 https://www.inflearn.com/course/자바스크립트-알고리즘-문제풀이/ 자바스크립트 알고리즘 문제풀이(코딩테스트 대비) - 인프런 | 강의 자바스크립트(JavaScript)로 코딩테스트를 준비하시는 분을 위한 강좌입니다. 재미있게 풀 수 있는 기초 단계 문제부터 고급 알고리즘까지 단계..