메인페이지 자바스크립트 기능구현

1. ID와 PW를 넣어줬을때 background 컬러가 옅은 파란색으로 변해야 한다.
2. ID와 pw를 넣어줬을때 로그인 버튼이 파란색으로 활성화 되어야 한다.
3. 로그인 버튼이 활성화 되어 로그인 버튼을 클릭하면 리셋되어야 한다.

코드 풀이- 0

코드는 위에서 부터 아래로 읽어오기 때문에 일단 함수와 변수를 제일 상단에 선언해 주었습니다.

• Document.getElementById() 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환합니다. ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을 때 유용합니다.

• HTML에서 "전화번호, 사용자 이름 또는 이메일" input 박스 id를 id로 지정해 주었습니다 id = "id" 위와 같이 "비밀번호" id는 password "로그인"input박스 id는 BTN 으로 지정해주었습니다.

코드 풀이 - 1

if ((loginId.value.length>0 && loginId.value.indexOf("@")!==-1)&& loginPw.value.length>=5)

• if ((loginId.value.length>0 //만약에 loginId 초기값 길이가 0보다 크거나

• && loginId.value.indexOf("@")!==-1) //또는 loginId 초기값에서 "@"찾아서 "@"가 ID input박스에 있어야 하며 없다면 -1

• && loginPw.value.length>=5) //또는 loginPw 초기값에서 길이가 5보다 크거나 같아야 한다.

loginBtn.style.backgroundColor = "#0095F6"; loginBtn.disabled = false;

** }else{ loginBtn.style.backgroundColor = "#C0DFFD"; loginBtn.disabled = true; } } **

• 로그인 버튼 초기값 버튼 배경색을 "#0095F6"으로 변환해준다

• 로그인 버튼에 disabled라는 함수를 지정해 주어 활성화 해준다.

• disabled를 false로 선언해 준 이유는 disabled라는 함수가 기본 초기값이 비활성화로 되어있기 때문에 활성화가 true가 아니라 false로 지정을 해주어야 활성화가 된다.

• 하나라도 일치하지 않을 시 로그인 input박스 색깔이 "#c0DFFD"로 변화 되고 disabled를 true로 선언되어 있기 때문에 비활성화 상태가 된다.

코드 풀이 - 2

• 새 하위 문자열을 생성하기 위해 호출 하기 위해서 매개변수인 funtion을 선언해주고 전체 문자열을 불러 오기 위해 replace("./index.html"); 을 선언해 HTML을 불러옵니다.

• 활성화 Event를 호출하기 위해 loginID.addEventListener()를 선언해 줍니다. addEventListener()메서드는 지정한 유형의 이벤트를 대상이 수신할 때마다 호출을 할수 있는 매개변수입니다. () 괄호안에는 불러올 함수를 지정해 줍니다.

• keyup을 선언한 이유는 키보드 이벤트(Keyboard Event)는 사용자가 키를 누르거나 키를 놓을 때 발생합니다. 키를 누를 때는 keydown 타입의 이벤트가 발생하고, 키를 놓을 때는 keyup 타입의 이벤트가 발생하기 때문에 id인 input박스에 text를 입력 후 다음 input 박스로 넘어 가면 이벤트가 발생하게 하기 위함.

• color는 바로 위 상단에서 지정해준 컬러 "#c0DFFD" 또는 "#0095F6" 로 변환해 주기 위해 선언해주었다.

• loginBtn.addEventListener('click',moveToMain); // 로그인 버튼에 강제적으로 이벤트를 발생 시키기 위해 click함수를 지정해 주었다 즉 모든 조건이 true일 경우 로그인 버튼이 활성화 된다.

  활성화 되지 않은 로그인 페이지

• "@"가 ID input박스에 들어가지 않았거나 password inpt박스에 5자리 이상 입력되어 있지 않을 경우 로그인 버튼은 활성화가 되지 않는다.

모두 완료가 된 로그인 페이지 입니다.

• ID input 박스에 "@"문자열이 들어갔고 또 다른 password input 박스에 longth >=5 즉 문자열이 5개이상 들어 갔기 때문에 로그인 버튼이 활성화 되어 있는것을 볼 수 있습니다

위 이미지가 클론할 페이지 이다. ** <구현해야 할 부분!>**

-네모난 박스 안에 westagram 폰트를 넣어주고 바로 밑에부분에 아이디 및 이메일 들어갈 박스를 만들어주고 바로 밑에 비밀번호가 들어갈 박스를 만들어 주어야 한다. -로그인 박스를 만들어 준 뒤 자바스크립트로 아이디와 비밀번호가 입력 되었을때 버튼이 활성화 되어야 한다.

-그 밑에는 타 플랫폼으로 로그인 할 수 있는 로그인 링크 할 수 있는 부분을 만들어주고 비밀번호 찾는 링크 또한만들어주어야 한다.

작성한 코드를 가져와서 하나 하나 리뷰 해보려고 한다.

일단 form 태그로 전체적인 body 태그들을 묶어주었다.

form태그란 사용자가 정보를 입력할 수 있도록 만들어진 웹 요소 추후 블로그에 form태그에 대한 자세한 내용을 다시 작성할 예정입니다.

input 박스

처음 구연한 부분은 input 태그로 "전화번호 , 사용자 이름 또는 이메일 " 부분을 구연하였다.

div박스로 id 값을 지정해준 뒤 input박스 타입을 text으로 지정해 주었다 . 지정한 이유는 디폴트 값. 한줄의 텍스트 필드이고 새줄 문자는 입력값으로부터 자동으로 제거되기 때문에 사용해 주었습니다.

input 박스의 종류는 여러가지가 있는데 사용할부분에 따라 요소에 맞게 사용하면 될것 같다 input 박스의 종류 부분도 다시 블로그에 작성할 예정입니다.

스타일의 경우 css부분에서 다뤄도 되지만 나름의 가독성을 높이기 위해서 HTML에서 input 박스에서 각자의 width 값과 height값을 지정해 주었다.

Button

button 박스의 종류는 3가지가 존재 한다 . 존재 하는 3가지 박스 또한 다시 블로그에 작성 할 예정입니다.

일단 배운 버튼의 종류가 button 속성뿐이라 사용해 주었다.

id값과 class 값을 같이 준 이유는 자바스크립트 속성과 css속성에서 따로 사용하기 위해서 두개의 값을 사용해 주었습니다.

두개를 굳이 안써도 될것 같은데 코드를 작성하다보니 두개를 코딩하게 되었습니다. 다시 한번 코드를 뜯어 보며 확인해서 간단한 방법이 있는지 알아봐야할것 같습니다.

a태그

타 플랫폼으로 넘어가기 위해선 a태그를 이용해야 하므로 a태그로 facebook 이라는 텍스트에 링크를 걸어주었다 .

바로 밑에 password lose? 부분에도 똑같이 지정해 주었다.

링크를 클릭해도 아직 아무런 반응도 일어나지 않는다 다음에는 링크를 눌렀을때 다음 페이지로 넘어가는 기능을 구현해보려고 한다.

메인페이지 HTML 부분은 이정도로 구현하였다.

완성된 인스타그램 로그인페이지다.

클론이지만 클론같지 않은 클론페이지 인것같다...

사이즈도 조금 다르고 더 짧게 코드구현은 당연히 가능한것 같지만 아직은 보고 따라 만드는것도 벅찬것 같다..

전화 번호 및 비밀번호를 입력해 주었을때 로그인 부분이 옅은 파란색에서 진한파란색으로 변하는 기능은 westargram#2에서 작성하도록 하겠습니다.

for ([초기문]; [조건문]; [증감문])

문장 for문이 실행될 때, 다음과 같이 실행됩니다.:

초기화 구문인 초기문이 존재한다면 초기문이 실행됩니다. 이 표현은 보통 1이나 반복문 카운터로 초기 설정이 됩니다. 그러나 복잡한 구문으로 표현 될 때도 있습니다. 또한 변수로 선언 되기도 합니다.

조건문은 조건을 검사합니다. 만약 조건문이 참이라면, 그 반복문은 실행됩니다. 만약 조건문이 거짓이라면, 그 for문은 종결됩니다. 만약 그 조건문이 생략된다면, 그 조건문은 참으로 추정됩니다.

문장이 실행됩니다. 많은 문장을 실행할 경우엔, { } 를 써서 문장들을 묶어 줍니다. 갱신 구문인 증감문이 존재한다면 실행되고 2번째 단계로 돌아갑니다.

예시로

for(i=0; i<=10; i++)

초기문은 i=0부터 시작을 한다 라고 초기 값을 지정해주었습니다.

조건문은 i 와 조건식 10을 대입하여 i보다 작거나 같다 라는 비교 연산자를 사용해 주었습니다.

증감문은 앞에 초기문 조건문을 대입한 뒤 i인 0이 10 보다 작거나 같을 경우 1씩 증가 시켜준다 라는 식 입니다.

또다른 예시로는

findSmallestElement 함수를 구현해 주세요. findSmallestElement 의 arr 인자는 숫자 값으로만 이루어진 배열입니다.

arr 의 값들 중 가장 작은 값을 리턴 해주세요.

만일 arr 가 비어있으면 0을 리턴 해주세요.

예를 들어, 다음과 같은 배열이 인자(input)으로 들어왔다면 1이 리턴 되어야 합니다.

[20, 200, 23, 1, 3, 9]

풀이

let arr=[20, 200, 23, 1, 21, 8]

function findSmallestElement(arr) { if (arr.length === 0) { return 0; // 빈 배열이면 0을 리턴 } else { let min = arr[0]; for (let i = 1; i < arr.length; i++) { if (min > arr[i]) { min = arr[i]; } } return min; } }

console.log(findSmallestElement(arr))

module.exports = { findSmallestElement};

동작 순서는 let arr 에 있는 배열의 변수를 읽어준뒤 function findSmallestElement(arr) 에 있는 arr에 배열들이 담겨집니다.

그리고 if (arr.length === 0) { return 0;

만약에 배열이 비어있다면 0을 리턴해 줍니다.

} else {
let min = arr[0];
for (let i = 1; i < arr.length; i++) {
  if (min > arr[i]) {
    min = arr[i];
  }
}
return min;

else 그게 아니면 let min = arr [0]; min을 arr 즉 배열으로 지정해 주고 0번째 부터 실행하고 반복문인 for문을 돌려줍니다.

for (let i = 1; i < arr.length; i++) i=1 즉 i를 배열의 1번째 200으로 초기값을 지정해 준 뒤 i즉 200 보다 arr.length ;가 작다면 배열에 있는 순서에서 i++ 1씩 증가 시킵니다.

if 만약에 min인arr[0]보다 크면 arr[i] 배열에 있는 i = 200 min = arr[i]; 인덱스가 검사한 인덱스보다 크면 min을 교체 다시 말해, 검사한 인덱스가 min보다 작으면 해당 인덱스의 값을 min으로! 그리고 리턴합니다. 그러면 결과값 1이 나타나게 됩니다.

inline

display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. *대표적인 inline 엘리먼트로 span 이나 a , em 태그 *등을 들 수 있습니다.

예를 들어, 여러 개의 inline 엘리먼트 다음과 같이 마크업하면** 줄바꿈 없이** 순서대로 한 줄에 보이게 됩니다.

inline 엘리먼트를 사용할 때 주의할 점은, width와 height 속성을 지정해도 무시된다는 것입니다. 왜냐하면 해당 태그가 마크업하고 있는 컨텐트의 크기 만큼만 공간을 차지하도록 되어 있기 때문입니다. 또한, margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않습니다.

위와 같이 나열되어 있는 결과가 나오게 됩니다.

inline-block

display 속성이 inline-block으로 지정된 엘리먼트는 마치 하이브리드 모드처럼 동작하는데요. 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, block 엘리먼트처럼 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능합니다. 다시 말해서, 내부적으로는 block 엘리먼트의 규칙을 따르면서 외부적으로 inline 엘리먼트의 규칙을 따르게 되는 것이지요.

대표적인 inline-block 엘리먼트로 button이나 input, select 태그 등을 들 수 있습니다.

inline-block 엘리먼트는 위와 같이 명시적으로 헤당 엘리먼트의 스타일을 display: inline-block로 지정해줘야 합니다. inline-block을 이용하면 여러 개의 엘리먼트를 한 줄에 정확히 원하는 너비만큼 배치할 수 있기 때문에 레이아웃에 활용할 수 있습니다.

block

display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다. 대표적인 block 엘리먼트로 div 이나 p, h1 태그 등을 들 수 있습니다.

예를 들어, 여러 개의 block 엘리먼트 다음과 같이 마크업하면 매번 줄바꿈 되어 여러 줄에 보이게 됩니다.

block 엘리먼트는 inline 엘리먼트와 달리 width, height, margin, padding 속성이 모두 반영이 됩니다.

position 속성은 태그를 어떻게 위치시킬지를 정의하며, 아래의 5가지 값을 갖습니다.

static: 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없습니다.

absolute: 절대 좌표와 함께 위치를 지정해 줄 수 있습니다.

relative: 원래 있던 위치를 기준으로 좌표를 지정합니다.

fixed: 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정합니다.

inherit: 부모 태그의 속성값을 상속받습니다.

좌표를 지정 해주기 위해서는 left, right, top, bottom 속성과 함께 사용합니다.

position을 absolute나 fixed로 설정시 가로 크기가 100%가 되는 block 태그의 특징이 사라지게 됩니다.

사용 방법

#box1 { position:static;top: 20px; left: 30px; } #box2 { position:absolute; top: 20px; left: 30px; } #box3 { position:relative; top: 20px; left: 30px; } #box4 { position:fixed; top: 20px; left: 30px; } #box5 { position:inherit; top: 20px; left: 30px; }

이러한 식으로 사용이 가능합니다.

relative

요소를 일반적인 문서 흐름에 따라 배치한다.

요소 자기 자신의 원래 위치(static일 때의 위치)를 기준으로 배치한다.

원래 위치를 기준으로 위쪽(top), 아래쪽(bottom), 왼쪽(left), 오른쪽(right)에서 얼마만큼 떨어질 지 결정한다.

위치를 이동하면서 다른 요소에 영향을 주지 않는다. 문서 상 원래 위치가 그대로 유지된다.

이런식으로 2개의 박스를 만들어 position:relative 주고 결과 값을 확인하면

이와 같이 시작점은 같지만 위치를 지정해준 붉은색 박스와 두개가 겹쳐서 나타는걸 볼수가 있습니다.

absolute

position 속성이 absolute로 설정되어 있는 엘리먼트는 웹페이지 상에 배치될 때 다음과 같은 특징을 갖습니다.

부모 엘리먼트 내부에 속박되지 않고, 독립된 배치 문맥(positioning context)을 가지게 됩니다. 마치 포토샵 같은 그래픽 툴에서 새로운 레이어를 추가하는 효과에 비슷하다고 생각하시면 됩니다. 따라서, 엘리먼트를 기본적으로 브라우저 화면(viewport) 상에서 어디든지 원하는 위치에 자유롭게 배치시킬 수 있으며, 심지어 부모 엘리먼트 위에 겹쳐서 배치할 수도 있습니다. 단, 상위 엘리먼트 중에 position 속성이 relative인 엘리먼트가 있다면, 그 중 가장 가까운 엘리먼트의 내부에서만 엘리먼트를 자유롭게 배치할 수 있습니다. 즉, 전체 화면이 아닌 해당 상위 엘리먼트를 기준으로 offset 속성(top, left, bottom, right)이 적용됩니다.

이러한 방식으로 position : relative 로 요소 자기 자신의 원래 위치에서 감싸주는 solid 박스를 만들어준 뒤 position : absolute로 독립된 개체 박스를 만들어 주었습니다

위에 결과를 보시면 컨테이너라는 position : relative 요소 안에 absolute 박스가 독립된 요소로 움직이는 것을 볼수 있습니다.

fixed

화면을 위아래로 스크롤하더라도 브라우저 화면의 특정 부분에 고정되어 움직이지 않는 UI를 본적이 있으신가요? 보통 라이브 채팅 버튼을 구현할 때 많이 쓰이는 기법인데요. position 속성을 fixed로 지정하면 이렇게 요소를 항상 고정된(fixed) 위치에 배치할 수 있습니다.

이게 가능한 이유는** fixed 속성값의 배치 기준이 자신이나 부모 요소가 아닌 뷰포트(viewport), 즉 브라우저 전체화면이기 때문인데요.** top, left, bottom, right 속성은 각각 브라우저 상단, 좌측, 하단, 우측으로 부터 해당 요소가 얼마나 떨어져있는지를 결정합니다.

위에 있는 코드를 보면 falst-child(상품1) , last-child(상품2)를 컬러가 있는 박스로 만들어 놓았고 .coupon은 오른쪽 하단 제일 구석에 배치 header는 왼쪽 상단 제일 구석에 배치하였다.

fixed를 사용하여 배치 하였기 때문에 고정이 되어 있으며 스크롤을 내려도 상단 사과 모양(header)과 오른쪽 하단에 있는 "오늘만 할인!!"(.coupon) 부분은 사라지지 않고 "상품1" "상품2"만 보이지 않는것을 확인 할 수 있다.

Semantic Web

시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로,현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다. 웹의 창시자인 팀 버너스리가 1998년 제안했고 현재 W3C에 의해 표준화 작업이 진행 중이다

SEO(검색엔진 최적화: Search Engine Optimization)같은 마케팅 도구를 사용하여 검색엔진이 본인의 웹사이트를 검색하기 알맞은 구조로 웹사이트를 조정하기도 하는데, 이것은 기본적으로 검색엔진이 웹사이트 정보를 어떻게 수집하는지 아는 것으로 부터 시작된다.

검색엔진은 로봇(Robot)이라는 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집한다.(이것을 크롤링이라 하며 검색엔진의 크롤러가 이를 수행한다.) 그리고 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만들어 둔다.(이것을 인덱싱이라 하며 검색엔진의 인덱서가 이를 수행한다.)

인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보인데 결국 웹사이트의 HTML 코드이다. 즉, 검색 엔진은 HTML 코드 만으로 그 의미를 인지하여야 하는데 이때 시맨틱 요소(Semantic element)를 해석하게 된다.

HTML으로 작성된 문서는 컴퓨터가 해석할 수 있는 메타데이터와 사람이 사용하는 자연어 문장이 뒤섞여 있다. 아래 코드를 보면 1행과 2행은 브라우저에서 동일한 외형을 갖는다. 이는 h1 태그의 디폴트 스타일이 1행과 같기 때문이다.

그러나 1행의 요소는 의미론적으로 어떤 의미도 가지고 있지 않다. 즉, 의도가 명확하지 않다. 개발자가 의도한 요소의 의미를 명확하게 나타내지 않고 다만 폰트 크기와 볼드체를 지정하는 메타데이터만을 브라우저에게 알리고 있다. 그러나 2행의 요소는 header(제목) 중 가장 상위 레벨이라는 의미를 내포하고 있어서 개발자가 의도한 요소의 의미가 명확히 드러나고 있다.이것은 코드의 가독성을 높이고 유지보수를 쉽게한다.

검색엔진은 대체로 h1 요소 내의 콘텐츠를 웹문서의 중요한 제목으로 인식하고 인덱스에 포함시킬 확률이 높다. 또한 사람도 h1 요소 내의 콘텐츠가 제목임을 인식할 수 있다. 시맨틱 요소로 구성되어 있는 웹페이지는 검색엔진에 보다 의미론적으로 문서 정보를 전달할 수 있고 검색엔진 또한 시맨틱 요소를 이용하여 보다 효과적인 크롤링과 인덱싱이 가능해졌다. 즉, 시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다. 시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다.

시맨틱 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.

Semantic Tags

시멘틱 테그는 "의미가 있는 태그"라는 뜻이다. 즉, HTML tag들 중에서도 나름의 의미가 있는 태그들을 말한다.

시맨틱 요소는 자신의 의미를 브라우저와 개발자 모두에게 명확하게 설명한다.

non-semantic 요소들의 예: div 와 span - 자신의 컨텐츠에 대해 아무것도 설명해주지 않는다.

semantic 요소들의 예: form, table, article - 자신의 컨텐츠를 명확하게 정의한다.

더 쉽게 설명을 하자면 웹 브라우저 HTML 소스 코드만 보고 어느부분이 제목인지 어느 부분이 메인에 속하는지 쉽게 알 수 있습니다. 또한 검색 엔진이 검색을 수행할때 HTML 내에 있는 태그를 분석하는데, 태그들의 의미가 분명하다면 검색 엔진 입장에서 구분하기 쉬워지며 div로만 되어있을시 어느 영역인지 파악하기 어려움이 있지만 (헤더,푸터,섹션등) 시멘틱 태그를 이용하면 유지보수를 할 때 다른 작업자가 코드를 파악하고 접근하기가 유용합니다.

이와 같이 통일되어 있지 않은 경우 다른 작업자가 한눈에 파악하는것에 어려움이 있었습니다. 이러한 부분을 시맨틱 태그를 이용하면 아주 깔끔하게 볼 수가 있습니다.

위 HTML5와 같이 가독성이 있고 훨신 깔끔해진 내용으로 코드를 확인할 수 있습니다.

width / height

%로 width,height 값을 표현할때는 바로 상위 태그에 있는 width, height값의 %로 설정이 된다 width은 가로길이, height은 세로길이를 의미

◆ auto : 기본값, 브라우저가 계산한 너비 ◆ px : 픽셀 ◆ % : 부모 요소에 상대적인 너비 ◆ initial : 기본값으로 초기화 ◆ inherit : 부모 요소로부터 상속 받은 값

margin, padding

margin은 바깥쪽 여백, padding은 안쪽 여백을 의미 두 속성은 방향(top, right, bottom, left)을 지정할 수 있고 width,height 속성과 마찬가지로 px, auto 등 값을 사용한다.

예제

margin:10px -> 상하좌우 모두 10px 여백 margin:20px 10px -> 상하 20px , 좌우 10px 여백 margin:40px 30px 20px 10px -> 위 40px, 오른쪽 20px, 아래 20px, 왼쪽10px 여백 margin:40px 30px 10px -> 위 40px, 좌우 30px, 아래 10px 여백

box-sizing

width 와 height 를 원하는 값으로 지정해도, padding 이나 border 옵션을 주게 되면 가로길이나 세로길이가 그만큼 더해져서 요소가 커진다. 이는 box-sizing 옵션으로 바꿀 수 있다.

content-box : default, width를 지정하여도 padding이나 다른 속성들이 들어오면 요소가 그만큼 커짐

예제

.a{ box-sizing: content-box; width: 100%; border: solid #5B6DCD 10px; padding: 5px;}

border-box : 다른 속성을 주어도 지정해둔 width와 height의 크기를 벗어나지 않음

예제

.a{ box-sizing: border-box; width: 100%; border: solid #5B6DCD 10px; padding: 5px; }

color

CSS 자료형은 색을 나타냅니다. 는 이 색이 배경과 어떻게 합성되어야 하는지 나타내는 알파 채널 투명도 값도 가질 수 있습니다. 글씨와 글씨 장식(밑줄, 윗줄, 취소선 등)을 그릴 때 사용할 색입니다.

◆ inherit : 기본값 , 부모의 색상을 가져옴 ◆ red 또는 blue : 이미 css로 정의된 색상 ◆ #000 또는 #FFFFFF : 16진수의 색상코드 ◆ rgb(255,255,255) : rgb 색상 ◆ rgba(200,100,150,0.5) : 알파(투명도)가 적용된 rgba 색상

font

글자의 폰트를 정의

◆ font-style : 기울기 등의 스타일 지정

◆ nomal : 기본

◆ italic : 기울기

◆ font-weight : 글자 두께 100~900 사이의 숫자를 통해 설정하거나, 지정된 값을 사용한다. lighter (100) normal (400) bold (700) bolder (900)

◆ font-variant : 글꼴 변형 (소문자를 대문자로 바꾸는 등)

◆ font-size : 글자 크기 px 나 em(반응형웹에서 다룬다)등을 사용

◆ line-height : 줄 간격

◆ font-family : 글꼴 통상적으로 구글폰트에서 가져와서 head내부에 link태그로 External방식으로 적용시킴

text-align

CSS text-align 속성은 블록 요소나 표의 칸 상자의 가로 정렬을 설정합니다. 즉 vertical-align과 동일하나 세로가 아닌 가로 방향으로 동작합니다.

◆ left/ right/ center/ end/ jutify

예제 ---- text-align : justify;

background

배경색을 지정

◆ background-color : 배경 색 color의 값과 동일

◆ background-image : 배경 이미지

예제 background-image : url("이미지 경로나 이미지url주소")

◆ background-repeat : 배경 이미지 반복 여부

no-repeat : 반복안함

repeat-x : x축으로 반복

repeat-y : y축으로 반복

repeat : 모든 방향으로 반복

◆ background-position : 배경 이미지 위치 숫자값 (x , y) left top center bottom right

예제 ---- background-position : 25% 75%;

border

테두리를 지정

◆ border-width : 테두리의 두께 px 단위사용

◆ border-style : 테두리의 스타일 solid : 실선 dotted : 점선 dashed : 조금긴 점선

◆ border-color : 테두리의 색상 color 값과 동일함

예제 --- border : 10px solid black ;

border-radius

테두리를 둥글게 만들어주는 속성이며 px와 % 단위를 사용한다. border 속성 없이도 사용 가능하며 4개 모서리의 값을 띄어 쓰면 left -> top -> right -> bottom으로 각자 다른값을 지정한다.

예제---border-radius : 190px 100px 200px 90px;

Array.prototype.reverse()

reverse() 메서드는 배열의 순서를 반전합니다. 첫 번째 요소는 마지막 요소가 되며 마지막 요소는 첫 번째 요소가 됩니다.

ex)

const array1 = ['one', 'two', 'three']; console.log('array1:', array1);

//결과 "array1:" Array "one", "two", "three"

const reversed = array1.reverse(); console.log('reversed:', reversed);

// 결과 "reversed:" Array "three", "two", "one"

console.log('array1:', array1);

// 결과 "array1:" Array "three", "two", "one" //reversed에 있는 array1가 이미 변환했기 때문에 "three", "two", "one"가 됨

배열 요소 반전하기

다음 예시는 3개의 요소가 든 myArray 배열을 만든 후, 반전시킵니다.

const a = [1, 2, 3]; console.log(a); //결과 1, 2, 3

a.reverse(); console.log(a); //결과 3, 2, 1

String.split()

split() 메서드는 String 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눕니다. 배열의 경우 첫번째가 1이 아닌 0부터 시작한다.(0,1,2,3,4,5)

ex)

const str = 'The quick brown fox jumps over the lazy dog.';

const words = str.split(' '); console.log(words[3]);

// 결과

"fox" // 3번째 문자열 output

const chars = str.split(''); console.log(chars[8]);

// 결과

"k" // 8번째 텍스트 output(띄어쓰기도 문자열로 인식)

const strCopy = str.split(); console.log(strCopy);

// 결과

Array ["The quick brown fox jumps over the lazy dog."]// 배열 전체를 복사후 output

예제

빈 문자열이 주어졌을 경우 split()은 빈 배열이 아니라 빈 문자열을 포함한 배열을 반환합니다. 문자열과 separator가 모두 빈 문자열일 때는 빈 배열을 반환합니다.

const myString = ''; const splits = myString.split();

console.log(splits);

//결과

↪ [""]

문자열에서 공백 제거하기

다음 예제에서 split()은 세미콜론 앞뒤에 각각 0개 이상의 공백이 있는 부분 문자열을 찾고, 있을 경우 문자열에서 세미콜론과 공백을 제거합니다. split()의 결과로 반환된 배열은 nameList에 저장됩니다.

var names = 'Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand ';

console.log(names);

var re = /\s(?:;|$)\s/; var nameList = names.split(re);

console.log(nameList);

//결과

"Harry Trump", "Fred Barney", "Helen Rigby", "Bill Abel", "Chris Hand", ""

끊는 횟수 제한하기

다음 예제에서 split()은 문자열을 공백으로 끊고 처음 3개의 문자열을 반환합니다.

var myString = 'Hello World. How are you doing?'; var splits = myString.split(' ', 3);

console.log(splits);

//결과

"Hello", "World.", "How"

배열을 구분자로 사용하기

var myString = 'this|is|a|Test'; var splits = myString.split(['|']); // "ㅣ"를 빼고 문자를 반환한다.

console.log(splits);

//결과

"this", "is", "a", "Test"

var myString = 'ca,bc,a,bca,bca,bc';

var splits = myString.split(['a','b']);//a,b를 빼고 문자를 반환한다

console.log(splits);

//결과"c", "c,", "c", "c", "c"

Array.join()

join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다. " "안에 있는 문자 /숫자/기호 어떤것을 넣어도 문자열로 인식

ex)

const elements = ['black','red','white'];

console.log(elements.join()) = elements 배열에 있는 모든 문자열을 불러옴 //output : "black,red,white"

console.log(elements.join('')) = 문자열이 다 합쳐짐 //output : "blackredwhite"

console.log(elements.join('-')) = '-'문자열이 되어 ,이 "-"로 변경됨 //output : "black-red-white"

응용 예제

var a = ['바다','하늘','땅']

var mavar1 = a.join() ///output = '바다,하늘,땅' var mavar2 = a.join(", ")///output = '바다, 하늘, 땅' var mavar3 = a.join("+") ///output = '바다+하늘+땅' var mavar4 = a.join("") ///output = '바다하늘땅'

설명

var라는 함수에 변수 a를 지정한 후 배열변수를 지정해준다. var라는 함수에 mavar1 이라는 변수를 지정해준 후 var a 에 있는 배열 "바다","하늘","땅"을 변수a로 불러온 뒤 join이라는 함수를 통하여 배열 문자열을 합쳐준다.

1.

2.

3.

이부분은 상단 메뉴바에 어떤 페이지에 접속했는지 알려줄수있는 부분이다.

width

CSS width 속성은 요소의 너비를 설정합니다. 기본값은 콘텐츠 영역의 너비이지만, box-sizing이 border-box라면 테두리 영역의 너비를 설정합니다.

예를 들어 원하는 텍스트 또는 이미지에ss = "abc" 지정 후 CSS에서 .abc { width : 100;} 이와 같이 지정해줄 경우 100만큼의 너비가 지정된다

ol

ol 요소는 정렬된 목록을 나타냅니다. 보통 숫자 목록으로 표현합니다. 왼쪽 아바타 및 이름 전화번호를 넣어 정렬해 주었습니다.

Avatar

아바타로 이미지를 생성합니다.

제 얼굴을 아바타 이미지로 넣어주었습니다.

예를 들어 이미지 지정후 img alt="Avatar" class="avatar" class 지정후 CSS에서 설정합니다.

.avatar { vertical-align: middle;(이미지 위치 지정 : top ,bottom 가능) width: 100px;(이미지 넓이 지정) height: 100px;(이미지 높이 지정) border-radius: 50%;} (이미지 모깍기)

grid

CSS Grid(그리드)는 2차원(행과 열)의 레이아웃을 말한다. Grid는 컨테이너에 display: grid; 를 설정하는 것으로 시작합니다.

CSS 속성 은 행 이름을 정의하고 그리드 열의grid-template-columns 크기 조정 기능을 추적합니다

현 페이지에 사용한 이유는 그리드 안에 있는 글자의 열을 조정 하였습니다.

grid-template-rows는 행(row)의 배치 grid-template-columns는 열(column)의 배치

Background

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

현재 페이지는 "bgi" 라는 이미지 파일을 가져와 밋밋한 바탕화면에 그라데이션 이미지를 넣어주었습니다.

클래스 지정 후 CSS에서 설정합니다. body { height: 100vh; background-image: url('bgi.jpg'); background-repeat : no-repeat; background-size : cover;(배경 이미지의 크기를 설정합니다. 그대로 두거나, 늘리고 줄이거나, 공간에 맞출 수 있습니다. ex = auto,contain,30% 또는 30px,40px 로 설정 가능) }

border

CSS border 단축 속성은 요소의 테두리를 설정합니다. border-width, border-style, border-color의 값을 설정합니다.

h1 tag text 를 작성하고 텍스트 밑으로 border-bottom 라인을 지정해주었으며 ol tag 에 border-right 라인을 지정해 일부분 박스모양 라인을 만들어주었습니다.

border-bottom: 5px solid white;(px = 선의 두께, solid=테두리 스타일,색상) margin: 0;(요소의 네 방향 바깥 여백 영역을 설정) padding: 40px;(요소의 네 방향 안쪽 여백 영역을 설정) }

br

텍스트 안에 줄바꿈 주 내용을 다른 태그 추가 없이 줄바꿈만 지정해주었습니다.

최종완성 페이지

페이지 링크 : https://ryugiseon.github.io/First/index.HTML