본문 바로가기

html515

[HTML5 & CSS3] 배경 색과 배경 이미지 ▶ 배경 색과 배경 이미지 * background-color 속성 - 배경 색 지정하기 세밀하게 조절하고싶으면 16진수나 RGBA표기법으로 ! background-color: 예) background-color : #00ff00 * background-clip 속성 - 배경 적용 범위 조절하기 박스 모델의 가장 외곽인 테두리까지 적용할지, 테두리를 빼고 패딩 범위까지 적용할지, 아니면 내용 부분에만 적용할지 선택할 수 있다. 기본형) background-clip : border-box(박스 모델의 가장 외곽인 테두리(border)까지 적용한다 padding-box(박스 모델에서 테두리를 뺀 패딩 범위까지 적용한다 content-box(박스 모델에서 내용 부분에만 적용된다) * background-im.. 2021. 2. 3.

[HTML5 & CSS3] 웹에서 색상 표현하기 ▶ 웹에서 색상 표현하기 * 16진수 표기법 예) #ff0000 등등 * RGB와 RGBA 표기법 rgb(red 값, green 값, blue 값); rgba(red 값, green 값, blud 값, alpha 값); * hsl과 hsla 표기법 RGB외에 색상을 표기하는 방법. hue(색상), saturation(채도), lightness(밝기) hsl(, , ); hsla(, , , ); * 색상 이름 표기법 색 이름으로 표기하는 법 예) white, red, yellow 등 * 색상 추출 사이트 이용하기 대표적인 사이트가 Color Picker 2021. 2. 3.

[HTML5 & CSS3] 목록 스타일 ▶ 목록 스타일 * list-style-type 속성 - 목록의 불릿과 번호 스타일 지정하기 순서 없는 목록의 경우, 목록 앞에 다양한 불릿을 넣을 수 있고 순서 목록에서는 번호 스타일을 지정할 수 있다. 불릿 없앨땐 none 값 입력. 불릿 모양 바꾸기도 가능. 기본형) list-style-type : none / 순서 없는 목록의 불릿 / 순서 목록의 번호 * list-style-image 속성 - 불릿 대신 이미지 넣기 기본형) list-style-image : 이미지 / none = url(이미지 파일 경로) * list-style-position 속성 - 목록에 들여 쓰는 효과 내기 기본형) list-style-position : inside(불릿이나 숫자를 안쪽으로 들여 쓴다) / outs.. 2021. 2. 3.

[HTML5 & CSS3] 문단 스타일 ▶ 문단 스타일 * direction 속성 - 글자 쓰기 방향 지정하기 기본형) direction : ltr(왼쪽에서 오른쪽으로) / rtl(오른쪽에서 왼쪽으로) * text-align 속성 - 텍스트 정렬하기 기본형) text-align : start(현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬한다) / end(현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬한다) / left(왼쪽에 맞추어 문단을 정렬) / right(오른쪽에 맞추어 문단을 정렬) / center(가운데에 맞추어 문단을 정렬) / justify(양쪽에 맞추어 문단을 정렬) / match-parent(부모 요소를 따라 문단을 정렬) * text-justify 속성 - 정렬 시 공백 조절하기 기본형) text-justify :.. 2021. 2. 3.

[HTML5 & CSS3] CSS 기초 - 텍스트 스타일 ▶ 텍스트 스타일 * color 속성 - 글자 색 지정하기 웹 문서에서 문단이나 제목 등의 텍스트에서 사용되는 글자 색을 바꿀 때 사용. 기본형 → color: * text-decoration 속성 - 텍스트에 줄 표시하기 / 없애기 텍스트에 밑줄을 긋거나 취소 선을 표시할 수 있다. 또한 웹 문서의 기존 내용을 취소하고 새로운 내용을 입력할 때 취소 선을 이용하면 기존 내용을 완전히 삭제하지 않고 새로운 내용과 비교하며 확인할 수 있다. * text-transform 속성 - 텍스트 대·소문자 변환하기 * text-shadow 속성 - 텍스트에 그림자 효과 추가하기 * white-space 속성 - 공백 처리하기 * letter-spacing과 word-spacing 속성 - 텍스트.. 2021. 2. 3.

[HTML5 & CSS3] CSS 기초 ▶ CSS css를 이용하면 html로 작성된 내용은 그대로 두고 대상 기기에 맞게 CSS만 바꾸어 주면 같은 내용을 여러 기기에 어울리게 볼 수 있다. (태블릿, 휴대폰 등) 모든 스타일 정보는 사이에 정의 할 것. * 내부 스타일 시트 * 외부 스타일 시트 * 인라인 스타일 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시하는 것. * 전체 선택자 - 모든 요소에 스타일 적용하기 전체 선택자는 말 그대로 스타일을 모든 요소에 적용할 때 사용한다. 주로 모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용한다. 전체 선택자로는 *를 사용한다. 또한 전체 선택자는 문서의 여백이나 글꼴 크기 등 기본 스타일을 초기화할 때 사용한다. * { margin: 0; padding: 0; } * 태그 선.. 2021. 2. 3.

이전 1 2 3 다음

티스토리툴바