1. 웹을 구성하는 요소
1) 웹 구성 요소
- html
정보 또는 설계도 - css
디자인 또는 스타일링 - javascript
기능과 효과
2) 웹 제작시 고려 사항
- 웹 표준
웹사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격 - 웹 접근성
장애의 여부와 상관 없이 모두가 웹사이트를 이용할 수 있게 하는 방식 - 크로스 브라우징
모든 브라우저 또는 기기에서 사이트가 제대로 작동하도록 하는 기법
2. HTML 기본 태그
- HTML 이란 Hyper Text Markup Language의 약자.
- 웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어.
1) HTML 태그 기본 구조
<열린태그 속성 = "속성값"> 컨텐츠 </닫힌태그>- 태그명 : HTML이 가지고 있는 고유의 기능.
<열린태그></닫힌태그>형태로 입력 - 컨텐츠 : 열린태그와 닫힌 태그 사이에 있는 내용물
- 속성 : HTML 태그가 갖고 있는 추가 정보
- 속성값 : 어떤 역할을 수행할지 구체적인 명령 진행하는 것.
2) HTML 문서의 기본 구조
!DOCTYPE html = html 문서 선언
html = 문서의 시작과 끝
head = 문서와 관련된 요약 정보 정리
meta charset="UTF-8" = 문자 코드
title = 웹사이트 제목
body = 웹사이트 내용
3) HTML 기본 태그
img 태그 : 정보성을 가지고 있는 이미지를 삽임. 닫힌태그 없음
<img src="logo.png" alt="회사 로고">- src속성 : 삽입할 이미지 파일 경로
- alt속성 : 웹사이트가 이미지 출력 못했을 때 텍스트로 대체
h 태그 : heading의 약자로 제목이나 부제목을 표현
<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3>- 숫자가 클수록 폰트 사이즈가 작아짐. 숫자가 작을 수록 중요도가 높다.
- h1 태그는 가장 중요한 정보를 담으므로, 하나의 html 문서에서 한번만 사용된다.
p 태그 : paragraph의 약자로 본문 내용을 표현
<p> Nice to meet you </p>- 웹사이트의 중요 정보를 담는 태그. 나타내고자 하는 내용을 열린 태그과 닫힌 태그 사이에 입력.
ul 태그 : unordered list의 약자로 순서가 없는 리스트 생성
<ul>
<li>메뉴</li>
<li>메뉴</li>
<li>메뉴우</li>
<ul>3. 구조를 잡을 때 사용하는 태그
1) 웹사이트의 목차를 담당하는 태그
<header> <!-- 상단 영역 -->
<nav> <!-- 메뉴 영역 -->
</nav>
</header>- header 태그 : 웹사이트의 머리글을 담는 공간
- nav 태그 : 메뉴 버튼을 담는 공간 (navigation) 으로 ul,li,a 태그와 함께 사용한다.
2) 웹사이트의 본문을 담당하는 태그
<main role="main"> <!-- 본문 영역 -->
<article> <!-- 정보 영역 -->
<h#></#h>
...
</article>
</main>- main 태그 : 문서의 주요 내용을 담는 태그. 익스플로러는 지원하지 않으므로 role="main" 속성을 필수로 입력해야 함.
- article 태그 : 문서의 주요 이미지나 텍스트 등의 정보를 담고 구역을 설정하는 태그. 태그 내 구역을 대표하는 h# 태그가 존재해야 한다.
3) 웹사이트의 부록을 담당하는 태그
<footer> <!-- 하단 영역 -->
<div> <!-- 회사 정보 -->
<p>주소: 어디시 어디구 어디로 111 어디어디</p>
<p>이메일: 1234@abc.de.fg</p>
</div>
<div> <!-- 전자상거래소비자보호법 필수 정보 -->
<p>사업자 등록번호: 000-00-00000 | 대표: 누구</p>
<p>통신판매업신고번호: 제0000-머시기-0000호</p>
</div>
</footer>- footer 태그 : 가장 하단에 들어가는 정보를 표기할 때 사용
- div 태그 : 임의의 공간을 만들 때 사용
4. HTML 태그의 성격
1) Block 요소
y축 정렬 형태로 출력된다. 줄바꿈 현상이 있음
공간을 만들 수 있고, 상하 배치 작업이 가능하다.
2) Inline 요소
x축 정렬 형태로 출력된다. 한줄에 출력이 됨.
공간을 만들 수 없고, 상하배치 작업이 불가능하다.
5. CSS
CSS 는 Cascading Style Sheet 의 약자로 HTML 로 작성된 정보를 꾸며주는 언어
1) css 구성 요소
선택자 { 속성 : 속성값; }- 선택자 : 디자인을 적용할 HTML 영역
- 속성 : 어떤 디자인을 적용할지 정의
- 속성값 : 어떤 역할을 수행할지 구체적으로 명령
2) css 속성 (property)
h1 {
font-size: 20px; /* 폰트 사이즈 */
font-family: sans-serif; /* 글꼴 */
color: blue; /*폰트 색깔 */
background-color: yellow; /* 배경색 */
text-align: center; /* 텍스트 정렬 */
}3) css 연동 방법
(1) Inline Style Sheet : 태그 안에 직접 원하는 스타일 적용
<h1 style="color: red;"> coding 101 </h1>(2) Internal Style Sheet : style 태그 안에 넣기
<head>
<style>
h1 { background-color: yellow;}
</style>
</head>(3) External Style Sheet : link 태그로 불러오기
<head>
<link rel="stylesheet" href="style.css">
</head>6. CSS 선택자
1) Type Selector : 특정 태그에 스타일 적용
h2 {
color : red;
}2) Class Selector : 클래스 이름으로 특정 위치에 스타일 적용
.name {
color : blue;
}3) ID Selector : ID를 이용해 스타일 적용
#coding {
color : yellow;
}7. 부모 자식 관계
태그 안 태그의 경우 상위 태그와 하위 태그는 부모 자식 관계
<div>
<h1> 잉 </h1>
<p>옹</p>
</div>
div 와 h1 는 부모자식 관계
h1 과 p 는 형제 관계
원하는 곳에만 css 속성을 적용하려면 부모를 구체적으로 표기
div h1 {
color : red;
}8. 캐스케이딩
CSS의 우선순위를 결정하는 세가지 요소
1) 순서
나중에 적용한 속성 값이 우선순위가 높음.
h1 {color : red;}
h1 {color : pink;]=> h1 color pink
2) 디테일
더 구체적으로 작성된 선택자의 수선순위가 높음.
header p {color : red;}
p {color : pink;}=> p color red;
3) 선택자
style > id > class > type 순으로 우선순위가 높음.
<h3 style="color: pink" id="color" class="color"> color </h3>
#color { color: blue; }
.color { color: red; }
h3 {color: green; }=> pink
9. CSS 주요 속성
- width : 선택한 요소의 넓이를 설정
- height : 선택한 요소의 높이를 설정
- font-size : 폰트 크기
- font-family : 글꼴 설정. 브라우저마다 지원하는 폰트가 다름. 입력한 순서대로 우선순위 적용. sans-serif의 경우 모든 브라우저에서 지원 가능하기 때문에 마지막에 작성 디폴트
- font-style : 글자 기울기 등 설정
- font-weight : 100~900 숫자로 글자 두께 설정. bold O
- border-style : 실선은 solid 점선은 dotted
- border-width : 선 굵기
- border-color : 선 색
- background-color : 배경색
- background-image : url(이미지 경로) 와 같이 사용.
- background-repeat : 이미지 반복 설정 . repeat-x repeat-y no-repeat
- background-position : 공간 안에서 이미지 좌표 변경. top bottom center left right
border와 background는 한줄에 이어 쯜 수 있음
background: yellow url(이미지 경로) no-repeat left;
border: solid 10px red; 
딩코딩코딩