HTML (기초) 기본 구성 연습 1 (글자, 스타일)

<최종 화면>

우선 나는 D드라이브에 Web폴더를 만들었고, 그 하위 폴더에 Day01를 만들었다. 거기에 01_ex.html을 만들자.

코드를 작성하였다면 확인해보자. 크롬으로 열겠다.

<결과 화면>

만약 하나의 페이지에서 html 요소가 또 있다면 어떻게 될까? 해보자.

페이지가 열려 있다면, 새로고침으로 확인 가능하다. 작성한 파일을 저장(Ctrl+S)하고 웹페이지 새로고침(F5)하자.

title로 텝이름이 page1로 바뀌고 새로운 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

<!DOCTYPE html>
<html>
 
    <head>
        <title>page1</title>
        <!-- 스타일 적용하기 -->
        <style type="text/css">
            p{color: red}
        </style>
    </head>
 
    <body>
        <p>Hello world</p>
    </body>
 
</html>
 
<!-- 하나의 문서에 html 요소가 1개가 더 있다면?? -->
<html>
    <head>
        <!-- title은 첫번째 것만 적용됨 -->
        <title>page2</title>
        <!-- 스타일은 차례대로 실행되어 적용됨 -->
        <style type="text/css">
        p{color: blue;}
        </style>
    </head>
 
    <body>
        <p>Nice to meet you.</p>
    </body>
 
</html>
 
<!-- html요소 밖에 글씨를 작성해도 그냥 글씨라서 화면에 나옴.-->
Good job!!
 
<!-- html요소 밖에 있어도 태그문의 기본특성은 그대로 적용됨 -->
<h1>HTML</h1>

 

저작자표시

'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML' 카테고리의 다른 글

HTML (기초) 테이블 만들기 (0)	2019.12.03
HTML (기초) 리스트, 링크, 이미지 (0)	2019.12.03
HTML (기초) 기본 구성 연습 2 (요소 다루기 ) (0)	2019.12.03
Web - HTML 소개 및 사이트 소개 (0)	2019.12.03
Web 개발 환경 만들기( Visual Studio Code 다운로드) (0)	2019.12.02