HTML / CSS / JS 기초

khxxjxx·2021년 11월 4일

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

개발자가 임의로 변수 안에 빈 데이터를 삽입한 상태(빈 데이터를 지정한 것)

khxxjxx

코린이

이전 포스트

Node.js (1)

다음 포스트

HTML / CSS / JS 기초

WEB

1. HTML : 정보 또는 설계도

2. CSS : 디자인 또는 스타일링

3. JS : 기능과 효과

1. HTML(Hyper Text Markup Language)

2. CSS(Cascading Style Sheet)

CSS 연동 방법 세가지

1) inline style sheet : 태그 안에 직접 원하는 스타일을 적용

2) internal style sheet : style 태그 안에 넣기

3) external style sheet : link 태그로 불러오기

CSS 선택자

- 부모 자식 관계

캐스케이딩

Block요소와 Inline요소

- block요소의 특징

- inline요소의 특징

박스 모델 구조

- 마진 병합 현상

레이아웃

transform

transition

animation

미디어쿼리

- viewport

3. JavaScript

변수

데이터 타입

- String

- Number

- Function

- Array

- Object

- Boolean

- undefined

- null

Node.js (1)

JavaScript Fundamental(ES5)

0개의 댓글