HELLO :3 IM RESHUR

CSS : a 태그중 원하는 것만 스타일링을 하고싶을 때

RESHUR : 레슈 — Thu, 24 Nov 2022 15:28:28 +0900

naver google

<a>를 사용하다가 원하는 앵커만 스타일링을 하고 싶을 때 사용

<!-- HTML코드 -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
  </head>
  <body>
    <a href="naver.com">naver</a>
    <a href="google.com">google</a>
    <a> Empty </a>
  </body>
</html>

<a> 내에 href 가 있는 태그만 선택하고 싶은 경우

a[href] {
  color: red;
}

a [href]을 사용하면 <a> 중 href가 있는 것만 선택할 수 있다.

<a> 내에 특정 경로가 들어있는 태그만 스타일링하고 싶은 경우

      a[href="google.com"] {
        color: red;
      }

<a> 내에 특정 경로로 시작 /끝인 것만 스타일링하고 싶은 경우

/* 특정 경로로 시작하는 것*/
a[href^="google"] {
  color: red;
}

/* 특정 경로로 끝나는 것 */
a[href$=".com"] {
  color: red;
}

시작하는 건 href^를 사용하고, 끝나는 건 href$를 사용한다.

Front-end Dev Road Map

RESHUR : 레슈 — Mon, 21 Nov 2022 20:12:29 +0900

Front-end Dev Road Map

프론트엔드 개발자 로드맵
typescript 필수 / BEM

https://roadmap.sh/frontend

Developer Roadmaps

Community driven roadmaps, articles, guides, quizzes, tips and resources for developers to learn from, identify their career paths, know what they don't know, find out the knowledge gaps, learn and improve.

roadmap.sh

tip : HTTP의 모든 응답상태코드를 알려주는 사이트

RESHUR : 레슈 — Thu, 8 Sep 2022 00:26:55 +0900

HTTP Status Codes

The server has fulfilled the request but does not need to return an entity-body, and might want to return updated metainformation. The response MAY include new or updated metainformation in the form of entity-headers, which if present SHOULD be associated

www.restapitutorial.com

모든 HTTP 응답 상태 코드가 적혀있는 사이트입니다.
별표★ 가 되어있는 건 자주 발생하는 응답 코드입니다. 그 외의 내용을 확인하려면 원하는 응답 코드를 클릭해서 확인하시면 됩니다.

원하는 응답상태 코드를 클릭하시면 내용을 확인할 수 있습니다.

JS : 논리 연산자 && , || (AND, OR)

RESHUR : 레슈 — Wed, 7 Sep 2022 23:13:52 +0900

JS : 논리 연산자 && , || (AND, OR)

논리 연산자 && (AND)

모든 값이 true이면 true이다.
하나라도 false가 있으면 false를 반환한다. (조건이 모두 true여야 true 반환)

예시

const name = "Tom";
const age = 12;

if (name === "reshur" && age > 10) {
    console.log("안녕하세요 reshur 님");
} else {
    console.log("누구세요?");
}

// 반환값 : 누구세요?

age는 조건에 해당되나 (age가 12여서 10보다 크다) 이름이 Tom(false) 이아서 false를 반환하였다.

조금더 응용해본다면, 아래와 같이 user에게 받은 정보를 검증할수있게 된다.

논리연산자 || (OR)

조건중 둘중에 하나라도 true이면 true를 반환한다.
true || false === true

예시

const name = reshur;
const age = 3;

if (name === "reshur" || age > 10) {
    console.log("안녕하세요 reshur 님");
} else {
    console.log("누구세요?");
}

// 반환값 : 안녕하세요 reshur 님

age는 3으로 조건에 맞지않지만 (false) 이름이 reshur이기에 true를 반환함

&&(AND)와 ||(OR)의 우선순위

&&(AND)가 ||(OR)보다 우선순위가 더 높다

const gender = "F";
const age = 19;
const name = "reshur";

if (age > 20 && gender === "F" || name === "reshur") {
    console.log("방문을 환영합니다.");
} else {
    console.log("누구세요?");
}

// 반환값 : 방문을 환영합니다.

&&가 ||보다 우선순위가 더 높기때문에 age>20 && gender === "F"에서는 false를 반환했지만,
||에선 둘중 하나만 true여도 true값을 반환하기때문에 "누구세요"가 아닌 "방문을 환영합니다."를 반환했다.
만약, 나이가 20세이상 이고 성별이 F이거나 reshur 인 조건이라면

const gender = "F";
const age = 19;
const name = "reshur";

if (age > 20 && (gender === "F" || name === "reshur")) {
    console.log("방문을 환영합니다.");
} else {
    console.log("누구세요?");
}

// 반환값 : 누구세요?

JS : 논리 부정 연산자 ! (NOT)

JS : 논리 부정 연산자!(NOT) 논리 부정 연산자! 는 피연산자의 의미를 반전시킨다. true를 false로, false를 true로 바꾼다. reshur !reshur ture false false true 예시 const name = "reshur"; if (!name){con..

sol-reshur.tistory.com

JS : 논리 부정 연산자 ! (NOT)

RESHUR : 레슈 — Wed, 7 Sep 2022 22:16:48 +0900

JS : 논리 부정 연산자!(NOT)

논리 부정 연산자! 는 피연산자의 의미를 반전시킨다.
true를 false로, false를 true로 바꾼다.

reshur	!reshur
ture	false
false	true

예시

const name = "reshur";

if (!name){console.log("이름을 적어주세요")}
	else{
  		console.log(`반갑습니다 ${name} 님`)
	}
// '반갑습니다 reshur 님'

이름이 적혀있지 않다면 '이름을 적어주세요'를 실행하고, 그렇지 않으면'반갑습니다 ${name} 님'을 실행하세요.
true를false로, false를 true로 바꾼다. name안에 reshur가 들어있으므로 true이기 때문에 뒤에가 실행되었다.

const age = 10;
const agecheck = age > 19;

if (!agecheck) {
    console.log("성인만 확인 가능합니다.");
} else {
    console.log("어서오세요");
}

// 반환값 :'성인만 확인 가능합니다.'

agecheck는 19보다 클 때, agecheck앞에! 가 붙어서 해당 조건이 아닐 경우엔 "성인만 확인 가능합니다"를 반환하고, 만약 조건이 통과된다면 "어서 오세요"를 반환한다.

JS : 논리 연산자 && , || (AND, OR)

JS : 논리 연산자 && , || (AND, OR) 논리 연산자 && (AND) 모든 값이 true이면 true이다. 하나라도 false가 있으면 false를 반환한다. (조건이 모두 true여야 true 반환) 예시 const name = "Tom"; cons..

sol-reshur.tistory.com

GIT : git 명령어 모음

RESHUR : 레슈 — Wed, 7 Sep 2022 21:00:52 +0900

GIT : git 명령어 모음

git 임시저장

- git 임시저장

git stash

- git 임시저장 리스트 확인

git stash list

- git 임시저장 내용 불러오기

git stash list

VScode : VSCODE Extension 추천 (22.08기준)

RESHUR : 레슈 — Fri, 26 Aug 2022 01:10:56 +0900

VScode : VSCODE Extension 추천 (22.08기준)

VSCODE Extension 추천

Live Server

html 혹은 CSS를 작성했을때 별도의 새로고침없이 바로 확인할수 있게 도와주는 라이브서버 (liveserver) 확장자

Live Server - Visual Studio Marketplace

Extension for Visual Studio Code - Launch a development local Server with live reload feature for static & dynamic pages

marketplace.visualstudio.com

Auto Rename Tag

시작 태그를 수정할때 자동으로 종료태그도 함께 수정해주는 확장자

Auto Rename Tag - Visual Studio Marketplace

Extension for Visual Studio Code - Auto rename paired HTML/XML tag

marketplace.visualstudio.com

Auto Close Tag

시작태그를 입력하면 자동으로 종료태그를 입력해주는 확장자

Auto Close Tag - Visual Studio Marketplace

Extension for Visual Studio Code - Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text

marketplace.visualstudio.com

Code Spell Checker

code를 입력하다보면 가끔 버그가 생기는데, 찾아보면 철자가 틀려서 생기는 오류가 종종 있어서 철자를 체크해주는 확장자를 설치해서 쓰고 있습니다.
사용하니 철자로 인한 버그가 굉장히 줄었습니다.

Code Spell Checker - Visual Studio Marketplace

Extension for Visual Studio Code - Spelling checker for source code

marketplace.visualstudio.com

colorize

색상을 입력할때 red나 white 처럼 색상명을 그대로 적을경우엔 어떤 색인지는 알지만 #1e4678 처럼 색상코드로 되어있을경우에는 어떤색인지 직접 적용해봐야 알수있는데 이 확장자는 색상코드를 입력하면 해당 색상을 보여주는 확장자 입니다.

colorize - Visual Studio Marketplace

Extension for Visual Studio Code - A vscode extension to help visualize css colors in files.

marketplace.visualstudio.com

사용하면서 유용했던 Extension 은
계속 추가할 예정입니다

오류해결 : 'next/babel' 오류 수정하기

RESHUR : 레슈 — Wed, 24 Aug 2022 22:21:50 +0900

오류해결 : 'next/babel' 오류 수정하기

next로 프로젝트를 만들때마다 import 부분에 오류가 뜨는데 대부분은 babel module을 못찾았다는 오류이다.
저 오류는 enslint 에서 parsing error를 알려주는건데 여간 성가신게 아니다, 지금 난 babel을 설치하지도 않았는데
찾다보니 enslint 설정에 babel을 추가하면 되는거라 해결법을 공개한다.
생각해보니 옛날에 babel을 설치하긴 했는데 현재는 사용하지않아서 잊고있다가 이런 오류가 가끔 뜰때마다 '아 옛날에 설치했었지!' 라고 하는 정도다......... 에러는 항상 뜨는 듯..

babel 을 사용중이라면

.babelrc 를 만든다음 아래의 내용을 추가해준다.

{
  "presets": ["next/babel"],
  "plugins": []
}

그리고 .eslintrc 에 아래 내용을 추가해준다.

{
  "extends": ["next/babel","next/core-web-vitals"]
}

babel을 사용하고 있지 않다면

.eslintrc 에 아래 내용을 추가해준다.

{
  "extends": ["next/babel","next/core-web-vitals"]
}

오류가 사라진것을 볼수있다.

별다른 걸 한건 아니고, json에 babel을 추가해줌으로 eslint가 모듈을 찾을수 있게 해준것이다.

오류해결 : homebrew command not found 오류 해결

RESHUR : 레슈 — Tue, 23 Aug 2022 22:51:37 +0900

상단과 같이 꾸미고 싶어서 설치를 하던 중 HomeBrew를 찾을 수 없다는 난관에 부딪혔다.
맥북 초기 설정할 때 웬만한 건 다 설치했는데 지금 보니 안돼서 시도했던 방법들을 적어두려고 한다.
알아보니 M1 맥북에서 자주 발생하는 것 같다.
기존 인텔칩에서는 homebrew가 /usr/local/bin에 설치가 되었는데, M1에서는 /opt 하위로 경로가 바뀌어서 경로를 찾지 못해 발생하는 문제라고 한다.

들어가기 전에

터미널에 PATH 등을 입력할 때 직접 치는 것보다 복사&붙여 넣기 후 :wq (설정 저장 및 나가기)를 권장합니다.
간혹 터미널을 종료하면 반영된다는 글을 보았는데 해보니 저장 안 되었습니다.
수정할 것이 있어서 수정했는데 -INSERT-가 되어 :wq가 안될 경우 ESC를 누르면 insert 모드가 해제되어 :wq 입력 가능합니다.

01 : Home Brew 삭제 후 재설치

1. 터미널에 하단의 스크립트를 입력 후 Enter 이후 y를 입력하여 삭제를 한다.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall.sh)"

2. /usr/local 폴더에서 Home Brew 디렉터리까지 삭제하면 끝이다.

rm -rf Homebrew/

Home Brew 설치

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

결과 : 해결안됨

zsh: command not found: brew

02. Home Brew 수동 설치 ( https://docs.brew.sh/Installation 참고)

1. /opt 디렉토리로 이동한다.

cd /opt

2. Homebrew 디렉토리를 만든다 (root 권한 필요)

sudo mkdir homebrew

3. /opt/homebrew 디렉토리의 소유권을 부여한다 (root 권한이 필요 없도록 하기 위해서)
-R 은 하위 모든 소유자를 바꾼다는 의미

sudo chown -R $(whoami) /opt/homebrew

4. homebrew를 다운로드 및 설치

curl -L https://github.com/Homebrew/brew/tarball/master | tar xz --strip 1 -C homebrew

5. homebrew/bin 디렉토리에 PATH를 추가한다.

echo "export PATH=/opt/homebrew/bin:$PATH" >> ~/.zshrc

6. 하단의 명령어 실행을 해준다.

/bin/bash -c "$(curl -fsSL https://gist.githubusercontent.com/nrubin29/bea5aa83e8dfa91370fe83b62dad6dfa/raw/48f48f7fef21abb308e129a80b3214c2538fc611/homebrew_m1.sh)"

결과 : 해결안됨

zsh: command not found: brew

03. HOME BREW가 권장하는 git mirroring 을 이용하여 설치하기

1. opt 경로로 이동한다.

cd /opt

2. /opt/homebrew 디렉토리의 소유권을 부여한다 (root 권한이 필요 없도록 하기 위해서)
-R 은 하위 모든 소유자를 바꾼다는 의미

sudo chown -R $(whoami) /opt/homebrew

03. bash_profile를 열어 PATH 추가

sudo vim ~/.bash_profile
# password는 맥 로그인시 입력하는 비밀번호 입력 (입력해도 아무것도 안보이지만 입력되는거 맞음)
export PATH=/opt/homebrew/bin:$PATH
:wq

04. /opt/homebrew/bin/brew에 shellenv 추가

eval $(/opt/homebrew/bin/brew shellenv)

05. Home Brew에서 권장하는 git remote mirroring를 이용하여 설치한다.

/bin/bash -c "$(curl -fsSL https://gist.githubusercontent.com/nrubin29/bea5aa83e8dfa91370fe83b62dad6dfa/raw/48f48f7fef21abb308e129a80b3214c2538fc611/homebrew_m1.sh)"

06. .zshrc를 열어 PATH를 입력해준다.

vi ~/.zshrc

#하단에 아래 PATH 기재
PATH=/opt/homebrew/bin:$PATH
:wq

07. 설정 반영후 확인

source ~/.zshrc
brew -v

결과 : home brew 정상작동!!

brew -v

Homebrew 3.5.10
Homebrew/homebrew-core (git revision 817a78a2860; last commit 2022-08-24)
Homebrew/homebrew-cask (git revision b59fd4a31c; last commit 2022-08-24)

HTTP : Hyper Text Transfer Protocol

RESHUR : 레슈 — Tue, 23 Aug 2022 00:18:18 +0900

HTTP : Hyper Text Transfer Protocol

HTML과 같은 하이퍼미디어 문서( 텍스트/하이퍼텍스트 )를 전송하기 위한 애플리케이션 프로토콜이다.
웹 브라우저와 웹 서버간의 커뮤니케이션을 위해 만들어졌지만 여러가지 목적으로도 사용이 가능하다.
하나의 컴퓨터(웹)에서 다른 컴퓨터(서버)로 요청을 하면 응답을 받는 형태이다.
- 작성자 : 레슈 제목: "안녕하세요" 글을 등록해줘 (요청)
  웹에서 서버로 요청이 들어가면 서버에서는 받은 데이터를 DB에 저장한다.
  이때 데이터는 텍스트 혹은 하이퍼텍스트 형태로 요청이 된다.
- 등록 완료 (응답)
  DB에 정상적으로 등록이 되면 완료되었다고 상태 코드와 함께 응답이 된다.
  응답을 할 때 상태 코드만 전달될 수도 있고, 백엔드 개발자가 지정하였을 경우 응답 메시지와 함께 전달될 수 있다.

API : API 이란?

RESHUR : 레슈 — Sun, 21 Aug 2022 22:37:33 +0900

API : API 이란?

API (Application Programming Interface)는 둘 이상의 컴퓨터 프로그램이 서로 데이터를 주고받는 방식을 뜻한다.
API를 쉽게 비유하면 손님(프로그래머)이 카페에서 메뉴판(API)을 보고 직원(프로그램 혹은 서버)에게 원하는 메뉴를 주문하는 것으로 생각하면 쉽다.
웹API 뿐만아니라 프로그램API 등 다양하게 존재한다.
어플리케이션,서버를 만들면 사람들은 API를 이용하여 해당 기능을 사용한다.

// API가 가져야할 내용 

GET https://en.wikipedia.org/wiki/ Hello_(Adele_song)
// method (요청방식) / endpoint (어떤데이터를 원하는지) / 자료요청에 대한 추가 정보 순서

API 종류

public API : 누구나 사용가능한 공개 API
private API : 사내에서 사용하는 API
partner API : 지정된 사람만 사용할수 있는 API

Web API

Web API | MDN

웹 코드를 작성한다면 많은 API를 사용할 수 있습니다. 아래 목록은 웹 앱이나 웹 사이트를 만들 때 사용할 수 있는 모든 인터페이스(객체의 유형)입니다.

developer.mozilla.org

ETC : 보일러 플레이트 (Boilerplate)

RESHUR : 레슈 — Sat, 20 Aug 2022 12:40:51 +0900

ETC : 보일러 플레이트 (Boilerplate)

19세기에 증기 보일러를 만들 때 틀로 사용하는 강철판을 의미하는데, 보일러의 이름 및 제조정보가 새겨져 있었다.
이후 인쇄 분야로 넘어가면서 반복해서 사용하는 텍스트를 의미하게 되었다.
프로그래밍에서의 보일러플레이트(또는 코드)는 최소한의 변경으로 여러곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드를 말한다.
예를 들어 쇼핑몰을 만들때 필수로 들어가는 회원가입 기능, 로그인 기능, 결제 기능 등 필수 기능들의 폴더를 만들어놓고 프로젝트를
시작하는데 반복되지만 자주 쓰이는 형태를 보일러플레이트 라고 한다.
react에서는 초기 폴더 구조를 의미한다.

초기 폴더 구조

저는 주로 NEXT.js를 사용하는데, 현재 만들고 있는 폴더를 기준으로 초기 폴더구조를 설명해보면

node_modules : 라이브러리 / 프레임워크 저장되는 곳 (실제 저장되는 곳)
pages : 해당 프로젝트의 웹페이지들을 저장하는 곳
public : 사진이나 아이콘 등이 들어있는 곳
styles : CSS
.eslintrc.json : eslintrc 매뉴얼
.gitignore : git에서 제외될 파일 설정
package.json : 기본 매뉴얼 (해당 프로젝트에서 어떤 라이브러리/프레임워크가 설치되어있는지 알수있다.)
README.md 상세 매뉴얼 (개발자가 해당 프로젝트를 다른 이에게 소개를 하기 위해 작성함)
yarn.lock : 버전 잠금 파일로서 처음 설치했던 당시의 버전들이 적혀있다.

HTTP : HTTP 응답 상태 코드

RESHUR : 레슈 — Thu, 18 Aug 2022 21:36:04 +0900

HTTP 이란?

HTML과 같은 하이퍼미디어 문서( 텍스트/하이퍼텍스트 )를 전송하기 위한 애플리케이션 프로토콜이다
브라우저가 서버에 요청을 하면 서버에서는 브라우저로 응답을 하는데, 이때 서버는 상태 코드를 포함하여 응답한다.
- 브라우저가 서버에 원하는 동작.요청URL.사용중인 HTTP 버전 이 담긴 HTTP 메세지를 서버로 요청하면,
  서버는 사용 중인 HTTP 버전.상태 코드.상태코드에 대한 사유 가 담긴 메세지로 응답한다.

GET search?q=hello HTTP/1.0 // 요청 : Method Query HTTP Version 순서

HTTP/1.0 200 ok // 응답 : HTTP Version Status Code Reason-Phrase 순서

HTTP : Hyper Text Transfer Protocol

HTTP : Hyper Text Transfer Protocol HTML과 같은 하이퍼미디어 문서( 텍스트/하이퍼텍스트 )를 전송하기 위한 애플리케이션 프로토콜이다. 웹 브라우저와 웹 서버간의 커뮤니케이션을 위해 만들어졌지만

sol-reshur.tistory.com

HTTP 상태코드 (Status Code)이란?

클라이언트가 보낸 요청의 처리상태를 숫자를 이용하여 응답하는데 이것을 상태 코드라고 한다.
모든 코드를 다 알고 있을 필요는 없으며, 상태코드의 앞자리를 통하여 어떤 상태인지 알 수 있다.(하단 참조)
- 정상적인 요청에 프로세스를 계속 처리하기 때문에 100번대의 상태 코드는 거의 사용하지 않는다.

tip : HTTP의 모든 응답상태코드를 알려주는 사이트

HTTP Status Codes The server has fulfilled the request but does not need to return an entity-body, and might want to return updated metainformation. The response MAY include new or updated metainfo..

sol-reshur.tistory.com

PICTURE : 2020.04.21

RESHUR : 레슈 — Thu, 18 Aug 2022 01:25:07 +0900

GUI : Graphical User Interface

RESHUR : 레슈 — Tue, 16 Aug 2022 23:56:38 +0900

GUI : Graphical User Interface

GUI (Graphical User Interface)는 사용자(user)가 그래픽 아이콘이나 메뉴 등을 통해 컴퓨터와 상호작용하는 것을 말한다.
대표적으로 아이콘을 클릭해서 어플리케이션을 실행하거나 파일을 다른 폴더에 이동 시키는 등 사용자가 아이콘이나 스크롤 등을 이용하여 특정 작업을 완료할 수 있는 것을 말한다.
최초의 GUI는 Xerox에서 개발되었다.
이전엔 GUI는 마우스와 키보드를 통해서 제어했으나 스마트폰과 태블릿 과 같은 모바일 장치에선 작동이 어려워 터치스크린 인터페이스를 사용하도록 설계되었으며, 현재는 음성 명령으로도 제어가 가능하다.
대표적으로 윈도우 시작화면, 파일의 메뉴 목록 등등 대부분의 최신운영체제에서 사용되는 그래픽 아이콘 및 시각적 표시들

예시: 윈도우 시작 화면

예시 : 파일의 메뉴 목록

일상 : 포트폴리오 사이트 만드는 중 입니다.

RESHUR : 레슈 — Tue, 16 Aug 2022 23:54:04 +0900

취업때 사용할 포트폴리오 사이트를 만들고 있습니다.

디자인도 하고 직접 구현도 해보고,

직접 배포 해야하는데 생각하는건 쉽지만 실행하는건 어렵더라구요

어려우니 자꾸 딴짓하고 싶고

이게다 어릴떄 안쓰던 머리 뒤늦게 쓰려니까 이러는거에요

메인홈은 만들었고 이제 프로젝트들을 올려놓을 갤러리를 만들어야합니다.

전 심플한게 좋으니까 심플하게 만들거예요

살짝 공개하면 아래와 같이 구성되어있습니다.

핑크색 만세!
위치가 어떻게 되는지 보려고 핑크로 색상을 주었는데

굉장히 맘에 드는데 이제 헤어질 시간이 얼마 남지 않았습니다.

빨리 완성하고 여기저기 자랑하고 싶습니다.

모두들 여기보세요

제가 만들었어요 !

SERVER : 우분투를 이용하여 안쓰는 노트북으로 개인서버 만들기 (설치기)

RESHUR : 레슈 — Wed, 10 Aug 2022 01:39:47 +0900

SERVER : 우분투를 이용하여 안 쓰는 노트북으로 개인 서버 만들기

토이 프로젝트를 만들 때 사용할 웹 서버가 필요해서 알아보던 중 우분투(Ubuntu)를 통해서 안 쓰는 노트북을 개인 서버로 만들 수 있다고 하여 만들어보기로 했다.
웹사이트에 들어가면 우분투 멀티패스와 우분투 (수동 서버)로 나뉘는데, 현재 수동 서버에서 멀티패스로 넘어가는 과정인 것 같다.
멀티패스는 우분투 서버 사용을 좀 더 간편하게 사용할 수 있고, 보안 업데이트가 최신으로 지원되고, cloud-init 지원 등 많은 장점이 있다.
그에 비해 우분투(수동 서버)는 보안지원이 2027년 4월까지 이다.
그렇다면 우분투 멀티패스를 사용하는 것이 좋겠지만, 오래된 내 노트북은 힘겨운지 설치 후 초기 설정을 하려고 하면 계속해서 튕겨서 수동 서버로 서버를 만들기로 결정했다.

서버로 만들고자 하는 노트북 사양이다.

이 글은 설치하려는 노트북의 OS가 윈도여서 윈도 기준으로 작성되었습니다.

우분투 다운로드

https://ubuntu.com/download/server

Get Ubuntu Server | Download | Ubuntu

Get Ubuntu Server one of three ways; by using Multipass on your desktop, using MAAS to provision machines in your data centre or installing it directly on a server.

ubuntu.com

상단의 링크로 들어가면 바로 보이는 것이 우분투 멀티패스 다운로드 화면이다.
나는 우분투 (수동 서버)를 설치할 것이므로, Option 1 Instant Ubuntu VMs 이 아닌 Option 2 Manual server installation를 눌러 Download Ubuntu Server 22.04 LTS를 다운로드하였다. (22.08.10 기준)

USB에 우분투 ios를 설치

https://www.balena.io/etcher/

balena - The complete IoT fleet management platform

Infrastructure and tools to develop, deploy, and manage connected devices at scale. Your first ten devices are always free.

www.balena.io

BalenaEtcher는 USB에 운영체제 이미지를 구울 수 있게 해주는 프로그램이다
설치할 때는 한국어로 설치가 되었는데 막상 실행시켜보니 영어로 나온다. 그래도 매우 단순한 UI를 가지고 있어서 문제없이 사용할 수 있었다.
ios를 USB에 구울 때 굽기 전에 꼭 포맷을 한 뒤에 진행해야 한다. 그렇지 않을 경우 디스크 쓰기 금지가 되어 USB를 못쓰게 되는 경우가 생길 수 있다.

잘 구워지기만 하면 반은 된건데

ios 굽다가 USB가 쓰기 금지당했다.

이 글을 보면서 진행하려는 사람이 있다면 굽기 전에 꼭 USB 포맷하고 진행하세요

부활시키는데 두 시간 정도 썼습니다.

그리고 내 USB가 쓰기 금지당한 원인도 찾았는데

balena Etcher로 ios를 구우면 USB가 쓰기 금지를 당한다.

다른 PC에서 사용할떈 아무 문제가 없었는데 서버로 만들려고 하는 PC에서만 문제를 일으켰다

두 시간 정도 찾고 직접 적용하면서 해결방법을 찾자마자

개발자가 올려놓은 해결법을 찾게 되었다. (아 현타)

꼭 blaenaEtcher 때문이 아니어도

사용하다가 USB가 쓰기 금지되어 포맷이 불가능할 때 사용하면 좋을 것 같아서 링크를 가져왔다.

https://www.balena.io/blog/did-etcher-break-my-usb-sd-card/

Etcher broke my USB stick … or did it?

SD cards go through a lot of hard work and sometimes they fail. Learn how to recover a broken USB drive or SD Card that doesn’t seem to work.

www.balena.io

나처럼 자꾸 USB에 문제가 되는 경우엔

ios를 마우스 오른쪽 버튼을 눌러 탑재 후 가상 디스크로 들어가서 해당 파일을 모두 복사한 뒤 USB에 넣는 방법으로 복사했다.

acer노트북은 F2를 눌러 Bios에서 F12를 활성화하고 F12를 통해 Boot Manager를 활성해야 하는데 오래된 노트북 이라 보니 안 되는 경우도 있고 진입방법에 대해 정보가 너무 부족했다.

원래대로라면 BIOS를 통해 USB로 부팅하는걸로 설정한 뒤 재시작을 하면 USB 안에 있는 우분투가 실행되며 설치가 되어야 한다.

그런데 뭐가 문제인지 USB를 인식도 못하고 부팅 순서를 바꾸어도 그냥 윈도로만 진입되었다.

하지만 죽으라는 법이 없듯 윈도우 버튼을 누르고 고급 시작 옵션 변경을 검색후 클릭하면

중간에 고급 시작 옵션 / 지금 다시 시작 이 있는데 그걸 누르면 USB를 통해 부팅할 수 있었다.

하지만 부팅방법을 USB로 바꾸라며 바로 Kick 당했다.

그리고 마침내 이 모든 일이 진행 안 되는 이유를 알아버렸다.

이것은 balena Etcher의 문제도 아니고 오래된 구형 노트북의 문제도 아니었다.

다른 구형 노트북에 재미 삼아 크롬 OS (flex 아님)을 설치할 때 사용했던 SanDisk USB를 꽂았더니 정상적으로 USB 부팅 인식을 했다.

USB의 문제였던 것이다.

전혀 생각도 못했던..... 정말 어이없는...

할만하핞

문제의 USB

사이즈 문제인지

USB 포트에 꽂을 때마다 뻑뻑해서 힘으로 넣어줘야 한다.

잘 가 민트야

그리고 빠른 재 굽기 그리고

드디어 우분투 설치 시작!

설치가 쭉 되고 언어 설정 및 프로필을 설정해주면 된다.

자세하게 사진 찍어서 올리고 싶었으나, 화면 반사가 너무 심해서 설치 과정을 잘 알 수 있는 사이트를 첨부했으니 필요하신 분은 참고해주세요

https://help.iwinv.kr/manual/read.html?idx=754

단 몇초만의 클라우드 | iwinv 서버

우분투(Ubuntu) 20.04 LTS가 마침내 정식 버전으로 출시되었습니다. 이에따라 , 2020년 4월27일부로 iwinv 가상서버에 Ubuntu 20.04 LTS 이미지가 새롭게 릴리즈되었습니다. Ubuntu 20.04 LTS의 설치방법은 아래와

help.iwinv.kr

드디어 고생 끝에 설치를 완료했다

이제 드라이버 설치하고 네트워크 연결하면 된다 흑흑

여기까지 본 사람이면, 뭔가 이상한 걸 느낄 텐데

그렇다 우분투 설치 화면을 보여주던 PC와 지금 설치 완료된 PC가 다른 것을 볼 수 있는데

acer에 우분투 서버를 설치하는 과정에서도 계속 에러가 났으며

설치를 해도 부팅을 하면 부트 스토리지가 없다고 나와 5회 정도 재설치를 했으나

전혀 진전이 안되어 다른 안 쓰는 PC로 재설치했다.

(설치까지 5분도 안 걸린 건 비밀)

설치를 다하고 난다음에 글을 쓰면 놓치는 부분이 많을것같아서

설치준비 및 설치하면서 이글을 쓰고 있는데
짧지않은 시간이었지만 정말 많은 일이 있었던거같다 .. (지침 )

드라이버 설치는 to be continue

오류 인증~

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

TIP : CSS rgba() 코드 알려주는 사이트

RESHUR : 레슈 — Mon, 8 Aug 2022 00:39:25 +0900

TIP : CSS rgba() 코드 알려주는 사이트

https://www.hexcolortool.com/#49fd3f

HTML Color Codes - What's your color

Join to access discussion forums and premium features of the site.

www.hexcolortool.com

스타일링하면서 색상 코드를 많이 사용하는데 rgb에 대한 사이트는 많지만 rgba에 대해선 코드를 찾아주는 사이트가 흔치 않아서 찾아왔습니다.

rgba가 금궁하신분은 아래 포스팅을 참고해주세요.

CSS : 텍스트 꾸미기 속성 (font-family, font-size, text-align, color)

CSS : 텍스트 꾸미기 속성 (font-family, font-size, text-align, color) font-family : 글꼴(font)을 지정한다. 요소를 구성하는 텍스트의 글꼴(font)을 지정한다. 글꼴(font) 명을 속성 값으로 지정한..

sol-reshur.tistory.com

JS : 호이스팅 (Hoisting)

RESHUR : 레슈 — Wed, 3 Aug 2022 19:35:03 +0900

JS : 호이스팅 (Hoisting)

코드에 선언된 변수 및 함수를 유효한 범위의 코드 상단으로 끌어올리는 작업을 말한다.
var 변수/함수의 선언만 위로 올려지고, 할당은 올려지지 않는다.
let / const 변수 선언과 함께 표현식에서는 호이스팅이 발생되지 않는다.
var를 사용할때 발생되며, 무분별한 호이스팅이 발생하여 변수에 대한 선언이 순서를 안 지켜지고 정상적으로 작동을 안 할 수가 있기 때문에 let / const를 사용하는 것을 지향한다.

// 001 var 를 사용할때 호이스팅 
console.log(name); // undefined 
var name = "aaa"; 
console.log(name); // 'aaa'

// 002 var 를 사용할때 호이스팅 
console.log(hello); // undefined hello 변수에 undefined로 초기화가 됨
hello ="안녕하세요"  // "안녕하세요" 할당됨
console.log(hello) // "안녕하세요"
var hello // hello 선언


// 003 var, let, const 호이스팅
console.log(name1); // undefined
console.log(name2); // ReferenceError: name2 is not defined
console.log(name3); // ReferenceError: name3 is not defined

var name1 = "aaa";
let name2 = "bbb";
const name3 = "ccc";

console.log(name1); // 'aaa'
console.log(name2); // 'bbb'
console.log(name3); // 'ccc'

자바스크립트 함수는 실행되기전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다.
- 자바스크립트 Parser 가 함수 실행 전 해당 함수를 한번 훑는다.
- 함수 안에 존재하는 변수/함수 선언에 대한 정보를 기억하고 있다가 실행시킨다.
- 유효범위 함수 블록(scope) {}안에서 유효

즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다.
- 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다.
- 메모리에서는 변화가 없다.

JS : Scope (스코프)

JS : Scope (스코프) Scope (스코프) 란? 스코프(Scope : 유효 범위)는 변수의 유효 범위를 말한다. 함수의 매개변수는 함수 내부에서만 참조할 수 있고 함수 외부에서는 참조할 수 없다. 매개변수의

sol-reshur.tistory.com

JS : 템플릿 리터럴 ( Template literals )

RESHUR : 레슈 — Tue, 2 Aug 2022 11:16:59 +0900

JS : 템플릿 리터럴 ( Template Literals )

ES6에서 추가된 새로운 문자열 선언방식을 템플릿 리터럴 ( Template Literals)이라고 한다.
백틱 `` (esc 아래에 위치)을 이용하여 코드를 더 쉽게 작성할 수 있다.

01. 문자열 & 표현식 삽입

ES6이전 템플릿 문자열 ( Template String) 작성방법은 아래와 같다.

let name1 = "Alexander";
let name2 = 'Benjamin';

const friend = name1 + ` meets ` + name2;

console.log(name1) // Alexander
console.log(name2) // Benjamin

console.log(friend) // 'Alexander meets Benjamin'

기존 템플릿 문자열에서는 ""와 ''를 통해 값을 감싸는 형태로 선언을 했었다.
"", ''으로 값을 선언할 경우 ""와 ''를 써야 할 상황에 의도치 않은 문제가 발생될 수 있다. (대화체 등)

let name = 'Hello, I'm  Alexander';

console.log(name);

위와 같이 작성 시 오류가 발생되는데 그 이유는 I'm에서의 '를 문자열의 종료로 인식해서 m Alexander는 인식되지 않았다
해결방법은 \ 를 사용하거나 사용하지 않은 따옴표로 작성 ( ‘’ → “” / “”→ ‘’) 하거나 백틱 `` 을 사용하면 된다.
백틱`` 안에는 어떠한 따옴표가 오든 문자열 종료로 인식하지 않고 표현된다.

let name = 'Hello, I\'m  Alexander';
let name2 = "Oh hi! My name's Benjamin"
let hi = `"안녕!"'하세요!'`

console.log(name); // "Hello, I'm  Alexander"
console.log(name2); // "Oh hi! My name's Benjamin"
console.log(hi); // "안녕!"'하세요!'

ES6전엔 변수와 문자열을 합쳐서 사용할 경우 아래와 같이 사용했다.

let name1 = "E";
let name2 = name1 + "RESHUR";

console.log(name2); // ERESHUR

위의 예제에서는 합칠 변수가 총 2가지이기 때문에 문제가 안되지만 여러 개일 경우 계속해서 + 를 사용해야 했다.
ES6에서는 백틱`` 을 이용하여 아래와 같이 좀 더 쉽게 작성할 수 있다.

let name1 = "ERESHUR";
let greeting = `Hello, ${name1}`;

console.log(greeting); // 'Hello, ERESHUR'

${변수}으로 작성하면 변수에 들어가는 값이 ${변수} 안에 치환된다.
표현식 또한 아래와 같이 작성할 수 있다.

let yourmoney = 800;
let mymoney = 900;

console.log(`our money is ${yourmoney + mymoney}`); // 'our money is 1700'

02. 여러줄의 문자열 생성

ES6이전에는 여러줄을 사용하기 위해선 \ (backspace 아래에 위치)를 사용해야했다.

let hello = "안녕하세요 \
	      저는 RESHUR 입니다.\
	      만나서 반가워요! ";

console.log(hello); // '안녕하세요 저는 RESHUR 입니다.만나서 반가워요! '

백틱 `` 을 사용했을땐 \ 없이 여러줄을 그대로 입력하면 된다.

let hello = `안녕하세요 
            저는 RESHUR 입니다.
            만나서 반가워요! `;

console.log(hello); // '안녕하세요 저는 RESHUR 입니다.만나서 반가워요! '

CSS : position

RESHUR : 레슈 — Tue, 2 Aug 2022 11:16:49 +0900

CSS : position

position은 문서상의 요소를 배치하는 방법을 정하는 태그이다.
positon으로 요소의 배치 방법을 정하면 top, right, bottom, left로 최종 위치를 정한다.
- top : 위에서 어느 정도 떨어질 것인가
- right : 오른쪽에서 어느 정도 떨어질 것인가
- bottom : 바닥에서 어느 정도 떨어질 것인가
- left : 왼쪽에서 어느 정도 떨어질 것인가

position : Static

기본값이며, position을 적용하지 않았을 때와 동일하다.

            #aaa {
                width: 100px;
                height: 100px;
                background-color: red;
                position: static;
            }
            #bbb {
                width: 100px;
                height: 100px;
                background-color: orange;
            }

position : relative

요소를 일반적인 흐름에 따라 배치하되, 상하좌우 위치값에 따라 오프셋을 적용한다.
오프셋이란, 위치를 얼마간 이동시키는 것을 의미한다.
만약 다른 요소가 추가되더라도 해당 요소는 흐름에 맞게 위치해 있다.

            #aaa {
                width: 100px;
                height: 100px;
                background-color: red;
                position: relative;
                top: 50px;
                left: 20px;
            }
            #bbb {
                width: 100px;
                height: 100px;
                background-color: orange;
            }

position : absolute

absolute는 해당 요소를 일반적인 흐름에서 제거하고, 상위 요소중 가장 가까운 position 지정 요소에 대해 상대적으로 오프셋을 적용한다. (상위 요소에 position이 적용된 요소가 있다면 그 요소를 기준으로 오프셋이 지정된다.)
만약, 상위요소에 position이 지정된 요소가 없을 경우 브라우저를 기준으로 오프셋이 된다.
아래의 예시를 보면 aaa(빨간색)는 상위 position 요소가 없기때문에 브라우저를 기준으로 오프셋이 되었고 bbb(주황색)은 aaa (빨간색)을 기준으로 오프셋이 되었다.

둘다 상위 position이 없을경우 ▼ (둘다 브라우저를 기준으로 오프셋이 되었다.)

            #aaa {
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                top: 10px;
                left: 10px;
            }
            #bbb {
                width: 100px;
                height: 100px;
                background-color: orange;
                position: absolute;
                top: 20px;
                left: 50px;
            }

position : fixed

요소를 일반적인 문서 흐름에서 제거하고, 고정된 위치에 고정시킨다.
아래예제는 fixed를 bottom : 5px 에 위치 시켰다.

            #aaa {
                width: 100px;
                height: 100px;
                background-color: red;
                position: fixed;
                bottom: 5px;
            }
            #bbb {
                width: 100px;
                height: 100px;
                background-color: orange;
            }

CSS : float & clear

RESHUR : 레슈 — Tue, 2 Aug 2022 00:43:00 +0900

CSS : float & clear

float

float 속성은 일반적인 요소의 흐름과 달리 둥둥 떠있는 것처럼 단독적으로 브라우저의 오른쪽과 왼쪽에 위치한다.

일반적인 문서의 흐름 예시

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            #aaa {
                width: 100px;
                height: 50px;
                background-color: red;
            }
            #bbb {
                width: 100px;
                height: 100px;
                background-color: orange;
            }
            #ccc {
                width: 100px;
                height: 50px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div id="aaa">aaa</div>
        <div id="bbb">bbb</div>
        <div id="ccc">ccc</div>
        <p>안녕하세요</p>
    </body>
</html>

div와 p 태그로 요소를 만들었을 때 위에서 아래로 순차적으로 만들어진 것을 볼 수 있다.
- aaa, bbb, ccc, p태그 순으로 되어있다.

float 예시

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            #aaa {
                width: 100px;
                height: 50px;
                background-color: red;
                float: right;
            }
            #bbb {
                width: 100px;
                height: 100px;
                background-color: orange;
                float: right;
            }
            #ccc {
                width: 100px;
                height: 50px;
                background-color: yellow;
                float: left;
            }
        </style>
    </head>
    <body>
        <div id="aaa">aaa</div>
        <div id="bbb">bbb</div>
        <div id="ccc">ccc</div>
        <p>안녕하세요</p>
    </body>
</html>

aaa와 bbb에 float : right를 주니 aaa가 오른쪽에 고정된 것을 볼 수 있다.
ccc에 float : left를 주니 p태그 와 같은 선상에 놓여있는 것을 볼 수 있다.
- float를 지정한 요소는 문서의 흐름에서 벗어나 자기가 필요한 만큼의 자리를 차지했기 때문에 float에 영향을 받지 않은 p태그가 맨 위로 올려지게 된다.
float를 부여한 div가 body의 양쪽 끝에 붙어있기 때문에, 브라우저의 크기가 늘어나거나 줄어들 경우 해당 사이즈에 맞게 움직이며, 가장 최소로 줄일 경우 문서의 흐름에서 아예 벗어나는 것을 볼 수 있다.

aaa, bbb 그리고 ccc는 문서의 흐름에 벗어나 있지만 p태그를 준 '안녕하세요'는 흐름에 맞게 나타나는 것을 볼 수 있다.
float 속성을 이용하여 요소를 브라우저의 양쪽에 위치하게 할 수 있지만, 그 이후에 오는 요소는 제자리를 못 잡고 엉뚱한 위치에 있는 것을 볼 수 있다.

clear

clear 속성은 float가 적용되어있는 요소 이후에 올 요소가 float에 영향을 받지 않고, 문서의 흐름대로 float요소의 아래로 내려가게 한다.
clear both를 사용하면 float요소 이후에 올 요소들의 float 영향을 깔끔하게 제거할수있다.

clear 예시

p {
    clear: right;
}

clear: right를 주면 float: right가 적용된 요소의 아래에 위치한다.
right 값을 주었다고 해서 해당 요소가 right로 가는게 아니라 float: right값이 주어진 요소의 마지막 위치부터 시작이다.

CSS : Background 배경

RESHUR : 레슈 — Tue, 2 Aug 2022 00:42:42 +0900

CSS : Background

background

콘텐츠의 배경을 의미한다.
단축 속성으로서 색상, 이미지, 반복 등 다양한 하위 속성을 지정할 수 있다

background-color

색상은 키워드, RGB 색상 코드 혹은 RGB함수를 이용하여 지정할 수 있다.

/* color : 키워드*/
p {
    color: red;
}

/* color : RGB 색상 코드 */
p {
    color: #ff0000;
}

/* color : RGB 함수 */
p {
    color: rgb(255, 0, 0);
}

background-image

url() 함수를 사용하여 이미지 경로를 넣어준다.
이미지가 바둑판 형태로 반복되어 나오는데, 사용하는 이미지의 크기가 콘텐츠에 비해 작기 때문에 반복해서 나온다 (기본값임)
반복 형태는 background-repeat를 통해서 바꿀 수 있다.

div {
    box-sizing: border-box;
    width: 500px;
    height: 500px;
    border: 1px solid red;
    background-image: url(/Reshur_logo150px*.png);
}

background-size

background-image의 사이즈를 조정할 때 사용
너비와 높이를 지정할 수 있으며 키워드 값으로도 지정가능
- 100% : 콘텐츠와 동일한 크기로 배경 이미지를 보여줌 (이미지가 왜곡될수있음)
- cover: 이미지의 비율이 깨지지않는 선에서 최대 사이즈로 지정
  콘텐츠에 이미지를 최대한 크게 보여줌 (이미지가 잘릴 수 있음)
- contain : 이미지가 찌그러지거나 잘리지 않는 한도 내에서 최대 사이즈로 지정됨
  콘텐츠에 이미지를 최대한 크게 보여주되 잘리는 부분이 없고 동일한 비율을 유지

/*너비와 높이순*/
background-size: 500px 200px;

background-position

background-image의 위치를 지정할 수 있으며 기본위치는 left-top이다.
위치에 대한 키워드 : left, right, top, bottom, center

 /*오른쪽*/
background-position:right; 

/*오른쪽 바닥*/
background-position:right-bottom

background-repeat

background-image를 반복할 때 사용한다.
반복하지 않을 경우, no-repeat를 사용한다

/*반복*/
background-repeat:repeat;

/*반복하지않음*/
backgroud-repeat:no-repeat;

이 외에도 다양한 하위 속성이 있기 때문에 틈틈이 MDN을 보는 것이 좋다.

background MDN : https://developer.mozilla.org/ko/docs/Web/CSS/background

background - CSS: Cascading Style Sheets | MDN

CSS background 단축 속성은 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한 번에 지정합니다.

developer.mozilla.org

CSS : box-sizing

RESHUR : 레슈 — Mon, 1 Aug 2022 23:36:37 +0900

CSS : box-sizing

box-sizing

요소의 너비(width)와 높이(height)를 계산하는 방법을 지정한다.
높이와 너비가 같더라도 box-sizing 속성 값에 따라 크기가 달라질 수 있다.
content-box가 기본값이다.

content-box

요소의 너비와 높이를 정의했을 때 콘텐츠 영역에 대해서만 값을 정의한다.
padding이나 margin을 추가할 때 요소가 커져도 콘텐츠 크기는 확보하는 형태로 너비와 높이를 지정하고 싶을 때 사용

* {
    box-sizing: content-box;
}

div {
    width: 100px;
    height: 100px;
    background-color: #ffffb5;
    border: 1px solid black;
}

border-box

너비(width)와 높이(height) 안에 모든 영역이 포함된다.
padding이나 border가 커짐으로써 요소가 커지는 현상을 막을 수 있다.
너비와 높이를 일일이 계산하지 않고 절대적인 요소의 크기를 정하고 싶을 때 사용한다.

* {
    box-sizing: border-box;
}

div {
    width: 100px;
    height: 100px;
    background-color: #ffffb5;
    border: 1px solid black;
}

정리

box-sizing의 기본값은 content-box이다.
박스모델에 너비와 높이를 지정하면 콘텐츠의 크기가 결정된다.

CSS : Box Model (박스 모델)

CSS : Box Model (박스 모델) 박스 모델 Box Model 브라우저가 요소를 렌더링 할 때, 각각의 요소는 기본적으로 사각형 형태로 영역을 차지하게 된다. 이 영역을 '박스'라 표현하며, CSS는 박스의 크기

sol-reshur.tistory.com

box-sizing을 border-box로 지정하면 테두리까지 너비와 높이에 포함된다.

CSS : Box Model (박스 모델)

RESHUR : 레슈 — Mon, 1 Aug 2022 21:29:58 +0900

CSS : Box Model (박스 모델)

박스 모델 Box Model

브라우저가 요소를 렌더링 할 때, 각각의 요소는 기본적으로 사각형 형태로 영역을 차지하게 된다.
이 영역을 '박스'라 표현하며, CSS는 박스의 크기, 위치, 속성 (색, 배경, 테두리 모양 등)을 결정할 수 있다.
박스는 네 개의 영역으로 구성되며, 크기 지정을 할 수 있다.
- 콘텐츠 영역 (content) :
  - 콘텐츠 너비(가로) : width
  - 콘텐츠 높이(세로) : height
- 안쪽 여백 (padding) :
  - padding: 0px 0px 0xp 0px; [상단 오른쪽 하단 왼쪽 순]
  - padding-top
  - padding-right
  - padding-bottom
  - padding-left
- 경계선 [테두리] (border)
  - border-width
  - border-height
- 바깥쪽 여백 (margin)
  - margin : 0px 0px 0xp 0px; [상단 오른쪽 하단 왼쪽 순]
  - margin-top
  - margin-right
  - margin-bottom
  - margin-left

콘텐츠 영역 (Content Area)

개발자가 태그 안에 포함시킨 부분을 보여주는 영역
높이(height)와 너비(width)를 이용하여 사이즈를 조정할 수 있다.

div {
    width: 100px;
    height: 100px;
}

안쪽 여백 (Padding)

테두리 안쪽에 여백을 두어 경계선과 콘텐츠 간의 공간을 확보하는 역할을 한다.
padding속성을 이용하여 테두리의 안쪽에 여백을 줄 수 있다.

/* 상단 1px 오른쪽 10px 하단 1px 왼쪽 10px */
div {
    padding: 1px 10px 1px 10px;
}

/* 모든 padding에 10px 를 지정 */
div2 {
    padding: 10px;
}

div3 {
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

경계선 (테두리 - Border)

콘텐츠를 감싸주어 요소와 요소가 아닌 요소와 공간 사이에 경계선을 그어주는 역할을 한다.
border속성을 사용하면 테두리의 두께를 조정할 수 있다.

/* div에 1px의 검은색 테두리를 긋는다. */
div {
    border: 1px solid black;
}

CSS : display & border

CSS : display & border display 속성 display 속성은 요소를 블록 요소와 인라인 요소중 어느 쪽으로 처리할지 정의한다. display에는 미리 정의되어 있는 키워드를 속성 값으로 지정한다. (block, inline,..

sol-reshur.tistory.com

바깥쪽 여백 (Margin)

테두리 바깥쪽의 여백을 지정하여 해당 요소와 다른 요소 사이에 여백을 주어, 공간을 확보하는 역할을 한다.
margin 속성을 이용하여 테두리의 바깥쪽에 여백을 줄 수 있다.

/* 상단 1px 오른쪽 10px 하단 1px 왼쪽 10px */
div {
    margin: 1px 10px 1px 10px;
}

/* 모든 margin에 10px 를 지정 */
div2 {
    margin: 10px;
}

div3 {
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
}

CSS : display & border

RESHUR : 레슈 — Wed, 20 Jul 2022 01:03:53 +0900

CSS : display & border

display 속성

display 속성은 요소를 블록 요소와 인라인 요소중 어느 쪽으로 처리할지 정의한다.
display에는 미리 정의되어 있는 키워드를 속성 값으로 지정한다. (block, inline, inline-block, none)
- none은 사용했을때 안 보이게 되는데 사라진 게 아니라 보이지 않게 하는 것이다.
- inline-block은 블록요소 속성 값이 너비와 높이를 지정해줄 수 있지만 인라인 요소에서는 콘텐츠 부분만 차지하기 때문에 높이와 너비를 지정해줄 수 없다. 그때, inline-block을 사용하면 높이와 너비를 지정할 수 있게 된다.

/* 블록 레벨 요소인 div요소를 인라인으로 하고 싶을때 */
div {
    display: inline;
}
/* 인라인 요소인 span요소를 블록 레벨로 처리하고 싶을때 */
span {
    display: block;
}
/* 인라인으로 배치하되, 블록 레벨 요소의 속성을 추가하고 싶을때 */
span {
    display: inline-block;
}

/* 디스플레이에 표시하지 않고 싶을때 */
div {
    display: none;
}

HTML : 블록(Block)요소 와 인라인(Inline)요소

HTML : 블록(Block)요소 와 인라인(Inline)요소 1. 블록(Block) 요소 블록 레벨 요소는 언제나 새로운 줄에서 시작하며, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지한다 (상위 요소가 허락

sol-reshur.tistory.com

border 속성 : 단축 속성이다.

border 속성을 사용하면 요소가 차지하고 있는 영역에 테두리를 그릴 수 있다.
border 속성에는 속성 값으로 테두리의 두께, 모양, 크기 등을 함께 지정할 수 있는데 이러한 속성을 '단축 속성'이라 한다.
- { border: (두께) 모양, 색상 } 순으로 입력하면 된다.

/* 두께가 1px인 직선 모양 (solid)의 연두색 테두리 */
span {
    border: 1px solid greenyellow;
}

border 하위 속성

border 속성에 지정하는 값들은 따로따로 지정할 수 있다.

border-color : 테두리의 색상을 지정한다.

color 입력 방식과 동일하다.
하단 링크의 color 참고

div {
    border-color: greenyellow;
}
article {
    border-color: #adff2f;
}

footer {
    border-color: rgb(173, 255, 47);
}

CSS : 텍스트 꾸미기 속성 (font-family, font-size, text-align, color)

sol-reshur.tistory.com

border-width : 네 면의 테두리의 너비를 지정한다.

thin, medium, think 등의 키워드를 사용하거나 px, em, rem 등의 단위를 사용하여 지정한다.

.div1 {
    border-width: thin;
    border-style: solid;
}
.div2 {
    border-width: medium;
    border-style: solid;
}

.div3 {
    border-width: thick;
    border-style: solid;
}

예제 : think, medium, thick 순

안녕하세요 thin 으로 지정 했어요

예제예요 medium 으로 지정 했어요

야호~ thick 으로 지정 했어요

border-style : 테두리의 스타일을 지정한다.

/* 테두리를 표시하지 않는다. */
.none {
    border-style: none;
}

/* 테두리를 표시하지 않는다. 주변 요소가 테두리를 가지더라도 표시되지 않는다. */
.hidden {
    border-style: hidden;
}

/* 테두리를 둥근 점으로 여러개 그린다. */
.dotted {
    border-style: dotted;
}

/* 테두리를 직사각형으로 여러개를 그린다. */
.dasahed {
    border-style: dashed;
}

/* 테두리를 하나의 직선으로 그린다. */
.solid {
    border-style: solid;
}

/* 테두리를 두 개의 평행한 직선으로 그린다. */
.double {
    border-style: double;
}

/* 테두리가 파인 것 처럼 그린다. ridge의 반대 이다. */
.groove {
    border-style: groove;
}

/* 테두리가 튀어나온 것처럼 그린다. groove의 반대 이다. */
.ridge {
    border-style: inset;
}

/* 요소가 튀어나온 것 처럼 그린다. */
.outset {
    border-style: outset;
}

예제 : border-style

Document

안녕하세요 border-style : none 입니다.

안녕하세요 border-style : dotted 입니다.

안녕하세요 border-style : dasahed 입니다.

안녕하세요 border-style : solid 입니다.

안녕하세요 border-style : double 입니다.

안녕하세요 border-style : groove 입니다.

안녕하세요 border-style : ridge 입니다.

안녕하세요 border-style : inset 입니다.

안녕하세요 border-style : outset 입니다.

CSS : 텍스트 꾸미기 속성 (font-family, font-size, text-align, color)

RESHUR : 레슈 — Tue, 19 Jul 2022 18:26:53 +0900

CSS : 텍스트 꾸미기 속성 (font-family, font-size, text-align, color)

font-family : 글꼴(font)을 지정한다.

요소를 구성하는 텍스트의 글꼴(font)을 지정한다.
글꼴(font) 명을 속성 값으로 지정한다.
여러 개의 글꼴(font)을 연달아 기입하여 우선순위를 지정할 수 있다.
- Courier를 우선으로 지정하되, 해당 폰트가 없을 경우 monospace 그다음 Times로 지정한다.

* {
    font-family: "Courier New", Courier, monospace, "Times New Roman", Times,
        serif;
}

font-size : 수치와 단위를 지정해 글자(text)의 크기를 지정할 수 있다.

px : 1px는 디스플레이를 구성하는 가장 기본이 되는 단위이다.

: 절대적인 크기이며, 숫자를 지정하였을 경우 해당 크기로 고정된다.

        .pixelFont {
            font-size: 10px;
        }
        .p {
            font-size: 20px;
        }

rem : 최상위 <html>에 상대적인 크기를 지정하는 단위

: html문서의 최상위 요소인 <html>의 글자 사이즈를 기준으로 몇 배수의 크기를 지정할 때 사용한다.

        .remFont {
            font-size: 2rem;
        }
        .p {
            font-size: 3rem;
        }

em : 구하고자 하는 요소의 pixel 값 / 상위 요소의 font-size pixel 값

: 상위 요소(한 단계 윗 요소)의 폰트 사이즈를 기준으로 하는 글자 사이즈를 지정하는 상대적인 단위이다.
별도로 글꼴 크기를 지정하지 않을 경우 16px가 기본값이다.
1em = 16px, 2em = 32px이다.
em 앞에 붙는 숫자는 현재 글꼴 크기의 배수를 의미한다. (글꼴 크기를 10px로 했을 때 2em 은 20px이다.)

        .emlFont {
            font-size: 10em;
        }
        .p {
            font-size: 20em;
        }

글꼴 사이즈를 따로 지정하지 않았을 경우의 기본 사이즈

h1 : 32px
p : 16px

text-align : 텍스트의 정렬방식

블록내에서 텍스트의 정렬방법을 정한다.
미리 정의된 키워드 값을 지정한다.

color : 글꼴의 색상을 지정

텍스트의 색상을 지정한다.

키워드 : 색상명을 기재
RGB 색상 코드 : 각각 두자리씩 끊어서 작성하며 00부터 FF까지 #과 함께 16진수를 입력하면 된다.
# + FF(Red) FF(Green) FF(Blue) 순이다.
RGB 함수 : RGB키워드 뒤에 ()을 쓴후 각각의 비율을 적어주면 된다. 0% 부터 100%까지 지정한다.

/* color : 키워드*/
p {
    color: red;
}

/* color : RGB 색상 코드 */
p {
    color: #ff0000;
}

/* color : RGB 함수 */
p {
    color: rgb(255, 0, 0);
}

RGB 란?

RGB색상은 빛의 삼원색 (Red, Green, Blue)을 혼합하여 색을 정의하는 방식이다.
모든 수치가 가장 높을땐 흰색이 된다.

/* RGB 함수 */
p {
    color: rgb(255, 0, 0);
}
/* RGB 색상 코드 */
p {
    color: #ff0000;
}

HTML : 목록을 나타내는 <ul>, <ol>, <li>

RESHUR : 레슈 — Thu, 7 Jul 2022 23:19:39 +0900

HTML : 목록을 나타내는 <ul>, <ol>, <li>

<ul> : Unordered List

비정렬 목록
순서 없이 아이템을 나열할 때 사용한다. ex: 메뉴
요소에 중첩되어 사용할 수 있다.
<ol>과 섞어서 사용할 수 있다.

예제 : 비정렬 목록 - 순서가 없이 아이템을 나열할 때 사용

첫번째 목록
두번째 목록
세번째 목록

비정렬 목록
순서가 없이 아이템을 나열할때 사용 ex:메뉴

<ul>
	<li>비정렬 목록</li>
	<li>순서가 없이 아이템을 나열할때 사용 ex:메뉴</li>
</ul>

예제 : <ol>과 섞어서 사용할 수 있다.

Nestion

리스트

    <ol>
        <li>Nestion</li>
        <ul>
            <li>리스트</li>
        </ul>
    </ol>

<ol> : Ordered List

정렬하는 목록
각각 숫자를 갖고 있다. ex : 순위표, 레시피 등

예제 : 정렬할 때 사용하는 목록

정렬 목록
각각 숫자를 갖고 있음 ex: 순위표. 레시피

    <ol>
        <li>정렬 목록</li>
        <li>각각 숫자를 갖고 있음 ex: 순위표. 레시피</li>
    </ol>

예제 : reversed 내부의 항목을 역순으로 배열할 때 사용

정렬 목록
각각 숫자를 갖고 있음 ex: 순위표. 레시피

    <ol reversed>
        <li>정렬 목록</li>
        <li>각각 숫자를 갖고 있음 ex: 순위표. 레시피</li>
    </ol>

예제 : start 항목을 셀 때 시작하는 순서 start = "5"면 다섯 번째부터 시작한다.

    <ol start="5">
        <li>a</li>
        <li>b</li>
    </ol>

예제 : type 항목을 셀 때 어떤 유형으로 할지 선택할 때 사용

a 는 소문자 알파벳

A 는 대문자 알파벳

i 는 소문자 로마 숫자,

I 는 대문자 로마 숫자,

1 는 숫자(기본값)

a 는 소문자 알파벳

    <ol type="a">
        <li>a 는 소문자 알파벳</li>
    </ol>
    <ol type="A">
        <li>A 는 대문자 알파벳</li>
    </ol>
    <ol type="i">
        <li>i 는 소문자 로마 숫자,</li>
    </ol>
    <ol type="I">
        <li>I 는 대문자 로마 숫자,</li>
    </ol>
    <ol type="1">
        <li>1 는 숫자(기본값)</li>
    </ol>
    <ol type="a">
        <li>a 는 소문자 알파벳</li>
    </ol>

<li> : List Item

상단의 목록 내의 내용을 나타낼 때 사용

예제 : value - 시작하는 숫자를 지정할 수 있음

<li>에 value를 주어 시작하는 숫자를 지정하는 것보단 <ol>에 주는 게 더 가독성 좋다.

3
번부터 시작해

    <ol>
        <li value="3">3</li>
        <li>번부터 시작해</li>
    </ol>

HTML : 모든 Entity(엔티티)가 적혀있는 웹 사이트

RESHUR : 레슈 — Thu, 7 Jul 2022 21:50:30 +0900

HTML : 모든 Entity(엔티티)가 적혀있는 웹 사이트 표지

HTML : 모든 Entity(엔티티)가 적혀있는 웹 사이트

HTML에서 지원하는 모든 Entity가 적혀있는 웹사이트이다.
새로 추가 되는 것이 있을 때마다 업데이트가 되므로, 필요한 엔티티가 있다면 ctrl + F 혹은 Command + F를 통해서 검색하면 된다.

HTML Standard

HTMLLiving Standard — Last Updated 6 July 2022 ← 13.2 Parsing HTML documents — Table of Contents — 14 The XML syntax → 13.5 Named character references 13.5 Named character references This table lists the character reference names that are support

html.spec.whatwg.org

HTML : 엔티티 (Entity) HTML 내에서 특수문자 작성하기

RESHUR : 레슈 — Thu, 7 Jul 2022 21:37:03 +0900

HTML : 엔티티 (Entity) HTML 내에서 특수문자 작성하기 표지

HTML : 엔티티 (Entity) - HTML 내에서 특수문자 작성하기

엔티티 (Entity)

HTML 에서 문자 <,>," 및 & 은 특수문자이기때문에 해당 특문을 작성하면 코드로 인식한다 (예약어)
그렇기에 코드로 인식되지 않게 하기 위해서 entity 를 사용한다.
사용법 : &이름; - 앰퍼센트 (&)로 시작하고 세미콜론(;)으로 끝나는 텍스트

모양	코드
< ( less than )	<
> ( greater than)	>
"	"
'	'
&	&
띄어쓰기 (non breaking space)

더많은 엔티티 (Entity)를 보려면 아래 웹페이지를 참고하면 된다.

HTML Standard

html.spec.whatwg.org

JS : Import & Export

RESHUR : 레슈 — Mon, 4 Jul 2022 20:52:38 +0900

JS : Import & Export 표지

JS : Import & Export

Export

export 문은 자바스크립트 묘듈에서 함수,객체,원시값을 내보낼때 사용한다. 내보낸 값은 다른 프로그램에서 import 문으로 가져가 사용할수 있다.
export문은 HTML 안에 작성한 스크립트에서는 사용할수없다.

Import

JS : Module (모듈)

RESHUR : 레슈 — Mon, 4 Jul 2022 20:51:10 +0900

JS : Module (모듈)

Module(모듈)이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다.
일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다.
이때 모듈이 성립하려면 모듈은 자신만의 파일 스코프 (모듈스코프)를 가질 수 있어야 한다.
모듈은 개별적 존재로서 애플리케이션과 분리되어 존재하며, 기본적으로 비공개 상태이지만

JS : Scope (스코프)

JS : Scope (스코프) Scope (스코프) 란? 스코프(Scope : 유효범위)는 변수의 유효범위를 말한다. var x = "HELLO"; function y(){ var x = "Future" console.log(x); // 'Future' }; y(); console.log(x); //..

sol-reshur.tistory.com

JS : 데이터 타입 (Data Type)

RESHUR : 레슈 — Thu, 30 Jun 2022 01:28:07 +0900

JS : 데이터 타입 (Data Type)

데이터 타입이란?

데이터 타입(줄여서 "타입")은 값의 종류를 말한다.
자바스크립트(ES6)는 8개의 데이터 타입이 있으며, 크게 원시 타입(Primitive Type)과 객체 타입 (Object/reference type)으로 나눌 수 있다.

구분	데이터 타입 (Data Type)	설명
원시 타입 (Primitive Type)	숫자형 타입 (Number Type)	숫자,정수와 실수 구분없이 숫자 타입만 존재 사칙연산이 가능 소수점 표현가능
	문자열 타입 (String Type)	문자열 ""(큰따옴표),''(작은따옴표),``(백틱)으로 작성함
	논리형 타입 (Boolean Type)	논리적인 값을 표현 참(true),거짓(false)만 존재 주로 조건문 등에서 동적 판단의 기준으로 사용
	undefined	값이 할당되지 않는 상태를 나타냄 변수 선언후 초기화를 하지않는다면 undefined가 자동으로 할당
	null	값이 비어있다는 의미의 자료형 존재하지않는(nothing), 비어있는(empty) 값을 나타내는데 사용
	심벌 타입 (Symbol Type)	문자열과 함께 객체 (Properpty)로 사용 ES6에서 추가됨
	비긴트 타입 (Bigint Type)	ES11에서 추가 2의 53제곱-1보다 큰값을 사용할때 사용함 정수 리터럴의 뒤에 n을 붙임 (10n)
객체 타입		객체,함수,배열 등

원시 타입 (Primitive Type)

숫자형 타입 (Number Type)

자바스크립트는 int, long, float와 같은 숫자 타입을 사용하는 것이 아닌 한 가지 숫자 타입을 사용한다.
숫자 타입의 값은 배정밀도 (Double Precision) 64비트 부동 소수점 형식을 따른다.
모든 수를 실수로 처리한다.

var integer = 22; // 정수
var double = 10.27; // 실수
var negative = -20; // 음의 정수

정수, 실수, 2진수, 8진수, 16진수 리터럴은 모두 메모리에 배정밀도 64비트 부동소수점 형식의 2진수로 저장된다.
자바스크립트는 모든 수를 실수로 처리하는데, 이는 정수로 표시된다 해도 사실은 실수이다.
정수로 표시되는 수끼리 나누더라도 실수가 나올 수 있다.

console.log(1 === 1.0); // true
console.log(4 / 2); // 2
console.log(5 / 2); // 2.5

숫자형 타입은 일반적인 숫자 외에 Infinity(양의 무한대), -Infinity(음의 무한대), NaN (산술 연산 불가 Not-A-Number)가 있다.

console.log(10 / 0); // Infinity
console.log(10 / -0); // -Infinity
console.log(1 * "HELLO"); // NaN

자바스크립트는 대소문자를 구별하므로 NaN을 NAN, nan, nan과 같이 표현하면 에러가 발생한다.

// 자바스크립트는 대소문자를 구별한다.

const x = nan; // ReferenceError: nan is not defined

문자열 타입 (String Type)

문자, 문자열을 표현하는 자료형이다.
문자열은 0개 이상의 16비트 유니코드 문자(UTF-16)의 집합으로 이루어져 있다.
""(큰따옴표), ''(작은따옴표), ``(백틱) 으로 텍스트를 감싸는 형태로 사용한다.

let a = "사과";
let b = '벌';
let c = `사탕`;

console.log(a); // 사과
console.log(b); // 벌
console.log(c); // 사탕

작은따옴표('')를 문자열에 쓰고 싶을 경우엔 큰 따옴표("")로 감싸서 사용하면 된다.
작은따옴표('')로만 사용하고 싶을 경우 역슬래시(\ 엔터키 위에 존재)를 사용한다.

const string1 = "I'm RESHUR!";
const string2 = 'I\' REshur';

console.log(string1); // "I'm RESHUR!"
console.log(string2); // "I' REshur"

다른 타입과 다르게 문자열을 따옴표로 감싸는 이유는 키워드나 식별자 같은 토큰과 구분하기 위해서이다.
자바스크립트는 문자열을 따옴표로 감싸지 않으면 식별자와 같은 토큰으로 인식한다.

const hello = 안녕하세요; // ReferenceError: 안녕하세요 is not defined

백틱(``)은 문자열 (String) 내부의 변수를 표현할 때 주로 사용한다.
일반 따옴표로 작성할 경우 변수가 그대로 표시된다.

const name = "RESHUR";
const message = `My Name is ${name}`; // My Name is RESHUR'

console.log(message);
------------------------------------------

const age = 20;
const message2 = `My Age is ${age}`; // 'My Age is 20'

console.log(message2);
------------------------------------------

const hi = "안녕하세요";
const message3 = "${hi}!!!!!";

console.log(message3); // '${hi}!!!!!'

논리형 타입 (Boolean Type)

논리형 타입은 참(true), 거짓 (false) 뿐이다.
주로 조건문 등에서 동작 판단의 기준으로 사용된다.

const name = "RESHUR";
const age = 12;

console.log(1 === name); // false
console.log(12 === age); // true

undefined 타입

undefied타입은 값이 할당되지 않은 상태를 나타낼 때 사용한다.
변수 선언 후 초기화를 하지 않는다면, undefined가 자동으로 할당된다.

let hello;

console.log(hello); // undefined

null 타입

null 타입의 값은 null 이 유일하다.
자바스크립트는 대소문자를 구별하므로 null 은 Null, NULL 과는 다르다.
null은 변수에 값이 없다는 것을 의도적으로 명시(의도적 부재 intentional absence)할 때 사용한다.
- 변수에 null을 할당하는 것은 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미다.

let empty = "hello";
empty = null;

console.log(empty); // null

심벌 타입 (Symbol Type)

심벌 타입은 ES6에서 추가된 타입이며, 변경 불가능한 원시 타입이다.
심벌값은 다른 값과 중복되지 않은 유일무이한 값이다.
주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용한다.
symbol 함수를 호출해 생성하며 이때 생성된 심벌 값은 외부에 노출되지 않으며, 다른 값과 절대 중복되지 않은 유일무이한 값이다.

// 심벌값 생성
let key = Symbol("key");

console.log(key); // Symbol

// 객체 생성
let obj = {};

// 이름이 충돌할 위험이 없는 유일무이한 값인 심벌을 프로퍼티 키로 사용한다.
obj[key] = "value";
console.log(obj[key]); // value

비긴트 타입 (Bigint Type)

자바스크립트에서 사용할 수 있는 최댓값은 2의 53 제곱의 -1 (2^53-1)이며, 보다 큰 정수를 다루고 싶을 때 사용한다.
정수, 실수 등의 숫자, 정수의 한계는 2^53이며 그 이상을 표현하고 싶을 때 n을 붙인다.

const num = 1234567n;

console.log(typeof(num)); // bigint

JS : 자료형 - 원시 타입(primitive type)

JS : 자료형 - 원시 타입(primitive type) 문자형 (string) 문자형(string)은 문자, 문자열을 표현하는 자료형이며, 3가지 방식으로 작성할 수 있다. 큰 따옴표 : "Mike"; 작은따옴표 : 'Mike'; 역 따옴표..

sol-reshur.tistory.com

객체타입 (Object / Reference Type)

원시 타입과 객체 타입은 근복적으로 다르다.
자바스크립트는 객체 기반의 언어이며, 자바스크립트를 이루고 있는 거의 모든 것이 객체이다.
위에 기재한 데이터타입(원시타입)외의 값은 모두 객체 타입이다.

JS : 자료형 - 객체 타입 (object type)

JS : 자료형 - 객체 타입 (object type) object는 다수의 원시 자료형을 포함하거나 복잡한 개체 (entity)를 표현할 수 있는 자료형이다. object() 혹은 중괄호 {}를 통해 생성한다. object의 객체는 key:..

sol-reshur.tistory.com

JS : Scope (스코프)

RESHUR : 레슈 — Tue, 28 Jun 2022 15:27:02 +0900

JS : Scope (스코프)

Scope (스코프) 란?

스코프(Scope : 유효 범위)는 변수의 유효 범위를 말한다.

함수의 매개변수는 함수 내부에서만 참조할 수 있고 함수 외부에서는 참조할 수 없다.

매개변수의 스코프가 함수 내부로 한정되어있기 때문이다.

예시 01 : 전역과 함수 내부에서 이름이 같은 변수 x 가 중복 선언이 되었을 때의 유효 범위 (Scope)

var x = "HELLO";

function y() {
    var x = "Future";
    console.log(x); // 'Future'
}

y();
console.log(x); // 'HELLO'

전역에서 x에 "HELLO"를 선언하고, 함수 내부에 같은 이름인 x에 "Future"를 할당을 했을때, x엔 어떤 값이 들어가 있는지 확인해봤다.
함수 내부의 x 엔 "Future"가 할당되어있고, 함수 외부에서 console.log를 했을 때 "HELLO"가 할당되어있음을 알 수 있다.
이로써, 같은 이름의 변수라 하더라도 함수 내에서 선언된 변수는 함수 내에서만 유효하다는 걸 알 수 있다.

예시 02 : 매개변수의 스코프가 함수 내부로 한정되어있다.

function Hello(x, y) {
    console.log(x, y); // 12 7
    return x + y;
}

Hello(12, 7); // 19

console.log(x, y); // ReferenceError: x is not defined

x + y 를 return 하는 함수가 있다.
Hello(12,7)를 부여했을 때 함수 내부의 x, y엔 12,7이 할당되었음을 볼 수 있지만 함수 외부의 x, y 값엔 할당되지 않음을 볼 수 있다.

정리 :

위 예제에서 전역에 선언된 변수 x는 어디에든 참조할 수 있지만, 함수 Hello 내에서 선언된 변수 x는 함수 내부에서만 참조할 수 있고 함수 외부에서는 참조할 수 없다 이런 규칙을 스코프라고 한다.

스코프가 없다면 같은 식별자 이름은 충돌을 일으키므로 프로그램 전체에서 하나밖에 사용할 수 없다. (한 폴더 내에 같은 이름의 파일을 둘 수 없는 것과 같다.) 스코프도 이와 같이 식별자 이름의 충돌을 방지한다.

스코프의 구분

자바스크립트에서 스코프를 구분하면 두 가지로 나눌 수 있다.

1. 전역 스코프 (Global Scope)

- 코드 어디에서든지 참조할 수 있다.

2. 지역 스코프 (Local Scope or Function-Level Scope)

- 함수 코드 블록이 만든 스코프로 함수 자신과 하위 함수에서만 참조할 수 있다.

모든 변수는 스코프를 갖으며, 변수의 관점에서 스코프를 구분하면 두 가지로 나눌 수 있다.

1. 전역 변수 (Global Variable)

- 전역에서 선언된 변수이며, 어디든 참조할수있다.

2. 지역 변수 (Local Variable)

- 지역(함수) 내에서 선언된 변수이며, 그 지역과 그 지역의 하위 지역에서만 참조할 수 있다.

정리 :

변수는 선언위치 (전역 또는 지역)에 의해 스코프를 가지게 된다.

즉, 전역에서 선언된 변수는 전역 스코프를 갖는 전역 변수이고, 지역 (함수내부)애서 선언된 변수는 지역 스코프를 갖는 지역 변수가 된다.

전역 스코프를 갖는 전역 변수는 전역(코드 어디든)에서 참조할수있다. 지역(함수내부)에서 선언된 지역 변수는 그 지역과 그 지역의 하부 지역에서만 참조할수있다.

자바스크립트 스코프의 특징

자바스크립트의 스코프는 타 언어와 다른 특징을 가지고 있는데 블록 레벨 스코프(Block-level scope)를 따른다.

블록레벨스코프란 코드블록 ({...}) 내에서 유효(참조,접근가능)한 스코프를 의미한다.

HTML : a 와 하이퍼링크

RESHUR : 레슈 — Wed, 15 Jun 2022 00:39:51 +0900

HTML : a와 하이퍼링크

<a> : anchor (닻)

href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일 , 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만들 때 사용한다.
<a> 안의 콘텐츠는 링크 목적지의 설명을 나타내야 한다.
별도의 스타일링을 하지 않아도 파란색 글씨에 밑줄이 그어져 있는 게 기본값이다.

예시

You can reach Michael at:

<p>You can reach Michael at:</p>

<ul>
  <li><a href="https://example.com">Website</a></li>
  <li><a href="mailto:m.bluth@example.com">Email</a></li>
  <li><a href="tel:+123456789">Phone</a></li>
</ul>

절대 경로

현재 위치와 관련 없이 절댓값의 위치로 이동함 (언제 어디에서 이동하든 같은 경로)

<a href="http://www.google.com/">google</a>

상대 경로

현재 위치를 기준으로 목적지까지의 경로를 작성한다.
- ../ : 상위 디렉터리
- ./ : 현재 위치의 디렉터리

<a href="../.././~html">경로</a>

<a> 속성

herf

하이퍼링크가 가리키는 URL 링크는 HTTP 기반 URL(http, https) 일 필요는 없고, 브라우저가 지원하는 모든 URL스킴을 사용할 수 있다.
- 페이지 구획을 가리키는 Fragment URL
- 미디어 파일 일부를 가르키는 미디어 Fragment
- tel : URL을 사용하는 전화번호
- mailto : URL을 사용하는 이메일 주소
- 웹 브라우저는 다른 URL 스킴을 지원하지 않지만, 웹사이트는 Navigator.reqisterProtocolHandler()를 통해 지원할 수 있다.

이메일 / 전화

send me email
(111) 1111

<a href="malito:aaa@email.com">send me email</a>
<a href="tel:111-1111">(111) 1111</a>

이메일/전화는 현재 사용하는 기기에서 메일 프로그램/ 전화 프로그램을 이용하여 연결한다.
이메일 : mailto → PC안의 메일 프로그램이 실행된다.
전화 : tel → PC 내의 전화 프로그램이 실행된다.

target

링크한 URL을 표시할 위치 → 목적지를 어디에 띄울 건지 정할 수 있다.
- _self : URL을 현재 페이지에서 이동한다 (기본값)
- _blank : URL을 새창에서 표시한다.

예시 _blank

google

<a href="www.google.com" target="_blank">google</a>

참고 : target을 사용할 때, rel="noreferrer"을 추가해 window.opner API의 악의적인 사용을 방지할 수 있다.
1. noopener : 새로 열린 페이지에서 window.opner가 존재하지 않게 한다.
2. noreferrer : noopener와 기능은 동일하나 다른 페이지를 탐색할 때 브라우저가 참고 웹 페이지의 주소를 보내지 못하게 한다
  - 쉽게 설명하면 링크를 클릭할 때 참조자 정보를 숨긴다.
  - 누군가 자신의 웹페이지 링크를 게시했을 때 noreferrer 값이 포함된 링크를 클릭하면 해당 사용자가 어디에서 왔는지 알 수 있는 방법이 없다.

예시

google

<a href="http://www.google.com" target="_blank" rel="noopener noreferrer nofollow">google</a>

REACT : JSX 문법

RESHUR : 레슈 — Tue, 14 Jun 2022 17:39:08 +0900

REACT : JSX (Java Script XML) 문법

JSX 이란?

import React from 'react';
export default function Jsx() {

	자바스크립트(기능)을 입력하는 부분
    
    return(
    	html을 입력하는 부분
    )
}

JSX는 JavaScript에 XML을 확장한 문법이다.
React로 프로젝트를 개발할 때 사용한다. → 공식적인 자바스크립트 문법은 아니다.
JSX는 하나의 파일에 Javascript와 HTML을 동시에 작성하기 때문에 간편하다.
retrun을 기준으로 위는 자바스크립트(기능)를 입력하고 아래는 HTML을 입력한다.
기존 HTML에서는 소문자로 작성했지만JSX 에서는 대문자가 들어간다.

// 기존 HTML 방식
<div class="box">
</div>
<button onclick="name()">버튼</button>

// JSX 방식

<div className="box">
</div>

<button onClick="name()">버튼</button>

JSX 문법

1. 반드시 상위 요소가 감싸는 형태여야 한다.

export default function Jsx(){
    return(
    <div>
            <div className='title'>JSX방식</div>
        </div>
    )
}

<div>로 전체를 감싼 후 내용을 입력하였다.

export default function Jsx(){
    return(
        <Fragment>
            <div className='title'>JSX방식</div>
            <input onChange={check()}></input>
        </Fragment>
    )
}

<Fragment>로 전체를 감싼 후 내용을 입력하였다. → react에서 제공하는 기능이다.
JSX전체를 감싸주는 역할을 위해 만들어진 기능이며 버전이 올라가며 소괄호로 감싸주기만 하는 형태로 바뀌었다 (하단 예시 참고)

export default function Jsx(){
    return(
        <>
            <div className='title'>JSX방식</div>
        </>
    )
}

2. 자바스크립트 표현식

import React from 'react';
export default function Jsx() {

	자바스크립트(기능)을 입력하는 부분
    
    return(
    )
}

JSX또한 자바스크립트 기반으로 만들어졌기 때문에 유효한 모든 JavaScript 표현식을 사용할 수 있다.
return()의 윗부분에 넣으면 된다.

UI/UX : Can't Unsee 점수

RESHUR : 레슈 — Sun, 12 Jun 2022 18:45:30 +0900

UI/UX : Can't Unsee 점수

22.06.12 Can't Unsee 6880점

HTML : 컨테이너 요소 div, span

RESHUR : 레슈 — Fri, 10 Jun 2022 17:34:20 +0900

HTML : 컨테이너 요소 div, span 표지

HTML : 컨테이너 요소 div, span

div : The Content Division - 구획

HTML <div>는 플로우 콘텐츠를 위한 블록 컨테이너 이다.
"순수"컨테이너로서 아무것도 표현하지 않는다.→ 의미를 갖고 있지않음
- 아무런 내용을 담고 있지 않으면, 보이지않음
class나 id로 여러 요소를 묶어서 스타일링 하기 쉽다.

예제 :

div 블록요소이며, 한줄을 모두 사용합니다.

<html>
	<style>
    #main{
    background-color:pink}
    </style>
    
    <body>
        <div id=main>
        div 블록요소이며, 한줄을 모두 사용합니다.
        </div>
	</body>
</html>

기술 요약

콘텐츠 카테고리 : 플로우 콘텐츠
가능한 카테고리 : 플로우 콘텐츠
태그 생략 : 종료태그 생략 불가능
가능한 상위 요소 : 플로우 콘텐츠를 허용하는 모든 요소

span : The Content Span 폭이나 넓이

HTML <span>은 구문 콘텐츠를 위한 인라인 콘테이너
"순수"컨테이너로서 아무것도 표현하지않는다. → 의미를 갖고 있지 않음
class나 id 로 요소를 묶어서 스타일링한다.

예제 :

span1 인라인 요소입니다.
span2 인라인 요소입니다.
span3 인라인 요소입니다.

<html>
	<style>
    #main{
    background-color:pink}
    </style>
    
    <body>
        <span id=main>
        span1 인라인 요소입니다.
        </span><br/>
        <span id=main>
        span2 인라인 요소입니다.
        </span><br/>
        <span id=main>
        span3 인라인 요소입니다.
        </span><br/>
    </body>
</html>

기술 요약

콘텐츠 카테고리 : 플로우 콘텐츠
가은한 콘텐츠 : 구문 콘텐츠
태그 생략 : 종료태그 생략 불가능
가능한 상위요소 : 구문콘텐츠 또는 플로우콘텐츠를 허용하는 모든요소

HTML : 시맨틱 웹(Semantic Web) - <section>

RESHUR : 레슈 — Fri, 10 Jun 2022 15:20:04 +0900

HTML : 시맨틱 웹(Semantic Web) - <section> 표지

HTML : 시맨틱 웹(Semantic Web) - <section>

<section> : 일반 구획 요소

<article>과 <section> 은 비슷하지만 다르다. <article>과는 다르게 제목요소 (h1~h6)는 필수요소가 아니며, 전체글의 흐름에서 문맥적으로 호흡이 끊길때 사용한다.
<article>과 <section>을 쉽게 구분하는 방법은 <article>이 될수있다면, <article>을 쓰고 아니면 <section>을 사용한다.
요소의 컨텐츠를 따로 구분해야할 필요가 있다면 <article>을 사용한다.
일반 컨테이너로 사용하면 안되며, 단순 스타일링을 위해서라면 <div>를 사용해야한다.

기술 요약

콘텐츠 카테고리 : 플로우 콘텐츠, 구획 콘텐츠

가능한 콘텐츠 : 플로우 콘텐츠

태그 생략 : 종료태그 생략 불가능

가능한 상위요소 : 플로우 콘텐츠를 허용하는 모든 요소 단, <section>요소는 <address>의 하위요소가 될수 없다.

2022.05.27 - [TIL/HTML] - HTML : 시맨틱 웹(Semantic Web)

HTML : 시맨틱 웹(Semantic Web)

HTML : 시맨틱 웹(Semantic Web) 시맨틱 웹 이란? (Semantic Web) Semantic : 의미의, 의미론적인 요소의 의미를 고려하여, 구조를 설계하고 코드를 작성하는 것을 말한다. 시맨틱 웹을 사용하면 이로운 점.

sol-reshur.tistory.com

2022.04.12 - [TIL/HTML] - HTML : 콘텐츠 카테고리 (Contents Category)

HTML : 콘텐츠 카테고리 (Contents Category)

HTML : 콘텐츠 카테고리 (Contents Category) 콘텐츠 카테고리 (Contents Category) HTML5부터 비슷한 특징을 가진 요소끼리 묶어서 7가지 카테고리로 세분화를 했다. 하나의 HTML요소가 여러 콘텐츠 카테고.

sol-reshur.tistory.com

REACT : About REACT (리액트에 대하여)

RESHUR : 레슈 — Fri, 10 Jun 2022 14:33:46 +0900

REACT : About REACT (리액트에 대하여) 표지

REACT : About REACT (리액트에 대하여)

REACT란 무엇인가?

React.js는 단일 페이지 애플리케이션(Web app : 앱처럼 작동하는 웹)을 위한 사용자 인터페이스를 구축하는 데 사용되는 자바스크립트 라이브러리이다. 특징으로는 아래와 같다.

React는 Facebook에서 처음만들어졌으며 Facebook과 Instagram에 처음 배포되었다.
React를 사용하면 개발자가 페이지를 다시 로드하지않고도 데이터를 변경할 수 있는 대규모 웹 애플리케이션 (Web App)을 만들 수 있다.
재사용 가능한 UI 구성요소를 만들 수 있다. (컴포넌트 - Component)
애플리케이션의 사용자 인터페이스에서만 작동한다.
Angular.js와 같은 다른 자바스크립트 라이브러리 또는 프레임워크와 함께 사용할 수 있다.

HTML : 시맨틱 웹(Semantic Web) - <article>

RESHUR : 레슈 — Tue, 31 May 2022 16:29:15 +0900

HTML : 시맨틱 웹(Semantic Web) - <article>

<article>

문서, 페이지, 애플리케이션 또는 사이트 내의 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 말한다.
인터넷 뉴스 기사를 다른 웹사이트에 스크랩하더라도 내용을 이해하는 것에 문제가 되지 않는 것처럼 현재 페이지가 아니더라도 다른 웹페이지에 표시하더라도 문제되지 않는 콘텐츠를 담을때 사용한다.
여러 <article>을 가질 수 있다.
- 기사 1 기사 2 기사 3, 정보 1 정보 2 정보 3 등
<article> 자체가 콘텐츠가 될 수 있지만 제목을 사용할 땐 <h2> ~ <h3>을 이용하여 나타낸다.

기술 요약

콘텐츠 카테고리 : 플로우 콘텐츠, 구획 콘텐츠

가능한 콘텐츠 : 플로우 콘텐츠

태그 생략 : 종료 태그 생략 불가

가능한 상위 요소 : 플로우 콘텐츠를 허용하는 모든 요소 <article> 요소는 <address>의 하위 요소가 될 수 없다.

HTML : 시맨틱 웹(Semantic Web)

sol-reshur.tistory.com

HTML : 시맨틱 웹(Semantic Web) - <main>

RESHUR : 레슈 — Tue, 31 May 2022 14:10:56 +0900

HTML : 시맨틱 웹(Semantic Web) - <main>

HTML : 시맨틱 웹(Semantic Web) - <main>

<main>

<body>의 주요 콘텐츠를 나타내며, 유일무이한 태그이다.
하나 이상을 써야 할 경우 주요 콘텐츠 외의 부분은 <hidden>을 사용하여 눈에 보이지않게 해야 한다. (접근성과 관련 있음)
대부분의 브라우저에서는 지원하나 Internet Explore 에선 지원하지 않는다.
Internet Explore 11 이하에서 작동해야 할 경우 하단과 같이 작성한다.
- 구형 브라우저를 지원할 필요가 없다면 role="main"보다 <main>을 사용한다..

<main role = "main">
</main>

예제

Apples

The apple is the pomaceous fruit of the apple tree.

Red Delicious

These bright red apples are the most common found in many supermarkets.

...

Granny Smith

These juicy, green apples make a great filling for apple pies.

...

<!-- other content -->

<main>
  <h1>Apples</h1>
  <p>The apple is the pomaceous fruit of the apple tree.</p>

  <article>
    <h2>Red Delicious</h2>
    <p>These bright red apples are the most common found in many
    supermarkets.</p>
    <p>... </p>
    <p>... </p>
  </article>

  <article>
    <h2>Granny Smith</h2>
    <p>These juicy, green apples make a great filling for
    apple pies.</p>
    <p>... </p>
    <p>... </p>
  </article>
</main>

<!-- other content -->

<main>은 하나지만 제목, 설명 등 모든 콘텐츠를 아우르는 전체 요소라고 생각하면 된다.

기술 요약

콘텐츠 카테고리 : 플로우 콘텐츠

가능한 콘텐츠 : 플로우 콘텐츠

태그 생략 :종료 태그 생략 불가

가능한 상위 요소 : 플로우 콘텐츠를 허용하는 경우 단, 구조적으로 올바른 <main> 요소여야 한다.

2022.05.27 - [TIL/HTML] - HTML : 시맨틱 웹(Semantic Web)

HTML : 시맨틱 웹(Semantic Web)

sol-reshur.tistory.com

HTML : 시맨틱 웹(Semantic Web) - <aside>

RESHUR : 레슈 — Tue, 31 May 2022 13:41:24 +0900

HTML : 시맨틱 웹(Semantic Web) - <aside>

<aside>

문서의 주 내용과 직접적인 연관은 없지만 간접적으로 연관이 있을 때 사용한다.
영어의 단어 뜻이나 블로그 류의 추가적인 콘텐츠(광고 등)를 나타날 때 사용한다.
<nav>와는 성격이 다르다.
- <aside>는 부가적인 내용이지만 굳이 없더라도 문제가 되지 않는다.

예제

Salamanders are a group of amphibians with a lizard-like appearance, including short legs and a tail in both larval and adult forms.

Several species of salamander inhabit the temperate rainforest of the Pacific Northwest, including the Ensatina, the Northwestern Salamander and the Rough-skinned Newt. Most salamanders are nocturnal, and hunt for insects, worms and other small creatures.

<style>
aside {
    width: 40%;
    padding-left: .5rem;
    margin-left: .5rem;
    float: right;
    box-shadow: inset 5px 0 5px -5px #29627e;
    font-style: italic;
    color: #29627e;
}

aside > p {
    margin: .5rem;
}

p {
    font-family: 'Fira Sans', sans-serif;
}

</style>

<p>Salamanders are a group of amphibians with a lizard-like appearance, including short legs and a tail in both larval and adult forms.</p>

<aside>
    <p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p>
</aside>

<p>Several species of salamander inhabit the temperate rainforest of the Pacific Northwest, including the Ensatina, the Northwestern Salamander and the Rough-skinned Newt. Most salamanders are nocturnal, and hunt for insects, worms and other small creatures.</p>

기술 요약

콘텐츠 카테고리 : 플로우 콘텐츠, 구획 콘텐츠

가능한 콘텐츠 : 플로우 콘텐츠

태그 생략 : 종료 태그 생략 불가

가능한 상위 요소 : 플로우 콘텐츠를 허용하는 모든 요소 <aside> 요소는 <address>의 하위 요소가 될 수 없다

HTML : 콘텐츠 카테고리 (Contents Category)

sol-reshur.tistory.com

HTML : 시맨틱 웹(Semantic Web)

sol-reshur.tistory.com

HTML : 시맨틱 웹(Semantic Web) - <nav>

RESHUR : 레슈 — Tue, 31 May 2022 13:26:08 +0900

HTML : 시맨틱 웹(Semantic Web) - <nav>

<nav>

<nav> : 탐색 구획 요소

문서의 부분중 현재페이지내 또는 다른 페이지로의 링크를 보여주는 구획이다. ( 예제 01참고 )
- 현재 어느 경로에 있는지를 나타내며, 다른페이지로 넘어갈수있다.

예제 01

<style>
  nav {
      border-bottom: 1px solid black;
  }

  .crumbs ol {
      list-style-type: none;
      padding-left: 0;
  }

  .crumb {
      display: inline-block;
  }

  .crumb a::after {
      display: inline-block;
      color: #000;
      content: '>';
      font-size: 80%;
      font-weight: bold;
      padding: 0 3px;
  }
</style>

<nav class="crumbs">
    <ol>
        <li class="crumb"><a href="#">Bikes</a></li>
        <li class="crumb"><a href="#">BMX</a></li>
        <li class="crumb">Jump Bike 3000</li>
    </ol>
</nav>

메뉴,목차,색인
- 현재페이지내에서 누르면 이동하여 보여주는것을 말한다.
- <footer>와는 성격이 다르다.
  - <footer>는 모든 웹페이지에 동일하게 들어가며, 전체를 아우르는 링크를 담고있다.
  - <nav>는 현재의 웹페이지의 상위나 현재 페이지내의 개요를 담고 있다.

기술요약

콘텐츠 카테고리 : 플로우 콘텐츠, 구획콘텐츠
가능한 콘텐츠 : 플로우 콘텐츠
태그생략 : 종료태그 생략 불가
가능한 상위요소 : 플로우 콘텐츠를 허용하는 모든 요소

HTML : 콘텐츠 카테고리 (Contents Category)

sol-reshur.tistory.com

HTML : 시맨틱 웹(Semantic Web) - <footer>

RESHUR : 레슈 — Tue, 31 May 2022 12:34:21 +0900

HTML : 시맨틱 웹(Semantic Web) - <footer>

<footer>

주로 웹의 맨 하단에 위치해있다.
웹페이지의 정보나 연관된 사이트를 나타낼 때 사용한다.

기술 요약

가능한 콘텐츠 : 플로우 콘텐츠
가능한 콘텐츠 : 플로우 콘텐츠 단, <header>와 다른 <footer>는 하위 요소가 될 수 없다.
태그 생략 : 종료 태그 생략 불가
가능한 상위 요소 : 플로우 콘텐츠를 허용하는 모든 요소 단, <footer> 요소는 <address>, <header>, 혹은 다른 <footer>의 하위 요소가 될 수 없다.

HTML : <address> - 연락처를 남길 때 사용하는 요소

HTML : - 연락처를 남길 때 사용하는 요소 레슈의 연락처 sol.reshur@gmail.com 123 456-78 " data-ke-type="html"> <>HTML 삽입 미리보기할 수 없는 소스 레슈의 연락처 sol.reshur@gmail.com 123 456-78..

sol-reshur.tistory.com

HTML : 시맨틱 웹(Semantic Web) - <header>

RESHUR : 레슈 — Fri, 27 May 2022 12:45:38 +0900

HTML : 시맨틱 웹(Semantic Web) - <header>

<header>

소개 및 탐색에 도움을 주는 콘텐츠를 넣는다.
제목, 로고, 검색 폼, 작성자 이름 등의 요소를 포함한다.
소개를 위한 요소로 넣을 경우 전체 웹페이지에 하나만 사용해야한다.

페이지 제목 예시

: 페이지 전체를 아우르는 제목 <h1>으로 작성 시 사용한다.

Main page

예시를 위한 글입니다.

<header>
	<h1>Main page </h1>
    <p>예시를 위한 글입니다.</p>
</header>

글 제목 예시

: 각각의 기사, 아티클엔 <h2>나 <h3>을 사용해야 한다.

The Planet Earth

Posted on Wednesdaty, 3 03 2022 by me

blah blah blah ~

<article>
	<header>
		<h2>The Planet Earth</h2>
		<p>Posted on Wednesdaty,
        <time datetime="20202-03-10">3 03 2022 </titme>
		by me </p>
	</header>
	<p> blah blah blah ~ </p>
</article>

기술 요약

콘텐츠 카테고리 : 플로우 콘텐츠
가능한 콘텐츠 : 플로우 콘텐츠 , 단 다른 <header>또는 <footer>는 하위로 올 수 없다.
태그 생략 : 종료 태그 생략 불가
가능한 상위 요소 : 플로우 콘텐츠를 허용하는 모든 요소 단, <footer> 혹은 또 다른 <header>는 하위 요소로 올 수 없다.

2022.05.27 - [TIL/HTML] - HTML : 시맨틱 웹(Semantic Web)

HTML : 시맨틱 웹(Semantic Web)

sol-reshur.tistory.com

HTML : 시맨틱 웹(Semantic Web)

RESHUR : 레슈 — Fri, 27 May 2022 12:21:05 +0900

HTML : 시맨틱 웹(Semantic Web)

시맨틱 웹 이란? (Semantic Web)

Semantic : 의미의, 의미론적인
요소의 의미를 고려하여, 구조를 설계하고 코드를 작성하는 것을 말한다.

시맨틱 웹을 사용하면 이로운 점

검색 엔진은 의미론적 마크업을 분석하여 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주한다.
시각장애가 있는 사용자가 스크린리더로 탐색할때 의미론적인 마크업을 푯말로 사용할 수 있다. (웹 접근성)
의미가 없는 끊임없는 <div>를 탐색하는 것보다 의미 있는 코드 블록을 찾는 것이 훨씬 쉽다.
개발자에게 태그 안에 채워질 데이터 유형을 제안할 수 있다.
의미 있는 이름 짓기(Semantic Naming)는 적절한 사용자 정의 요소, 구성요소의 이름 짓기(Naming)를 반영한다.

2022.05.27 - [TIL/HTML] - HTML : 시맨틱 웹(Semantic Web) -

HTML : 시맨틱 웹(Semantic Web) - <header>

HTML : 시맨틱 웹(Semantic Web) - 소개 및 탐색에 도움을 주는 콘텐츠를 넣는다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소를 포함한다. 소개를 위한 요소로 넣을 경우 전체 웹페이지에 하나만

sol-reshur.tistory.com

2022.05.31 - [TIL/HTML] - HTML : 시맨틱 웹(Semantic Web) -

HTML : 시맨틱 웹(Semantic Web) - <footer>

sol-reshur.tistory.com

2022.05.31 - [TIL/HTML] - HTML : 시맨틱 웹(Semantic Web) -

HTML : 시맨틱 웹(Semantic Web) - <nav>

HTML : 시맨틱 웹(Semantic Web) - 문서의 부분중 현재페이지내 또는 다른 페이지로의 링크를 보여주는 구획이다. ( 예제 01참고 ) 현재 어느 경로에 있는지를 나타내며, 다른페이지로 넘어갈수있다

sol-reshur.tistory.com

2022.05.31 - [TIL/HTML] - HTML : 시맨틱 웹(Semantic Web) -

HTML : 시맨틱 웹(Semantic Web) - <aside>

HTML : 시맨틱 웹(Semantic Web) - 문서의 주 내용과 직접적인 연관은 없지만 간접적으로 연관이 있을 때 사용한다. 영어의 단어 뜻이나 블로그 류의 추가적인 콘텐츠(광고 등)를 나타날 때 사용한

sol-reshur.tistory.com

2022.05.31 - [분류 전체보기] - HTML : 시맨틱 웹(Semantic Web) -

HTML : 시맨틱 웹(Semantic Web) - <main>

HTML : 시맨틱 웹(Semantic Web) - 의 주요 콘텐츠를 나타내며, 유일무이한 태그이다. 하나 이상을 써야 할 경우 주요 콘텐츠 외의 부분은 을 사용하여 눈에 보이지않게 해야 한다. (접근성과 관련

sol-reshur.tistory.com

2022.05.31 - [TIL/HTML] - HTML : 시맨틱 웹(Semantic Web) -

HTML : 시맨틱 웹(Semantic Web) - <article>

HTML : 시맨틱 웹(Semantic Web) - 문서, 페이지, 애플리케이션 또는 사이트 내의 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 말한다. 인터넷 뉴스 기사를 다른 웹사이트에 스크랩하더라

sol-reshur.tistory.com

HTML : <del> - 문서에서 제거된 텍스트 범위를 나타내는 태그

RESHUR : 레슈 — Fri, 27 May 2022 12:06:24 +0900

HTML : <del> - 문서에서 제거된 텍스트 범위를 나타내는 태그

제거된 텍스트의 범위를 나타낼 때 사용한다.
문서나 소스 코드의 변경점 추적 등에 사용할 수 있다.
취소선 형태로 나타난다. → 웹브라우저가 자체적으로 스타일링을 하기 때문에 다르게 표시될 수 있다.

특성 :

datetime : 변경이 발생된 일시를 나타낼 때 사용한다.

안녕하세요! ~~뜨거운 아이스 아메리카노가 먹고싶어요~~

<p> 안녕하세요! <del datetime:2022-05-27>뜨거운 아이스 아메리카노가 먹고싶어요</del>

HTML : <small>, <sup>, <sub>

RESHUR : 레슈 — Fri, 27 May 2022 11:47:53 +0900

HTML : <small>, <sup>, <sub>

<small> : 덧붙이는 글

예제 :

안녕하세요. 블로그에 와주셔서 감사합니다.
	Copyright Copyright

<pre>안녕하세요. 블로그에 와주셔서 감사합니다.
	<small>Copyright</small> Copyright
 </pre>

<p>보다 한 사이즈 작게 표현된다.

기술요약

콘텐츠 카테고리 : 플로우 콘텐츠, 구문 콘텐츠
가능한 콘텐츠 : 구문 콘텐츠
태그 생략 : 종료 태그 생략 불가능
가능한 상위 요소 : 구문 콘텐츠를 허용하는 모든 요소

<sup> : 윗 첨자

예제 :

영여 서수 적는법 
- 서수 = 기수th
- 네번째 = fourth

1^st

2^nd

3^rd

4^th

5^th

<pre>영여 서수 적는법 
- 서수 = 기수<mark>th</mark>
- 네번째 = four<mark>th</mark></pre>

<p>1<sup>st</sup></p><br/>
<p>2<sup>nd</sup></p><br/>
<p>3<sup>rd</sup></p><br/>
<p>4<sup>th</sup></p><br/>
<p>5<sup>th</sup></p><br/>

활자 배치를 윗 첨자로 해야 할 때 사용하는 인라인 텍스트이다.
거듭제곱의 지수 표기할 때 가장 많이 사용한다.
영어의 서수 등 숫자와 윗 첨자로 표기한 특정 텍스트를 사용할 때 축약할 수 있다.

기술 요약

콘텐츠 카테고리 : 플로우 콘텐츠, 구문 콘텐츠
가능한 콘텐츠 : 구문 콘텐츠
태그 생략 : 종료 태그 생략 불가능
가능한 상위 요소 : 구문 콘텐츠를 허용하는 모든 요소

<sub> : 아랫 첨자

예제 :

The horizontal coordinates' positions along the X-axis are represernted as x₁...x_n.

<p>The horizontal coordinates' positions along the X-axis are represernted as
<mark><var>x<sub>1</sub></var>...<var>x<sub>n</sub></var>.</mark></p>

아래 첨자를 작성하는 인라인 텍스트이다.
변수 표기, 화학식에 주로 사용된다.

기술 요약

콘텐츠 카테고리 : 플로우 콘텐츠, 구문 콘텐츠

가능한 콘텐츠 : 구문 콘텐츠

태그 생략 : 종료 태그 생략 불가능

가능한 상위 요소 : 구문 콘텐츠를 허용하는 모든 요소

2022.04.12 - [TIL/HTML] - HTML : 콘텐츠 카테고리 (Contents Category)

HTML : 콘텐츠 카테고리 (Contents Category)

sol-reshur.tistory.com

NOTICE : About RESHUR

RESHUR : 레슈 — Wed, 25 May 2022 15:57:11 +0900

블로그의 포스트는

공부를 하면서 적어두었던 것들을 정리하며 되새기는 목적을 위해 작성합니다.

GitHub : https://github.com/sol-reshur

sol-reshur - Overview

sol-reshur has 9 repositories available. Follow their code on GitHub.

github.com