본문 바로가기

HTML5 & CSS355

[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.

[HTML5 & CSS3] 숙제 (페스티벌 페이지 만들기) ▶과정 -윗부분은 4칸, 밑부분은 3칸이라서 줄 맞추기가 힘들었다 일단 사진부터 넣고 보기로함. -줄도 안맞고 사진도 크기가 들쭉날쭉. 총체적 난국. 해결방법이 도저히 생각이 안나서 한숨 자기로함 -테이블 속 테이블을 만들면 어떨까싶어서 만들어봤더니 줄이 겹친다. -한숨 자고 일어나서 생각해보니 12열로 해서 윗부분은 3개씩, 밑부분은 4개씩 병합하면 어떨까 라는 생각이 번뜩 들었다. 결과는 성공! 하지만 아직 사진크기를 해결하지 못했다. 아이콘도 넣어야하고... -사진을 배경으로 넣으니까 해결됨. 근데 가운데 줄 간격이 맞지않다. '전남 순천시' 의 사진도 짤려서 나오고... 사진을 좀 더 크게 수정했다. ▶ 완성본 -산정호수 명성산 억새꽃 축제~영광 불갑산상사화축제 칸 라인 간격이 이상해져서 고치느라.. 2021. 2. 3.

이전 1 ··· 4 5 6 7 8 9 10 다음

티스토리툴바