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속성을 ..

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

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

인턴생활이 끝난 후 프론트엔드 관련 국비지원 프로그램을 알아보던중 멋쟁이사자처럼 프론트엔드스쿨을 알게 되었다. 국비지원에 대해 부정적인 시각이 많은 글들을 보아 걱정이 많았는데 프론트엔드스쿨은 후기가 좋아 주저없이 지원하게 되었다. 1차전형 1차전형은 자기소개서 제출이였다. 질문내용은 어렵지 않은 내용들이였으며 2개월간 인턴생활을 통해 부족했던 부분, 공부해야할 부분을 어느정도 정리해 두었기에 그런 내용을 잘 녹일려고 노력해서 썼던것같다. 다행히 1차는 무난히 합격하였다. 2차전형 2차전형은 간단한 html+css 과제 및 자기소개 영상이였다. 과제는 그닥 어렵지 않은 난이도였기에 프론트엔드에 관심이 있다면 충분히 구현할 수 있는 과제인것 같았다. 자기소개영상은 1차전형때 썼던 자기소개서를 참고하여 앞으..