본문 바로가기

웹(IT) 정보/css14

CSS3 shadows 그림자효과 CSS3를 사용하여 텍스트와 요소에 그림자를 줄 수 있습니다. 사용할 수 있는 CSS는 텍스트와 박스 쉐도우 두가지가 있습니다text-shadowbox-shadow text-shadow는 텍스트에 그림자를 적용할 수 있습니다.수평 2px과 수직 2px로 가장 쉽게 적용해 보겠습니다. SHADOW EFFECTtext-shadow: 2px 2px;수직과 수평의 쉐도우는 아시겠죠? SHADOW EFFECTtext-shadow: 2px 2px blue; 쉐도우의 컬러는 수직수평 뒤에 적어주면 됩니다. SHADOW EFFECTtext-shadow: 2px 2px 5px blue; 수직 수평뒤에 쉐도우에 흐림 효과를 추가해줍니다. SHADOW EFFECTtext-shadow: 0px 0px 5px #0874c6; .. 2017. 8. 30.

CSS FONTS 폰트 글꼴 설정 CSS에서의 폰트 글꼴 설정은 폰트의 굵기, 크기, 텍스트 스타일을 지정하게 됩니다. font의 속성은 다음과 같습니다.font-family - 글꼴의 모음을 지정할 때 사용합니다.예> font-family:'dotum', san serif;폰트패밀리 속성은 여러 글꼴을 넣는게 좋습니다. 브라우저에서 첫번째 글꼴을 읽지 못하거나 지원하지 않는다면 다음 순서의 글꼴을 지정하여 적용시킵니다. 글꼴이 없는경우에는 비슷한 글꼴로 나타냅니다. 영문의 단어가 두단어 이상일 경우에는 "따옴표"로 묶어줘야 합니다. font-size - 글꼴의 크기 사이즈를 지정할때 사용합니다.텍스트 크기의 지정은 굉장히 중요합니다. 포토샵디자인 시안에서의 사이즈와 html에서의 사이즈와 맞춰야 하며 절대 크기 또는 상대크기로 맞춰야 .. 2017. 8. 30.

css navigation bar 네비게이션 메뉴 바 만들기 어느 사이트나 네비게이션 메뉴는 필수적으로 사용됩니다. 큰 카테고리의 링크역활을 하기 때문입니다. 이 큰 카테고리 네비게이션은 PC버전이나 모바일 버전에 따라 틀리게 제작하기도 합니다. 간단한 css와 html 태그만으로 내가 생각한 멋진 디자인을 만들 수 있습니다. 물론 티스토리 블로그 메뉴도 마찬가지로 직접 수정이 가능합니다. 딱 정해진것은 아니지만 보통 네비게이션 태그는 ul, li로 구성합니다. html menu1 menu2 menu3 menu4 2017.07.30 - [웹(IT) 정보/css] - CSS3 Button-스타일로 버튼만들기 CSS3 Button-스타일로 버튼만들기 인터넷 강국 대한민국은 정말 많은 웹사이트가 있습니다. 하지만 그만큼 전문성을 띠지 못하는 저품질 사이트도 굉장히 많죠.. 2017. 8. 15.

CSS before&after 컨텐츠 앞뒤 삽입 코딩을 하다가보면 간혹 html 부분에서 놓치거나 자주 바뀌어야하는 부분 혹은 css단에서 이미지 처리해주고 싶거나 혹은 처럼 순서있는 리스트 형태로 할 때가 있습니다. 이런 부분을 html에서 추가하는게 아닌 css단에서 before,after 속성으로 처리하는 경우가 있습니다. css에서 어떻게 컨텐츠? 내용을 추가할수 있다는 것이지? 가능한것인가? 라고 생각할 수 있지만 content 사용만으로 간단하게 놓친 텍스트 이미지 숫자 등을 쉽게 추가 할 수있는 것 입니다. 간단하게 텍스트로만 표현하자면 [before][해당컨텐츠][after] 이렇게 붙여지는것입니다. 예제를 보면서 추가설명을 하겠습니다. html 일요일 css p {width:200px; padding:10px; background:#c.. 2017. 8. 13.

CSS3 Gradient 그라데이션효과 포토샵에서나 쓸수 있었던 그라데이션 효과를 CSS만으로 웹에서 표현이 가능합니다. CSS3에서 추가된 기능으로 최신 브라우저 익스플로러 10이상 표현이 가능합니다. 따라서 하위 브라우저 버전에서는 사용이 불가능한점 참고하시고 사용해주시면 되겠습니다. 표현방식은 라인방식과 원형방식 두가지가 있습니다. 라인방식이 많이 쓰이긴 하지만 필요에 따라 원형도 사용되기도 합니다. 하지만 하위 브라우저들 때문에 많이 사용하기 껄끄러운면도 많습니다. linear-gradient > 일반적인 라인방식 두개의 컬러를 지정하여 지정영역만큼 그라데이션이 표현됩니다. radial-gradient > 원형방식으로 지정영역만큼 그라데이션이 표현됩니다. repeating-linear-gradient > 같은 라인방식이지만 구간반복으로.. 2017. 8. 10.

CSS overflow 지정영역 외 처리 CSS overflow는 지정한 해당영역 외에 내용이 너무 길어져서 부분에 맞지 않아 그 해당영역외에 넘어간 요소들을 어떻게 처리할 것인가에 관한 CSS입니다. 프로그램상에서 지정영역에 글자제한 수를 주기도 하지만 디자인적으로 볼때 유동적인 디자인을 사용할 수 있어 사이트를 조금더 오래볼 수 있게끔 하게 해주는 요소이기도 합니다. overflow 속성visible - 기본값이며 오버된 영역이 잘리지 않습니다. 또한 지정역역 밖에 그대로 나오게됩니다. width:200px; height:50px; overflow:visible; background:#ccc 위와같이 지정영역 width-200px, height-50px에 넘어서 밖으로 그대로 노출이 됩니다. hidden - 오버된 영역이 잘리고 내용이 보여.. 2017. 8. 9.

이전 1 2 3 다음

티스토리툴바