Grid 그리드: 수평선과 수직선이 교차해서 이루어진 집합체 열과 행으로 된 라인을 따라 생성된 grid 에 각 element들을 배치할 수 있다. - 각 트랙의 크기를 px을 지정해서 고정히킬수도 있고 %,fr등 가변크기로 유연하게 할 수 있다. - 아이템을 정확한 위치에 지정하여 배치할 수 있다. - 행열을 추가/ 정렬 - 겹치는 콘텐츠 제어 Grid 트랙/라인/셀/영역 Grid 트랙 : 그리드는 기본적으로 트랙으로 정의 된다. 그리드 트랙은 그리드에 그려진 두 라인 사이의 공간을 나타낸다. grid-template-columns: repeat(3, 1fr); -> 3개의 열방향 트랙이 그려진다. One Two Three Four Five .wrapper{ display:grid; grid-templ..

CSS Cascading Style Sheets css의 구조 selector{ property : value; //Declaration } selector 우선순위 설정 #id 1 페이지에서 1회 .class 2 다회 element 3 모든 tag 기본 html tag를 사용하거나, class나 ID를 추가해서 HTML에 design 요소를 넣을 수 있다. CSS를 적용하는 3가지 방법 - external stylesheet : 가장 일반적인 방법 / html 에 link를 통해 css 파일을 추가한다. - internal stylesheet : html 안에 tag 내부에 기술 - inline : html tag에 기술 (하지 말것) Box Model layout을 잘 구성하기 위해서는 Box mod..

HTML html의 구조 contents HyperText Markup Language : 웹 페이지를 위한 마크업 언어 자주 사용하는 HTML tag This is new page - 은 HTML 태그는 아니지만, 선언된 페이지의 HTML 버전이 무엇인지를 웹 브라우저에 알려주는 역할을 함. 대소문자 구분 X - 브라우저에 표시되지 않지만 PAGE에 대한 메타데이터 를 포함한다. - - charset="utf-8" : encoding을 utf-8로 설정 - 키워드를 포함. 페이지 관련 키워드를 포함하면 검색에 노출될 확률 높일 수 있음 ( SEO : Searching Engine Optimization 근데 이걸 악용하는 사람들이 있어서 많은 meta들을 검색엔진들이 무시한다고 함) - 커스텀 refe..

학습자료 : 생활코딩 WEB1 HTML&INTERNET opentutorials.org/course/3084 WEB1 - HTML & Internet - 생활코딩 --- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다. 지금부터 여 opentutorials.org Web의 역사를 통해 그 의미를 파악해보자 - Internet vs Web Internet이 도시/도로/운영체제 라면 Web은 건물/차/프로그램 와 같다. 중앙 집중적인 통신 시스템의 위험성을 극복하기 위해 구상된 분산된 형태의 통신 시스템이 인터넷의 시작이었다. 즉, 인터넷은 중앙이 없이 수많은 통신장치들이 각자 전화국 역할..