Semantic Tag, 반복문 정리 및 복습

너무떨리는 마음에 ...! 

 

 

웹개발의 기본적인 기본인 HTML과  CSS 문제에 명확하게 정리해서 답을 못한것 같아서

이렇게 정리하는 시간을 가져보습니다.

 

 

 

 Semantic Tag 란?

의미를 부여한 태그라는 뜻으로, 쉽게 말하면 <div/> 태그에 의미를 부여한 <header/> 혹은 <footer/> 같은 태그들을 말합니다. 이렇게 이름만 봐도 상단과 하단이라는 것을 알 수 있으며, 시맨틱 태그의 등장으로 태그만 보고서도 문서를 더 쉽게 이해할 수 있게 되었습니다. 

 

 

 

<div> 태그를 활용하여 웹 문서를 만들 수 있지만, 시맨틱 태그를 사용해야 하는 이유 ?

 

1. HTML 문서의 가독성과 유지보수가 쉬워지기 때문입니다. 

 

2. 웹 브라우저가 HTML만 보고도 상단(header), 본문(main), 하단(footer), 사이드(aside) 어느 영역인지 쉽게 알 수 있고, 이는 웹 접근성 시각에서 볼 때도 중요하게 쓰입니다. 

ex) 시각장애인들이 사이트를 사용할때 사용되는 화면의 텍스트를 읽어주는 스크린 리더기 활용

 

3.검색엔진이 검색을 수행할 때 HTML 내의 태그를 분석할 수 있습니다. 

ex) <article> : 재배포 할 수 있는 콘텐츠로 인식합니다. <-> <section> : 재배포를 금지하는 콘텐츠로 인식합니다.

 

 

 

시맨틱 태그의 종류

태그	설명
<header>	사이트의 머리부분에 사용
<main>	메인 콘텐츠를 나타내는데 사용
<section>	제목별로 나눌 수 있는 문서의 콘텐츠 영역을 구성하는 요소
<article>	개별 콘텐츠를 나타내는 요소
<aside>	좌우측의 사이드 영역
<footer>	사이트의 바닥부분, 주로 연락처나 제작자 정보등을 기술하는 부분
<hgroup>	제목과 부제목을 묶어서 나타내는 요소
<nav>	웹 페이지 메뉴를 만들 때 사용

참조 : https://coding-factory.tistory.com/883  

 

 

 

 

---

자바스크립트가 지원하는 반복문의 종류와 설명

 

map도 배열전체를 순회하면서 반복문처럼 이용해도 되는줄 알았어서 오늘 반복문 예시로 들었는데, 잘못 설명드린것이라고 생각하여 다시 정리해 보았습니다...! ㅠ

 

 

1. for문

: for 반복문은 어떤 특정한 조건이  거짓으로 판별될 때 까지 반복합니다. 

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

while과는 달리 자체적으로 초기식, 증감식을 모두 포함하고 있는 반복문입니다. 

따라서 while 문 보다는 좀 더 간결하게 반복문을 포현할 수 있습니다.

또한, 쉼표 연산자(,) 를 사용하면 여러개의 초기식이나 증감식을 동시에 사용할 수도 있습니다. 

 

실행순서

1.초기식

2.조건식
-> 조건식이 truthy이면 명령문 실행
-> 조건식이 falsy이면 반복문 실행종료

3. 조건식이 truthy이고 명령문이 실행되었다면 증감식

4. 다시 조건식
-> 조건식이 truthy이면 명령문 실행
-> 조건식이 falsy이면 반복문 실행종료

5. ... 무한반복

 

 

 

2. for ...of 문

: 반복 가능한 객체를 순회하는 문법입니다. 

const a = [1, 2, 3]
a.forEach((item) => console.log(item))
// 1 2 3 출력

a.forEach((item, index) => console.log(item, index))
// 1, 0
// 2, 1
// 3, 2

 

 

 

 

 

반복 메소드

 

1. forEach()

: forEach 안에는 callback 함수를 지정할 수 있습니다. 

이 콜백함수에는 총 3가지의 인자 (해당하는값, 인덱스, 배열) 를 전달 할 수 있습니다.  

 

 

2. map()

: 기존 배열은 건드리지 않고, 순회 후 필요한 것들을 return 하여 새로운 배열을 만듭니다.

forEach와 동일하게 callback 함수를 적용하고 3개의 인자를 동일하게 전달합니다. 

const a = [1, 2, 3]
const b = a.map((item) => item*item)
console.log(b) // 1, 4, 9

 

 

3. filter()

: 배열을 순회하며 조건에 만족하는 원소들로 이루어진 새로운 배열을 만듭니다.

forEach와 동일하게 callback함수를 적용하고 3개의 인자를 동일하게 전달합니다.

const a = [1,2,3,4,5,6,7]
const b = a.filter((item) => item < 5)
console.log(b) // 1 2 3 4 출력

 

 

참조 : https://velog.io/@blacksooooo 

 

 

 

---

 

*별도

반복문 종료방법(break, continue, return)의 차이점

 

- break : 반복문을 실행하다 break문을 만나면 반목문은 그 즉시 실행은 멈추고 반복문은 종료됩니다.

	
function addNum() {
    let sum = 0;
 
    for(let i=1; i<51; i++) {
        if(sum > 100) {
            break;
        }
        sum += i;
    }
 
    console.log(sum);    // 1275 -> 105
}
addNum();

위 함수는 1부터 50까지의 수를 모두 더하는 함수입니다. 

1부터 50까지 더하면 1275가 출력되어야 하지만,

sum이 100보다 커지는 순간 break문을 만나 반복을 종료하게 되었습니다. 

 

 

 

- continue : 특정 조건이 주어졌을 때 그 조건이 만족하는 값을 만나면 명령을 건너뛰고 다음으로 넘어갈 때 씁니다. 

function addNum() {
    let sum = 0;
 
    for(let i=1; i<51; i++) {
        if(i % 2 === 0) {
            continue;
        }
        sum += i;
    }
 
    console.log(sum);    // 625
}
addNum();

1부터 50까지의 숫자 중 홀수만 더하는 코드입니다.

i를 2로 나눴을 때 나머지가 0이라면 그 숫자는 짝수이므로

continue문을 사용하여 명령을 실행시키지 않고 건너뛰도록 만들어준 것 입니다. 

만약,  (i % 2 === 1)이라는 조건을 주었다면 짝수만 더하고 출력되었을 것 입니다. 

 

 

 

- return : 반복문을 종료시키기도 하지만 함수 자체를 종료시킵니다. 

function addNum() {
    let sum = 0;
 
    for(let i=1; i<51; i++) {
        if(sum > 100) {
            return;
        }
        sum += i
    }
 
    console.log(sum)
}
addNum()

 

sum이 100보다 커지는 순간,  반복문뿐만 아니라 addNum이란 함수 자체를 종료시킵니다. 

그러므로 console창에는 아무 값도 출력되지 않게됩니다. 

 

 

참조 : https://im-developer.tistory.com/69