코딩과 HTML
사람이 하는 일: 코드, 소스, 프로그래밍 언어
기계가 하는 일: 애플리케이션, 응용 프로그램, 앱, 웹페이지, 웹사이트(페이지가 모이면)
웹페이지를 만드는 언어는 HTML(HyperText Markup Language)
HTML 코딩과 실습 환경 준비
Atom 에디터 사용 (https://atom.io/)
바탕화면에 웹사이트 제작 프로젝트에 사용되는 파일들을 저장할 'web' 폴더 만들기
Add project folder를 이용해 폴더를 프로젝트 폴더로 추가하고 new file을 이용해서 html파일 만들기
브라우저를 열고 ctrl + o를 누르면 html파일을 열 수 있다.
기본문법과 태그
</strong>: 글자를 굵게 강조
</u>: 글자에 밑줄을 침
태그는 <> ... </>식으로 열리는 태그와 닫히는 태그를 사용해준다.
<h1>...<h6>: heading을 지정하는 태그
통계에 기반한 학습
- 전 세계에 있는 수 많은 웹페이지들 중 25~26개의 태그로 구성되어 있는 웹페이지가 가장 많다.
- 어떤 태그를 외울 것인지는 그 태그가 얼마나 널리 쓰이는지를 기반으로 정한다.
줄바꿈: <br> vs. <p>
- <br> 태그를 이용하면 줄바꿈을 할 수 있다. 두개를 사용하면 문단을 표현할 수 있다. 이 태그는 닫히는 태그가 존재하지 않는다.
- <p> 태그는 paragraph 단어에서 p를 따와서 만들어졌으며 어디까지가 한 단락인지 보여준다. 그래서 열리는 태그와 닫히는 태그가 존재한다.
두 태그의 차이점
<br> 태그는 줄바꿈일 뿐이고 문단을 바꿀때에는 <p> 태그가 더 가치있다.
<p> 태그는 CSS를 이용해서 공백의 범위를 조절할 수 있다.
HTML이 중요한 이유
- 검색엔진은 html 태그를 본래의 의미에 맞게 사용한 글을 위 페이지에 올려준다.
- 바르게 쓴 html 태그는 접근성 측면에서도 중요하다.
촤후의 문법 속성과 img 태그
<img> 태그
- src(source의 줄임말) 속성을 이용하여 원하는 이미지의 주소를 적을 수 있다.
속성이란?
- 속성(attribute)은 태그안에 아무 위치에나 쓰면 된다. 태그의 이름만으론 정보가 부족할 때 더 많은 의미를 부가하는 역할을 한다.
부모 자식과 목록
- 태그가 서로 포함관계에 있을 때, 포함하고 있는 태그를 부모 태그, 포함된 태그를 자식 태그라고 한다.
- <li>는 목차 또는 목록을 입력할 때 사용하는 태그이다.
다중 커서
- 컨트롤을 누른 채 에디터 화면을 클릭하면 여러개의 커서가 생성되고 그 다음 입력을 하면 커서가 위치한 곳에 한꺼번에 태그를 입력할 수 있다.
- 서로 다른 목록을 구분하고자 할 때 <ul>이라는 부모 태그를 사용한다.
- <ol> (ordered list)태그를 ul 대신 이용하면 숫자를 자동으로 달아준다.
출처: 생활코딩! HTML+CSS+자바스크립트