본문 바로가기

ALL

ul 스타일 주기 (li 불릿 교체 및 삭제, 들여쓰기 없애기) UL 스타일 주기 퍼블리싱을 할때 DIV 만큼 많이 쓰는 것이 ul (비순차목록) 인데요. ul (비순차목록) 을 사용하면 li 리스트 앞에 자동으로 동그란 불릿아이콘 (bullet icon) 이 생성됩니다. 이 불릿아이콘을 없애려면 먼저 아래의 스타일을 css에 추가해 주세요 ul li {list-style : none;} 위의 스타일을 사용해서 불릿아이콘을 없앴는데, 다른 이미지를 불릿아이콘으로 사용하고 싶을때는 list-style-image:url(경로);를 사용해 주시면 되는데요. 예제 소스 첨부해 드리도록 하겠습니다. 마지막으로 비순차목록에서 나타나는 들여쓰기를 없애주고 싶을때는 ul 태그에 padding-left:0; margin-left:0; 를 추가해 줍니다. ul {padding-left..
폰트 그림자 넣기 (text-shadow) CSS로 폰트 그림자 넣기 (text-shadow) 퍼블리싱을 할때 입력한 텍스트에 가독성을 올리고, 입체감을 주기 위해서 텍스트 폰트에 그림자 넣는 방법을 알아보겠습니다. css에 text-shadow을 활용하는 것인데요! text-shadow 세부 옵션값들을 잘~~ 조절하면 포토샵에서 폰트에 drop shadow를 넣어주듯이 표현이 가능합니다. {text-shadow: 가로거리 세로거리 번지는정도 색상값;} 폰트에 그림자 넣기 위 옵션 중 가로거리의 옵션값이 "+"면 그림자가 오른쪽으로 생성되고, "-"면 왼쪽으로 생성됩니다. 세로거리의 옵션값이 "+" 일 때 아래쪽으로 생기고, "-" 일 때는 위쪽으로 그림자가 생성됩니다. 번지는 정도는 옵션값의 숫자가 커질수록 많이 번지구요~ 색상값은 rgba로 ..
웹폰트 적용하기 사이트 제작 시 @font-face를 이용하여 유저의 PC에 폰트가 없어도 웹사이트에서 원하는 폰트로 화면을 보여드리는데요! 오늘은 웹폰트 적용법에 대해서 자세히 알아보도록 하겠습니다. 제가 아는 방법은 "구글 나눔고딕 폰트 적용하기"와 "서버에 폰트를 업로드하여 불러오기" 이 두가지 입니다. 먼저 "구글 나눔고딕 폰트 적용하기" 먼저 설명해 드리도록 하겠습니다. @import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css'); 구글 나눔고딕 폰트 적용하기는 매우 간편합니다. 바로 위의 소스를 스타일 시트에 넣어주시기만하면 끝!!! 워드프레스에 구글 나눔고딕 폰트를 적용하실때도 설치한 테마의 css폴더 내 style.css를 열어서 위의 소스..
개체 변형, 회전 시키기 (transform) css3의 transsform 속성을 설명하고자 합니다, transsform은 개체의 모양을 변형 혹은 회전등의 외곡을 줄 수 있는 속성으로 기존 javascript에 의존적이던 기능을 css3 transsform 속성만으로 구현할 수 있습니다. -webkit, -moz, -ms, -o 와 같은 접두사를 통해 브라우저 호환성을 확보할 수 있지만, IE9 미만의 브라우저에서는 호환되지 않으니 유념 하시길 바랍ㄴ다. IE8 이하의 브라우저 호환성을 배제한 프로젝트라면 javascript에 의존하지 않은 깔끔한 개발이 가능하겠네요. 1. 접두사 안내 위에서 언급 되었듯, 접두사를 통해 브라우저 호환성을 확보할 수 있는데, 접두사는 transform:속성; -webkit-transform:속성; -moz-tra..
css3 Animations 속성 (animation, keyframes) css3 애니메이션 특성 특성 설명 @keyframes 애니메이션 코드를 지정합니다 animation 모든 애니메이션 속성을 나열해서 표현 가능한 속성입니다. animation-delay 애니메이션 시작 전 딜레이 시간을 설정하는 속성입니다. animation-direction 애니메이션의 방향을 설정하는 속성입니다. animation-duration 애니메이션이 플레이되는 시간을 설정하는 속성입니다. animation-iteration-count 애니메이션을 재생해야 하는 횟수를 설정하는 속성입니다. animation-name 애니메이션 네임 속성입니다. animation-play-state 애니메이션 일시 중지를 설정하는 속성입니다. animation-timing-function 애니메이션의 속도 스..
자동줄바꿈 : 긴 텍스트 줄 바꿈 안될 때 (word-break:break-all;) 퍼블리싱을 하다 보면 텍스트가 정해진 가로 값 영역을 넘어가는 경우 어떤 기준으로 줄바꿈 해줘야 할지 설정을 해줘야 합니다. 단어별로 다음 줄로 넘겨준다든지, 단어에 상관없이 무조건 다음 줄로 넘겨준다든지... 이럴 때 필요한 css 를 알아보도록 하겠습니다. ​ ※ word-break .text {word-break:break-all;} word-break 에서 느껴지실 텐데 말 그대로 다 잘라준다고 생각하시면 됩니다. 줄바꿈 처리를 하지 않으면 기본적으로 단어 위주로 다음 줄로 줄바꿈이 이뤄질 것입니다. ​ 근데 여기서 문제가 띄어쓰기를 하지 않고 글을 썼을 경우에 모든 글을 한 단어로 생각해서 글을 쓰는 영역의 가로 값을 넘어가도 뚫고 작성이 된다는 것입니다. ​ 이때 word-break을 사용하시..
자동줄바꿈 : 말 줄이기 비교 (text-overflow : visibile, text-overflow : ellipsis) 게시판에 글이 노출될때 타이틀이 길면 말이 잘리거나 두줄로 나타나는 경우가 있는데요 이럴때 유용한 말줄이기 팁을 알려드리겠습니다. 클래스를 long, short 두가지로 만들었으니, 하단에 소스를 카피해서 확인해 보세요~ 말줄임 활용하기 참 쉽죠??? 말줄임 활용하기 참 쉽죠??? 아래는 적용된 모습입니다. ^-^
자동줄바꿈 속성 (white-space, word-break, word-wrap, text-overflow) 퍼블리싱을 하다보면 div같은 공간을 설정하고 그 안에 텍스트를 넣는 경우가 많은데요. 그때 유용하게 사용할수 있는 자동줄바꿈 형식에 대해서 알아보려고 합니다. white-space 띄어쓰기나 줄바꿈, 탭으로 인한 공백 등의 공백문자를 처리하는 방법 설정. white-space:normal; /*white-space 기본값으로 연속 공백과 줄바꿈 등을 통합해서 표현*/ /*보통 띄어쓰기와 줄바꿈을 몇번 하든지 결과는 띄어쓰기 한칸 인것처럼 적용*/ white-space:pre; /*normal과 반대로 원문 그대로 출력*/ white-space:nowrap; /*공백은 nomal, 줄바꿈은 pre*/ white-space:inherit; /*부모요소의 값을 상속*/ word-break 텍스트가 들어가는 ..
크로스브라우징 CSS핵 퍼블리싱을 하다보면 크로스브라우징을 신경쓰지 않을 수가 없습니다! 여기서 크로스브라우징이란 어느 브라우저에서든 동일하게 보여지도록 구현하는것을 이야기하는데 저는 크로스브라우징에 문제가 생겼을때 최후의 수단으로 CSS핵을 사용하곤 합니다. 그럼 브라우져 버전별로 알고있는 핵을 적을테니 필요하신 분들은 참고하세요~ 위 소스는 예전에 공부한다고 서칭해서 정리해 뒀던건데... 안써본 것들도 몇개있네요.
마우스오버 시 효과 넣기 (background-position) 마우스를 올렸을 때 백그라운드 포지션이 바뀌면서 롤오버 효과를 내는 것이 가능합니다. 소스를 보면 하단과 같습니다. 메뉴 1 메뉴 2 메뉴 3 이때 아래와 같이 버튼의 롤오버와 온을 한 이미지로 만들어 줍니다. 위에 마우스를 올리지 않았을 때, 아래쪽에 마우스를 올렸을때 이미지를 연결해 줍니다. 여기서 중요한게 마우스를 오버했을때 포지션위치를 바꾸는 것인데, a:hover; 에서 background-position:0 -(이미지 height에 1/2 높이)px; 를 꼭 체크합니다. 본 포스팅에 샘플파일을 첨부했으니 다운받아서 테스트 고고!!
마우스오버 시 백그라운드 색상 변환 요즘 디자인을 중요시 생각하다보니 이미지 위주의 사이트가 많이 늘어나고 있습니다. 이미지 위주의 사이트를 제작하게 되면, 텍스트와 정보를 좀 더 효과적으로 전달하기 위한 도구나 방법이 필요한데요. 제가 오늘 추천해 드리려는 방법은 마우스를 오버를 했을때 위처럼 백그라운드를 어둡게 눌러주면서 텍스트를 띄어주는 방식입니다. 위 방법은 이미지를 강조하고 해당 내용이나 전하려는 인포를 좀 더 가독성 있게 전달할 수 있어서 자주 사용하고 있습니다. 소스는 아래와 같이 상당히 간단합니다. 좋은과일 고르는 방법!! pic background에 이미지 주소를 교체해 주시고 사이에 원하시는 문구를 써주시면 됩니다. 밑에는 완성된 모습 움짤입니다~
선택자 (구조선택자) : nth-child, first-child, first-child 퍼블리싱을 할 때 CSS 선택자를 이용하면 선택이 훨씬 용이한데요. 오늘은 그 종류에 대해서 이야기 해보려고 합니다. nth-child(odd) 홀수 요소 nth-child(even) 짝수 요소 nth-child(숫자) 위에서 몇번째 요소 nth-last-child(숫자) 마지막에서 몇번째 요소 first-child 첫번째 요소 last-child 마지막 요소 쉽게 이해를 돕기 위해서 아래와 같이 코딩을 했을 때 각 선택자 별로 선택되는 모습을 보여드리도록 하겠습니다. li:nth-child(odd) li:nth-child(even) li:nth-child(3) li:nth-last-child(2) li:first-child li:last-child
div 이동 간단하니까 먼저 소스를 보여드리겠습니다!! 링크시킬 이미지나 텍스트에 (이걸 눌렀을때 위쪽으로 옮겨가는거죠) 설정을 해주세요. 그리고 이동하고자 하는 부분에 이런식으로 아이디를 지정해 주시면 끝!!! ※ top 대신 원하시는거 사용하셔도 되요!! test용 html을 하단부분에 첨부할테니 궁금하신분은 파일을 확인해 보세요~^-^
div 좌우 배열 정렬하기 html 요소에 대해서 포스팅 했을때 요소에 대해서 한번 언급했지만, div는 블럭 요소로 가로값이 얼마든지 공간을 다 차지해 버리기 때문에 자동으로 줄바꿈이 됩니다. div 가운데 정렬은 동적일 때, 가로값이 픽스 되었을 때 두 가지를 함께 전에 포스팅 했으니, 오늘은 div를 좌우로 배열하는 법을 포스팅하겠습니다. div를 좌우로 인라인요소처럼 배열하고 싶을때는 선 객체에 float:left;로 왼쪽 정렬을 설정하고, 뒤에 오는 객체는 display:inline-block;로 내용 영역을 채워줍니다. 아래 소스를 첨부했으니 테스트 해보세요.
div 가운데 정렬 (세로) 오늘은 div를 세로로 중앙정렬 하는법에 대해서 알아보려고 합니다. 예전에 div가로로 가운데 정렬하는 법을 포스팅 했었는데요! 그 내용이 궁금하신 분은 아래 링크를 클릭하시면 됩니다~ div 가운데 정렬 보러가기 div 가운데 정렬처럼 세로 중앙 정렬도 아주 간단하니까~ 한번 따라해보세요!
div 가운데 정렬 (가로) 테이블에서는 align="center" 을 사용하면 가운데 정렬이 쉽게 되지만 div 같은 경우에는 그렇지 않습니다. 예전에는 position:relative; left:50%; margin-left:-(컨텐츠 가로값의 반)px; 을 이용해서 div를 정렬했는데, margin:0 auto; 만 넣어주면 간단하게 해결됩니다. margin:0 auto; 을 사용하다보면 ie8 에서는 안먹힐 때가 종종있는데 그럴때는 상위 div에 text-align="center" 속성을 추가해 줍니다. 그런데 margin:0 auto;같은 경우는 .box 의 가로값이 픽스되었을때 가능한 정렬법입니다. (위와 같이 작업을 하고 가로값을 써주지 않으면 가운데 정렬이 안된다는;;;;) 만약에 .box의 가로값이 유동적이고 픽스되..
PHP 반복문 (while,for, foreach) while 반복문 반복문은 조건이 참이면 소스를 반복적으로 실행시켜줍니다. 변수 mouse가 10보다 작거나 같을 때 변수 mouse를 반복해서 출력하라는 코드입니다. while의 조건이 변수 mouse가 10보다 작거나 같을때인데 변수 mouse의 값이 10이기 때문에 무한반복해서 출력되게 됩니다. 결국 결과물은 1010101010...... 이 무한으로 출력됩니다. for 반복문 for문은 소스를 반복적으로 실행시키는 반복문 중 하나인데 시작값,종료값,증감값으로 조건이 구성됩니다. for(시작값,종료값,증감값) 초기값은 변수 mouse가 100, 변수 mouse가 0보다 크거나 같을때 까지 이 코드는 반복하게 됩니다. 그리고 변수 mouse는 반복할 때마다 값이 20씩 감소하게 되고, 100 80 6..
PHP 조건문 (if,else if,else) 조건문은 조건을 주고 참인 경우에 코드를 실행하고 참이 아닐때 코드를 실행하지 않도록하는 것으로 if 문이 있습니다. if 문은 조건이 참일 때 소스를 실행하고 elseif 문은 이전 단계의 if 문이 거짓이고, elseif 문 조건이 참이면 소스를 실행합니다. else 문은 if 문과 elseif 문이 모두 거짓인 경우 소스를 실행합니다. 예제) $mouse; if($mouse 10 && $mouse 20){ echo 'blue'; } 변수 mouse가 10이하일 때 red를 출력하고, 10이상 20이하 일 때 green을 출력하고, 20이상일때 blue를 출력해라.
PHP선언 및 예제 php 선언 $ → 변수 선언 . → 문자와 문자를 결합 + → 숫자와 숫자를 연산 "" → 따옴표 안에 들어가면 문자로 인식 위 코드 결과는 3 위 코드 결과는 texttext
PHP란? PHP란 무엇인가? 주로 HTML 코드를 프로그래밍적으로 생성 서버에서 실행 되는 프로그래밍 언어 웹을 위한 언어 1995년 라스무스 러도프가 개발 Personal Home Page Tools 의 약자에서 PHP:Hypertext Preprocessor 로 의미 변경 PHP의 장점 최적화된 웹언어 웹개발에 필요한 로직들이 함수의 형태로 미리 제공됨 크로스플랫폼 거의 모든 데이터베이스를 지원 많은 공개소프트웨어가 PHP로 만들어짐 PHP 정보를 얻을 수 있는 곳 php.net - php의 공식 홈페이지 phpschool.com - 국내 최대의 PHP 커뮤니티 키단어 : server 서버(제공), side 사이드(측면), script 스크립트(언어), client 클라이언트(요청) 웹서버 : apache, ..

티스토리툴바