728x90
01. 웹을 구성하는 요소
프로그래밍이란?
- 컴퓨터와 소통하는 법
- 컴퓨터에게 전달하는 정보를 어떻게 보여주고 제어할지 결정
- 웹 개발을 하기 위한 언어로 브라우저와 소통
HTML
정보 / 설계도
CSS
디자인 / 스타일링
JS
기능과 효과
웹사이트 제작 시 고려사항
- 웹 표준 : 웹사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격
- 웹 접근성 : 장애의 여부와 상관 없이 모두가 웹사이트를 이용할 수 있게 하는 방식
- 크로스 브라우징 : 모든 브라우저 또는 기기에서 사이트가 제대로 작동하게 하는 기법
02. HTML 주요 태그 살펴보기
HTML란?
웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어이다.
HTML 태그 구성요소
<열린태그 속성 = "속성 값"> 컨텐츠 </닫힌태그>
- 태그명 : HTML이 갖고있는 고유의 기능, <열린태그></닫힌태그>형태로 입력
- 컨텐츠 : 열린태그와 닫힌태그 사이에 있는 내용물
- 속성 : HTML이 갖고 있는 추가 정보
- 속성 값 : 어떤 역할을 수행할 지 구체적인 명령 진행
태그 종류
- <!DOCTYPE html> : html5 문서 선언
- <html></html> : 문서의 시작과 끝을 나타냄
- <head></head> : 웹사이트의 요약 정보이다. 웹사이트에 노출되지 않는다.
- <body></body> : 눈에 보이는 정보이다. 이미지나 텍스트로 웹사이트에 노출된다.
- <meta charset="UTF-8"> : 모든 문자를 깨짐없이 표시
- <title></title> : 웹사이트 제목
- <img scr = "logo.png" alt = "로고 이미지" width="??" height = "??"> 태그 : 정보성을 가지고 있는 이미지를 삽입. 닫힌 태그는 없다.
- src 속성 : 이미지의 경로를 나타낸다.
- alt 속성 : 이미지가 뜨지 않은 경우 나타난다.
- width 속성 : 이미지의 너비를 표현
- height 속성 : 이미지의 높이를 표현
- <h> 태그 : 제목/부제목을 표현한다.
- 숫자 값이 커질 수록 폰트가 작아짐 => 숫자는 중요도를 나타냄
- <h1>태그는 제일 중요한 정보. 하나의 html문서에서 하나만 사용됨.
- <p> 태그 : 본문 내용을 표현한다.
- 웹사이트의 중요 정보를 담는 태그
- 나타내고자 하는 내용을 <열린태그>와 <닫힌태그> 사이에 입력
- <ul> 태그 : 순서가 없는 리스트
- 메뉴 버튼을 만들 때 사용.
- 지금 사용되는 동그란 점이다.
- <a href="??링크" target="??"> 링크 </a> 태그 : 링크 입력 태그
- href : 링크 주소
- target : 창 표시 방법
- _blank : 새 창에 표시
- _self : 현재 창에 표시
- "링크"라는 텍스트를 클릭 시 링크로 이동한다.
- 만약 태그 사이에 <img>태그가 있다면, 이미지를 눌러서 링크로 이동이 가능하다.
가운데 Google이미지를 클릭하면
구글 기본 페이지로 이동하게 된다.
<a href="구글 주소" target="_self>
<img src="구글이미지가 있는 경로" alt="구글로고">
</a>
03. 공간을 만들 때 사용하는 태그
04. HTML의 두가지 성격
05. CSS 주요 속성 살펴보기
728x90