본문 바로가기

웹(IT) 정보31

html 파일경로와 링크의 이해 파일경로는 웹사이트의 폴더 구조에서 해당하는 위치는 설명합니다. 파일경로는 이미지, 링크, 스타일시트, 자바스크립트등 이 주로 경로에 쓰입니다. html을 다루다 보면 이미지나 모든 경로 설정에 있어서 한번쯤은 제대로 경로설정을 했는데도 불구하고 링크가 제대로 작동이 되지 않거나 이미지가 경로에 맞지 않아 깨지는 상황들이 많이 있습니다. 경로에는 절대경로, 상대경로 두가지가 있습니다. 절대경로란? 절대경로는 해당하는 파일의 웹사이트 해당하는 폴더의 절대적인 위치를 말합니다. 상대경로에 비해 주소가 굉장히 길지만 틀릴 위험요소가 없다는 장점이 있습니다. 상대경로란? 1. 현재 페이지와 같은 폴더에 위치해 있는 파일을 설명합니다. 2. 현재 페이지의 images폴더 안에 포함되어 있는 이미지파일을 설명합니다.. 2017. 8. 20.

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.

CSS3 Transition 트랜지션 변형의 시작 css3 트랜지션속성이 있기전에는 웹페이지 안에서의 동적인 부분은 adobe flash가 담당하고 있었습니다. 하지만 구글크롬이나 애플사에서 플래쉬를 지향하기 시작했습니다. 이유인 즉슨 보안관련문제도 있으면서 웹표준에 어긋나고 모바일에 최적화 되지 못하기 때문입니다. 사실 플래쉬는 동적인 요소에 불과했지 각종 메뉴나 사이트에 사용하는건 적합하지 못했던건 사실입니다. 그래서 동적인 요소를 단지 이 트랜지션이나 애니메이션 CSS만으로 커버가 됐다는 사실입니다. 시대의 흐름인 만큼 더욱 간소화되고 더욱 쉽고 정교해졌습니다. 우선은 트랜지션에관해 먼저 포스팅해보겠습니다. 트랜지션은 지정한 속성에서 또다른 지정값(시간) 동안 부드럽게 변경이 가능합니다. 왜 예를 들어 버튼값이 기본 블랙이고 마우스 오버했을시에 그.. 2017. 8. 8.

이전 1 2 3 4 5 6 다음

티스토리툴바