아래 내용은 저의 개인적인 생각과 소견입니다. 저의 얕은 지식으로 인해 틀린 부분이나 잘못된 부분이 있으면 비판과 정정을 부탁드립니다.
프런트엔드 개발의 삼총사인 HTML+CSS+JS는 잘 알려져 있으며 프론트엔드 프로그래머가 이 세 가지 구성 요소를 사용하여 수많은 구성 요소를 구성합니다. 웹 페이지. 그러나 처음 배울 때에는 모든 지식 포인트를 빨리 이해할 수 없기 때문에 학습할 때 마치 시각 장애인이 코끼리를 잡으려는 듯한 느낌을 받는 경우가 많습니다. 즉, 각 구성 요소의 기능과 분업에 대해 잘 알지 못하는 것입니다. , 학습의 방향을 전체적으로 파악하지 못하기 때문에 완전한 지식 체계를 형성하는 것도 골치 아픈 일입니다. 저는 기본 지식부터 시작하여 이를 바탕으로 다른 콘텐츠를 레이어별로 추가하고 최종적으로 완전한 프레임워크를 형성하는 것을 좋아합니다. 이것이 내가 학습에 익숙해진 방식이다. 초반에는 아직 조금 어지러웠는데, 지식 포인트가 하나 둘씩 교차하는 부분도 있었고, 앞부분과 뒷부분도 앞부분과 연결되어 있었습니다. 그것을 이해하는 것이 여전히 필요했습니다. 하지만 전체 내용을 두세 번 읽으면 전체적인 틀이 훨씬 더 명확해집니다. 간단히 말해서 HTML+CSS+JS의 분업은 소프트웨어 계층화의 개념을 구현합니다. 일반적인 기능 배포는 다음과 같습니다. HTML은 콘텐츠 설명을 담당하고, CSS는 요소 스타일 설명을 담당하며, JS는 웹 페이지의 작업 구현을 담당합니다. 사실, 충분히 명확하지도 않고, 초보자들은 잘 이해하지도 못합니다. 웹페이지 개발 과정에서 왜 이 세 가지 구분이 있는지 이해할 수 있을 것 같습니다.
초기 웹 페이지는 정적 웹 페이지였으며 웹 페이지의 요소는 기본적으로 아무런 작업도 하지 않았습니다. 사람들은 주로 정보를 탐색하기 위해 온라인에 접속했으며 웹 페이지에 대한 상호 작용 요구 사항도 낮았습니다. 1996년 야후 웹사이트를 보면 웹페이지에 사진, 하이퍼링크, 검색창이 대부분 있는데, 이런 웹페이지의 스타일과 내용이 섞여 있다. 웹페이지 스타일을 수정하려면 하나씩 수정해야 하는데, 이는 더 번거로운 작업입니다. 그렇다면 이 문제를 해결하는 방법은 무엇입니까? 웹 개발의 선구자들은 콘텐츠에서 스타일을 분리하고 웹 페이지의 스타일을 설명하는 모든 명령문을 하나의 파일로 결합했습니다. 이 파일을 캐스케이딩 스타일 시트(Cascading Style Sheet), 줄여서 CSS라고 합니다. 스타일을 수정하려면 이 파일에서 수정할 수 있습니다. 일부 선택기를 통해 특정 요소나 특정 유형의 요소 스타일을 빠르게 변경할 수 있으므로 효율성이 향상됩니다.
웹 페이지에서 스타일을 제거한 후 HTML 언어는 웹 페이지의 내용을 설명하는 역할만 담당합니다. HTML에서는
요소를 사용하여 헤더 파일을 표시하고,
요소를 사용하여 웹페이지의 본문을 표시합니다. table> 요소를 추가하여 테이블 등을 표시합니다. 요소에 콘텐츠를 채워서 특정 스타일의 노드를 작성합니다. 이 모든 HTML 노드는 웹 페이지의 콘텐츠를 구성합니다. 대부분의 태그에는 기본 스타일이 있습니다. 기본 스타일이 만족스럽지 않으면 CSS 파일에서 수정할 수도 있습니다. </p>
<p> 콘텐츠와 프리젠테이션의 분리를 완료한 후 웹페이지의 동작을 설명해야 합니다. 정적 페이지의 한 가지 문제점은 웹 페이지의 콘텐츠가 생성된 후에 변경되지 않는다는 것입니다. 웹을 탐색할 때 웨이보에 로그인해야 하고, 웹 게임을 할 때 캐릭터의 동작을 제어해야 합니다. </p>
<p> JavaScript는 C/C++/JAVA와 같은 데이터 유형에 대한 엄격한 규정이 없으며 포인터, 연산자 오버로딩 등도 없습니다. 그러고보니 이름이 참 헷갈리네요. 이름에 자바가 들어가 있는데 다들 자바와는 아무 상관이 없다고 하네요. 이는 '내 이름은 판금련'이라는 영화를 만들면서 판금련과 아무 관련이 없다고 말하는 것과 같습니다. (웃음) 농담이에요. 그러나 비교해 보면 JavaScript와 Java의 구문은 많은 유사점이 있지만 JavaScript는 Java보다 훨씬 간단합니다. Java와 달리 JS는 다양한 구성 요소와 프레임워크를 갖춘 플랫폼 언어입니다. JS는 웹과 밀접하게 연결되어 있습니다. JS는 HTML에 삽입하여 실행되며, JavaScript를 통해 HTML 출력 작성, 이벤트 반응, HTML 콘텐츠, 이미지, 스타일 변경, 입력 확인 및 기타 기능을 수행할 수 있습니다. 기본적으로 웹페이지의 모든 상호작용은 JS 함수를 통해 구현됩니다. 이 부분이 삼총사에서 가장 어려운 부분이기도 한데, 지금은 어느 정도 마스터할 수 있을 뿐입니다. 이후 기사는 특정 지식 포인트에 대해 확장될 것입니다. S JS 파일과 CSS 파일은 최종적으로 HTML에 적용됩니다. HTML에서는 <head> 또는 <body>에 배치할 수 있는 <script> 요소를 통해 JS 코드를 삽입할 수 있습니다. 또는 외부에서 JS 파일을 작성하고 HTML에서 참조할 수 있습니다. CSS 코드는 약간 다릅니다. <style> 요소를 통해 <head> 또는 외부에서 CSS 파일을 작성하고 HTML에서 참조합니다. 인라인 스타일이라고 하는 CSS 스타일을 요소에 직접 지정할 수도 있습니다. </p>
<p> 이 마지막 부분을 통해 이 세 부분의 관계를 요약해 볼 수 있습니다. HTML은 집의 기초와 같고 CSS와 JS는 이 세 부분이 함께 아름다운 집을 형성합니다. 그것들을 분리해서 어떤 부분은 집이라고 말할 수는 없습니다. 오직 세 부분만이 함께 모여서 아름다운 집을 이룰 수 있습니다. </p>
<p>위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다. </p>
<p>관련 기사: </p>
<p><a href="http://www.php.cn/js-tutorial-391103.html" target="_blank">p5.js 피타고라스 트리 구현 code_javascript 기술</a><br></p>
<p><a href="http://www.php.cn/js-tutorial-391064.html" target="_blank">js_javascript 기술에 따른 저장소 키-값 쌍 소개 및 주의 사항</a><br></p>
<p><a href="http://www.php.cn/js-tutorial-391076.html" target="_blank">javascript 심층 js 클로저 이해</a> <br></p><p>위 내용은 HTML+CSS+JS에 대해 이야기하기(자세한 설명)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="JS 코드를 최적화하는 방법 정보(그래픽 튜토리얼)" href="https://m.php.cn/ko/faq/396812.html">JS 코드를 최적화하는 방법 정보(그래픽 튜토리얼)</a></span><span>다음 기사：<a class="dBlack" title="JS 코드를 최적화하는 방법 정보(그래픽 튜토리얼)" href="https://m.php.cn/ko/faq/396816.html">JS 코드를 최적화하는 방법 정보(그래픽 튜토리얼)</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="https://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ko/faq/1609.html" title="Bootstrap 목록 그룹 구성 요소에 대한 심층 분석" class="aBlack">Bootstrap 목록 그룹 구성 요소에 대한 심층 분석</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/1640.html" title="JavaScript 함수 커링에 대한 자세한 설명" class="aBlack">JavaScript 함수 커링에 대한 자세한 설명</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/1949.html" title="JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)" class="aBlack">JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/2248.html" title="Angularjs는 WeChat UI(weui)를 통합합니다." class="aBlack">Angularjs는 WeChat UI(weui)를 통합합니다.</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/2351.html" title="JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술" class="aBlack">JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p></div><div class="footermid"><a href="https://m.php.cn/ko/about/us.html">회사 소개</a><a href="https://m.php.cn/ko/about/disclaimer.html">부인 성명</a><a href="https://m.php.cn/ko/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>
