HTML 은 가장 쉬운 언어 중 하나로, 웹페이지를 만드는데 주로 사용되는 언어이다.
<이 포스팅에서 다루고 있는 내용>
- 태그
- 하이퍼텍스트와 속성
- 태그의 중첩과 목록
- html 문서의 구조
1. 태그
: HTML 에서 가장 기본적인 문법이라고 할 수 있다.
+)html 파일 만들어서 저장할 때
파일 확장자명 : 파일이름.html 이라고 저장하면 된다.
인코딩 형식: UTF-8 로 하여 저장한다.
: html 문서에서 <>(태그)를 집어 넣으면 그에 맞는 명령을 실행하게 된다.
1) strong : 특정 문자 강조 표시
2) 제목 표시:
1. 큰제목: <h1> </h1>
2. 중간 제목: <h2> </h2>
2. Hypertext(링크) / 속성
: 문서의 특정 부분을 클릭하면 링크된 웹페이지로 이동되도록 만들어 보자.
- <a> ~</a> : 어떤 부분이 링크라는 것을 알려주는 태그이다.
:그 링크로 이동해주기 위해서는 웹페이지에게 필요한 정보를 제공해주어야 한다.
<필요한 두가지 정보>
1) href : hypertext reference의 약자로, 연결할 주소를 지정하는 속성이다.
<a href="http://mslilsunshine.tistory.com">+) 따옴표를 빼먹으면 정상적으로 나오지 않는다.
2) target 속성
: 링크를 클릭 할 때 창을 어떻게 열지 결정한다.
1. _self: 연결 문서를 클릭한 창에서 연다 (기본값)
2. _blank: 연결 문서를 새 창에서 연다
3. _top: 가장 상위 창에서 연다
4. frame name: 지정된 프라임 안에서 연다.
<a href="http://mslilsunshine.tistory.com" target="_blank"></a>
# 실제로 만들어 보았을때
: "walt disney" 부분에 링크가 걸린 것을 확인할 수 있다.
+) 링크된 내용에 설명을 추가하고 싶을때
: title 태그를 사용하자.
<h1>famous quotes</h1>
"The way to get started is to <strong>quit talking and begin doing.</strong>" -(
<a href="https://ko.wikipedia.org/wiki/%EC%9B%94%ED%8A%B8_%EB%94%94%EC%A6%88%EB%8B%88"
target="_blank" title="월트 디즈니" >Walt Disney</a>)-
: 링크에 마우스를 갖다대었을때 해당 링크에 대한 설명을 확인해볼수 있다.
3. 태그의 중첩과 list
1. <li> ~ </li>
: 리스트를 만드는 데 사용할 수 있다.
: 각각 목록의 내용을 시각적으로 구분되게 할 수 있다.
=> 그렇지만, li 태그 단독으로 사용되지는 않는다.
+) 브라우저는 줄바꿈을 무시한다.
2. <ul></ul> : 리스트들을 각각 다른 카테고리로 묶어주고 싶을때 (그룹핑)
ex) 영화이름과 각 영화에 출연한 배우를 따로 묶어주고 싶을 때
<li>movie category</li>
<ul>
<li>Inception</li>
<li>Usual suspect</li>
<li>Toy story 4</li>
</ul>
<li>actor category</li>
<ul>
<li>Leonardo Dicaprio</li>
<li>kevin spacey</li>
<li>Tom Hanks</li> //띄어쓰기를 통해 가독성을 높여 줄 수 있다.
</ul>
+) <ol>~</ol> 순서가 있는 리스트를 표현할 때 사용하게 된다.
: 리스트에 숫자가 붙는 것을 확인 할 수 있다.
4. Html 문서의 구조
: 위의 내용들을 종합해서 html 문서의 구조를 파악해보자.
- html 문서의 전체적인 구조
<!doctype html> : 자신이 작성한 코드가 어떤 형식의 코드인지 알려주는 태그
<html>
<head>~~~</head> :본문이 아닌 태그들. 문서 설명, 문서 제목<title>, 문자 방식<meta charset> 등을 포함한다.
<body>~~~</body> : 본문
</html>
# 직접 페이지 제작해보기
<Cinema.html>
<html>
<head>
<title>Ash's Cinema</title>
<meta charset="utf-8">
</head>
<body>
<h1>Welcome to the Cinema!</h1>
<li>Movie category</li>
<ol>
<li><a href="Inception.html">Inception</a></li>
<li>Avengers: Age of Ultron</li>
<li>Toy story 4</li>
</ol>
<li>Actor category</li>
<ul>
<li>Leonardo Dicaprio</li>
<li>Scarlet Johanson</li>
<li>Tom Hanks</li>
</ul>
<h2>This week's movies</h2>
This page is introducing about movies opening this week at Ash's cinema.
<h2>This week's popcorn </h2>
<ol>
<li>Onion Popcorn</li>
<li>Caramel Popcorn</li>
<li>Cheese Popcorn</li>
</ol>
</body>
</html>
<Inception.html>
<html>
<head>
<Title>inception</Title>
<meta charset="utf-8">
</head>
<body>
<h1>Inception</h1>
<h2>Starring</h2>
<li>Leonardo Dicaprio</li>
<li>Ellen Page</li>
<li>Tom Hardy</li>
<li>Marion Cotillard</li>
<h2>Plot</h2>
Dominick "Dom" Cobb and Arthur are "extractors": they perform corporate espionage using experimental military
technology to infiltrate the subconscious of their targets and extract valuable information
through a shared dream world.
</body>
</html>
※ 완성본
=> inception 링크를 클릭하면 소개 페이지로 넘어간다.
=> 혼자 나만의 웹페이지를 만들어 본것 같아서 상당히 재밌는 실습이었다.
좀더 정교한 웹페이지를 만들어 보기 위해 공부를 좀더 해볼것!
'Web > OpenTutorials' 카테고리의 다른 글
| JavaScript- (라이브러리~ 정규표현식) (0) | 2020.01.15 |
|---|---|
| Javascript - 함수~모듈 (0) | 2020.01.11 |
| JavaScript 기본 문법 정리 (0) | 2020.01.10 |
| HTML 주요 태그 정리 (0) | 2020.01.03 |
| PHP 언어 공부해봅시다 -1) (리눅스 환경 설정~배열) (0) | 2019.12.27 |