Hello_coding

🚀 grid ? 가로, 세로를 정렬하는 레이아웃 시스템 - 그리드를 사용전 , 알아야할 내용! 그리드 라인 : 그리드 셀을 구분하는 선 , 가로 세로 번호가 매겨진 선을 잘 보고 따라옵시다! 1. template 열,행의 넓이, 높이를 설정한다. ( 우리가 표를 작성할때 몇행, 몇열로 작성할 지 정하는것 처럼!) grid-template-columns // 열의 넓이 결정 gird-template-rows // 행의 높이 결정 // repeat (적용할 트랙의 갯수 , 반복수치) 2. gap : 말 그대로 간격을 뜻한다 row - gap : 행사이 간격 column-gap : 열사이 간격 grid-gap : 행,열사이 간격 gap : 행,열사이 간격 (IE 지원하지 않음) [예제] - 0.5배로 보세요...

🚀 flex ? 컨텐츠를 정렬하거나 공간을 나눌 수 있는 css 속성의 집합 (옛날에는 전설의 테이블 코딩으로 레이아웃을 잡았었다고 한다 . . . !? flex를 배우는 나 행복하다 . . .) 특징 - flex는 가로방향으로 배치된다. - inline요소처럼 자신이 가진 내용물의 width만큼 차지한다. - flex로 배치시 height가 컨테이너 높이만큼 알아서 늘어난다. 🥸 flex-direction - 메인축의 정렬 방향을 결정한다. (이 메인축의 정렬방법에 따라 justify-content와 align-item의 정렬축도 결정된다! ) 1) row로 설정한다면 가로(행)로 배치가 된다. .container { display: flex; flex-direction : row; } 2) colum..

🚀 float : 둥둥떠있다는뜻 그림과 글이 자연스럽게 흐르는 텍스트 레이아웃을 웹에서 구현하기 위해 탄생하였다. HTML 삽입 미리보기할 수 없는 소스 - float : right로 준 결과 사진이 오른쪽으로 배열되고 , 글이 자연스럽게 흐르는것을 볼 수 있다. 🥸 float를 쓰면 inline요소로 작용하고 , 그 다음요소는 inline-block요소로 바뀐다. 아래 예제를 통해 알 수 있다. See the Pen Untitled by mandelina (@mandelina) on CodePen. 분명 block요소인 div 2개에 대해서 1번째요소에게 float 속성을 적용시키면 "해당 text"만큼의 공간만을 차지하고 오른쪽으로 배치되는 것을 알 수 있다 . 🥸 자식요소들이 모두 float속성을 ..

CSS 🚀 단위 단위는 절대길이와 상대길이 단위로 나뉜다. 1. 절대길이단위 - px picture + Element 의 약자 , 화소를 의미한다. 절대 길이 단위로 css에서 가장 많이 쓰이는 기본단위이다. (초기 기본 px 크기는 16px) 2.상대길이단위 - em 배수의 단위 . 부모 요소의 글자크기 기준으로 배한다. ex) 부모요소 font-size : 16px ➜ 1em : 16px , 2em : 32px . . . - rem root + em이라 생각하면 된다. 최상위요소 (html)의 글자 크기를 기준으로 배한다. - % 부모요소를 기준으로 하는 백분율 단위이다. - vw , vh v(width) : 화면의 너비 기준으로하는 백분율 단위 v(hight) : 화면의 높이 기준으로하는 백분율 단..

🚀 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 (데이터를 서버에 전송해서 특정 작업을 처리하는것이기 때문에 결과가 요청마다 달라질수 있다.) 🥲 ..

✔️ 점진적 향상기법 - 기본적으로 예전 기술 환경에서 동작할 수 있는 기능을 구현해두고 , 최신 기술을 사용할 수 있는 횐경에서는 최신 기술을 제공하여 더 나은 사용자 경험을 제공할수 있는 방법 - 브라우저가 차례대로 지원하는 포맷인지 탐색하여 만약 지원하지 않는 포맷이라 판단되면 다음요소로 넘어가며 사용하는 기법 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와 마찬가지고 최후수단으..

🚀 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과..