CSS(Cascading Style Sheets)

CSS는  사용자에게 웹브라우저의 문서 외에 HTML 요소의 형태를 제어하고 스타일 등에 대한 디자인을 이용할 수 있는 마크 업을 표시하는 언어입니다.

이는 글꼴, 색상, 크기 및 간격 또는 레이아웃을 만드는데 사용할 수 있으며 CSS를 잘 사용하게 되면 지루하지 않으며 다른 웹페이지들과 차별화 된 웹페이지를 제공할 수 있습니다.

HTML에 대한 공부를 시작하기 앞서 'HTML'에 대한 정의와 기본에 대해서 짚고 넘어가보자 합니다.

HTML

HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소이며 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. 웹페이지를 표현할 때, HTML 이외에 CSS 언어와 Javascirpt 언어도 사용되며 CSS 기술은 웹 페이지의 모양/표현등을 구현하며 Javascript 기술은 또는 기능/동작을 구현하기 위해 사용됩니다.

 이러한 HTML은 콘텐츠의 구조를 정의하는 마크업 언어 입니다. HTML은 콘텐츠의 서로 다른 부분들을 씌우거나 감싸서 다른 형식으로 보이게하거나 특정한 방식으로 동작하도록 하는 일련의 요소로 이루어져 있습니다. 태그(< >)로 담아서 단어나 이미지를 다른 어딘가로 전송하거나 텍스트를 표시하고 글씨체를 크게 또는 작게 만드는 등의 일을 할 수 있습니다.

'Hypertext(하이퍼텍스트)'란 웹 페이지를 다른 페이지로 연결하는 링크를 말합니다. 링크는 웹의 근본적인 속성으로, 인터넷에 자료를 올리고 다른 사람이 만든 페이지로 연결합니다.

HTML은 웹 브라우저에 표시되는 글과 이미지 등의 다양한 콘텐츠를 표시하기 위해 '마크업'을 사용합니다. HTML 마크업은 다양한 '요소'를 사용하며 요소는 다양한 종류가 존재합니다.

출처 : https://developer.mozilla.org/en-US/docs/Web/HTML

반복문 안에 반복문이 있는 경우를 ‘중첩 반복문’ 이라 하며

예를 들면,

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

    for (let j = 0; j < 10; j++) {

    console.log(i, j);

}

}

0 0

0 1

0 2

~

9 9

와 같이 나타난다.

별 찍기

ㅡ

let i = 0;

for(let i = 0; i < 5; i++) {

    console.log(' '.repeat(5 - i - 1)+'+'.repeat(i+i+1));

}

        +

      +++

    +++++

  +++++++

+++++++++

ㅡ

let i = 0;

for(let i = 0; i < 5; i++) {

console.log(' '.repeat(5 - i - 1)+'+'.repeat(i+1));

}

    +

   ++

  +++

 ++++

+++++

반복문(While, for)

모든 프로그래밍 언어는 반복하는 동작을 처리하는 반복문을 가지고 있으며, 조건문과 더불어 가장 많이 쓰이는 언어 중 하나이다.

while문

while문의 기본 형식으로는

while (조건식);

동작문;

이 있으며 이는 조건식과 마찬가지로 조건문이 참일 경우에 설정한 동작문을 무한히 반복한다.

그러므로, 동작문의 무한한 반복을 피하기 위해서는 조건식이 항상 참인 값을 피하기 위해 변수값을 입력해야 한다.

예를 들어,

let i = 1;

while(i <= 100) {

console.log('hello while!'); i++;

}

(100)hello while! 100

라는 반환값을 나타내기 되는데, 이는 ‘hello While!’ 문자열을 100번 출력한 것이다.

여기서, ‘i++;’ 명령어 대신에 ‘ i = i + 1’과 ‘ i += 1’명령어를 입력해도 결과물은 똑같다.

위의 명령어를 사용할 때 마다 i 값은 1씩 커지므로 i 값이 100에 도달할 경우,

조건인 i 가 100에 도달할 때 동작문 더 이상출력되지 않는다.

for문

for문의 기본 형식은

for (시작; 조건식; 종료식)

동작문;

의 형태로 이루어지며 for 문의 소괄호에는 세 가지 요소인 시작(식과 변수 선언), 조건식 그리고 종료식이 들어간다. 조건식과 동작문은 while문과 동일하다.

예를 들어,

for (let i = 1; i < 100; i++) {

console.log('Hello, for!');

}

99 Hello, for! 라는 반환값이 나타난다.

while 문은 시작, 조건문, 반복문이 따로 위치해있으나 for 문은 시작, 조건문, 반복문이 같이 위치한다.

for-of 반복문

for-of문은 배열을 위해 사용할 수 있으며

예를 들면

const users = ['A', 'B', 'C']
for (const user of users) {
	console.log(user);
	}

를 입력하였을 때

A
B
C

의 결과값을 얻을 수 있으며, 이는 반복문에서 모든 요소에 대해 한 번씩 실행하고 배열을 위해 주로 사용된다.

for-in 반복문

for-in 반복문은 객체를 위해 사용할 수 있으며

예를 들면

const loggedInUser = {
  Name: "kanghyun",
  age: 28,
  isAdmin: true,
};

for (const propertyName in loggedInUser) {
  console.log(propertyName);
  console.log(loggedInUser[propertyName]);
}

와 같이 사용할 수 있으며

Name
kanghyun
age
28
isAdmin
true

와 같은 결과값을 나타낸다.

 for-in문을 사용하여 'Name, kanghyun, age'와 같은 객체를 나타내며, 위의 'loggedInUser[propertyName]'에 의해 상수에 동적으로 접근하여 객체의 값을 나타낼 수 있다.

break 문과 continue 문으로 반복 멈추기

break문

break문으로 특정 조건에서 실행 되는 것을 멈출 수 있는데

예를 들면,

let i = 0;

while (true) {

    if (i === 5) break; i++;

}

console.log(i); 5

의 형태로 값이 나타날 수 있는데, 여기서 break 문을 사용하여 i가 5가 될 때 반복문은 멈추게 된다.

continue문

continue 문은 특정 상황에서 멈추고 그 상황을 건너 뛰어 다시 입력할 수 있는데

예를 들면,

let i = 0;

while (i < 10) {

    i++;

    if ( i % 2 === 0 ) {

    continue;

}

    console.log(i);

}

1

3

5

7

9

의 형태로 값이 나오게 된다.

여기서, ‘i % 2 === 0 ‘의 조건문은 ‘상수를 2로 나누었을 때, 나머지가 0’이라는 의미를 가지며

continue 문법을 사용하여 반복문을 멈춘 후, 그 경우를 건너뛰고 다시 반복한다.

조건문(conditional statement)

조건문은 주어진 조건에 따라 코드를 실행하거나, 실행하지 않으며 조건문의 기본 형식은

if (조건식)

동작문;

이며 조건식에는 조건이 들어가야 하고, 동작문에는 동작이 들어가야 한다.

예를 들어,

if (true){

    console.log('Good Evening!')

}

라는 명령어를 입력하면

Good Evening!

이라고 나타나며 undefined

라는 반환값이 나타난다.

하지만,

if (false){

    console.log('Goood Evening!');

}

라는 명령어를 입력하면 나타나는 글은 없으며, undefined

라는 반환값만 나타난다.

여기서 true라는 값을 일일이 넣어줄 필요는 없으며 true로 형 변환되는 값(참인 값)이나 그것을 담고있는 변수로 대체할 수 있다.

예를 들어,

let condition = true

if(condition)

    { console.log('Hello If!');

}

Hello If!

와 같이 조건이 참이라면 코드는 작동하게 된다.

else if문

else if는 조건과 동작문에 여러가지를 입력할 수 있는 방법인데, 이는

if(조건식) {

(동작문);

}

else if(조건식) {

(동작문); }

else {

(동작문);

}

와 같은 형식으로 사용할 수 있다. 이를 통해 여러 조건에 따라 다른 동작을 수행할 수 있으며, 마지막 else 문은 모든 조건이 거짓일 때 실행된다.

Switch문

조건문은 if문과 switch문이 있으며 조건을 충족할 때 실행한다는 공통점이 있지만, 차이점 또한 있다.

이는

switch (조건식) {

case (비교조건식):

동작문;

}

의 형태이며 두개의 조건식이 필요한 형태로 나타난다. switch 옆의 조건식이 case 옆의 비교조건식과 일치(===)한다면, 해당 동작문이 실행된다. 보통 조건식에 변수를 넣고 비교조건식에 변수와 비교할 값을 넣는다.

예를 들어,

let value = 'a';

switch (value) {

    case ('a') : console.log('A');

}

A

의 형태로 나타난다.

조건부 연산자(conditional expressions)

ㅡ

if문과 switch문 외에도 분기 처리에 사용하는 식이 있는데, 이를 조건부 연산자 또는 삼항 연산자로 표현한다.

조건부 연산자의 기본 형식은

조건식 ? 참인 형식 : 거짓인 형식

의 형태로 간단히 나타낼 수 있으며, 이는 문이 아니라 식이기 때문에 결과값이 나타나게 된다.

예를 들어,

1 > 2 ? '참' : '거짓' '거짓'

의 형태로 나타날 수 있다. 이처럼 연산자는 코드를 줄이는 데에 유용하나, 코드가 너무 길다면 오히려 복잡해 보일 수 있다.