Web/Web Building 검색 결과

10개 발견
  1. 미리보기
    2015.11.24 - Palpit

    [Web Building] 한국 웹 브라우저 점유율

  2. 미리보기
    2015.06.12 - Palpit

    [Web Building] 9. Web DaaS - 웹 페이지 제작 강좌

  3. 미리보기
    2015.06.12 - Palpit

    [Web Building] 8. Web AppML - 웹 페이지 제작 강좌

  4. 미리보기
    2015.06.12 - Palpit

    [Web Building] 7. Web Http - 웹 페이지 제작 강좌

  5. 미리보기
    2015.06.12 - Palpit

    [Web Building] 6. Web Navigation - 웹 페이지 제작 강좌

  6. 미리보기
    2015.06.12 - Palpit

    [Web Building] 5. Web Data Page - 웹 페이지 제작 강좌

  7. 미리보기
    2015.06.12 - Palpit

    [Web Building] 4. Web JavaScript - 웹 페이지 제작 강좌

  8. 미리보기
    2015.06.12 - Palpit

    [Web Building] 3. Web CSS - 웹 페이지 제작 강좌

조회수 확인


먼저 한국의 점유율 입니다...



... 밖에 할말이 없네요.. 아직 IE 라는 점이



그나마 비교적 소폭 상승중인 크롬입니다.




아직까지 정부 기관 웹이나 여러 Active X 간지 때문인지라 IE의 의존도가 높습니다. 심지어 Windows 10 으로 올라가며 


Edge에 대한 대응책도 주어지지 않은 현상황입니다.



Active X 무슨 세제도 아니고...




국내에 경우에는 아마 Naver 또한 검색 조건에 있다면 아마 상당수로 선점했으리라 생각합니다.




만능 Naver로 웹툰부터 쇼핑, 동영상 시청까지 다 하는 상황이니...





 



 

Source: StatCounter Global Stats - Browser Market Share











네. 다음은 우리 윗동네 북쪽 친구들을 살펴보죠.


북쪽 친구들은 크롬과 파폭이 선점을 했습니다.



네. 그렇네요.





 

Source: StatCounter Global Stats - Browser Market Share






















다음은 세계적인 추이를 보도록 하겠습니다.




전 세계적으로는 크롬이 1위를 차지했고,



2위로는 Safari 입니다. 



사파리가 2위인 이유는 전 세계로 따지면 앱등이가 부지기수로 드로이덜보단 많다는 거죠.



또한, 드로이덜이 순정 웹 브라우저를 쓰는 경향보다 크롬을 쓰는 경향이 크기에 1위를 차지하는 데 한목했겠죠.






Source: StatCounter Global Stats - Browser Market Share
























다른 카테고리의 글 목록

Web/Web Building 카테고리의 포스트를 톺아봅니다
조회수 확인


 

Web Building - Data as a Service (DaaS)


1. What We Will Do

 이번 장에서:
 - SQL이 구동중인 웹 서버로 부터 유동적인 데이터 인출을 합니다.


2. Using a PHP Server Running MySQL

 customers.html을 수정합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8"/>
  <title>Customers</title>
  <link href="site.css" rel="stylesheet">
</head>
 
<body>
 
<nav id="nav01"></nav>
 
<div id="main">
  <h1>Customers</h1>
  <div id="id01"></div>
  <footer id="foot01"></footer>
</div>
 
<script src="script.js"></script>
 
<script>
var xmlhttp = new XMLHttpRequest();
 
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
 
function myFunction(response) {
    var obj = JSON.parse(response);
    var arr = obj.records;
    var i;
    var out = "<table><tr><th>Name</th><th>City</th><th>Country</th></tr>";
    for(i = 0; i < arr.length; i++) {
        out += "<tr><td>" + 
        arr[i].Name +
        "</td><td>" +
        arr[i].City +
        "</td><td>" +
        arr[i].Country +
        "</td></tr>";
    }
    out += "</table>"
    document.getElementById("id01").innerHTML = out;
}
</script>
 
</body>
</html>
cs

 



 이번 장은 JSON 장과 마찬가지 입니다.


 그러나 이번 장에 쓰인 php는 "live"한 데이터베이스로부터 데이터를 인출한 것 입니다.


 



3. Using an ASP.NET Server Running SQL Server

 customers.html을 수정합니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8"/>
  <title>Customers</title>
  <link href="site.css" rel="stylesheet">
</head>
 
<body>
 
<nav id="nav01"></nav>
 
<div id="main">
  <h1>Customers</h1>
  <div id="id01"></div>
  <footer id="foot01"></footer>
</div>
 
<script src="script.js"></script>
 
<script>
var xmlhttp = new XMLHttpRequest();
 
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
 
function myFunction(response) {
    var obj = JSON.parse(response);
    var arr = obj.records;
    var i;
    var out = "<table><tr><th>Name</th><th>City</th><th>Country</th></tr>";
    for(i = 0; i < arr.length; i++) {
        out += "<tr><td>" + 
        arr[i].Name +
        "</td><td>" +
        arr[i].City +
        "</td><td>" +
        arr[i].Country +
        "</td></tr>";
    }
    out += "</table>"
    document.getElementById("id01").innerHTML = out;
}
</script>
 
</body>
</html>
cs
 

 위의 PHP와 결과는 같지만, asp를 이용하여 인출하였습니다.



* W3School을 통해 제작된 강좌입니다.




다른 카테고리의 글 목록

Web/Web Building 카테고리의 포스트를 톺아봅니다
조회수 확인


 

Web Building - AppML



1. What We Will Do

 이번 장에서:
 - AppML을 이용한 인출(fetch)과 웹 사이트에 데이터 표시하기 입니다.

 customers.html에 아래 코드를 입력해주세요:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Customers</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
 
<nav id="nav01"></nav>
 
<div id="main">
<h1>Customers</h1>
  <tr>
    <th>Name</th>
    <th>City</th>
    <th>Country</th>
  </tr>
  <tr appml-repeat="records">
    <td>{{Name}}</td>
    <td>{{City}}</td>
    <td>{{Country}}</td>
    </tr>
</table>
<footer id="foot01"></footer>
</div>
 
<script src="script.js"></script>
 
</body>
</html>
 
cs

 





 


* W3School을 통해 제작된 강좌입니다.




다른 카테고리의 글 목록

Web/Web Building 카테고리의 포스트를 톺아봅니다
조회수 확인


 

Web Building - Fetching Data with Http



1. What We Will Do

 이번 장에서:
 - Http를 이용한 서버로부터의 데이터 인출(fetch)을 해보겠습니다.


2. The Data

 아래 주소에서 PHP server에 의한 데이터가 제공됩니다.


 * 파일은 JSON 형식입니다.


3. Change the Customers Page to use Http

 demoweb 폴더에서, customers.html을 수정합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Customers</title>
  <link href="site.css" rel="stylesheet">
</head>
<body>
 
<nav id="nav01"></nav>
 
<div id="main">
  <h1>Customers</h1>
  <div id="id01"></div>
  <footer id="foot01"></footer>
</div>
 
<script src="script.js"></script>
 
<script>
var xmlhttp = new XMLHttpRequest();
 
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
 
function myFunction(response) {
    var obj = JSON.parse(response);
    var arr = obj.records;
    var i;
    var out = "<table><tr><th>Name</th><th>City</th><th>Country</th></tr>";
 
    for(i = 0; i < arr.length; i++) {
        out += "<tr><td>" + 
        arr[i].Name +
        "</td><td>" +
        arr[i].City +
        "</td><td>" +
        arr[i].Country +
        "</td></tr>";
    }
 
    out += "</table>"
    document.getElementById("id01").innerHTML = out;
}
</script>
 
</body>
</html>
cs






위 예제는 데이터가 포함된 주소에서 데이터를 Http 형식으로 받아와 가공하여 이전의 데이터 페이지와 같이 출력해주는 예제입니다.


* W3School을 통해 제작된 강좌입니다.


다른 카테고리의 글 목록

Web/Web Building 카테고리의 포스트를 톺아봅니다
조회수 확인


Web Building - Adding Navigation


1. What We Will Do

 이번 장에서:
 - 네비게이션 메뉴를 추가합니다.


2. Add a Navigation Menu

 demoweb 폴더에, script.js 파일을 수정합니다.

 
1
2
3
4
5
6
document.getElementById("nav01").innerHTML =
"<ul id='menu'>" +
"<li><a href='index.html'>Home</a></li>" +
"<li><a href='customers.html'>Data</a></li>" +
"<li><a href='about.html'>About</a></li>" +
"</ul>";
cs



3. Edit The Style Sheet

 demoweb 폴더에, site.css 파일을 수정합니다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
body {
    font-family: "Trebuchet MS", Verdana, sans-serif;
    font-size: 16px;
    background-color: dimgrey; 
    color: #696969;
    padding: 3px;
}
#main {
    padding: 5px;
    padding-left:  15px;
    padding-right: 15px;
    background-color: #ffffff;
    border-radius: 0 0 5px 5px;
}
h1 {
    font-family: Georgia, serif;
    border-bottom: 3px solid #cc9900;
    color: #996600;
    font-size: 30px;
}
ul#menu {
    padding: 0;
    margin-bottom: 11px;
}
ul#menu li {
    display: inline;
    margin-right: 3px;
}
ul#menu li a {
    background-color: #ffffff;
    padding: 10px 20px;
    text-decoration: none;
    color: #696969;
    border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
    color: white;
    background-color: black;
}
cs


4. Edit the Home Page

 demoweb 폴더에, index.html 파일을 수정합니다. 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
 
<html>
<head>
<title>Our Company</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
 
<nav id="nav01"></nav>
 
<div id="main">
  <h1>Welcome to Our Company</h1
  <h2>Web Site Main Ingredients:</h2>
 
  <p>Pages (HTML)</p>
  <p>Style Sheets (CSS)</p>
  <p>Computer Code (JavaScript)</p>
  <p>Live Data (Files and Databases)</p>
 
  <footer id="foot01"></footer>
</div>
 
<script src="script.js"></script>
 
</body>
</html>
cs

 








5. Edit All Pages

 나머지 customers.html과 about.html에도 네비게이션을 추가해줍니다.


about.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
  <title>About</title>
  <link href="site.css" rel="stylesheet">
</head>
 
<body>
 
<nav id="nav01"></nav>
 
<div id="main">
  <h1>About Us</h1>
  <p>Lorem Ipsum Porem Lorem Ipsum Porem</p>
  <footer id="foot01"></footer>
</div>
 
<script src="script.js"></script>
 
</body>
</html>
cs



customers.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
 
    <head>
      <meta charset="utf-8"/>
      <title>Customers</title>
      <link href="site.css" rel="stylesheet">
    </head>
 
    <body>
        
        <nav id="nav01"></nav>
 
        <div id="main">
        <h1>Customers</h1>
 
        <table>
        <tr>
          <th>Name</th>
          <th>City</th>
          <th>Country</th>
        </tr>
        <tr>
          <td>Alfreds Futterkiste</td>
          <td>Berlin</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>Berglunds snabbkop</td>
          <td>Lulea</td>
          <td>Sweden</td>
        </tr>
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Mexico D.F.</td>
          <td>Mexico</td>
        </tr>
        <tr>
          <td>Ernst Handel</td>
          <td>Graz</td>
          <td>Austria</td>
        </tr>
        <tr>
          <td>FISSA Fabrica Inter. Salchichas S.A.</td>
          <td>Madrid</td>
          <td>Spain</td>
        </tr>
        <tr>
          <td>Galeria del gastronomo</td>
          <td>Barcelona</td>
          <td>Spain</td>
        </tr>
        <tr>
          <td>Island Trading</td>
          <td>Cowes</td>
          <td>UK</td>
        </tr>
        <tr>
          <td>Koniglich Essen</td>
          <td>Brandenburg</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>Laughing Bacchus Wine Cellars</td>
          <td>Vancouver</td>
          <td>Canada</td>
        </tr>
        <tr>
          <td>Magazzini Alimentari Riuniti</td>
          <td>Bergamo</td>
          <td>Italy</td>
        </tr>
        <tr>
          <td>North/South</td>
          <td>London</td>
          <td>UK</td>
        </tr>
        <tr>
          <td>Paris specialites</td>
          <td>Paris</td>
          <td>France</td>
        </tr>
        <tr>
          <td>Rattlesnake Canyon Grocery</td>
          <td>Albuquerque</td>
          <td>USA</td>
        </tr>
        <tr>
          <td>Simons bistro</td>
          <td>København</td>
          <td>Denmark</td>
        </tr>
        <tr>
          <td>The Big Cheese</td>
          <td>Portland</td>
          <td>USA</td>
          </tr>
        <tr>
          <td>Vaffeljernet</td>
          <td>Arhus</td>
          <td>Denmark</td>
        </tr>
        <tr>
          <td>Wolski Zajazd</td>
          <td>Warszawa</td>
          <td>Poland</td>
        </tr>
        </table>
 
        <footer id="foot01"></footer>
        </div>
 
        <script src="script.js"></script>
 
    </body>
</html>
cs




* W3School을 통해 제작된 강좌입니다.


다른 카테고리의 글 목록

Web/Web Building 카테고리의 포스트를 톺아봅니다
조회수 확인


 

Web Building - Adding a Data Page


1. What We Will Do

 이번 장에서:
 - 웹 사이트에 데이터 페이지를 추가합니다.


2. Edit The Style Sheet

 demoweb 폴더에, site.css 스타일 시트를 수정합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
table {
    width:100%;
}
table, th , td {
    border: 1px solid grey;
    border-collapse: collapse;
    padding: 5px;
}
th {
    text-align: left; 
}
table tr:nth-child(odd) {
    background-color: #f1f1f1;
}
table tr:nth-child(even) {
    background-color: #ffffff;
}
cs
 


3. Create a Data Page

 demoweb 폴더에, customers.html을 생성합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>
 
    <head>
      <meta charset="utf-8"/>
      <title>Customers</title>
      <link href="site.css" rel="stylesheet">
    </head>
 
    <body>
 
        <div id="main">
        <h1>Customers</h1>
 
        <table>
        <tr>
          <th>Name</th>
          <th>City</th>
          <th>Country</th>
        </tr>
        <tr>
          <td>Alfreds Futterkiste</td>
          <td>Berlin</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>Berglunds snabbkop</td>
          <td>Lulea</td>
          <td>Sweden</td>
        </tr>
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Mexico D.F.</td>
          <td>Mexico</td>
        </tr>
        <tr>
          <td>Ernst Handel</td>
          <td>Graz</td>
          <td>Austria</td>
        </tr>
        <tr>
          <td>FISSA Fabrica Inter. Salchichas S.A.</td>
          <td>Madrid</td>
          <td>Spain</td>
        </tr>
        <tr>
          <td>Galeria del gastronomo</td>
          <td>Barcelona</td>
          <td>Spain</td>
        </tr>
        <tr>
          <td>Island Trading</td>
          <td>Cowes</td>
          <td>UK</td>
        </tr>
        <tr>
          <td>Koniglich Essen</td>
          <td>Brandenburg</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>Laughing Bacchus Wine Cellars</td>
          <td>Vancouver</td>
          <td>Canada</td>
        </tr>
        <tr>
          <td>Magazzini Alimentari Riuniti</td>
          <td>Bergamo</td>
          <td>Italy</td>
        </tr>
        <tr>
          <td>North/South</td>
          <td>London</td>
          <td>UK</td>
        </tr>
        <tr>
          <td>Paris specialites</td>
          <td>Paris</td>
          <td>France</td>
        </tr>
        <tr>
          <td>Rattlesnake Canyon Grocery</td>
          <td>Albuquerque</td>
          <td>USA</td>
        </tr>
        <tr>
          <td>Simons bistro</td>
          <td>København</td>
          <td>Denmark</td>
        </tr>
        <tr>
          <td>The Big Cheese</td>
          <td>Portland</td>
          <td>USA</td>
          </tr>
        <tr>
          <td>Vaffeljernet</td>
          <td>Arhus</td>
          <td>Denmark</td>
        </tr>
        <tr>
          <td>Wolski Zajazd</td>
          <td>Warszawa</td>
          <td>Poland</td>
        </tr>
        </table>
 
        <footer id="foot01"></footer>
        </div>
 
        <script src="script.js"></script>
 
    </body>
</html>
cs

 




 



* W3School을 통해 제작된 강좌입니다.


다른 카테고리의 글 목록

Web/Web Building 카테고리의 포스트를 톺아봅니다
조회수 확인


 

Web Building - Adding Code (JavaScript)



1. What We Will Do

 이번 장에서:
 - 몇몇 계산 코드를 생성합니다.(JavaScript)
 - 페이지에 script link를 추가합니다.


2. Create JavaScript

 demoweb 폴더에, script.js 이름의 파일을 생성합니다.

 아래 코드를 파일에 입력합니다:

1
2
document.getElementById("foot01").innerHTML =
"<p>&copy;  " + new Date().getFullYear() + " W3Schools. All rights reserved.</p>";
cs
 


3. Edit the Home Page

 demoweb 폴더에, index.html을 수정합니다.

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
 
<head>
  <title>Our Company</title>
  <link href="site.css" rel="stylesheet">
</head>
 
<body>
 
<div id="main">
  <h1>Welcome to Our Company</h1
  <h2>Web Site Main Ingredients:</h2>
 
  <p>Pages (HTML)</p>
  <p>Style Sheets (CSS)</p>
  <p>Computer Code (JavaScript)</p>
  <p>Live Data (Files and Databases)</p>
  <footer id="foot01"></footer>
</div>
 
<script src="script.js"></script>
 
</body>
</html>
cs


 맨 밑에 footer를 script.js를 통해 작성되어 페이지에 표시된 것이 보일 것입니다.




 


4. Edit the About Page

 작업을 완료하기 위해, about.html에도 똑같은 변화를 줍니다.

 1. <footer> 요소를 추가

 2. script를 포함


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
  <title>About</title>
  <link href="site.css" rel="stylesheet">
</head>
 
<body>
 
<div id="main">
  <h1>About Us</h1>
  <p>Lorem Ipsum Porem Lorem Ipsum Porem</p>
  <footer id="foot01"></footer>
</div>
 
<script src="script.js"></script>
 
</body>
</html>
cs
 



 






 

 

 

* W3School을 통해 제작된 강좌입니다.

다른 카테고리의 글 목록

Web/Web Building 카테고리의 포스트를 톺아봅니다
조회수 확인

Web Building - Adding Style (CSS)



1. What We Will Do

 이번 장에서는:
 - 사이트를 위한 CSS 스타일 시트를 생성합니다.
 - 페이지의 스타일 시트 링크를 추가합니다.


2. Create a CSS Style Sheet

 demoweb 폴더에, site.css라는 이름의 파일을 생성합니다.

 CSS 파일에 아래 코드를 입력하세요:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
body {
    font-family: "Trebuchet MS", Verdana, sans-serif;
    font-size: 16px;
    background-color: dimgrey; 
    color: #696969;
    padding: 3px;
}
#main {
    padding: 5px;
    padding-left:  15px;
    padding-right: 15px;
    background-color: #ffffff;
    border-radius: 0 0 5px 5px;
}
h1 {
    font-family: Georgia, serif;
    border-bottom: 3px solid #cc9900;
    color: #996600;
    font-size: 30px;
}
cs

 

 



3. Edit the Home Page

 demoweb 폴더에서, index.html을 수정합니다.
 
 아래 내용처럼 수정해주세요.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
 
<head>
  <title>Our Company</title>
  <link href="site.css" rel="stylesheet">
</head>
 
<body>
 
  <div id="main">
  <h1>Welcome to Our Company</h1
  <h2>Web Site Main Ingredients</h2>
 
  <p>Pages (HTML)</p>
  <p>Style Sheets (CSS)</p>
  <p>Computer Code (JavaScript)</p>
  <p>Live Data (Files and Databases)</p>
  </div>
 
</body>
</html>
cs
 

 위 홈 페이지는 이전 장의 홈 페이지에서의 복사 본입니다.

 스타일 시트를 링크 태그로 추가했고, <div id="main"> 요소를 통해 내용의 "섹션"을 정의 했습니다.




 



4. Edit the About Page

 작업을 완료하기 위해, about.html에도 똑같은 변화를 줍니다.

 1. 스타일 시트 link를 추가

 2. <div id="main"> 요소를 추가


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
  <title>About</title>
  <link href="site.css" rel="stylesheet">
</head>
 
<body>
 
  <div id="main">
  <h1>About Us</h1>
  <p>Lorem Ipsum Porem Lorem Ipsum Porem</p>
  </div>
 
</body>
</html>
cs

 


 

 





* W3School을 통해 제작된 강좌입니다.

다른 카테고리의 글 목록

Web/Web Building 카테고리의 포스트를 톺아봅니다