728x90

분류 전체보기 293

[CSS] CSS 활용 (IMG,TABLE), Display, list 꾸미기

배경 이미지 일반적으로 웹 페이지에 이미지를 삽입할 대에는 태그를 사용해서 직접 삽입하는데, CSS를 이용하면 HTML 요소의 배경에 이미지를 삽입할 수 있다. 배경 이미지는 태그를 이용해서 이미지를 삽입했을 때와 달리 배경 이미지 위에 버튼이나 다른 HTML 요소를 넣을 수도 있다. 속성 값 의미 no-repeat 배경 이미지 반복되지 않음 repeat-x 배경 이미지가 수평 방향으로 반복됨 repeat-y 배경 이미지가 수직 방향으로 반복됨 배경 이미지 삽입 웹 페이지에 배경 이미지를 삽입하는 데에는 background-image 속성을 이용한다. 배경 이미지가 바탕화면보다 작을 때에는 배경 이미지가 수평과 수직 방향으로 반복된다. 배경 이미지 삽입 웹 페이지에 배경 이미지를 삽입하는 데에는 back..

[CSS] 선택자(Selector)종류와 사용법

CSS 선택자(Selector) CSS꾸미는 영역을 선택하는 역할을 한다. 선택자 중에서 일반적으로 널리 사용되는 것은 전체 선택자, 태그 선택자, 그룹 선택자, 아이디 선택자, 클래스 선택자, 하위 선택자이다. 선택자 CSS 선택자는 CSS로 꾸미고자 하는 HTML 영역을 선택하는데 사용된다. 앞에서의 CSS 실급에서는 HTML 태그 이름을 선택자로 사용했었는데 이를 태그 선택자()라고 부른다. 선택자 {} 식으로 사용된다. 선택자는 CSS 구조에서 제일 앞에 위치하며 CSS로 꾸밀 HTML 영역을 선택한다. 이렇게 선택된 영역은 선택자에 의해서 지정된 CSS 명령들이 적용된다. 기호 의미 설명 * 전체 선택자 HTML 요소 전체 선택 p 태그 선택자 문단 태그의 영역 선택 p, h3 그룹 선택자 문단..

[HTML]Div태그

div태그란 ? 태그는 division(구분)으로써 HTML 요소를 담는 박스와 같은 것으로 생각하면 된다. 또한 는 HTML 요소들을 화면에 배치, 즉 레이아웃하는 데 많이 사용된다. 박스 모델이란? 웹 페이지에 있는 모든 HTML 요소는 사각형 형태를 가지는 박스로 생각할 수 있다. CSS에서는 이러한 박스를 기반으로 하여 요소에 경계선을 그릴 수 있으며 여백을 조정하여 요소를 화면에 배치할 수 있게 한다. 박스 모델이란? 웹 페이지에 있는 모든 HTML 요소는 사각형 형태를 가지는 박스로 생각할 수 있다. CSS에서는 이러한 박스를 기반으로 하여 요소에 경계선을 그릴 수 있으며 여백을 조정하여 요소를 화면에 배치할 수 있게 한다.

[CSS] 박스 모델 꾸미기

박스 모델이란? 웹 페이지의 모든 HTML 요소는 박스 형태를 갖는다. 박스 모델은 HTML 요소들을 꾸미고 화면에 비치하는 기본 기능을 제공한다. 박스 모델의 구성 속성 값 설명 Margin : _px (픽셀) 경계선과 다른 외부 요소와의 간격 Border : solid, dashed,dotted,groove 경계선 실선 - radius : _px, box-shadow(_px _px _px) 모서리 종류 Padding : _px (픽셀) 경계선과 HTML 내부 요소의 간격 h5 { margin : 50px; border : solid 10px green; padding : 20px; } h4 { margin : 50px; border : dashed 30px green; padding : 80px; }..

[CSS] 글자 스타일

글자 스타일 속성 속성 값 의미 text-align left, center, right 글자 정렬 line-height 150%, 180%, 200% 등 줄 간격 text-decoration underline, none 글자 장식 font-family 맑은고딕, 돋음,바탕 등 글자 폰트 font-size 16px, 20pc, 30px 등 글자 크기 font-weight bold, normal 등 글자 두께 font-style italic 이탤릭체 text-shadow 3px 3px 5px #444444 글자 그림자 색상 font-family 속성은 글자의 폰트를 설정하는데 맑은 고딕, 돋움, 굴림, 바탕 등 컴퓨터에 내장된 글꼴만 사용할 수 있다. 이런 기본 포트 이외의 폰트를 사용하려면 구글 폰트 사이..

[CSS] CSS(Cascadion Style Sheets), 배경화면, 글씨 색상설정

CSS란? CSS는 HTML을 보좌하여 웹 페이지를 디자인적으로 꾸미고 페이지의 요소를 화면에 배치하는 역할을 한다. CSS는 기본 구조를 가지고 있으며, HTML에 문서를 삽입하는 세 가지 방법, 웹에서 사용되는 RGB 색상의 사용법, 글자 스타일 지정 방법, 글자에 그림자를 넣는 방법 등이 포함된다. CSS가 나오기 전에는 HTML로 디자인적인 요소들도 만들어 쓰게 했는데 본연의 HTML이 변색되었기 때문에 웹 표준 국제기구인 W3C.에서 1996년 웹의 뼈대를 담당하고 디자인적 요소는 CSS 사용도록 규제했다. CSS의 기본 구조 CSS는 HTML 속에 태그 내의 고양이 개요 표유류 식육목 고양이과에 속하는 대표적인 동물이다.

[HTML] 테이블생성

테이블 웹 페이지에 테이블을 삽입하는 데에는 , , , 태그를 사용한다. 테이블을 만들고, 행과 열을 병합할 수 있다. 테이블 삽입 - , , , 종류 설명 참고 전체 테이블을 감싸는 것(border="1" 경계선의 두께) border="1" 경계선의 두께 테이블의 제목 각각의 행을 만들 때 (table row) table row 테이블의 첫 번째 행에서 각 열의 제목 생성 (table header) table header 테이블 행 내에 있는 각각의 셀 표현 (table division) table division 표 구조의 제목부분 표 구조의 본문부분 표 구조에서 요약이나 정리 부분 표에서 열의 스타일 지정 표에서 여러 열을 함께 묶어서 스타일을 지정 ** 태그나 태그에서 사용하는 colspan 속성..

[HTML] Form 양식

폼 양식과 테이블 텍스트 입력창 input type="text" 버튼 input type="submit" 비밀번호 입력 창 input type="passworld" input type="button" 라디오 버튼 input type="radio" input type="reset" 체크박스 input type="checkkbox" 선택박스 파일 input type="file" 다중 입력창 년,월,일,시각 input type= "datetime_local, month, time, week" 년,월,일 input type="date" 이미지 input type="image" 슬라이드바 input type="range" 이메일 input type="email" 숫자 input type="number" 색깔 in..

728x90