2030 BigDATA

Favicon[파비콘] 브라우저의 탭에서 사이트 이름 앞에 작게 출력되는 아이콘 Favorite[즐겨찾기] + Icon[아이콘] 사용자가 어떤 사이트인지 직관적으로 파악할 수 있게 함 파비콘은 고해상도(2K 이상의 해상도)에서 잘 보일 수 있게 가로세로 32픽셀 이상의 사각형 사용 파비콘에 사용되는 이미지 확장자는 PNG 태그 내부에 파비콘 생성 코드 작성

HTML 2020. 8. 24. 23:23

flex box[플렉스 박스] 복잡한 레이아웃을 간단하게 작성할 때 사용하는 CSS 기반의 레이아웃 플렉스 컨테이너 [Flex Container] 텍스트, 이미지, 표 등 웹 요소들을 플렉스하게 사용하기 위해 플렉스 컨테이너로 묶어줘야 됨 플렉스 항목 [Flex Item] 플렉스 컨테이너에 담기는 웹 요소 주축 [Main Axis] 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 방향 교차축 [Cross Axis] 주축과 교차되는 방향 플렉스 박스에 사용되는 속성 속 성 설 명 display 플렉스 박스 컨테이너를 지정하는 속성 속성값에는 flex와 inline-flex가 있다. flex : 플렉스 박스를 박스 레벨 요소로 정의하는 속성 inline-flex : 플렉스 박스를 인라인 레벨 요소로 정의하는 ..

HTML 2020. 8. 23. 23:23

Media Queries[미디어 쿼리] 접속하는 기기의 화면 크기에 따라 레이아웃이 달라지도록 설정하는 방법 @media [only | not | 생략] 미디어 유형 and (속성1: 속성값) and (속성2: 속성값){ } 속성 값을 만족하는 미디어 유형이나 이를 제외한 미디어 유형들의 CSS를 정의 미디어 쿼리 작성 시, 서로 다른 CSS를 적용할 화면 크기를 중단점[break point]라고 함 @media 속성을 사용해 미디어에 사용할 CSS를 적용 only는 미디어 쿼리를 지원하는 웹 브라우저에서만 조건 인식 not은 해당 미디어 유형을 제외하고 CSS를 적용할 때 사용 생략하고 아무것도 입력하지 않으면 해당 미디어 유형에만 CSS를 적용 CSS를 적용할 미디어 유형을 설정 미디어 유형 설 명 ..

HTML 2020. 8. 22. 23:23

grid system[그리드 시스템] 웹 사이트 전체의 디자인을 체계적으로 하기 위해 사용하는 시스템 column을 나누어 요소들을 배치하여 필요할 때마다 칼럼들을 묶어서 배치 그리드 시스템을 사용하면 화면을 단순하게 만들면서도 규칙적으로 배열 가능 960[px] 그리드, 1200[px] 그리드, 12칼럼 그리드, 16칼럼 그리드, 24칼럼 그리드, 백분율 그리드 등의 시스템이 있음 ※ 일반적으로 12칼럼을 많이 사용 고정 그리드 시스템 브라우저 너비 값이 바뀌어도 웹 요소의 너비 값이 변경되지 않는 시스템 960[px] 그리드, 1200[px] 그리드, 12칼럼 그리드, 16칼럼 그리드, 24칼럼 그리드 가변 그리드 시스템 브라우저 너비 값이 바뀔 때마다 웹 요소의 너비 값이 함께 변경되는 시스템 가변..

HTML 2020. 8. 21. 23:23

반응형 웹 창의 크기가 변화함에 따라 창 안에 표시되는 내용들이 그에 맞게 변화하는 웹 문서 스마트폰 보급이 확대됨에 따라 모바일 기기에서도 콘텐츠들을 맞춤형 크기로 제공해야 할 필요성 증대 컴퓨터 화면 너비로 고정된채 스마트폰으로 보면 많은 내용을 작은 스마트폰 화면에 전부 출력해야하므로 글자 사이즈가 작게 보임 다양한 브라우저 환경에 맞는 웹 사이트를 각각 별도로 제작하는 것은 비효율적 다양한 브라우저 환경에 따라 변화하는 웹사이트의 콘텐츠들을 자동으로 변화시켜주는 것인 반응형 웹 반응형 웹의 장점 설 명 다양한 브라우저 환경 지원 스마트폰, 웨어러블 기기, 스마트 TV, 게임 콘솔 등에서 전부 사용 가능 가로 모드에 맞춰 레이아웃 변경 가능 스마트폰, 태블릿 등에서 가로*세로 변경시 그에 맞춰 레이..

HTML 2020. 8. 20. 23:23

Transform[변형] 2차원 변형[2D Transform] 웹 요소를 변형시킬 때 단순히 수명이나 수직으로 이동하고 회전하는 것 3차원 변형[3D Transform] 웹 요소를 변형시킬 때 x축과 y축에 원근감을 주는 z축을 추가해 변형시키는 것 사람쪽에 가까울수록 z축의 값이 더 커지고 사람쪽으로부터 멀어질수록 z축 값이 더 작아짐 Transform 속성 선택자 { transform : 변형 함수; } 변형을 적용하기 위해 사용하는 속성 변형함수 변 형 함 수 설 명 matrix3d(n, [,n]) 4x4 행렬을 이용해 이동과 확대/축소, 회전 등의 변환을 지정 translate(tx, ty) 지정한 크기만큼 x축과 y축으로 이동 translate3d(tx, ty, tz) 지정한 크기만큼 x축, y..

HTML 2020. 8. 19. 23:23

CSS 레이아웃 HTML 파일에서 같은 내용을 보더라도 배경, 색상 등의 스타일과 배치를 어떻게 하느냐에 따라 완전히 다른 사이트처럼 보일 수 있으므로 레이아웃은 매우 중요한 요소 중 하나 속 성 설 명 float 왼쪽이나 오른쪽으로 배치하는데 사용되는 속성 clear float 속성을 해제하는데 사용되는 속성 position 요소들을 자유자재로 배치해주는 속성 visibility 요소를 보이거나 보이지 않게 해주는 속성 z-index 한 요소 위에 다른 요소를 쌓을 때 사용하는 속성[순서를 정할 수 있음] z-index 값을 따로 지정하지 않으면 문서에 넣은 순서대로 표기 column-width 단의 너비를 고정하고 여러 단을 구성할 때 사용하는 속성 column-count 단의 개수를 고정하고 여러 ..

HTML 2020. 8. 18. 23:23

들어가기 전... 블록 레벨[block-level] 한 줄을 차지하는 태그 , ~, , , , , , , , , 인라인 레벨[inline-level] 한 줄을 차지하지 않고 화면에 표시되는 내용만큼만 영역을 차지하는 태그 , , , , , , , , , 박스 모델[box model] 블록 레벨 요소들은 모두 박스형태를 가짐. 박스모델은 contents, padding, border, margin 등으로 구성 padding, border, margin은 사각형모양으로 되어잇어 네방향의 스타일을 각각 따로 지정 가능 박스모델 구성 요소 설 명 contents 텍스트, 테이블 등 정보가 들어나는 곳 padding 박스와 컨텐츠 영역 사이의 여백 border 박스의 테두리 margin 여러 박스 모델 사이의 여..

HTML 2020. 8. 17. 23:23