songaji_00.log

javascript 문자열 분리 / 정렬하기

Tue, 13 Dec 2022 14:49:32 GMT

substr()

str.substr(시작인덱스)
str.substr(시작인덱스, 자를 개수)

slice()

str.slice(시작위치)
str.slice(시작위치, 종료위치)

    !! 주의 - 종료 위치는 자르고 싶은 위치 + 1 해서 입력해야 함

Sort()

유니코드의 오름차순을 따르다보니 치명적인 오류가 있다!

예를 들어 [10, 9, 1, 7, 97, 102] 에 sort 를 사용하면

[1, 10, 102, 7, 9, 97] 과 같이 정렬이 됨
array(sort((a,b)⇒a-b) 를 하면 오름차순=유니코드 기준으로 정렬해줌!!
array(sort((a,b)⇒b-a) 를 하면 내림차순으로 정렬됨!
원본 배열이 변경이 되니 사용 시 주의해야 한다.

문자열에서 오름차순으로 정렬이 되지 않고 있음
오름차순으로 정렬하려면 하단과 같이 표시할 것

HTML : 시멘틱 웹과 시멘틱 태그

Wed, 16 Nov 2022 06:00:45 GMT

Q. 이미지를 넣는 방법 중 img 태그를 사용하는 것과 div 태그에 속성을 추가하는 것은 무슨 차이가 있을까요?

이 질문에 답하기 위해서는 시멘틱 웹과 시멘틱 태그에 대한 이해가 필요하다고 한다. 한 번 알아보자!!

시멘틱(Semantic)?

'의미의', '의미론적인' 이라는 뜻을 가지고 있다.

그렇다면 시멘틱 웹과 시멘틱 태그는 의미가 있는 웹, 의미가 있는 태그라고 유추할 수 있다. 누구에게 의미를 가진다는 의미일까?

시멘틱 웹의 등장배경

기존에 컴퓨터는 어떠한 코드가 중요한 것인지 구분할 수가 없었다. 사람들은 특정 문구의 폰트가 굵거나, 글자 색상이 노란색이라면 그것이 중요한 내용이라고 구별할 수 있지만, 컴퓨터에게는 그러한 능력이 없었다.
그래서 컴퓨터가 수많은 정보를 의미있게 해석할 수 있도록 해주는 시멘틱 웹이 등장했다. 시멘틱 태그를 이용해 컴퓨터에게 어떤 내용이 중요한지, 다른 정보와 어떤 관계가 있는지를 알려줄 수 있다.
여기서 시멘틱 태그는 태그 자체로 의미가 있어서 컴퓨터와 사람이 태그의 이름만 보고도 태그가 문서에서 가지는 역할을 파악할 수 있다.

시멘틱 태그의 예시

웹 사이트는 상단 같은 구조로 이뤄져있다.
기존에는
로 id 값을 줌으로써 사람들에게 이쪽이 헤더 영역이라고 알려줘야 했지만, 이제는 이제는 헤더 태그로 사람뿐만 아니라 컴퓨터에게까지 이 영역이 헤더라고 명시적으로 알려줄 수 있다.
웹 사이트에서 사용되는 태그의 역할은 다음과 같다.
- :페이지의 제목, 머리글, 로고 등
- : 페이지의 메뉴, 목차, 색인 등
- : 여러 article이 연관이 있어 내용을 묶어주고 싶을 때 사용
- : 독립적으로 배포 또는 사용될 수 있는 내용이 들어가는 공간
- : 저작권 정보, 관련 문서, 연락처, 사이트맵 등
- : 배너, 광고 등을 사이드바에 표현

그렇다면 이미지 넣는 두 가지 방법의 차이는?

1. img 태그

img 태그는 시멘틱 태그이다.
이미지가 콘텐츠와 관련이 있을 경우 사용한다.
프린트를 할 때 이미지가 같이 출력되어야 한다면 img 태그를 사용한다.
이미지 자체의 크기가 설정이 되어 있어서, 굳이 이미지의 크기를 지정해주지 않아도 이미지가 나타난다.

2. div의 background-image 속성

div 태그는 의미 없는 태그이다.
이미지가 콘텐츠와 관련이 없을 때 사용한다. 배경 이미지를 넣을 때 좋으며 한 번에 여러 이미지를 넣을 수 있다.
프린트를 할 때 포함되지 않는다.
div에 내용이 없을 경우 따로 너비와 크기를 설정하지 않으면 이미지가 나타나지 않는다.

CSS : 개요

Tue, 15 Nov 2022 07:47:57 GMT

정의

Cascading Style Sheets : 스타일 시트 언어, 웹 페이지에 어떻게 표시될지 글꼴과 색상, 크기 등을 지정하는 역할을 한다.

적용방법

인라인 스타일

태그에 직접 style 속성을 주는 방법
CSS

style 태그

html 내 부분에 작성

CSS 파일에 작성

실무에서 사용하는 방법-유지보수가 쉽다.
link 태그로 html 파일과 CSS 파일을 연결해줘야 한다.
/>


작성방법

태그에 적용할 경우 태그 { 스타일 } 
id에 적용할 경우 #아이디 {스타일}
class에 적용할 경우 .클래스 {스타일}


font 스타일

font-size : 폰트 크기 설정
font-family : 폰트 종류 지정
font-weight: 폰트 굵기 설정, 100~900 사이의 값을 주거나, normal, bold 로 입력 가능
text-decoration : 밑줄, 취소선 표시
color : 색상 이름, hex 코드, rgb, hsl 로 값을 줄 수 있음
letter-spacing : 글자 간격 조절

문단 스타일

text-align : center/left/right 정렬 가능
text-indent : 들여쓰기
line-height : 행간 높이 설정



HTML : 태그와 속성
Tue, 15 Nov 2022 07:33:39 GMT
h1~h6 태그

제목 텍스트를 보여줄 때 사용하는 태그
h1 은 한 번만 사용해야 하며, h1->h2 와 같이 순차적으로 사용해야 한다.


a 태그

하이퍼링크로 이동할 수 있는 태그
속성 
기본값은 현재 페이지에서 바로 이동되는 페이지로 넘어가는 것
target 속성 : _blank 이동되는 사이트를 새창으로 띄어줌



p 태그와 span 태그

주로 텍스트를 표현할 때 사용
p 태그는 블록 요소라 한 줄을 차지/줄바꿈이 일어남
span 태그는 내용만큼만 공간을 차지해 줄바꿈이 일어나지 않음


div 태그

특별한 기능 없이 공간을 분리할 때 사용

img 태그

이미지 삽입 요소



속성 : id와 class

태그에는 와 같이 class 나 id 를 줄 수 있다.

id는 고유한 값이여야 하고, class 는 여러 태그에 중복으로 사용해도 된다.
태그에 id와 class를 주면, 원하는 태그에 CSS 적용하기 쉬워진다.




HTML : 개요
Tue, 15 Nov 2022 07:13:36 GMT
정의

브라우저가 웹 페이지를 표시할 수 있도록 구조를 잡아주는 마크업 언어(markup language)

구조

VS Code 에서 html을 만들고 '!'를 누르면 다음과 같은 구조가 자동으로 완성된다.


어떤 버전의 HTML 으로 작성됐는지 웹 브라우저에 알려주는 역할
현재는 HTML5이 웹 표준이다.
HTML 문서 내용이 같아도 브라우저 환경에 따라 결과물이 달라질 수 있으므로 브라우저가 HTML 문서를 동일하게 인식할 수 있도록 선언
HTML 구버전인지 신버전인지에 따라 사용된 태그의 적용 여부가 달라지기 때문에 작성이 필요하다.



웹 문서에 언어 지정
ko로 바꿔서 사용하면 된다.



브라우저가 html 태그를 보고, 화면을 그릴 준비를 한다.

 : HTML 문서의 인코딩 방식, UTF-8 은 유니코드를 위한 문자셋. 한글, 일본어, 중국어가 포함된 페이지라면 UTF-8을 입력해줘야 한다.

 : 뷰포트(웹페이지가 사용자에게 보여지는 영역)를 장치 너비에 맞추어 표시

</code> 웹페이지의 제목, 브라우저 제목표시줄이나 페이지 탭에 표시됨</p>
</li>
</ul>
<h4 id="body"><code><body></code></h4>
<ul>
<li>페이지를 통해 전달하고자하는 정보가 담기는 구역</li>
<li>body 에 태그를 이용하여 내용을 표시한다.</li>
</ul>
<h2 id="태그와-요소">태그와 요소</h2>
<ol>
<li>태그(tag)  </li>
</ol>
<ul>
<li><code><div></code>, <code><p></code>, <code><a></code>, <code><h1></code>, <code></code> 등이 있으며, 이미지나 텍스트를 그리기 위해 적절한 태그를 사용해야 한다.</li>
<li><> 시작 태그, </> 종료 태그</li>
<li><code></code>, <code><br></code>처럼 태그 안에 내용이 필요 없는 경우 종료 태그가 없는 경우도 있다! </li>
</ul>
<ol start="2">
<li><p>내용(content) : 시작 태그와 종료 태그 안에 기재되는 것, 내용은 화면에 보여진다.</p>
</li>
<li><p>속성(attribute)</p>
</li>
</ol>
<ul>
<li><code><div class = "aaa"></code> 에서의 class</li>
<li><code></code> 에서의 src</li>
<li><code><a href= "#"></code> 에서의 href 등 시작 태그 쪽에 위치</li>
</ul>
<ol start="4">
<li>요소(element)</li>
</ol>
<ul>
<li>시작 태그부터 종료 태그가 있고, 태그 사이에 내용이 있는 구조</li>
<li>종료 태그가 없는 것은 태그 그 자체로 요소가 된다.</li>
<li><code><div> 반갑습니다! </div></code> 가 하나의 요소</li>
</ul>

</article>
</main></body></html>