분류 전체보기
-
bx 슬라이더 사용 방법! 웹 공부 ! 2018. 3. 21. 18:15
bx slider : 슬라이드에 사용하는 제이쿼리 라이브러리이다. 홈페이지 내에 있는 슬라이드를 보면 bxslider를 사용하는 경우가 종종 있다. 기본적인 jquery를 할 수있다면 쉽게 만들 수 있다. 하지만 jquery를 모른다면 어렵게 느껴질 수도 있다. bxslider 옵션 구분 기본값 데이터 타입 기능 mode horizontal horizontal', 'vertical', 'fade' 슬라이드 이동 방향 설정 speed 500 숫자 슬라이드 전환 속도 pager true 논리 동그라미 (블릿)버튼 노출 moveSlider 0 숫자 슬라이드 이동시 개수 sliderMargin 0 숫자 슬라이드 사이 여백 maxSlides 1 숫자 슬라이드 최대 노출 개수 minSlides 1 숫자 슬라이드 최..
-
jquery 사용하기! 웹 공부 ! 2018. 3. 14. 12:21
jquery란 javascript언어를 이용한 라이브러리라고 할 수 있다. jquery를 이용한는 방법은 2가지 이다. 1.juqery download 사이트에 들어가서 다운 받아서 직접 파일을 넣어서 html 파일에 링크 하는 방법 2. 이 스크립터를 html에 붙여 넣는 방법이다. 어떤 방법을 하나 본인이 편한 방법을 하는 것이 좋다. 두 가지 방법 모두 결과물은 똑같이 나오기 나온다. ** jquery를 하나의 언어라고 생각하시는 분들이 있다고 아는데 javascript언어를 기반으로 한 라이브러리이지 언어는 아니다. 쉽게 말하면 javascript를 사용하기 쉽게 만든 치트키 라고 할 수 있다.
-
세로정렬(가운데 정렬)! 웹 공부 ! 2018. 3. 12. 19:49
html & css를 하다 보면 세로 정렬을 하다가 화가 난 적이 한 두번이 아니다. display: table-cell을 적용한 후 vertical-align: middle 을 적용을 해도 엉뚱하게 나오는 일이 한 두번이 아니다. cssdiv{position: absolute;을 3차원으로 바꾸는 작업을 해야 한다.top: 50%;위에서 50% 띄우기 transform: translateY(-50%);2차원 평면 상에 수직 요소를 -50%씩 옮기기-webkit-transform: translateY(-50%);}
-
가로정렬(가운데 정렬)! 웹 공부 ! 2018. 3. 7. 15:26
html & css을 하다보면 가로 정렬에 애를 먹는 경우가 종종 있다. text-align: center 속성을 넣어도 적용이 되지 않고 margin:0 auto를 넣어도 적용이 안되는 경우가 종종 있다. 그럴 경우 사용하는 ! TIP ! html 파일의 div를 가운데 정렬을 한다면 . cssdiv{ width: 100px; 넓이값 position: relative;/ position: absolute; 속성을 3차원으로 바꾸는 작업을 해야 한다. left: 50%; 왼쪽으로 50% 이동 margin-left: -50px; 넓이의 절반을 다시 오른쪽으로 이동} 이런 방식으로 하면 좀 더 편하게 가운데 정렬을 할 수 있다.
-
style 우선순위! 웹 공부 ! 2018. 3. 6. 14:26
style을 주는 방식은 3가지 방식이다. 1. inline 속성으로 주는 방식 직접적으로 style을 주는 방식 2. 태그로 주는 방식 3. css 파일로 주는 방식 body{ background: #000} 이 3가지 방식 중에 html 파일은 inline > 태그 > css파일 순서로 우선순위를 둔다. 그 이유는 inline속성은 직접적으로 style을 주고 있기 떄문에 html파일에서 우선순위가 제일 위에 있다. 그 다음인 태그의 경우에는 직접적으로 style을 주는 것은 아니지만 같은 파일 안에 style을 주기 때문에 css파일 보다 우선순위를 두고 있다고 할 수 있다. 하지만, * html-5에서는 주로 css파일을 링크 해서 주는 방식을 선호 한다.
-
html 5 기본 구조 (레이아웃)! 웹 공부 ! 2018. 3. 5. 15:38
html의 기본 구조 html의 기본 레이아웃은 header nav section aside article 마지막으로 footer로 구성 되어 있다. 이 구조가 html 5의 기본 레이아웃 구조라고 할 수 있다. header: 로고, 사이트 맵 등이 들어간다. nav: (navigation의 약자) 보통 메뉴를 담는다. section : 제목으로 시작하는 컨텐츠를 의미적으로 그룹핑 하기 위해 사용 ! tip ! - section 안에는 h태그가 반드시 넣어야 한다. article : 내용이 각기 독립적이고 홀로 설 수 있는 내용을 담는다. aside : 주요한 내용이 아니라 부차적인 내용을 담는다. footer: 문서에 대한 정보를 담고 있어야 한다.
-
시멘틱 마크업! 웹 공부 ! 2018. 3. 2. 16:12
시멘틱 마크업 이란? 쉬운 의미로 html-5를 의미한다. 또한 시멘틱 마크업은 최대한 가벼워야 한다. 즉 인라인 스타일 태그 형식 보다는 css파일에 스타리 정보를 제공 하는것이 시멘틱 마크업을 충족 할 수있다. 다시 말해 불필요한 코드는 제거 되어야 하고 파일 크기는 최소한으로 해야 한다. ** 2005년 Andy Clark의 시멘틱 마크업에 대한 글을 인용 1. html을 정확하고 접근이 용이한 데이터 구조를 형성 2. css는 스타일 정보를 제공 3. 스크립트는 제작하는 사이트에 많은 기능과 유용성을 크게 해주는 스크립트를 제공