웹 개발에 유용한 9가지 팁

이 기사에서는 웹 개발에 자주 사용해야 할 9가지 유용한 HTML, CSS 및 JavaScript 팁과 요령을 제공합니다. 그 중 일부는 HTML5 및 CSS3에 관한 것입니다. 일부는 당신에게 유용합니다.

1. html5

의 자리 표시자 속성을 사용하세요. 과거에는 HTML5에서 자리 표시자 속성의 기능을 구현하기 위해 많은 JavaScript 코드를 작성해야 하는 경우가 많았습니다. 입력 상자는 포커스를 얻지 못할 때 특정 프롬프트 메시지를 표시하고, 입력을 얻으면 자동으로 프롬프트 메시지를 지웁니다. focus 탐색은 현재 지원됩니다. 브라우저에는 Opera 11+, Firefox 9+, Safari 5+, IE 10+가 포함되지만 아래 제공된 코드는 자리 표시자를 지원하지 않는 브라우저에도 적용 가능합니다:

// jQuery code
var i = document.createElement("input");
 
// Only bind if placeholder isn't natively supported by the browser
if (!("placeholder" in i)) {
    $("input[placeholder]").each(function () {
        var self = $(this);
        self.val(self.attr("placeholder")).bind({
            focus: function () {
                if (self.val() === self.attr("placeholder")) {
                    self.val("");
                }
            },
            blur: function () {
                var label = self.attr("placeholder");
                if (label && self.val() === "") {
                    self.val(label);
                }
            }
        });
    });
}
 
<!-- html5 -->
<input type="text" name="search" placeholder="Search" value="">

2. 폰트 사용

글꼴 페이스를 사용하면 Opera 11+, Firefox 3+, Safari 5, IE6+

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }
     
body {
       font-family: 'MyWebFont', Fallback, sans-serif;
}

등 대부분의 브라우저를 지원하는 더 좋고 독특한 글꼴을 사용할 수 있습니다. 3. 박스 사이즈

글쎄요, 요즘 제가 가장 좋아하는 CSS 속성이라고 말하고 싶습니다. 레이아웃 문제를 해결할 수 있습니다. 예를 들어, 텍스트 필드 패딩을 추가하면 너비는 텍스트 상자의 너비 + 패딩이 되며 이는 성가시고 일반적으로 레이아웃을 깨뜨립니다. 그러나 이 속성을 사용하면 이 문제가 해결됩니다.

지원되는 브라우저: Opera 8.5+, Firefox 1+, Safari 3, IE8+, Chrome 4+

textarea {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

4. 텍스트 영역 크기 변경 비활성화

여러 줄의 텍스트 입력 포트의 텍스트 영역 크기를 사용자가 변경할 필요가 없는 경우도 있지만, 일부 Webkit 기반 브라우저(예: Safari 및 Chrome)에서는 사용자가 원하는 대로 텍스트 영역 크기를 변경할 수 있습니다. , 이 기능을 비활성화할 수 있습니다:

textarea {
    resize: none
}

5.jQuery.trim()

문자열 앞뒤의 공백을 제거하는 데 사용됩니다:

$.trim("       a lot of white spaces, front and back!      ");

6. jQuery.inArray()

요소가 배열에 있는지 확인하는 데 사용됩니다.

var arr = [ "xml", "html", "css", "js" ];
$.inArray("js", arr);

7. 간단한 jQuery 플러그인(템플릿) 작성

//You need an anonymous function to wrap around your function to avoid conflict
(function($){
  
    //Attach this new method to jQuery
    $.fn.extend({
          
        //This is where you write your plugin's name
        pluginname: function() {
  
            //options
            var defaults = {
                option1: "default_value"
            }
             
            var options = $.extend(defaults, options);
  
            //a public method
            this.methodName: function () {
                //call this method via $.pluginname().methodName();
            }
  
            //Iterate over the current set of matched elements
            return this.each(function() {
              
                var o = options;
              
                //code to be inserted here
              
            });
        }
    });
      
//pass jQuery to the function,
//So that we will able to use any valid Javascript variable name
//to replace "$" SIGN. But, we'll stick to $ (I like dollar sign: ) )      
})(jQuery);

8. jQuery 선택기

jQuery.expr[':'].regex = function(elem, index, match) {
    var matchParams = match[3].split(','),
        validLabels = /^(data|css):/,
        attr = {
            method: matchParams[0].match(validLabels) ?
                        matchParams[0].split(':')[0] : 'attr',
            property: matchParams.shift().replace(validLabels,'')
        },
        regexFlags = 'ig',
        regex = new RegExp(matchParams.join('').replace(/^s+|s+$/g,''), regexFlags);
    return regex.test(jQuery(elem)[attr.method](attr.property));
}
 
/******** Usage ********/
 
// Select all elements with an ID starting a vowel:
$(':regex(id,^[aeiou])');
  
// Select all ps with classes that contain numbers:
$('p:regex(class,[0-9])');
  
// Select all SCRIPT tags with a SRC containing jQuery:
$('script:regex(src,jQuery)');

기능 확장 9. PNG 이미지 파일 최적화 및 크기 줄이기

색상 수를 줄여 png 파일의 크기를 줄일 수 있습니다. 자세한 내용은 PNG 파일 최적화

를 참조하세요. 결론

프론트엔드 개발은 매우 흥미로운 분야이고, 우리가 모든 것을 배울 수는 없습니다. 새로운 프로젝트를 작업할 때마다 항상 뭔가 새로운 것, 이상한 것을 발견한 것 같은 기분이 듭니다. 이 팁들은 정말 편리하고 유용할 것 같아요 ;)

영어 원문: 웹 개발자를 위한 9가지 유용한 팁과 요령

위 내용은 웹 개발에 유용한 9가지 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!