17장. 인터넷을 여는 열쇠: 서버와 클라이언트
- 웹 브라우저, 웹 서버가 필요하다.
- 웹 브라우저가 index.html이라는 정보를 요청하는 신호를 보내면, 웹 서버에서 index.html에 해당하는 파일을 찾아서 다시 웹 브라우저가 설치된 컴퓨터에 전송한다. 이 코드를 읽어 컴퓨터에서 해당하는 웹 페이지를 띄우게 된다.
- 요청 (request) 과 응답 (response)
이제부터는 웹 브라우저가 아닌, 웹 서버를 직접 컴퓨터에 설치해 보자.
18장. 웹 호스팅 : 깃허브 페이지
이 장에서는 웹 호스팅 사이트 깃허브를 이용한다.
GitHub: Let’s build from here
GitHub is where over 100 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and fea...
github.com
완성된 깃허브 페이지 링크 : https://01choco.github.io/WEB1/
index
01choco.github.io
<깃허브 페이지 만들기>
1. 깃허브에 접속 후 new repository 생성
2. 작업한 html 소스 업로드
3. settings -> pages에서 main /root를 선택하고 저장 -> 페이지가 생성됨
웹 호스팅 서비스를 이용하는 방법도 있다. 웹 사이트에 접속한 사용자 하나하나를 호스트라고 하며, 이 접속된 컴퓨터를 제공하는 사업을 호스팅 사업, 웹 서버 제공을 목적으로 한다면 웹 호스팅이라고 한다.
19장. 웹 서버 운영하기
이제는 내 컴퓨터에서 직접 서버를 운영해 보자.
이번 장에서는 아파치 (Apache) 를 사용한다. 19장에서는 아파치를 설치하였다.
https://www.apachelounge.com/download/
Apache VS17 binaries and modules download
www.apachelounge.com
위 사이트에서 필요한 파일을 다운로드 받는다.
이후 아래 링크를 참고하여 아파치를 설치하고, 만든 html 페이지를 띄우는 데 성공하였다.
https://mainia.tistory.com/5572
20장~22장. 수업을 마치며
<input type="checkbox">live server로 실행시켜 보았다.
<CSS>
1장. 수업 소개
CSS: 웹 페이지를 좀 더 아름다우면서 보기 좋은 형태로 만드는 방법과 관련된 언어.
HTML을 이용해 전자 문서를 만들 수 있는 것이라면 CSS를 이용하면 웹 페이지를 조금 더 보기 좋은 형태로 만들 수 있다.
2장. CSS의 등장 이전
이전에 사용했던 태그인 <font> 를 사용해 보자. (현재는 사용하지 않는 태그이다.)
<h1><a href="index.html"><font color="red">WEB</font></a></h1>
<ol>
<li><a href="1.html"><font color="red">HTML</font></a></li>
<li><a href="2.html"><font color="red">CSS</font></a></li>
<li><a href="3.html"><font color="red">Javascript</font></a></li>
</ol>
아래와 같이 폰트의 색이 빨간색으로 바뀐 것을 확인할 수 있다.
단, 이런 식으로 폰트의 색을 변화시킨다면, 추후 이 코드를 수정하거나 코드가 더 길어질 경우에는 너무 많은 작업을 거쳐야 하므로 비효율적이다.
3장. CSS의 등장
<head>
<title>index</title>
<meta charset="utf-8">
<style>
a{
color: red;
}
</style>
</head>위와 같은 코드를 추가하였다. <style> 태그 안에 있는 언어는 CSS로 해석해야 함을 의미한다. a 태그가 있는 모든 폰트의 색을 변경하기 위한 코드이다.
실행해보면 아래와 같은 결과를 볼 수 있다.
이를 통해 중복된 4개의 코드를 삭제할 수 있다. 이 코드가 훨씬 효율적이다.
04장. CSS의 기본 문법
1. style 태그 안에 넣기
<style>
a{
color: red;
}
</style>2. 속성으로 추가하기 : style
<li><a href="1.html" style="color:red">HTML</a></li>이렇게 css를 적용할 경우 이 부분만 색이 변하게 된다.
이번에는 밑줄을 없애 보자.
<style>
a{
color: red;
text-decoration: none;
}
</style>실행 결과는 아래와 같다.
05장. 혁명적 변화
06장. CSS 속성을 스스로 알아내기
효과 = 프로퍼티 (속성) 이므로 어떤 속성이 있는지를 스스로 알아보자.
1. 글자 크기
h1 {
font-size: 45px;
}
2. 텍스트 가운데 정렬
h1{
font-size: 45px;
text-align: center;
}
'생활코딩! HTML+CSS+자바스크립트' 카테고리의 다른 글
| WEB 6주차 (Javascript 16장~) (0) | 2023.09.10 |
|---|---|
| WEB 5주차 (Javascript 7~15장) (0) | 2023.09.03 |
| WEB 4주차 (Javascript 1~6장) (0) | 2023.08.26 |
| WEB 3주차 (CSS 7장~15장) (0) | 2023.08.20 |
| WEB 1주차 (HTML 1~16장) (0) | 2023.08.05 |