HTML
웹 페이지의 구조 혹은 데이터 작성을 위한 마크업 언어
CSS
웹 페이지에 관한 다양한 스타일 들을 정의
Javascript
웹을 이용하는 유저와 상호작용 하기 위한 동작을 추가할 때 쓰는 언어
HTML
HTML 기초
HTML 문서 구조
<!DOCTYPE html>: 문서 형식을 정의
<html lang="kr">: 본격적인 태그의 시작, 사용하는 언어를 정의
Head
<meta charset="utf-8">: 문서와 관련된 다양한 정보를 담음
<title>: 웹 페이지의 정보를 담음
Body
header: 웹 페이지 혹은 section의 소개나 제목을 담는 요소
nav: 네비게이션 역할을 하는 요소
section: 기준에 따라 구획을 구분하기 위한 요소
article: 주 내용을 담는 요소
aside: 광고나 사이트의 주변 부분에 해당하는 내용을 담는 요소
footer: 웹 사이트의 가장 아래에 들어가는 추가 정보를 담는 요소
Text
제목 태그
<h1~h6>: 제목을 나타내고 싶을 때 사용하고, 중요도에 따라 h를 1~6까지 씀
본문 태그
<p>: 단락, 문단
<br>: 줄바꿈, 종료 태그를 쓰지 않는다(=빈 요소)
<pre>: 적은 내용 그대로 브라우저에 표시
글자 태그
<strong>: 글자를 굵게 함
<em>: 글자를 이텔릭체로 바꿈
<sup>: 글자를 위로 올림
<sub>: 글자를 아래로 내림
<ins>: 단어나 문장에 밑줄을 추가함
<del>: 단어나 문장에 취소선을 추가함
Link
링크 태그
속성(키="값"): 태그에 대해 추가적인 정보 제공
<a 구글="https://wwww."></a>
href
연결할 웹 사이트 주소를 갖고 있음
URL: 인터넷에서 자원의 위치를 나타냄, href의 속성 값으로 들어감
절대 URL: 접근하는 최초 시작점부터 경유한 경로를 모두 기록하여 리소스의 위치를 나타냄
상대 URL: 기준점을 기준으로 상대적인 경로를 기록하여 리소스의 위치를 알아냄
target
링크를 클릭했을 때 해당 페이지를 어디에 오픈 할 것인지 정하는 속성
target="_self": 현재 탭에서 링크를 여는 속성
target="_blank": 새 탭에서 링크를 여는 속성
멀티미디어
이미지 태그 <img>
src="이미지 URL": source의 약자로 불러올 이미지의 URL을 속성 값으로 가짐
alt="사진 설명": alternative text의 약자로 불러올 이미지가 없거나 불러오는데 실패했을 경우 대신 표시되는 문장
weight="수치", height="수치": 이미지의 사이즈를 조정
유튜브 <iframe>
테이블과 리스트
테이블의 구성
1.
데이터 셀: <td>
2.
제목 셀: <th>
3.
행: <tr>
4.
표 전체: <table>
"숫자"만큼 셀이 행을 점유: rowspan="숫자"
"숫자"만큼 셀이 열을 점유: colspan="숫자"
리스트
순서 없는 리스트: 구분점으로 항목화
<ul>
<li>아이템1</li>
-<li>관련 속성
•
value="해당하는 리스트 아이템 번호를 지정하는 숫자"
</ul>
순서 있는 리스트: 번호순으로 항목화
<ol>
-<ol>관련 속성
•
start="리스트 시작 숫자"
•
type="순서를 시작하는 문자"
•
reversed 순서를 반대로 시작하고 키만 써서 사용
<li>아이템1</li>
</ol>
Form
<form>
폼에 포함되는 다양한 입력 양식 태그 들을 감싸줌
action: 데이터를 보낼 URL을 지정
method: 보내는 방식을 지정
•
Get 방식
데이터 조회만을 목적으로 할 때
입력한 데이터를 Head, URL 끝에 붙여 눈에 보이게 보냄
•
Post 방식
서버에 있는 데이터를 쓰거나 수정, 삭제 할 때 주로 사용
입력한 데이터를 눈에 보이지 않게 Body에 숨겨서 보냄
<input>
사용자에게 입력을 받기 위해 사용되는 태그, 빈 태그
-input 관련 속성
•
type="text"
input의 종류를 결정
•
name="id"
input 중 같은 타입과 구분되는 이름을 결정
•
placeholder="아이디를 입력하세요."
input에 아무 값도 입력 되지 않았을 때 나타나는 텍스트
•
value="soyeon"
실제 할당되는 값, 우리가 데이터를 넣으면 이 속성에 값이 들어가고 초기값처럼 둘 수 있음
•
<label>
해당하는 라벨을 클릭 시 input 태그가 활성화 됨
for 태그와 함께 쓰임, for="password"
•
<div>
태그 들을 구분 짓고 나누기 위해 사용되는 태그
<select>
여러 개의 선택지를 제시하고 싶을 때 사용
•
<option value="male">
<textarea>
한 번에 많은 글을 입력 받을 때 사용
cols=""
rows=""
<button>
input 태그의 버튼타입과 동일하게 버튼을 생성
CSS
CSS 기초
구성요소
•
선택자: 스타일을 적용하고자 하는 HTML 요소를 선택
•
속성: 지정할 스타일의 속성명에 해당, 세미콜론(선언)으로 구분
•
값: 키워드나 특정 단위를 이용하여 원하는 스타일을 적용, 속성과 짝을 이룸
HTML에 CSS를 적용하는 방법
1.
Link style: HTML 외부에 있는 CSS 스타일을 불러옴
2.
Embedding style: HTML의 <head>에 <style>를 이용하여 CSS를 작성
3.
Inline style: HTML요소에 직접 style 속성을 이용하여 CSS를 작성
선택자
단순 선택자
•
타입 선택자: 해당 태그를 가지는 모든 요소에 스타일을 적용
•
아이디 선택자: Id로 스타일을 적용 해당 Id 하나에 적용
#main {color: red;}와 같은 형태를 갖는다
Id: HTML 문서 내에서 동일한 아이디는 존재할 수 없음 다른 요소와 구분되는 점을 만들어줌
•
클래스 선택자: 클래스 이름으로 스타일을 적용, 같은 클래스 이름이면 모두 적용
.main {color: red;}
클래스: 비슷한 특징을 갖는 요소를 지정하여 묶을 수 있음, 여러 번 사용이 가능
•
전체 선택자: 모든 요소에 스타일을 적용, 모든 요소에 적용하기 때문에 속도 저하 가능성 있음
*{color: red;}
•
속성 선택자: 특정 속성을 소유하는 모든 요소에 스타일을 적용
선택자[속성명="속성값"]{ color: red; }
•
Pseudo 클래스 선택자: 요소의 특별한 상태를 지정할 때 씀
Pseudo-class = 가상의 클래스
선택자:pseudo-class {속성 : 속성 값;}
◦
선택자:link : 방문하지 않은 링크일 경우
◦
선택자:visited : 방문한 링크의 경우
◦
선택자:hover : 요소에 마우스가 올라와 있을 경우
복합 선택자
•
자식 선택자: 선택자 A의 모든 자식 중 선택자 B와 일치하는 요소 선택
선택자 A > 선택자 B {color : red;}
•
후손 선택자: 선택자 A의 모든 후손 중 선택자 B와 일치하는 요소 선택
선택자 A 선택자 B {color : blue;}
값, 단위, 색
값
•
숫자값: 단위가 중요!
•
키워드
•
색
단위
•
px: 절대적인 길이를 가짐, 1px=1/96 in
•
em: 상대적인 길이를 가짐, 현재 스타일이 지정된 요소의 font-size 기준
•
rem: 상대적인 길이를 가짐, 최상위 요소의 font-size 기준
•
%: 상대 길이, 보통 이미지나 레이아웃의 너비나 높이를 지정할 때 씀
색
•
hex code: #fr0008
•
rgb: (0,255,255)
폰트와 관련된 속성
font-family
폰트의 종류 지정, 사용자의 컴퓨터에 없을 수 있으니 한 번에 여러 폰트를 지정하며 마지막에는 일반 글꼴을 지정
font-family: 'Cute Font', Arial, cursive;
font-style
font-style: normal, 일반 글꼴
font-style: italic, 이탈릭체가 디자인 되어있는 경우 적용
font-style: oblique, 기울임
font-weight
폰트의 굵기 지정
font-weight: 100
font-weight: 400(normal)
font-weight: 700(bold)
font-weight: 900
텍스트 정렬과 관련된 속성
text-align
자기 자신을 기준으로 텍스트를 좌, 우, 중앙 정렬
line-height
문장 사이의 간격을 조정함
letter-spacing
글자와 글자 사이의 간격을 조정함, 자간
text-indent
문단의 시작부에 들여쓰기를 함
박스 모델
Content
이미지, 텍스트처럼 태그 안에 담긴 내용
box-sizing: content-box; , content size와 동일
Border
컨텐츠를 감싸는 테두리, 상→우→좌→하, 순서대로 적용
box-sizing: border-box; , content size+padding+border와 동일
•
border-style
•
border-width
•
border-color
•
border-radius: 경계선을 둥글게 표현
Padding
Content와 Border 사이의 여백
Margin
Border 밖의 여백
마진 상쇄: 큰 쪽을 따라 상하 요소 사이의 Margin이 상쇄
위치와 관련된 속성
display
요소가 보여지는 방식을 지정
•
display: block;
새로운 줄에서 시작, 크기는 width=100을 기본으로 가짐
width, height, padding, margin 가능
•
display: inline;
새로운 줄에서 시작하지 않음, 크기는 요소의 content size만큼만 가짐
width, height, margin-top, margin-bottom 불가능
•
display: inline-block;
inline과 block의 속성을 모두 가짐
width, height, margin-top, margin-bottom 가능
•
display: none;
브라우저에 해당 요소가 출력되지 않음
position
요소의 위치를 지정
•
position: static;
기본값, 좌표 속성을 쓸 수 없음
•
position: relative;
상대 위치, 기본 위치를 기준으로 좌표를 사용함
•
position: absolute;
부모나 조상 중 relative, absolute, fixed가 선언된 곳을 기준으로 좌표 속성 적용
•
position: fixed;
보이는 화면을 기준으로 좌표 속성을 이용하여 위치를 고정
•
z-index: 숫자;
숫자값이 클수록 전면에 출연, static을 제외한 속성에 적용
flexbox
요소들 간 공간 배분과 정렬 기능을 제공
•
flex container
◦
flex-direction
flex 컨테이너 안의 item들의 방향을 정함
◦
flex-wrap
flex 아이템이 flex 컨테이너를 벗어났을 때 줄을 바꿔줌
◦
justify-content
flex-direction으로 정해진 방향을 기준으로 수평으로 item을 정렬하는 방법을 정함
◦
align-items
flex-direction으로 정해진 방향을 기준으로 수직으로 item을 정렬하는 방법을 정함
◦
align-content
flex-direction으로 정해진 방향을 기준으로 수직으로 여러 줄인 item을 정렬하는 방법을 정함
•
flex item
◦
flex-grow
flex 아이템의 확장과 관련된 속성, 기본 0
◦
flex-shrink
flex 아이템의 축소와 관련된 속성, 기본 0
◦
flex-basis
flex 아이템의 기본 크기를 결정함, 기본 auto
◦
flex
flex-grow, flex-shrink, flex-basis의 축약형
상속
모든 CSS 속성이 상속되는 것은 아님!
상속이 안되는 속성을 상속하려면→속성: inherit;
우선순위(Cascading)
1.
중요도: 선언 위치에 따라 우선순위 달라짐
2.
명시도: 속성의 우선순위가 정해져 있음
3.
선언 순서: 나중에 선언된 스타일이 우선 적용
Bootstrap
스타일 적용 방식은 .class
CSS
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-1BmE4kWBq
78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqy
l2QvZ6jIW3" crossorigin="anonymous">
HTML
복사
<head>에 붙여넣는다.
JS
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
HTML
복사
<body> 종료태그 앞에 붙여넣는다.
그리드 시스템
.col-lg-4
lg: 기준이 되는 화면의 사이즈
4: 12등분 중 차지할 비율