<언더독 레볼루션 – 1주차>
[chapter 1]
•
웹에 대한 이해와 코딩을 위한 필수 요소
program code: 컴퓨터 프로그램을 프로그래밍 언어로 작성한글
programming : 코드 작성 행위
programming Language: 컴퓨터 명령 언어
•
HTML/CSS, Javacript 소개 (구조, 스타일, 동작)
1.HTML: hyper text markup language
hyper text - 목차와 내용이 연결돼있는 텍스트
markup language: 태그를 이용해 데이터의 구조를 명시하는 언어(ex 한줄 <제목,내용,정보)
1.
CSS: cascading style sheets
style sheets – 웹 페이지의 스타일과 관련된 모든 것
cascading – 폭포가 되어 떨어지다. 즉, 스타일의 우선순위가 위에서 아래로 향하는 모습
3.Javascript: 웹을 이용하는 유저와 상호작용 하기 위한 기능을 추가할 때 쓰는 언어
[chapter 2]
•
html 문서 구조
1.
<!DOCTYPE html> - 문서형식을 정의
2.
<html lang = “kr”> : 본격적인 태그의 시작, 사용하는 주 언어를 정의
html - 전체 html 를 감싸는 태그 (단 1회 사용)
lang = “kr” - 페이지의 주 언어를 한국어로 사용
•
head와 body에 들어갈 요소
•
<head>
<meta charset=“utf-8”>
<title>수노를 소개합니다.</title>
</head>
<meta charset=“utf-8”> : 문서와 관련된 정보를 담음
charset=“utf-8 : 웹 페이지에서 한글이 깨지지 않도록 함
<title>: 웹 페이지의 제목을 담는 태그(tap제목, 즐겨찾기 제목)
•
레이아웃 관련 기본태그(semantic tag: 유의미 태그)
•
header: 소개 제목
•
nav: 페이지 이동을 위한 네비게이션 태그
•
section: 구획을 구분하기 위한 요소
•
article : 주 내용을 담기위한 태그
•
aside: 주변부분을 담기위한 태그
•
footer: 추가 정보 담는 태그
[chapter 3]
•
텍스트 관련 태그
•
제목 태그: 제목을 나타내고 싶을 때 – <h1> ~ <h6>
•
본문 태그
<P> : paragraphs (단란, 문단)
<br>: 줄바꿈 태그 – 종료태그x(빈요소)
<pre>: 형식화된 태그
•
글자 관련 태그
<strong>: 글자 굵기 변화
<em>: 이탤릭체로 변화
<sub>: 아래로 내려 씀 <sup>: 위로 올려 씀
<ins>: 밑줄
<del>: 취소선
[chapter 4]
•
링크태그
<a>(anchor)- <a 속성>
=> 속성: 태그에 대해 추가적인 정보 제공, HTML의 모든 태그는 속성을 가질 수 있음
•
키 = ”값“
==> 링크주소 = ”www.~~~“
+ 여려 개의 속성을 입력 시 띄어쓰기 구분, ”“,‘’로 키/값 구분
•
href: 연결할 웹 사이트 주소를 담고 있음
•
경로 : 지나는 길
주소/경로/경로
1.
ex) 경기도 ~~ 아파트/a의 방/a
주소 | 경로 경로
주소 + 경로 = URL : 자원의 위치를 나타냄
절대 URL: 접근하는 최초 시작점부터 경유한 경로를 모두 기록하여 리소스의 위치를 나타냄
상대 URL: 기준점을 기준으로 상대적인 경로를 기록하여 리소스의 위치를 나타냄
1.
ex) 절대:경기도 ~~ 아파트/a의 방/a
상대: (경기도 ~~ 아파트/a의 방/)a => 나의 위치에 따라 다름
상대: (경기도 ~~ 아파트/)a의 방/a
•
target : 링크를 여는 위치 지정하는 속성
target=“_self”: 현재탭
target = “_blank”: 새탭
[chapter 5]
•
멀티미디어
•
이미지 태그
<img>:
<img src=“이미지 url”> -scr: 이미지의 url을 속성값으로 가짐 + (종료 탭 x)
<img src=“이미지 url” alt=“사진설명”> - alt: 사진 불러오기 실패 시 대체되는 문구
whight = “수치” (단위 px)
height = “수치”
+ 유튜브 영상
동영상 퍼가기
[chapter 6]
•
테이블의 구성
<table>: 표 전체를 감싸는 태그
<th>: 표 행 내부에 제목 셀을 담는 태그
<td>: 표 행 내부에 데이터 셀을 담는 태그
<tr>: 행
ex)
<table> <table>
<tr> -<th><th><th> <tr> -<th><td><td>
<tr>- <td><td><td> <tr>- <th><td><td>
<tr>- <td><td><td> <tr>- <th><td><td>
rowspan=“숫자” : 수만큼 셀이 행을 점유
colspan=“숫자” : 수만큼 셀이 열을 점유
•
목록 - 충첩 가능
순서 없는 목록 - (점) 출력
<ul>
<li>아이템1</li>
<li>아이템2</li>
<li>아이템3</li>
</ul>
순서 있는 목록 – 1. 출력
<ol>
<li>아이템1</li>
<li>아이템2</li>
<li>아이템3</li>
</ol>
•
목록과 관련 있는 속성
<ol> 태그
•
start = “숫자” - 리스트 시작 숫자 설정
•
type = “문자” - 순서 문자 지정
•
reversed - 순서를 반대로
<li>태그 value=“숫자” - 해당 리스트의 아이템 번호 지정 + 속성에 키만 가짐
[chapter 7]
•
form 태그 – 웹 브라우저 입력 칸
action :데이터 보낼 URL 지정
method: 보내는 방식 지정 (값 get / post)
=> GET: 데이터를 URL 끝에 붙여 눈에 보이게 보냄 : 데이터 조회만을 위해
=> POST: 데이터를 URL에 적지 않고 숨겨서 보냄 :데이터 수정, 삭제, 작성을 위해(개인정보
•
input 태그: 사용자에게 입력을 받기 위해 사용되는 태그, 빈 태그
type : 태그의 종류를 결정(ex – passwork = ********)
name : 전송하는 데이터 구분 –키 역할
placeholder: 가이드 문구
value: 값
•
label 태그
for -
div 태그 – 태그를 나누기 위해 사용되는 태그
•
select – 선택지 제시 태그
name
value
option
<textarea>태그 : 한번에 많은 글을 입력 받을 때
botton 태그
submit
reset
[chapter 8]
•
CSS
p태그(선택자): 스타일 적용 html 선택
속성
값: 스타일 적용
;(세미클론)으로 구분
•
html에 css 적용방법
link style – HTML 외부에 있는 css 파일 불러옴
embedding style: HTML의 <head>에 <style>을 이용하여 CSS 작성
inline style: HTML요소에 직접 style 속성을 이용하여css 작성
[chapter 9]
•
선택자 기초
h1,p{ color : red } 중복 가능
•
단순선택자
타입- 해당태그를 가지는 모든 요소에 스타일을
클래스 - 비슷한 특징은 갖는 요소를 지정하여 묶어서 사용: .class {}
아이디 – id 로 스타일을 적용, 해당 id 하나에 적용 :#id {}
전체 – 모든 요소에 스타일을 적용 : *{}
속성 – 특정 속성을 소유하는 모든 요소에 적용 : 선택자[속성명 = “속성갑”]
•
복합선택자
<section>
<article>
<div></div>
<div></div>
<p></p>
</article>
</section>
자식 선택자–선택자 a의 모든 자식 중 선택자 B와 일치하는 요소 선택: 선택자a >선택자 b{}
후손 선택자-선택자 a의 모든 후손 중 선택자 B와 일치하는 요소 선택: 선택자a 선택자b {}
•
pseudo – 요소의 특정한 상태를 변경 할 때
link – 방문하지 않은 링크인 경우: 생성자:link
visited – 방문한 링크인 경우
hover- 요소에 마우스가 올라와 있을 경우
[chapter 10]
•
값,단위, 색
값
•
position property 에 사용 할 수 있는 값
단위: px, em, rem
1px(절대크기)
em, rem (상대적 길이)
em: 현재 스타일이 지정된 폰트크기의 기준
rem 최상위 요소의 폰트크기 기준 => 기준 font * 1em
%
색상
hex code : #~~~~~( 색 코드)
rgb: red, grean, blue
hsl
[chapter 11]
•
폰트와 관련된 속성
font-size
font-family-폰트 모양 font-family:’cute Font’, arial, cursive
font-style – 글자체 : normal,italic, oblique
font-weight : 굵기
+ font: 글자체 굵기 굴자크기 폰트
•
텍스트 정렬
text-align: 텍스트 좌, 우 중앙 정렬 -
line-heghit: 줄 간격 조절
letter-spacing – 글 간격
text-indent – 들여쓰기
[chapter 12]
•
박스 모델 개념
내용 – 실제 내용을 담는 부분
보더 - 내용을 감싸는 선
패딩- 내용과 보더 사이의 여백
마진- 보더 밖 여백
보더
border-style
border-width
border-color
border: 글자크기 선모양 두께
border-radius: 꼭짓점의 원
패딩
padding
마진
margin
다른 요소가 상하로 있다면 마진이 상쇄(큰 쪽 기준)
•
box_sizing -
[chapter 13]
display :요소가 보여지는 방식을 지정
display:block;
display:inline; - 높이 넓이 패딩 마진 값 X
display: inline-block
display: none
•
position
static: 좌표위치 변경 X
retaive: 상대 위치, 기본 위치를 기준으로 좌표를 사용함
absolute: 부모나 조상중 relative,absolute, fixed 가 선언된 곳을 기준으로 좌표 적용
fixed 보이는 화면을 기준으로 좌표 설정
z-index
숫자에 따라 화면에 보여야 하는 우선 순위
[chapter 14]
•
flexbox
flex-direction: flex 컨테이너 안의 item의 방향을 정함
flex-wrap: flex 아이템이 flex 컨테이너를 벗어났을 때 줄을 바꾸는 속성
justify-content: flex-direction으로 정해진 방향을 기준으로 수평으로 item을 정렬 방법
align-items: flex-direction으로 정해진 방향을 기준으로 수직으로 item을 정렬 방법
•
stretch(기본값), baseline 기준
align-content: flex-direction으로 정해진 방향을 기준으로 수직으로 여려 줄인 item을 정렬
flex-grow: flex 아이템의 확장과 관련된 속성
flex-shrink: flex 아이템의 축소와 관련된 속성
flex-basis – 아이템의 기본 크기 설정
[chapter 15]
•
상속
cascating 우선순위
•
중요도
•
명시도
•
선언순서
[chapter 16]
부트 스트랩