컴퓨터과학[4-2]72 HTML5 - [8]고급 레이아웃 [ 유연한 박스 레이아웃, 그리드 레이아웃, 사용자 인터페이스] HTML5 - [8]고급 레이아웃 [ 유연한 박스 레이아웃, 그리드 레이아웃, 사용자 인터페이스] (1) 유연한 박스 레이아웃 유연한 박스 레이아웃 속성 설명 flex-direction 플렉스 항목의 배치 방법 지정 row | row-reverse | column | column-reverse flex-wrap 플렉스 항목이 컨테이너에서 사용 가능한 공간을 기준으로 여러 줄에 줄바꿈 될지를 지정 nowrap | wrap | wrap-reverse flex-flow flex-direction과 flex-wrap 속성의 일괄 지정 order 플렉스 항목이 배치되는 순서 지정 (정수값, 0) flex-grow 플렉스 항목의 폭의 확대 비율 지정 (정수값, 0) flex-shrink 플렉스 항목의 폭의 축소 비.. 2017. 8. 16. HTML5 - [7]기본 레이아웃 [박스 모델 , 레이아웃 , 배경 및 테두리] HTML5 - [7]기본 레이아웃 [박스 모델 , 레이아웃 , 배경 및 테두리] (1) 박스 모델 박스 모델 속성 설명 display HTML 요소의 표현 방식(박스 종류) 지정 inline | block | inline-block | list-item | none 등 margin 박스의 외부 여백(박스의 테두리 선 밖의 여백) 지정 | | auto padding 내용 영역과 테두리 사이의 여백 지정 | width, height 박스의 폭과 높이 지정 | | auto min-width, min-height, max-width, max-height 특정 요소에 대한 콘텐츠의 최소 또는 최대 폭과 높이를 지정 | float 부모 요소 영역을 기준으로 왼쪽 또는 오른쪽에 배치하도록 지정 none | left .. 2017. 8. 16. HTML5 - [6] 텍스트 조작 및 장식 HTML5 - [6] 텍스트 조작 및 장식(1) 쓰기 모드 관련 속성 쓰기 모드 관련 속성 속성 설명 direction 텍스트의 가로 쓰기의 방향 지정 unicode-bidi 동일 문서에서 여러 언어를 지원하기 위해 텍스트의 본래 방향성을 재정의 writing-mode 블록의 진행 방향과 텍스트의 진행 방향이 가로인지 세로인지를 지정 text-orientation 라인의 텍스트 방향 지정(세로 방향 쓰기 모드에서만 적용 가능) text-combine-upright 단일 문자 공간에서 여러 문자들의 결합을 지정(세로 쓰기 모드에서만 적용 가능) (2) 텍스트 조작 관련 속성 텍스트 조작 관련 속성 속성 설명 text-transform 영어 알파벳 표기 방식 지정 white-space 요소 내의 공백 문자의.. 2017. 8. 14. HTML5 - [5] 색상 및 글꼴 HTML5 - [5] 색상 및 글꼴 정리하기 (1) 색 모델과 색상 지정 방법 RGB 색 모델 → #rrggbb (또는 #rgb), rgb(), rgba() (여기서, a(alpha)는 투명도 0.0~1.0) HSL 색 모델 → hsl(), hsla() (여기서, a(alpha)는 투명도 0.0~1.0) 기타 색상 지정 방법 → 영문 색상 키워드 사용, 브라우저에서 정의된 시스템 색상 키워드 사용 (2) color 속성과 opacity 속성 color 속성 → HTML 요소의 텍스트 등의 색상 지정 opacity 속성 → 투명도 지정 (3) 그라데이션 효과 지정 선형 그라데이션 → linear-gradient(), repeating-linear-gradient() 원형 그라데이션 → radial-grad.. 2017. 8. 14. HTML5 - [4] CSS3(1) 기본 및 선택자 정리하기 (1) CSS 사용의 장점 웹 문서의 내용과 디자인의 분리다양한 기능의 확장통일된 문서 양식 제공로딩 시간 단축 (2) CSS 적용 방식 CSS 적용 방식 적용 방식 설명 인라인 스타일 (“인라인 방식”) HTML 문서의 각 요소에 직접 style 속성을 사용해서 적용 스타일 요소 사용 (“임베디드 방식”) HTML 문서의 head 요소 안에 style 요소를 사용해서 적용 외부 파일 연결 (“링크 방식”) HTML 문서와는 별도로 스타일만 지정한 CSS 파일(*.css)을 만들어 link 요소를 통해 연결시켜 적용 (3) CSS 단순 선택자의 종류 CSS 단순 선택자의 종류 레벨 선택자 이름 설명 CSS2 * 전체 선택자 모든 요소에 스타일 적용 CSS1 요소 형식 선택자 지정한 요소에만 스타.. 2017. 8. 11. HTML5 - [3] 폼, 드래그 앤 드롭, 텍스트 편집 HTML5 - [3] 폼, 드래깅 텍스트 편집(1) HTML5에서 추가된 폼 요소 HTML5에서 추가된 폼 요소 요소 설명 datalist input 요소의 list 속성과 함께 사용하여 입력 옵션 리스트를 생성 keygen 안전한 데이터 송수신을 위한 암호 키(비밀키, 공개키)를 생성 output 폼 내의 연산 결과를 출력 progress 어떠한 작업의 완료 진행 상황을 표시 meter 일정 범위 안의 측정 값이나 분포 비율 등을 나타낼 때 사용 (2) HTML5에서 추가된 폼 속성 HTML5에서 추가된 폼 속성 속성 설명 autocomplete input 요소의 자동 완성 상태를 지정 novalidate 폼 제출시 입력 양식 데이터의 유효성을 검사하지 않도록 지정 (3) HTML5에서 추가된 inpu.. 2017. 8. 11. 이전 1 ··· 3 4 5 6 7 8 9 ··· 12 다음