2030 BigDATA

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

HTML 2020. 8. 21. 23:23

목록 관련 속성 주요 속성 설 명 list-style-type bullet과 번호 스타일을 지정하는 속성 list-style-image bullet을 원하는 이미지로 지정하는 속성 list-style-position list에서 bullet의 위치를 지정하는 속성 * inside : 불릿이나 숫자를 안쪽으로 들여씀 * outside : 기본값으로 불릿이나 숫자를 밖으로 내어씀 list-style 위의 3가지 속성들을 한꺼번에 작성 가능한 속성 ① list-style-type 속성 속성값 의미 속성값 의미 none bullet없애기 symbols 1로 시작하는 십진수 circle 빈 원 decimal 1로 시작하는 십진수 disc 검정색으로 채워진 원 decimal-leading-zero 01로 시작하는 ..

HTML 2020. 8. 15. 23:23

들어가기 전... 스타일[style] HTML문서에서 자주 사용하는 글꼴이나 색상, 정렬 등 시각적으로 보기 좋게 꾸미는 것 인라인 스타일[Inline style] 스타일을 적용할 태그 안에 style속성을 이용해서 스타일을 지정하는 것 스타일 시트[stylesheet] 스타일 규칙들을 한눈에 확인하고 필요할 때 수정하기 위해 스타일들을 묶어둔 곳 스타일 시트는 내부스타일 시트와 외부스타일 시트로 나뉜다. * 내부스타일시트 : 태그 안에 태그를 사용해 작성 * 외부스타일시트 : 웹 문서에서 가져와서 태그 안에 태그를 사용해 작성 스타일 상속[style inherit] 부모 요소에 있는 스타일 속성들이 자식 요소로 전달되는 것 → 스타일의 모든 속성이 상속되는 것은 아님![배경색*배경 이미지는 상속되지 않..

HTML 2020. 8. 12. 23:23

태그 사용 가능한 이미지 파일에는 비트맵 이미지[GIF,JPG,JPEG,PNG]와 벡터이미지[SVG]가 있다. # 이미지 파일의 이해 더보기 비트맵 이미지 파일 형식 설 명 GIF [Graphic Interchange Form] 최대 256색까지 저장 가능하여 주로 작은 이미지에 사용 투명한 배경이나 움직이는 이미지 제작 가능 비손실 압출 방법 JPG/JPEG [Joint Photographic Experts Group] 웹상에서 이미지 및 사진 등의 정보를 전송할 때 사용하는 가장 보편적으로 파일 형식 GIF보다 다양한 색상과 명암을 표현할 수 있음[24비트의 수백만 가지 색상] 손실 압축 방법[변환 과정에서 GIF/PNG 압축방식보다 품질이 나쁠 수가 있음] 저장을 반복하다 보면 화질이 떨어질 수 있..

HTML 2020. 8. 5. 23:23

태그 제목 내용 내용 : : : : 표의 제목을 붙이고 싶을 때는 나 &태그를 이용 태그는 제목이 중앙 위쪽에 표시됨 태그는 태그보다 앞에 있으면 표 위에, 태그보다 뒤에 있으면 표 아래에 제목이 표시됨 은 테이블에서의 한 행을 의미 는 테이블에서의 제목 셀들을 의미 는 테이블에서의 데이터들을 의미 colspan 속성을 사용하면 행 병합 rowspan 속성을 사용하면 열 병합 , , 태그 컬럼명1 컬럼명2 : : 데이터1 데이터2 : : 요약1 요약2 : : 표의 제목부분, 내용부분, 요약부분을 구조화하기 위해 사용하는 태그 실제 출력되는 화면에서는 별 차이가 없음 하지만 코딩 내용을 볼때, 구조화되어있어 쉽게 확인 가능 화면 낭독기를 통해서도 표의 구조를 쉽게 파악 가능 ,

HTML 2020. 8. 4. 23:23

태그와 태그 목록 목록 : : : 목록1 목록2 : : : 순서가 필요하지 않은 목록을 만들때 태그를 사용 순서가 필요한 목록을 만들때 태그를 사용 ① type속성 속성 값 의미 1 숫자(기본값) a 영문 소문자 A 영문 대문자 i 로마숫자 소문자 I 로마숫자 대문자 ※ type속성 대신에 CSS의 list-style-type 속성을 이용해서 설정 가능 ② start속성 목록에서 시작하는 순서를 지정할 수 있다. 기본적으로는 1부터 시작 ③ reversed속성 항목을 역순으로 표시할 수 있다. 태그, 태그, 태그 HTML 웹 사이트에서 사용하는 인터넷 표준 문서의 확장자 : : : 사전 구성처럼 용어과 설명을 함께 작성하여 정의목록을 만들때 태그를 사용 제목은 태그에 작성하고 설명은 태그에 작성

HTML 2020. 8. 3. 23:23

태그 웹 문서에 표시하려는 내용을 전달, 즉, 마크업을 할 때 사용하는 약속된 표기법 태그명 설 명 웹 문서의 시작과 끝을 나타내는 태그 한글이 깨지는 것을 방지하기 위해 태그 속성을 이용해 "UTF-8"로 인코딩하는 것이 좋다. # 모바일 기기를 고려한 태그 더보기 # 검색 엔진을 고려한 태그 더보기 meta태그에서 웹 사이트 키워드, 설명, 제작자 등의 정보를 삽입 가능 속성 시작 태그 내부에 해당 태그와 관련된 추가적인 정보를 작성하기 위해 사용 속성에 대한 내용을 값이라고 하며 큰 따옴표를 사용하여 표기

HTML 2020. 8. 2. 23:23

들어가기 전... 단위의 종류에는 상대단위와 절대 단위가 있다. 상대 단위 em 부모 요소의 폰트 크기를 기준으로 하는 단위 부요 요소의 대문자 M의 너비를 1em으로 지정[부요 요소 크기에 따라 기준이 달라짐] rem 태그의 크기를 기준으로 하는 단위 처음부터 기본 크기를 지정[부모 요소가 아닌 최상위 태그의 크기로 기준이 고정] root와 em의 합성어 % 부모 요소를 기준으로한 비율 단위 vw viewpoint의 너비를 기준으로 하는 비율 단위 vh viewpoint의 높이를 기준으로 하는 비율 단위 절대 단위 px 가장 일반적으로 사용하는 절대 단위 여러 장치를 모두 지원하고 싶을 때는 값을 따로따로 지정해줘야 됨 웹을 개발할 때는 크게 '프론트엔드[Front-end]'와 '백엔드[Back-end..

HTML 2020. 8. 1. 23:23