WEB
웹표준: 웹에서 요구하는 공식 표준이나 기술 규격을 만족하는지 여부웹 접근성: 장애 여부와 상관없이 모두가 웹사이트를 이용할 수 있는지 여부크로스 브라우징: 모든 브라우저와 기기에서 웹사이트가 제대로 작동하는지 여부
1. HTML : 정보 또는 설계도
2. CSS : 디자인 또는 스타일링
3. JS : 기능과 효과
1. HTML(Hyper Text Markup Language)
- 웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어
<열린태그 속성="속성값"> 컨텐츠 </닫힌태그>- 태그명 : HTML이 갖고 있는 고유의 기능<열린태그></닫힌태그>형태로 입력
- 컨텐츠 : 열린 태그와 닫힌 태그 사이에 있는 내용물
- 속성: HTML 태그가 갖고 있는 추가 정보
- 속성값 : 어떤 역할을 수행할지 구체적인 명령을 진행하는 것
| 태그 | 설명 |
|---|---|
<!DOCTYPE html> | - HTML5라는 신조어로 문서를 선언하는 태그 |
<html>...</html> | - HTML 문서의 시작과 끝을 의미, 모든 HTML 태그들은 <html>태그 안쪽에 입력 |
<head>...</head> | - 웹사이트의 간단한 요약 정보를 담는 영역 웹사이트에서 노출되지 않는 정보 |
<body>...</body> | - 웹사이트에서 눈에 보이는 정보를 담는 영역 이미지나 텍스트처럼 출력되는 정보 |
<meta charset="UTF-8"> | - character setting의 약자를 나타내는 문자코드 모든 문자를 웹 브라우저에서 깨짐없이 표시하겠다는 의미 - 인코딩 = 코드화 = 암호화 = 복호화 : 사람이 인지할 수 있는 형태의 데이터를 0과 1로 변환 - 디코딩 = 역코드화 = 복호화 : 인코딩의 반대 |
<title>...</title> | - 웹사이트 탭에 나타나는 제목을 적는 태그 |
<img> | - 정보성을 갖고 있는 이미지를 삽임 닫힌 태그 없음 - 정보성 : 시각적인 것은 정보라 할 수 없다 청각장애인이 알 수 있어야 한다 - src속성 : 삽입할 이미지 파일 경로 - alt속성 : 웹사이트가 이미지를 출력하지 못했을 경우, 텍스트 정보로 대체(웹접근성을 위해 필요) |
<h#>...</h#> | - Heading의 약자로 제목이나 부제목을 표현 - 숫자값이 클수록 폰트 사이즈가 작음. 즉, 숫자는 정보의 중요도를 나타냄 - h1 태그는 가장 중요한 정보를 담으므로 하나의 html 문서에서 한번만 사용됨 |
<p>...</p> | - paragraph의 약자로 본문 내용을 표현 - 웹사이트의 중요 정보를 담는 태그 - 나타내고자 하는 내용을 열린태그와 닫힌 태그 사이에 입력 |
<ul>...</ul> | - unordered list의 약자로 순서가 없는 리스트 생성 - 메뉴 버튼을 만들 때 사용되는 태그 |
<ol>...</ol> | - ul태그와 비슷하나 순서가 있는 리스트 생성 |
<header>...</header> | - 웹사이트의 머리글을 담는 공간 |
<nav>...</nav> | - 메뉴 버튼을 담는 공간 - (navigation) ul, li, a와 함께 사용 |
<main>...</main> | - 문서의 주요 내용을 담는 태그 - IE는 지원하지 않으므로 role="main" 속성 필수 입력 |
<article>...</article> | - 문서의 주요 이미지나 텍스트 등의 정보를 담고 구역을 설정하는 태그 - 태그내에 구역을 대표하는 타이틀 <h#> 태그가 존재해야 함 |
<footer>...</footer> | - 가장 하단에 들어가는 정보를 표기할 때 사용 |
<div> | - 임의의 공간을 만들때 사용 |
2. CSS(Cascading Style Sheet)
- 정보(HTML)와 디자인(CSS)의 분리
- 문서의 레이아웃과 스타일 정의
- HTML로 작성된 정보를 꾸며주는 언어
선택자 {속성 : 속성값;}- 선택자 : 디자인을 적용할 HTML 영역
- 속성 : 어떤 디자인을 적용할지 정의
- 속성값 : 어떤 역할을 수행할지 구체적으로 명령. 세미콜론(;) 필수 입력
| 기본 속성 | 설명 |
|---|---|
| width | - 선택한 요소의 넓이를 설정 가변값(%), 고정값(px) |
| height | - 선택한 요소의 높이를 설정 |
| font-family | - 쉼표로 구분하며 브라우저마다 지원하는 폰트가 다르기 때문에 입력한 순서대로 우선순위 적용 - sans-serif는 모든 브라우저에서 사용이 가능하므로 마지막에 작성하여 디폴트 값으로 준다 |
| border-style | solid(실선), dotted(점선) |
| border | - border-style, border-width, border-color를 border를 이용해서 한줄에 이어쓸수 있다 - 이때, 쉼표는 작성하지 않고 띄어쓰기만 하며 순서는 상관없다(ex. border: 10px solid red;) |
CSS 연동 방법 세가지
1) inline style sheet : 태그 안에 직접 원하는 스타일을 적용
<h1 style="color:red;"> coding </h1>2) internal style sheet : style 태그 안에 넣기
<head>
<style>
h1 { background-color: yellow; }
</style>
</head>3) external style sheet : link 태그로 불러오기
- html, css 각각의 문서 안에서 따로 관리하여 상대적으로 가독성이 높고 유지보수가 쉬움
<head>
<link rel="stylesheet" href="style.css">
</head>CSS 선택자
- type(태그) : 특정 태그에 스타일을 적용
- .class(태그 별명) : CLASS 이름으로 특정 위치에 스타일을 적용
- #id(태그 이름) : ID를 이용하여 스타일을 적용
- 부모 자식 관계
<header>
<h1>HEader h1</h1>
<p>Header p</p>
</header>
・ header -> h1, header -> p : 부모 자식 관계
・ h1, p : 형제 관계
・ 선택자에서 공백을 통하여 부모 자식 관계를 나타낼 수 있다캐스케이딩
- css의 우선순위를 결정하는 세가지 요소
- 순서에 의한 캐스케이딩 : 나중에 적용한 속성값의 우선순위가 높음
- 디테일에 의한 캐스케이딩 : 더 구체적으로 작성된 선택자의 우선순위가 높음
- 선택자에 의한 캐스케이딩 : style > id > class > type 순으로 우선순위가 높음
Block요소와 Inline요소
- 두 요소를 구분짓는 세가지 주요 특징 : 줄바꿈 현상, 가로 세로, 상 하 배치
- block 요소 : Y축 정렬 형태로 출력(줄바꿈 현상) 공간을 만들 수 있고, 상 하 배치 작업 가능
- Inline 요소 : X축 정렬 형태로 출력(한 줄에 출력) 공간을 만들 수 없고, 상 하 배치 작업 불가능
- block요소의 특징
- p 태그가 대표적
- 줄바꿈 현상이 나타남
- width, height 값 사용 가능 -> 공간 만들기 가능
- margin, padding 값 사용 가능 -> 상하 배치 작업 가능
- inline요소의 특징
- a 태그가 대표적
- 줄바꿈 현상 없음
- width, height 값 적용 불가
- margin, padding의 top, bottom 값 적용 불가
박스 모델 구조
margin -> border -> padding -> content- margin 과 padding 차이 : border를 중심으로 바깥쪽에 있으면 Margin 안쪽은 padding
- top right bottom left 순서로 한줄에 작성 가능
- top, bottom, left, right 를 0으로 주면 width, height 100%를 준거와 같은 효과를 발휘
- 마진 병합 현상
- 형제지간의 마진 병합 : margin-top과 margin-bottom 중 숫자가 큰 값으로 적용
- 부모지간의 마진 병합 : 자식뿐만 아니라 부모에도 영향을 미침
레이아웃
display: block과 inline 요소의 성격을 바꿀 때 사용 inline-block을 사용하면 두 요소의 성격을 모두 가짐float: 선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬시키고자 할 때 사용 이름 그대로 선택자를 띄워 새로운 레이어층을 만듬clear: float에 대한 속성을 제어하고자 할 때- 레이아웃 초기화 : html과 body 태그는 기본적으로 margin과 padding 값을 가지므로 초기화를 해 브라우저와 공간 사이의 공백을 제거해준다
*선택자를 사용하여 모든 html 태그를 선택할 수 있다
transform
- 특정 영역을 회전시키거나, 확대/축소, 각도를 변경하여 비틀거나 위치를 변경하는 등의 효과를 적용할 때 사용
- 한줄씩 쓸경우 나중에 작성한 transform 속성만 적용되고 한줄에 쓸경우 다 적용된다
rotate(45deg): 도형 45도 회전scale(2, 3): 가로폭 두배, 세로폭 세배 확대(기준점은 기존박스의 정가운데)translate(100px, 200px): x좌표와 y좌표 변경skew(10deg, 20deg): x축으로 10도, y축으로 20도 비틀기
/* 맨 마지막에 작성한 효과만 적용 */
tranform : rotate(45deg);
tranform : scale(2, 3);
tranform : translate(100px, 200px);
tranform : skew(10deg, 20deg);
/* 효과 중첩 */
tranform : rotate(45deg) scale(2, 3) translate(100px, 200px) skew(10deg, 20deg);transition
- 특정 조건 하에서 애니메이션이 동작되는 과정을 보여주고자 할 때 사용
- 속성값들을 한줄로 작성할 때 항상 duration이 먼저, delay가 나중에 작성되어야 하고 나머지 속성값의 순서는 상관없다
transition-property: 적용시킬 속성transition-duration: 총 시간transition-timing-function: 진행 속도transition-delay: 시작 연기
transition-property : width;
transition-duration : 2s;
transition-timing-function : linear;
transition-delay : 1s;
/* 한줄 작성 */
transition: width 2s linear 1s;animation
- 특정 지점별로 애니메이션 효과를 적용할 때 사용된다
@keyframes 애니메이션이름 { }을 사용하여 효과가 어떤 형태로 일어날지 정할 수 있다- transition과 마찬가지로 animation도 속성값들을 한 줄로 작성할 수 있다
animation-name: @keyframes에서 정한 이름과 동일한 이름을 사용해야 한다animation-iteration-count: 반복횟수animation-direction: 진행방향
.animation {
width: 300px;
height: 300px;
background-color: yellow;
animation-name: changeWidth;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: 6;
animation-direction: alternate;
/* 한줄 작성 */
animation: changeWidth 3s linear 1s 6 alternate;
}
@keyframes changeWidth {
from {
width: 300px;
}
to {
width: 600px;
}
}++ transition 속성과 animation 속성의 가장 큰 차이는 transition 속성은 요소의 상태가 바뀌어야(조건) 바뀌는 상태를 애니메이션으로 표현하지만, animation 속성은 요소의 상태 변화와 상관 없이 애니메이션을 실행한다. 또한, @keyframes 속성(from, to, 0% ~ 100%)으로 프레임을 추가할 수 있고 이름을 사용함으로써 재사용이 용이하다
미디어쿼리
- 모바일에 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS구문
- 미디어쿼리 외부 영역에 있는 CSS속성을 상속받으므로 상속을 받지 않고자 하면 속성값을 none으로 지정해 준다
@media () and () { }의 형태로 미디어 쿼리를 작성
.media {
width: 500px;
height: 500px;
background-color: red;
}
@media (min-width: 320px) and (max-width: 800px) {
.media {
width: 300px;
height: 300px;
background-color: yellow;
border: 10px solid blue;
}
}- viewport
- 디지털 기기에 표시되는 화면
- 모바일이나 태블릿은 미리 설정되어 있는 viewport로 인해 미디어쿼리가 제대로 작동하지 않을 수 있다
- 따라서 미디어쿼리를 사용할 때는 meta 태그의 속성 중 하나인 viewport을 입력해, 넓이와 배율을 조정한다
/* viewport의 가로폭 = 디바이스의 가로폭, 비율은 항상 1.0 */
<meta name="viewport" content="width=device-width, initial-scale=1.0">3. JavaScript
- 이미지 슬라이드 효과, 팝업 효과 등의 기능을 포함한 동적인 웹사이트 제작 시 사용되는 프로그래밍 언어
- script 태그안에 src 속성값으로 js 파일을 입력해 html 파일과 연동할 수 있다
<script scr="index.js"></script>
변수
- 데이터를 담는 공간
- 변수명은 숫자로 시작할 수 없고 최대한 자세하게 작성하며 의미가 불명확한 단어들의 조합은 피한다
- 변수 선언 방식으로는 var와 let, const 가 있다
- var : 선언하기 전에 값을 할당하는 것이 가능하고 { 블럭 } 을 무시하기 때문에 더이상 사용하지 않는다
- var, let은 변수에 재할당이 가능하지만, const는 재 할당이 불가능하다
- var은 함수 스코프, let과 const는 블록 스코프 변수이다
데이터 타입
- String
- "큰 따옴표" 또는 '작은 따옴표' 안에 작성된 데이터
- 문자열 안에 따옴표를 넣을 경우 안에 넣을 따옴표와 다른 따옴표를 이용해서 문자열을 묶어주거나 앞에 역슬래시 \ 를 넣어준다
"jin's home"'jin\'s home'
- Number
- 별도의 기호 없이 숫자를 입력한 상태
- Function
- 이름이 있는 함수와 없는 함수로 구분할 수 있다
- 이름이 없는 함수의 경우 할당된 다음부터 호출이 가능하고(hoisting 불가) arrow 함수로 사용이 가능하다
// 이름이 있는 함수
function print() {
console.log('hi');
}
// 이름이 없는 함수
const print = function() {
console.log('hi');
}
// arrow 함수
const print = () => {
console.log('hi')
}매개변수: 인자로부터 전달받은 값이 들어가는 통로(상황에 따라 생략 가능)인자: 함수에게 전달하는 데이터return: 함수 안에 데이터를 저장할 때 사용
const plus = function(x, y) { // x, y : 매개변수
return x + y
}
// 함수 호출
plus(2, 5) // 2, 5 : 인자- Array
- 비슷한 성격을 갖고 있는 데이터를 하나의 변수 안에서 관리
- index 값은 0부터 시작한다
- index를 사용하여 접근 후 새로운 데이터를 대입할 수 있다
- Object
- 프로퍼티, 메서드, 데이터로 구성되어있고 여러 종류의 데이터 타입 삽입이 가능하다
객체명.프로퍼티명또는객체명['프로퍼티명']으로 값을 불러오거나 값을 변경할 수 있다
const hxxjxx = {
name: 'heejin', // 프로퍼티 : 데이터
age: 25,
skills: ['HTML', 'CSS', 'JS', 'React'],
// 메서드
hello: name => console.log(`hi! ${name}`),
};
console.log(hxxjxx.age); // 25
console.log(hxxjxx['age']); // 25- Boolean
- true 또는 false 데이터가 들어가 있는 상태
- undefined
- 변수 안에 데이터를 입력하지 않은 상태(데이터가 없는 것)
- null
- 개발자가 임의로 변수 안에 빈 데이터를 삽입한 상태(빈 데이터를 지정한 것)
코린이