![]()
레이아웃 다중 칼럼(multi-column) 레이아웃 다중 칼럼 속성 columns 모든 columns 속성을 이용한 스타일을 한 줄에 설정 가능 column-count 해당 요소를 몇 개의 칼럼(column)으로 나눌지를 설정 column-gap 칼럼(column) 사이의 간격을 설정 column-width 칼럼의 너비를 설정 웹 브라우저는 설정한 너비의 칼럼을 만든 후, 나머지 영역을 동일하게 나누어 칼럼 사이의 간격으로 자동 설정 column-span 해당 요소가 몇 개의 칼럼을 병합하여 표현할지를 설정 column-fill 칼럼을 어떻게 채울지 설정 column-rule 모든 columns-rule 속성을 이용한 스타일을 한 줄에 설정 column-rule-style 칼럼 사이에 들어갈 라인의 스..
![]()
디스플레이 웹 페이지의 레이아웃(layout)을 결정 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정 HTML의 모든 요소는 각각의 기본 display 속성값을 가지고 있으며 그 값을 변경함으로써 웹 페이지를 개발자가 원하는 모양으로 변경 가능 블록 항상 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지 , , , , , 요소 인라인 새로운 라인(line)에서 시작하지 않으며, 해당 HTML 요소의 내용만큼 차지 , , 요소 인라인 - 블록 해당 요소 자체는 인라인(inline) 요소처럼 동작하지만 해당 요소 내부에서는 블록(block) 요소처럼 동작 인라인 요소처럼 한 줄로 늘어서면서 블록 요소처럼 너비와 높이를 설정 가능 따라서 웹 사이트의 메뉴나 내비게이션 바를 만..
![]()
박스 모델(box model) 모든 HTML 요소는 박스(box) 모양으로 구성 박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분 [CSS] height / width : 내용(content) 부분만 [HTML] height / width : 패딩(padding), 테두리(border), 마진(margin)의 크기는 포함되지 않음 전체 너비 / 높이 계산 HTML 요소의 전체 너비 : width + left padding + right padding + left border + right border + left margin + right margin HTML 요소의 전체 높이 : height + top padding +..
![]()
크기 단위 백분율 단위(%) : 기본 크기를 100%로 놓고, 그에 대한 상대적인 크기 배수 단위(em) : 해당 글꼴(font)의 기본 크기를 1em으로 놓고, 그에 대한 상대적인 크기 픽셀 단위(px) : 스크린의 픽셀(pixel)을 기준으로 하는 절대적인 크기 크기 조절 height / width HTML 요소의 높이와 너비 기본 설정값은 auto -> 웹 브라우저가 각 HTML 요소에 맞게 자동으로 높이와 너비를 설정 설정된 너비 이하로 브라우저의 크기가 줄어들 때 해당 요소에 스크롤 바를 생성 태그등 inline 요소는 적용 되지 않음 #box{ width: 100px; height: 60px } max-width HTML 요소가 가질 수 있는 최대 너비 기본 설정값은 none 해당 HTML 요..
![]()
CSS 텍스트 color 텍스트의 색상을 설정 웹 페이지에서 텍스트의 기본 색상은 검정색 태그에 명시된 color 속성값은 웹 페이지 내의 모든 텍스트 요소에 적용 만약 각 요소별로 따로 명시된 color 속성값이 있다면, 해당 속성값이 태그에 명시된 속성값보다 우선 적용 direction 텍스트가 써지는 방향을 설정 웹 페이지에서 텍스트는 기본적으로 왼쪽에서 오른쪽 방향 left-to-right(ltr)일 때는 기본 설정처럼 텍스트가 왼쪽에서 오른쪽 방향 right-to-left(rtl)일 때는 텍스트가 반대 방향인 오른쪽에서 왼쪽 방향 letter-spacing 텍스트 내에서 글자 사이의 간격을 설정 word-spacing 텍스트 내에서 단어 사이의 간격을 설정 문자 간의 간격이 아닌 단어 간의 간격..
![]()
Canvas 웹 페이지에 그래픽을 그려주는 쉽고 강력한 방법을 제공 그래픽을 위한 컨테이너(container) 역할만을 수행 따라서 실제로 그래픽을 그리기 위해서는 자바스크립트(JavaScript) 등의 스크립트 언어를 이용 canvas 요소의 속성 테두리(border)도 콘텐츠(content)도 없는 웹 페이지 내의 단순한 사각형의 공간 반드시 style 속성을 이용하여 캔버스의 크기를 설정 canvas 요소를 스크립트(script)에서 접근하기 위해서는 해당 요소의 id 속성을 이용 이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 때 나타납니다! 사각형 그리기 1. 사각형의 왼쪽 위 꼭짓점의 x좌표 2. 사각형의 왼쪽 위 꼭짓점의 y좌표 3. 사각형의 너비 4. 사각형의 높이 co..
![]()
비디오 웹 브라우저는 여러 개의 태그 중 위쪽에서부터 순서대로 가장 먼저 인식되는 파일의 타입과 주소를 사용 태그 사이에 존재하는 텍스트는 해당 웹 브라우저가 태그를 지원하지 않을 때만 화면에 표시 비디오 파일 형식 - MP4 : Moving Picture Experts Group에 의해 개발되었으며, 비디오 코덱으로는 H.268, 오디오 코덱으로는 ACC를 사용합니다. 적은 용량으로도 고품질의 영상 및 음성을 구현할 수 있어 인터넷을 통한 스트리밍에 많이 활용되는 파일 형식 - WebM : 구글의 지원으로 개발된 개방형 공개 멀티미디어 파일 형식이며, 비디오 코덱으로는 VP8, 오디오 코덱으로는 Vorbis를 사용 - OGV : Theora Ogg라고도 불리며, Xiph 재단에 의해 MP3의 대안으로 ..
![]()
의사 요소 해당 HTML 요소의 특정 부분만을 선택 하나의 HTML 요소에 여러 개의 의사 요소를 동시에 적용 가능 선택자::의사요소이름 {속성: 속성값;} ::first-letter 텍스트의 첫 글자만을 선택 블록(block) 타입의 요소에만 사용 font 속성 color 속성 background 속성 margin 속성 padding 속성 border 속성 text-decoration 속성 text-transform 속성 line-height 속성 float 속성 clear 속성 vertical-align 속성 (단, float 속성값이 none일 경우에만) ::before 특정 요소의 내용(content) 부분 바로 앞에 다른 요소를 삽입 ::after 특정 요소의 내용(content) 부분 바로 뒤..
![]()
선택자 CSS를 적용할 위치의 HTML 요소 전체 선택자 * { margin: 0; padding: 0; } HTML 문서 내부의 모든 요소에 같은 CSS 속성을 적용 보통 margin이나 padding 등 브라우저 기본 스타일들을 초기화 할 때 사용 하지만 문서 내의 모든 요소를 읽어야 하기에 페이지 로딩 속도가 느려질 수 있으므로 최소한으로 사용하는 것이 좋음 #wrapper * { border: 1px solid #000; } 전체 선택자는 위의 경우처럼 자식 선택자에도 사용 가능 태그 선택자 태그 선택자는 HTML 요소를 직접 지칭 해당 선택자와 같은 이름을 가진 태그 전부에 속성 적용 태그이름 { 속성1: 속성값1; 속성2: 속성값2; } div { background-color: #000; c..
![]()
CSS란? 사용자에게 문서를 표시하는 방법을 지정하는 언어 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어 웹 사이트에서 화면에 표시되는 정보들을 꾸며주는 역할 웹 페이지의 스타일을 별도의 파일로 저장할 수 있게 해주므로 사이트의 전체 스타일을 손쉽게 제어 웹 사이트의 스타일을 일관성 있게 유지할 수 있게 해주며, 그에 따른 유지 보수 편리 HTML - 문장 구조 CSS - 문장 디자인 CSS 사용 방법 인라인 스타일 HTML 요소 안에서 Style 속성 이용 해당 요소에만 스타일 적용 내부스타일 HTML 문서의 태그 내에 태그를 사용하여 스타일을 지정 해당 HTML 문서에만 스타일을 적용 외부스타일 별도의 CSS 파일을 분리하여 HTML 문서에 연결 웹 사이트..
![]()
브라우저 지원 여부에 따라 날짜를 선택하기 위한 캘린더 input input 요소를 사용하여 사용자로부터 입력을 받음 input 요소 텍스트 입력(text) 한 줄의 텍스트 입력 받음 검색할 내용을 입력하세요 : 비밀번호 입력(password) 화면에는 입력받은 문자나 숫자 대신 별표나 작은 원 모양이 표시 사용자 : 비밀번호 : 라디오 버튼(radio) 사용자로부터 여러 개의 옵션 중에서 단 하나의 옵션만을 입력받을 수 있음 이때 서버로 정확한 입력을 전송하기 위해서는 반드시 모든 input 요소의 name 속성 동일 HTML CSS JAVA C++ 체크박스(checkbox) 용자로부터 여러 개의 옵션 중에서 다수의 옵션을 입력받을 수 있음 이때 서버로 정확한 입력을 전송하기 위해서는 반드시 모든 in..
![]()
From form 요소를 사용하여 사용자로부터 입력 받고 사용자가 입력한 데이터를 서버로 전송 텍스트 필드에 글자를 입력, 체크박스나 라디오 버튼을 클릭하고 제출 버튼을 누르면 백엔드 서버에 양식이 전달 사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달 action 속성 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시 method 속성 입력받은 데이터를 서버에 전달할 방식을 명시 GET 방식 주소에 데이터(data)를 추가하여 전달 데이터가 주소 입력창에 그대로 나타남 전송할 수 있는 데이터의 크기 제한적 검색 엔진의 쿼리(query)와 같이 크기가 작고 중요도가 낮은 정보를 보낼 때 주로 사용 POST 방식 데이터(da..
