웹 관련 개념 정의
•
프로그램 코드 (Program Code, Source Code)
: 컴퓨터 프로그램을 프로그래밍 언어로 작성한 글
•
프로그래밍 (Programming)
: 코드를 작성하는 행위
•
프로그래밍 언어 (Programming Language)
: 컴퓨터에 명령을 내리기 위한 언어
웹을 이루는 세 가지 언어 : HTML, CSS, JavaScript
1. HTML
(Hyper Text Markup Language)
: 웹 페이지의 구조 혹은 데이터 작성을 위한 마크업 언어
2. CSS
(Cascading Style Sheets)
: 웹 페이지의 스타일과 관련된 모든 것들을 정의하는 스타일 시트 언어
3. JavaScript
: 웹을 이용하는 유저와 상호작용 하기 위한 기능을 추가할 때 쓰는 프로그래밍 언어
이를 종합하면,
▪
HTML은 웹 페이지의 구조(Structure)를 담당
▪
CSS는 웹 페이지의 스타일(Style)을 담당
▪
JavaScript는 웹 페이지의 동작(Behaviors)을 담당
HTML 문서 구조
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="utf-8">
<title>장서영을 소개합니다.</title>
</head>
<body>
<h1>안녕하세요 저는 장서영입니다!</h1>
<p>저는 현재 웹 프로그래밍을 공부하는 학생입니다.</p>
</body>
</html>
HTML
복사
<!DOCTYPE html>
•
문서 형식을 정의함 ("이 문서는 html 타입으로 정의된 거야")
<html lang="kr">
•
본격적인 태그의 시작을 알리고, 사용하는 주 언어(한국어)를 정의함
•
전체 html을 감싸는 태그로, 본 태그 밖에 다른 태그가 존재할 수 없음
<head>
•
html 문서에 대한 정보를 담고 있음 (웹 사이트에서 보이지 않는 부분)
•
문서 내 단 하나의 <head>만 존재할 수 있음
•
<html> 바로 아래에 위치함
•
<meta charset="utf-8"> : 한글이 깨지지 않도록 도와줌
•
<title> : 웹 페이지의 제목을 담당함
<body>
•
html에서 실질적으로 보여지는 부분
•
문서 내 단 하나의 <body>만 존재할 수 있음
•
<head> 바로 아래에 위치함
※ <head>와 <body>는 단 한 번만 사용할 수 있다.
하지만, 두 태그 내부에 있는 태그들은 여러 번 사용이 가능하다.
HTML 세부 구조
1. 레이아웃과 관련된 태그
시멘틱 태그(Semantic tag) : 의미를 가지고 있는 태그로, 구조를 정의함
•
<header> : 웹 페이지 혹은 <section>의 소개나 제목을 담기 위해 사용하는 요소
•
<nav> : 내비게이션 역할을 하는 요소
•
<section> : 기준에 따라 구획을 구분하기 위해 사용하는 요소
•
<article> : 주 내용을 담기 위해 사용하는 요소
•
<aside> : 광고, 사이트의 주변 부분에 해당하는 내용을 담기 위해 사용하는 요소
•
<footer> : 사이트 가장 아래에 들어가는 추가 정보를 담기 위해 사용하는 요소
2. 텍스트와 관련된 태그
1) 제목 태그
•
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
•
제목을 나타내고 싶을 때 사용함
•
중요도에 따라 1부터 6까지 사용함
2) 본문 태그
•
<p> : 단락, 문단 표시
•
<br> : 줄바꿈 수행 (종료 태그를 쓰지 않는 '빈 요소'임)
•
<pre> : 입력한 그대로 브라우저에 표시 ※ 들여쓰기 주의
3) 글자와 관련된 태그
•
<strong> : 태그로 감싼 단어, 문장을 bold체로 바꾸고 중요하다는 의미를 부여함
•
<em> : 태그로 감싼 단어, 문장을 italic체로 바꾸고 중요하다는 의미를 부여함
•
<sub> : 태그로 감싼 단어, 문장을 일반 위치보다 아래로 내림
•
<sup> : 태그로 감싼 단어, 문장을 일반 위치보다 위로 올림
•
<ins> : 태그로 감싼 단어, 문장 아래 밑줄을 추가함
•
<del> : 태그로 감싼 단어, 문장에 취소선을 추가함
3. 속성 (Attributes)
•
<태그 키 = "값">
•
태그에 추가적인 정보를 제공함 (태그의 특징)
4. 링크 태그
•
키와 값이 쌍을 이뤄야 하고, " " 혹은 ' '를 반드시 사용해야 함
•
태그가 여러 개의 속성을 가지고 있을 때 띄어쓰기로 구분함
•
<ahref= "주소값">콘텐츠</a>
: a 태그가 링크 태그로 작동하기 위해서 href를 반드시 가져야 함
※ URL (Uniform Resource Locator)
•
인터넷에서 HTML 페이지, CSS 문서, 이미지 등 자원(Resource)의 위치를 나타냄
•
주소(도메인) + 경로( / )
•
절대 URL
: 최초 시작점부터 경유한 경로를 모두 기록하여 리소스의 위치를 나타냄
•
상대 URL
: 기준점을 기준으로 상대적인 경로를 기록하여 리소스의 위치를 나타냄
※ target 속성
•
클릭으로 링크를 열 때 어디에 오픈 할 것인지 정하는 속성
•
target="_self" : 현재 탭(창)에서 링크를 여는 속성
•
target="_blank" : 새 탭(창)에서 링크를 여는 속성
5. 멀티미디어와 관련된 태그
1) 이미지 태그 <img src="이미지 url" alt="사진 설명">
•
종료 태그가 없음 (시작 태그만 존재)
•
src="이미지 url" : 불러올 이미지의 URL을 속성 값으로 가짐
•
alt="사진 설명" : 불러올 이미지가 없거나 불러오는데 실패했을 경우 대신 표시되는 문장
•
weight="수치" height="수치"
: 이미지의 높이와 너비를 지정할 때 쓰는 속성
※ 이미지의 사이즈는 CSS에서 조정하는 것을 권장한다.
2) 유튜브 태그
•
유튜브 영상을 자신이 만든 페이지에 삽입하는 방법
•
<iframe src="http://www.youtube.com/embed/유튜브 영상 ID></iframe>
6. 테이블과 리스트
1) 테이블의 구성
•
<table> : 표 전체를 감싸는 태그
•
<tr> : 표에서 행을 구분하는 태그
•
<th> : 표의 행 내부에 제목 셀을 담는 태그
•
<td> : 표의 행 내부에 데이터 셀을 담는 태그
•
중복된 데이터 셀을 합치는 방법
◦
rowspan="숫자" : 숫자만큼 셀이 행을 점유
◦
colspan="숫자" : 숫자만큼 셀이 열을 점유
2) 테이블 생성 단계
•
표에 담을 <table>태그를 생성
•
<table>태그 안에 원하는 행의 개수만큼 <tr>태그를 생성
•
<tr>태그 생성 이후, 원하는 열의 개수만큼 <td>태그 혹은 <th>태그를 생성
※ 테이블을 만들 때 <tr>을 기준으로 해서 만든다.
3) 목록 (List)
•
순서 없는 목록 (Unordered List)
<ul>
<li>아이템1</li>
<li>아이템2</li>
<li>아이템3</li>
</ul>
HTML
복사
•
순서 있는 목록 (Ordered List)
<ol>
<li>아이템1</li>
<li>아이템2</li>
<li>아이템3</li>
</ol>
HTML
복사
•
리스트는 기본적으로 들여쓰기가 포함되어 있음
•
리스트는 서로 중첩이 가능함 (하위 항목을 계속 생성할 수 있음)
•
<ol>태그 속성
◦
start="숫자" : 리스트가 시작하는 숫자를 정함
◦
type="문자" : 순서를 시작하는 문자를 정함
◦
reversed : 순서를 반대로 시작함 (Key만 써서 사용)
•
<li>태그 속성
◦
value="숫자" : 해당하는 리스트 아이템의 번호를 지정함
7. form 태그
회원가입 양식을 작성해보자!
1) <form>
•
폼에 포함되는 다양한 입력 양식 태그들을 감싸줌
•
<form> 태그 속성 (form에 입력된 데이터를 서버로 보내는 기능)
◦
action="url" : 데이터를 보낼 서버의 URL을 지정함
◦
method : 보내는 방식을 지정
▪
method="get" : 데이터를 URL 끝에 붙여 눈에 보이게 보냄
(데이터 조회 만을 목적으로 할 때 주로 사용됨)
▪
method="post" : 데이터를 URL에 적지 않고 내부에 숨겨서 보냄
(서버에 있는 데이터를 쓰거나 수정, 삭제 할 때 주로 사용됨)
※ 용도에 맞는 method 방식을 사용한다.
2) <input>
•
사용자에게 입력을 받기 위해 사용하는 태그 (빈 태그)
•
<input> 태그 속성
◦
type=" " : <input> 태그 종류를 결정함
◦
name=" " : <input> 태그 중 같은 타입과 구분되는 이름을 결정함
◦
placeholder=" " : input에 아무런 값도 입력 되지 않았을 때 나타나는 텍스트
◦
value=" " : 실제 할당되는 값, 입력된 데이터는 이 속성의 값으로 들어감
(value 속성을 사용할 경우 , 초기값으로 들어감)
•
<label> 태그
◦
<label for=" "> </label>
◦
<input>의 id=" " 속성 값과 <label>의 for=" " 속성 값이 링크 됨
•
<div> 태그 : 태그들을 구분 짓고 나누기 위해 사용되는 태그
3) <select>
•
여러 개의 선택지를 제시하고 싶을 때 사용하는 태그
<select>
<option>콘텐츠1</option>
<option>콘텐츠2</option>
<option>콘텐츠3</option>
</select>
HTML
복사
•
<select name=" "> : <input> 태그의 name 속성과 동일하게 작동함
•
<option value=" "> : <input> 태그에서 입력한 값과 동일한 역할을 함
4) <textarea>
•
한 번에 많은 글을 입력 받을 때 사용함
5) <button>
•
<button type=" "> </button>
•
<input> 태그의 버튼 타입과 동일하게 버튼을 생성함
CSS 적용
1. CSS 기초 문법
•
선택자 (Selector) : 스타일을 적용하고자 하는 HTML 요소를 선택함
•
속성 (Property) : 지정할 스타일의 속성 이름에 해당함 ( 속성: 값; 이 한 단위)
•
값 (Value) : 키워드나 특정 단위를 이용하여 원하는 스타일을 적용함
•
선언 (Declaration) : 속성과 값이 짝을 이루며, 세미콜론 ; 으로 끝남
•
선언 블록 (Declaration block) : 선언들로 구성되며, 중괄호 { } 로 하나의 블록을 구분함
2. HTML에 CSS를 적용하는 방법
1) Link style
•
HTML <head>에 <link> 태그를 이용하여 외부에 있는 CSS 파일을 불러옴
•
가장 일반적이면서, 많이 사용되는 방법임
2) Embedding style
•
HTML <head>에 <style> 태그를 이용하여 CSS를 작성함
3) Inline style
•
HTML 요소에 직접 sytle 속성을 이용하여 CSS를 작성
•
해당 요소에만 적용됨
3. 선택자 (Selector)
1) 선택자 기초
•
p { color: red; } : 일반적인 태그를 선택자로 사용할 수 있음
•
h1, p { color: red; }
: 중복된 코드를 사용하는 대신, 여러 개의 선택자 사이에 콤마 , 를 이용하여 스타일을 한 번에 지정할 수 있음
2) '단순 선택자' 종류
•
타입 선택자 (Type Selector)
◦
해당 태그를 가지는 모든 요소에 스타일을 적용함
◦
p{ color: red; } : 태그명 사용
•
아이디 선택자 (Id Selector)
◦
html의 id 속성을 선택자로 사용하여 스타일을 적용함
◦
해당 id 하나에만 적용할 수 있음 (id는 중복 불가능)
◦
#main{color: red; } : #과 지정된 id 함께 사용
•
클래스 선택자 (Class Selector)
◦
클래스 이름으로 스타일을 적용함
◦
같은 클래스 이름이면 모두 적용됨
◦
.main{ color: red; } : .과 지정된 클래스 함께 사용
•
전체 선택자 (Universal Selector)
◦
모든 요소에 스타일을 적용함
◦
속도가 저하될 우려가 있으므로 쓰지 않는 것을 권장함
◦
*{ color: red; } : * 사용
•
속성 선택자 (Attributes Selector)
◦
특정 속성을 소유하는 모든 요소에 스타일을 적용함
◦
선택자[속성명="속성값]{ color: red; }
•
Pseudo 클래스 선택자
◦
pseudo 클래스 : 요소의 특별한 상태를 지정할 때 사용함
◦
pseudo(가상의) 클래스를 이용해서 스타일을 적용함
◦
선택자:pseudo-class{ color: red; }
◦
pseudo-class 종류
▪
:link : 방문하지 않은 링크일 경우
▪
:visited : 방문한 링크일 경우
▪
:hover : 요소에 마우스가 올라와 있을 경우
3) '복합 선택자' 종류
•
자식 선택자 (Child Selector)
◦
선택자A의 모든 자식 중 선택자B와 일치하는 요소를 선택함
◦
선택자A>선택자B{ color: red; }
•
후손 선택자 (Descendant Selector)
◦
선택자A의 모든 후손 중 선택자B와 일치하는 요소를 선택함
◦
선택자A 선택자B { color: red; }
4. 값, 단위, 색
1) 숫자값
•
CSS 값의 종류(숫자값/키워드/색) 중 사용 빈도가 가장 높음
•
크기와 관련된 값을 조정할 때 사용함
•
숫자값 단위
◦
px : CSS에서 1px은 절대 크기로 사용됨 (1/96 in)
◦
em : 현재 스타일이 지정된 요소의 font-size를 기준으로 하는 상대 크기
◦
rem : 최상위 요소(html 태그)의 font-size를 기준으로 하는 상대 크기
•
1em(1rem)의 크기 = 기준 font-size * 1em(1rem)
ex) 10em(rem) = 16px * 10 = 160px
※ 다양한 브라우저 환경에서 사용이 가능하도록 상대 길이인 'rem'을 쓰도록 권장한다.
2) % (퍼센트)
•
상대 길이, 보통 이미지나 레이아웃의 너비나 높이를 지정할 때 사용함
3) 색상
•
키워드를 지정해서 색을 표현하는 경우
◦
color:blue; , background-color:orange;
•
키워드를 제외하고 색을 표현하는 세 가지 방법
◦
hex code , rgd , hsl
5. 텍스트와 관련된 속성
1) 폰트와 관련된 속성
•
font-size : 폰트의 크기를 조정함
•
font-family : 폰트의 종류를 결정함
◦
띄어쓰기 혹은 - 이 들어간 두 단어는 ' '를 통해 한 폰트임을 명시해야 함
◦
여러 개의 글꼴을 , 를 사용해 동시에 지정함 (모든 이용자의 기기에 적용 가능하기 위함)
◦
마지막에는 모든 OS에 적용 가능한 일반 글꼴인 cursive를 넣어줌
◦
설치된 글꼴 외에도 링크를 통해서 폰트를 불러와 적용할 수 있음 → 웹 폰트
•
font-style : 폰트의 스타일을 결정함
◦
: normal : 기본 글자체
◦
: italic : 디자인 된 이탤릭체
◦
: oblique : 기울여진 글자체
•
font-weight : 폰트의 굵기를 조정함
◦
100 ~ 900 사이
◦
400은 normal, 700은 bold임
※ font 속성 하나 만으로 네 개의 속성들을 적용할 수 있다.
font : oblique 900 35px 'Noto Sans KR', sans-serif;
HTML
복사
2) 텍스트 정렬과 관련된 속성
•
text-align : 텍스트를 정렬함
◦
center 중앙, left 왼쪽, right 오른쪽을 값으로 줄 수 있음
◦
적용하고 있는 요소(본인 요소) 그 자체를 기준으로 정렬됨
•
line-height : 문장 사이의 간격을 조정함
◦
CSS에서 line-height는 'line의 height'로 적용함
•
letter-spacing : 글자와 글자 사이의 간격(자간)을 조정함
•
text-indent : 문단의 시작부에 들여쓰기를 함
6. 박스 모델
1) 박스 모델 개념
"HTML의 모든 요소는 상자 형태를 가진다."
•
박스형 전체를 가리켜 '박스 모델'이라고 함
•
브라우저 상에 콘텐츠를 올바르게 배치하기 위함
•
내용 (Content) : 이미지, 텍스트 등 태그 사이의 실제 내용을 담고 있는 부분
•
경계선 (Border) : content를 감싸고 있는 테두리
•
패딩 (Padding) : 경계선을 기준으로 content와 border 사이의 여백
•
마진 (Margin) : border 밖의 여백
2) Border의 속성
•
border-style : 경계선의 스타일을 결정함
◦
dashed solid dotted double
◦
값의 개수에 따라 적용되는 위치가 달라짐
•
border-width : 경계선의 두께를 조정함
•
border-color : 경계선의 색상을 결정함
※ border 속성 하나로 모든 속성을 적용할 수 있다.
•
border-radius : 경계선을 둥글게 표현할 수 있음
◦
border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius
◦
네 방향으로 나눠서 부분적으로 적용할 수 있음
◦
정원형 혹은 타원형의 모양으로 모서리를 조정할 수 있음
3) Padding과 Margin
•
마진 상쇄 (Margin Collapse)
: 상하 요소 사이의 마진은 서로 상쇄 된다는 법칙 (큰 쪽 마진을 기준으로 함)
•
box sizing 속성
◦
box-sizing:content-box;
▪
width(height) = content size
◦
box-sizing:border-box;
▪
width(height) = content size + padding + border
7. 위치 관련 속성
1) display : 요소가 보여지는 방식을 지정함
•
block element display:block;
◦
사용 예 : <div> <h1>~<h6> <p> <header> <section> ...
◦
width, height, margin, padding 가능
•
inline element display:inline;
◦
사용 예 : <a> <span> <img> ...
◦
width, height, margin-top, margin-bottom 불가능
•
display:inline-block;
◦
inline 요소의 불편함을 해소하기 위해 사용함
◦
width, height, margin-top, margin-bottom 가능
•
display:none;
◦
브라우저에 해당 요소가 출력 되지 않음
2) position : 요소의 위치를 정의함
•
position:static;
◦
기본 값
◦
좌표 속성을 사용할 수 없음
•
position:relative;
◦
상대 위치
◦
기본 위치(static일 때의 위치)를 기준으로 좌표를 사용함
•
position:absolute;
◦
부모나 조상 중 relative, absolute, fixed가 선언된 곳을 기준으로 좌표 속성을 적용함
•
position:fixed;
◦
보이는 화면을 기준으로 좌표 속성을 이용하여 위치를 고정함
3) z-index : 우선순위를 지정할 수 있음 (static 속성 값 제외)
4) flexbox : 특별한 계산 없이도 쉽게 정렬할 수 있음
•
'부모 요소'인 flex container와 '자식 요소'인 flex item으로 구성됨
•
flex box를 사용하기 위해 flex container에 display: flex;를 추가해야 함
※ flex box 핵심 : 기본적으로 정해둔 방향(가로, 세로)을 기준으로 속성을 정렬한다.
•
flex container 속성
◦
flex-direction : flex container 내부의 item 방향을 정함
▪
→ : row ← : row-reverse ↓ : column ↑ : column-reverse
◦
flex-wrap : flex item이 flex container를 벗어 났을 때 줄을 바꾸는 속성
▪
: nowrap : wrap
◦
justify-contest : flex-direction에 정해진 방향을 기준으로, 수평 방향으로 item을 정렬함
▪
: flex-start : center : flex-end
▪
: space-around : space-between
◦
align-items : flex-direction에 정해진 방향을 기준으로, 수직 방향으로 item을 정렬함
▪
: stretch : flex-start : flex-end : center
▪
: baseline
◦
align-content : flex-direction에 정해진 방향을 기준으로, 수직 방향으로 여러 줄인 item을 정렬함
▪
: stretch : flex-start : flex-end : center
▪
: space-around : space-between
•
flex item 속성
◦
flex-grow : flex 아이템의 확장과 관련된 속성 (기본 0)
◦
flex-shrink : flex 아이템의 축소와 관련된 속성 (기본 1)
◦
flex-basis : flex 아이템의 기본 크기를 결정함 (기본 auto)
◦
flex : flex-grow, flex-shrink, flex-basis의 축약형
8. 상속과 우선순위
1) 상속
•
'부모나 조상 요소에 적용된 CSS property를 자식 혹은 후손 요소가 물려 받는 것'을 의미함
•
모든 CSS property가 상속되는 것은 아니지만, margin: inherit;를 추가하면 상속이 가능함
2) 우선순위
•
CSS에 적용되는 우선순위는 다음 세 가지의 규칙을 따름
•
중요도
◦
<head> 태그 내의 <style> 태그
◦
<head> 태그 내의 <style> 태그 내의 @import문
◦
<link> 태그로 연결된 CSS
◦
<link> 태그로 연결된 CSS 내의 @import
◦
문브라우저 디폴트 스타일시트
•
명시도
◦
!important
◦
인라인 스타일 (inline style)
◦
아이디 선택자 (id selector)
◦
클래스, 속성, 가상클래스 선택자 (class, attribute, pseudo class selector)
◦
태그 선택자 (type selector)
◦
전체 선택자 (universal selector)
◦
상속 (inherit)
•
선언 순서
◦
나중에 선언된 스타일이 우선 적용됨
Bootstrap
부트 스트랩(Bootstrap)이란,
간편하고 빠르게 웹을 생성할 수 있도록 도와주는 오픈 소스 프론트엔드 프레임워크이다.