1장. 웹사이트에 정보와 디자인을 입혀보자
웹사이트 제작시 자주 사용되는 HTML 문서를 작성해 보고, 디자인 요소를 담당하는 CSS 주요 속성을 학습해 봅니다.
1. 웹을 구성하는 요소
[프로그래밍이란?]
- 컴퓨터와 소통하는 방법, 웹 개발을 하기 위한 언어로 브라우저와 소통
- HTML = 정보 또는 설계도 / 건물 설계도
- CSS = 디자인 또는 스타일링 / 인테리어 디자인
- JavaScript = 기능과 효과
[웹사이트 제작시 고려 사항]
웹사이트를 제작할 때 고려해야 할 사항으로는 웹 표준, 웹 접근성, 크로스 브라우징이 있습니다.
(1) 웹 표준 = 웹에서 요구하는 공식 표준이나 기술 규격을 만족하는지 여부
(2) 웹 접근성 = 장애 여부와 상관 없이 모두가 웹사이트를 이용할 수 있는지 여부
(3) 크로스 브라우징 = 모든 브라우저와 기기에서 웹사이트가 제대로 작동하는지 여부
[실습1] HTML 문서를 구성하는 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엘리스코딩1일차</title>
</head>
<body>
<h1 style="color:navy">안녕 엘리스!</h1>
</body>
</html>2. HTML 기본 태그
[HTML]
- Hyper Text Markup Language
- 웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어
- 개발 언어도 시간이 지남에 따라 자주 사용되지 않는 용어들은 사라지고 시대에 맞추어 새로운 신조어가 등장
[HTML 태그 구성 요소]
<열린태그 속성 = "속성값"> 컨텐츠 </닫힌태그>- 태그명 = HTML이 갖고 있는 고유의 기능 ex) 제목 h1 ~ h6, 이미지 img
- 속성 = HTML 태그가 갖고 있는 추가 정보
- 속성값 = 어떤 역할을 수행할 지 구체적인 명령을 진행하는 것
[HTML 문서의 기본 구조]
- !DOCTYPE html : HTML5라는 신조어로 문서를 선언하는 태그
- 일부 태그들은 닫힌 태그가 없는 경우도 있음
- html : HTML 문서의 시작과 끝을 의미, 모든 HTML 태그들은 html 태그 안쪽에 입력
- head : 웹사이트의 간단한 요약정보를 담는 영역, 웹사이트에서 노출되지 않는 정보
- body : 웹사이트에서 눈에 보이는 정보를 담는 영역, 이미지나 텍스트처럼 출력되는 정보
- meta charset="UTF=8" : character setting의 약자를 나타내는 문자코드, 모든 문자를 깨짐 없이 표기
- title : 웹사이트 탭에 나타나는 제목을 적는 태그
[img 태그]
<img src = "logo.png" alt="회사로고">
- img 태그 : 정보성을 갖고 있는 이미지를 삽입. ((닫힘 태그 없음.))
- src 속성 : 삽입할 이미지 파일 경로
- alt 속성 : 웹사이트가 이미지를 출력하지 못했을 경우, 텍스트 정보로 대체.
[h 태그]
- Heading의 약자로 제목이나 부제목을 표현
- 숫자 값이 클수록 폰트 사이즈가 작음. 즉, 숫자는 정보의 중요도를 나타냄.
- h1태그는 가장 중요한 정보를 담으므로, 하나의 html 문서에서 한 번만 사용됨.
[p 태그]
- Paragraph 의 약자로 분문 내용을 표현. 웹사이트의 중요 정보를 담는 태그
- 나타내고자 하는 내용을 열린 태그와 닫힌 태그 사이에 입력
[순서 없는 리스트 ul 태그 / 순서 있는 리스트 ol 태그]
- Unordered List 의 약자로, 순서가 없는 리스트 생성.
- ul / li 로 메뉴버튼을 만들 때 사용되는 태그
[a 태그]
<a href = "https://www.naver.com" target ="_blank"> 네이버 </a>- 텍스트, 이미지를 클릭했을 때 다른 웹페이지로 이동시키는 기능
- href 속성 : HTML 연결할 페이지의 주소 지정
- target 속성 : 어떤 방식으로 페이지 이동할 지 결정
(blank: 새탭 /self: 현재 탭 > 디폴트 값)
[실습2] 링크와 이미지 입력하기
[실습3] 텍스트 입력하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엘리스 :: elice</title>
</head>
<body>
<a href="https://www.naver.com/" target="_blank">네이버</a>
<!-- href=연결할 웹페이지의 URL 주소 // target=웹페이지를 연결하는 방식 -->
<!-- targe="_blank"는 새로운 탭에서 웹사이트를 전환하게 됨. _self로 하면 현재 사이트가 이동됨 -->
<img src="elice_logo.png" alt="엘리스 회사 로고">
</body>
</html>3. 구조를 잡을 때 사용하는 태그
[header, nav, main, article, footer, div 태그]
- header : 웹사이트의 머리글을 담는 공간
- nav : 메뉴 버튼을 담는 공간 (ul / li / a 태그와 함께 사용)
- main : 문서의 주요 내용을 담는 태그로 IE는 지원하지 않으므로 role="main"을 넣어주어야 함
- article : 문서의 주요 이미지나 텍스트 등의 정보를 담고 구역을 설정하는 태그, 태그 내에 구역을 대표하는 타이틀 <h#>태그가 존재해야함
- footer : 가장 하단에 들어가는 정보를 표기할 때 사용
- div : 임의의 공간을 만들 때 사용
4. HTML 태그의 두 가지 성격
[Block 요소와 Inline 요소]
- 두 요소를 구분 짓는 세가지 주요 특징 : 줄바꿈 현상 / 가로세로 배치 / 상하배치
1) Block
: y축 정렬 형태로 출력(줄바꿈 현상이 나타남)
: width, height와 같은 값 설정으로 공간을 만들 수 있고, 상하 배치 작업 가능, ex) h#, p, header, div
2) Inline
: x축 정렬 형태로 출력(한 줄에 출력)
: 공간을 만들 수 없고, 상하 배치 작업 불가능 ex) a
5. CSS 주요 속성 살펴보기
[CSS란?]
Cascading Style Sheet
- 정보(HTML)와 디자인(CSS)의 분리, 문서의 레이아웃과 스타일 정의, HTML로 작성된 정보를 꾸며주는 언어
- 선택자 {속성 : 속성값;} / h1 { color : red; }
- 선택자 = 디자인을 적용할 HTML 영역
- 속성 property = 어떤 디자인을 적용할지 정의
- 속성값 = 어떤 역할을 수행할 지 구체적으로 명령. 세미콜론(;) 필수 입력
[CSS 연동 방법 세가지]
1) Inline Style Sheet : 태그 안에 작성
<h1 style = "color:red"> title <h1>2) Internal Style Sheet
: style이라는 태그 안에 작성
3) External Style Sheet
: link태그로 불러오기 (styles.css 파일 생성)
:html, css 각각의 문서 안에서 따로 관리하여 상대적으로 가독성이 높고 유지보수가 쉬움
<link rel = "stylesheet" href="style.css">6. CSS 선택자 종류
[선택자]
HTML의 어떤 요소에 CSS를 적용할 것인가.
- Type 타입: 태그를 의미, 특정 태그 사용하여 스타일 적용
- Class 클래스 : 별명; 클래스 이름으로 특정 위치에 스타일로 적용 ex) .coding
- ID 아이디 : ID를 이용하여 스타일을 적용 ex) #coding
- style > id > class > type (style의 컬러가 적용됨)
: ID는 거실, 클래스는 거실 속 티비 공간
7. 부모 자식 관계
원하는 지역에만 css 속성을 적용하기 위해 부모를 구체적으로 표기
<header>
<h1> Header h1 </h1>
<p> Header p </p>
</header>
// style.css 문서
header {color: red;}
header h1 {color: blue;}8. Cascading
[CSS의 우선순위를 결정하는 세 가지 요소]
1) 순서 : 나중에 적용한 속성값의 우선순위가 높음
2) 디테일 : 더 구체적으로 작성된 선택자의 우선순위가 높음 ex) 부모까지 명시한 css
3) 선택자 : style > id > class > type 순으로 우선순위가 높음 {s-i-c-t}
9. CSS 주요 속성
[width, height]
- width : 선택한 요소의 넓이를 설정. 고정값(px), 가변값(%)
- height: 선택한 요소의 높이를 설정.
[font]
- font-size : 글자크기
- font-family : 글꼴, 브라우저마다 지원하는 폰트가 다름. 입력한 순서대로 우선순위 적용. sans-serif (모든 브라우저 지원 폰트로 마지막에 작성하는 디폴트 값)
- font-style : 글자 기울기같은 스타일
- font-weigth : 글자 두께 (100~900 숫자가 클 수록 폰트 굵기가 굵어짐)
[border]
- border-style, border-width, border-color : 실선solid, 점선dotted 주석과 같이 한줄에 이어 쓸 수도 있음.
- border : solid 10px red; 이때, 쉼표는 작성하지 않고 띄어쓰기만 함. 순서는 상관 없음.
[background]
- background-image : url(이미지 경로); >> 확장자 명도 같이 작성해야 함
- background-repeat : repeat-x, repeat-y, no-repeat
- background-position : top, bottom, center, left, right등. 공간 안에서 이미지의 좌표 변경
- background: yellow url(이미지경로) no-repeat top;
sukki의 velog*^^*