Bash에서 웹 서버 구축, 그랜드 피날레
15566 단어 htmljavasccriptcsswebdev
이제 이 가이드를 끝내고 더 많은 HTML, 스타일링 CSS 및 최신 Javascript를 사용한 동적 동작으로 웹 서버를 개선해 보겠습니다.
CSS가 무엇인가요?
CSS은 주로 HTML 문서의 표시를 설명하는 데 사용되는 스타일시트 언어입니다. 즉, 스타일을 부여하고 HTML 요소를 더 예쁘게 만듭니다.
자바스크립트는 어떻습니까?
Javascript은 세계에서 가장 널리 사용되는 프로그래밍 언어입니다.
Web foundation은 HTML 페이지가 단순한 정적인 프리티 요소를 넘어서 다른 요소와 동적으로 상호 작용하거나 심지어 다른 사이트 및 페이지와 상호 작용할 수 있다고 결정했습니다. 이것이 정적 HTML 페이지에 동작을 가져오기 위해 Javascript가 처음 만들어진 이유입니다.
스타일 추가
현재
login.html는 다음과 같습니다.<form method="POST" action="/login">
<input type="text" name="name" />
<input type="submit" value="Login" />
</form>
정적인 형태일 뿐입니다. 중앙에 배치하고 더 둥글게 만들어 테두리를 개선할 수 있습니다.
CSS가 구출됩니다.
<style> HTML 태그 안에 CSS 구문을 추가하기만 하면 웹 브라우저가 올바른 렌더링을 수행합니다. <head> 섹션에서 HTML 본문 앞에 배치하는 것이 좋습니다. 브라우저에는 본문 렌더링 시 스타일이 이미 로드되어 있기 때문입니다.<html>
<head>
<style>
section {
display: inline-block;
margin-left: 40%;
margin-top: 10%;
}
input[name="name"] {
height: 30px;
margin-top: 20%;
border: 1px solid #999;
border-radius: 4px;
}
</style>
</head>
<body>
<section>
<form method="POST" action="/login">
<input type="text" name="name" />
<input type="submit" value="Login" />
</form>
</section>
</body>
</html>
이제
home.html에 대해 동일한 작업을 수행해 보겠습니다.<html>
<head>
<style>
section {
display: inline-block;
margin-left: 40%;
margin-top: 10%;
}
</style>
</head>
<body>
<section>
<p>Hello, {{name}}</p>
<form method="POST" action="/logout">
<input type="submit" value="Logout" />
</form>
</section>
</body>
</html>
놀라운! 우리의 웹 앱이 더 좋아지고 있습니다!
일부 동적 동작 추가
사용자가 "파란색 테마"또는 "검은색 테마"로 변경할 수 있는 홈 페이지(로그인 후)에 대한 링크를 추가한다고 가정해 보겠습니다. 이 같은:
먼저 링크를 추가해야 합니다.
<section>
<p>Hello, {{name}}</p>
<form method="POST" action="/logout">
<input type="submit" value="Logout" />
</form>
<a href="javascript:void(0)">Blue theme</a>
</section>
href="javascript:void(0)"는 이 링크에서 HTTP 요청이 비활성화됨을 의미합니다. Javascript에서 동적 요소로 사용할 것이기 때문입니다.HTML 문서에 Javascript를 어떻게 추가합니까? 간단히 말해서 HTML 태그
<script> 안에 있습니다. HTML 본문 태그 뒤에 배치하는 것이 좋습니다. 왜냐하면 어떤 이유로 스크립트에 버그 또는 유사한 것이 있으면 깨진 Javascript 코드(웹 루트 101, 들여다보기)가 있는 경우에도 페이지가 사용자에게 올바르게 렌더링되기 때문입니다.<script>
let themeElem = document.querySelector('a');
let nameElem = document.querySelector('section > p');
themeElem.addEventListener('click', function(evt) {
if (nameElem.style.color == 'blue') {
nameElem.style.color = 'black';
themeElem.text = 'Blue theme';
} else {
nameElem.style.color = 'blue';
themeElem.text = 'Black theme';
}
})
</script>
조금 설명하자면:
p 및 a 요소와 상호 작용할 것이기 때문에 쿼리합니다a 요소에 이벤트 리스너를 추가합니다. 리스너는 클릭을 기다립니다초보자 또는 숙련된 개발자라면 Javascript documentation 을(를) 탐색하고 파헤쳐 볼 것을 진심으로 권장합니다. 매우 풍부하고 잘 작성되었으며 때때로 우리가 인식하지 못하는 개선 사항으로 가득 차 있습니다.
이제
home.html 페이지의 전체 버전을 살펴보겠습니다.<html>
<head>
<style>
section {
display: inline-block;
margin-left: 40%;
margin-top: 10%;
}
section p {
color: black;
}
</style>
</head>
<body>
<section>
<p>Hello, {{name}}</p>
<form method="POST" action="/logout">
<input type="submit" value="Logout" />
</form>
<a href="javascript:void(0)">Blue theme</a>
</section>
</body>
<footer>
<script>
let themeElem = document.querySelector('a');
let nameElem = document.querySelector('section > p');
themeElem.addEventListener('click', function(evt) {
if (nameElem.style.color == 'blue') {
nameElem.style.color = 'black';
themeElem.text = 'Blue theme';
} else {
nameElem.style.color = 'blue';
themeElem.text = 'Black theme';
}
})
</script>
</footer>
</html>
결론
정말 멋진 여행이었습니다. 이 글은 가이드의 마지막 글입니다. 앞으로 글이 있을지는 모르겠지만 사실이라면 여기에 더 많은 내용을 작성하고 가이드에 추가하겠습니다.
나는 당신이 가이드를 즐겼기를 바랍니다. 여기에 작성된 모든 코드는 this gist에서 공유됩니다.
에서 저를 소리쳐 주세요.
Reference
이 문제에 관하여(Bash에서 웹 서버 구축, 그랜드 피날레), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/leandronsp/building-a-web-server-in-bash-the-grand-finale-n14텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
