1. HTML 편집기
Bluefish나 w3school에서 제공하는 tryit editor등이 존재하기도 하지만 이번에는 윈도우 내에 존재하는 메모장을 활용해서 HTML을 연습해 볼 수 있는 방법이 있다.
- 1. 메모장을 열고
2. HTML을 작성한다
3. 확장자를 .html 또는 .htm으로 저장한다
4. 저장한 메모파일을 '연결 프로그램'에서 원하는 브라우저로 열기
매우 별것 아닌 기초적인 방법일 수 있으나 나는 잘 몰랐기에 정리해 두면 좋을 것 같아서.
2. HTML 기초
- <html>...</html> 안에 <body>...</body>가 존재하고
- 또 그 <body> 안에 headings가 존재한다. 가장 중요한 헤딩부터 가장 덜 중요한 헤딩까지 <h1>...</h1>부터 <h6>...</h6>로 표시할 수 있다.
- 문단은 paragraph의 <p>...</p>로 표시한다.
- 링크를 표시하고 싶을 때는 <a>...</a>를 사용하는데, 링크 주소를 첨가할 때는 href="http://..."를 추가해야 한다. 다시 정리하면 <a href="http:// ... ">...</a>
- 이미지를 삽입하고 싶을 때는 <img>태그를 사용한다. 이미지의 주소를 표기할 때는 src="..." (source file), alt="..." (alternative text), width="..." (너비), height="..." (높이). 다시 정리하면 <img src="..." alt="..." width="..." height="...">
이미지 주소는 .jpg와 같이 확장자 까지 함께 표시한다.
- 버튼을 삽입하고 싶을 때는 <button>...</button>태그를 사용한다. ...에 해당하는 건 버튼 안에 표시되면 좋을 단어를 쓰면 된다.
- 리스트를 만들고 싶을 때는 정렬되지 않은 리스트(unordered/bullet list)인 <ul>...</ul>를 사용하는데 각각의 항목은 <li>...</li>를 사용한다. 또한 정렬된 리스트(ordered/numbered list)는 <ol>...</ol>을 사용하고 역시 각각의 항목은 <li>...</ll>를 사용한다. 정렬되지 않은 리스트는 또다른 이름인 bullet list처럼 점으로 표시되고, 정렬된 리스트는 숫자료 표시된다.
3. 연습
<html>
<body>
<h1> My first heading </h1>
<p> My first <br> paragraph </p>
</body>
</html>
<br>은 line break라고 해서 문장을 나누는 역할을 한다. closing tag는 붙이지 않아도 된다.
이 태그들을 작성하면 다음과 같이 화면에 표시된다.
My first heading
My first
paragraph
4. HTML 속성
속성(attribute)라고 하는 것은 요소에 대한 추가적인 정보를 제공한다.
- name="value" 형태로 항상 opening tag 안에 포함
- href 속성: <a>태그에 포함됨, <a href="http://www.google.com">...</a>
- src 속성: 이미지 속성, <img>태그에 포함됨, <img src="....jpg">
- height, width속성: 너비, 높이 속성 <img>태그에 포함됨, <img src="...jpg" height="50" width="50">
- alt 속성: 이미지에 따로 부여할 수 있는 이름, 시각장애인이 이미지 정보를 소리로 들을 수 있게 하는 데 도움, <img src="...jpg" alt="a girl with a brown jacket">
- style 속성: 색깔, 폰트, 사이즈 등을 지정, style="color:red" font="..." size="...", 포함시키고 싶은 opening tag 안에 포함
- lang 속성: 언어 속성, <html>안에 포함, <html lang="en-US">
- title 속성: <p>안에 포함, 마우스를 해당되는 문단에 올렸을 때 지정한 제목이 말풍선으로 뜸, <p title="I'm a tooltip">...</p>, <h1 title="I'm a tooltip">...</h1>
- 소문자로 작성할 것
- 큰따옴표 " " 잊지말기
- 속성 정리
+ 느낀점: 점점 태그가 많아질수록 다 외워야 하나 싶고 안외워지면 안될거 같고... 그러면 흥미가 떨어질 것 같고... 그래도 우선 쭉쭉 나가자. 블로그에 정리하면서 공부하면 정리를 하고 아카이브가 쌓이게 되서 좋기는 한데 정작 실전에 활용해야하는 연습에는 소홀해 지는 것 같기도 하다. 밸런스를 잊지 않도록!
'디지털 노마드를 꿈꾸며 > HTML' 카테고리의 다른 글
| HTML 색상, CSS (0) | 2020.03.16 |
|---|---|
| HTML 인용 요소, 코멘트, (0) | 2020.03.15 |
| HTML 스타일, 텍스트 형식 (0) | 2020.03.15 |
| HTML 헤딩, 헤드, 문단 (0) | 2020.03.14 |
| HTML을 위한 첫 걸음: 뜻, 요소, 태그, 웹 브라우저 (0) | 2020.03.13 |
댓글