css background-position 배경이미지 위치
HTML & Javascript
2015. 2. 24. 22:07
css background-position ■ 지난 글에서 이미지를 배경에 삽입하고 'repeat'속성을 설정하는 방법에 대해서도 알아봤는데요. http://godvow.tistory.com/107 ◀ background-image 속성 ■ 이번글에서는 삽입한 이미지가 배경 요소보다 작을 경우 이미지의 위치를 설정하는 방법에 대해서 알아보겠습니다. "background-position" 속성을 이용하는데요. 속성값에는 백분율(%), 길이(px) 또는 위치 키워드 (top, bottom...) 등을 사용할 수 있는데요. 요소 보다 작은 이미지를 준비해서 배경이미지로 삽입해서 각각의 값을 넣어서 바뀌는 위치를 확인해보겠습니다. ▲ 간단하게 태그에 태그를 만들고 속성에서 가로.세로 500px, 배경색을 노란색..
css background-image 속성
HTML & Javascript
2015. 2. 23. 09:35
css background-image 속성 ■ 웹 페이지의 배경은 일반 색깔로 처리할 수도 있지만, 주제와 맞는 이미지를 사용하는 경우가 대부분일 겁니다. 이번 글에서는 이미지를 이용해서 홈페이지의 배경을 삽입하는 과정을 알아보고, background-image의 속성 중에서 background-repeat에 대해서 정리해볼까 합니다. background-size에 관련된 내용은 지난번 글에서 정리했었는데요. 참고하실 분들은 아래 글 참고하시구요. http://godvow.tistory.com/105 ◀◀ background-size ■ 배경이미지를 넣는 형식은 다음과 같습니다. background-image:url(파일경로); 이때 사용할 수 있는 파일의 형식은 jpg, gif, png 등입니다. 여기..
css background-size
HTML & Javascript
2015. 2. 18. 13:13
css background-size ■ HTML 웹 문서의 전체적인 분위기를 위해서 주제와 관련된 이미지나 깔끔한 이미지를 배경으로 많이 사용용 하고, 배경을 그림으로 채우는 과정에서 이미지의 사이즈를 조절해서 적용할 수 있는데요. 이번 글에서는 css의 background-size 속성에 대해서 알아보겠습니다. ■ 속성값으로 사용할 수 있는 것들은 auto, 크기값(px), 백분율(%), cover, contain 등이 있는데요. 위 이미지(600X400)를 이용해서 속성값을 바꿔가면서 어떻게 적용되는지 확인해볼게요. ▲ 본문에 700X500 크기의 박스(div)를 만들고 배경색을 노란색으로 설정했습니다. 이 박스의 배경을 이미지로 채워보겠습니다. 먼저 'auto' 속성인데요. auto는 사진의 원본 ..
css 메뉴 list-style-image
HTML & Javascript
2015. 2. 16. 00:19
.css 메뉴 list-style-image ■ 지난 글에서는 HTML 문서에서 메뉴 목록을 만드는 과정을 정리해봤는데요. , , 태그를 이용해서 목록을 만들고, css의 list-style-type 속성을 이용해서 블릿의 모양을 바꿔주는 방법에 대해서 알아봤습니다. 혹기 list-style-type 속성에 대해서 참고하실 분들은 아래글 참고하시구요. http://godvow.tistory.com/100 ◀◀ list-style-type 속성 ■ 이번 글에서는 이렇게 메뉴 목록 앞에 붙어 있는 기본 블릿 대신에 이미지를 넣어볼 텐데요. 이미지 블릿을 넣는 스타일 속성은 다음과 같습니다. list-style-image:url(이미지 경로); 먼저 간단하게 예제를 만들어보겠습니다.▲ 순서 없는 목록인 태그와..
HTML list-style-type
HTML & Javascript
2015. 2. 12. 14:30
HTML list-style-type ■ 이번 글에서는 HTML 홈페이지의 '메뉴 목록'의 스타일에 대해서 알아볼텐데요. 간단한 내용이니까 예제를 하나 만들어가면서 이해해볼게요. ■ 먼저 html에서 목록을 만드는 태그는 . , 입니다. 세 개의 태그 중에서 과 태그를 이용해서 목록을 만들고, 그 안에 들어있는 항목 들은 태그를 이용해서 표시하는데요. 목록을 만들 때 순서가 있는 목록은 을 이용하고, 순서가 필요없는 목록은 태그를 이용합니다. 메모장 열어서 직접 만들어볼게요. ▲ body 태그 안에 목록을 만드는 형식대로 만들어 봤습니다. 과 의 차이를 확인해볼게요. ▲ 순서가 없는 은 기본설정 값인 블릿(●)으로 표시가 되구요. 순서가 있는 은 기본 설정인 숫자 1부터 순서대로 출력됩니다. 여기서는 목..
css hover a:hover
HTML & Javascript
2015. 2. 10. 15:55
css hover a:hover ■ css의 가상 클래스는 HTML 문서에는 존재하지 않지만, 임의대로 선택자를 지정해서 사용할 수 있는 형식을 말하는데요. 가장 대표적인게 [:hover] 선택자입니다. 이 선택자는 [a:hover] 형식으로 사용하며,태그를 이용해서 링크가 걸려있는 요소에 마우스를 올려놓았을 때 글자의 색이나 배경 등 스타일을 지정하는 역할을 합니다. 태그 외에도 메뉴 목록 태그 등 다른 녀석들과도 자주 쓰입니다. (li:hover) 이번 글에서는 [a:hover] 속성을 이용해서 예제를 만들어서 간단한 스타일을 적용해보겠습니다. ▲ 본문에 텍스트 한줄을 입력하고 태그를 이용해서 링크를 걸어놓은 상태입니다. ▲ 태그의 기본 속성대로 텍스트 색깔은 파란색으로 바뀌고 밑줄이 생기게 됩니다...