안녕하세요, 여행벌입니다.

오늘은 HTML 문서의 기본 구조에 대해서 알아보겠습니다.

HTML 기본 구조

HTML 문서는 일반 문서와 달리 정해진 형식에 맞추어 내용을 입력해야 합니다. 웹 문서(HTML 문서)는 아무리 길더라도 <!doctype>, <html>, <head>, <body> 네 가지 태그를 이용해 문서의 시작과 끝을 표시합니다.

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

위와 같이 웹 문서는 기본적인 구조를 가집니다. 하나하나 어떤 의미인지 살펴보도록 하겠습니다.

<!doctype>

 문서 유형을 지정하는 선언문으로 <html> 태그보다 먼저 사용해야 합니다. 이때 지정하는 문서 유형이란 웹 브라우저에게 '이제부터 처리할 문서는 HTML 문서이고 어떤 유형을 사용했으니 그 버전에 맞는 방법으로 해석하라.' 라고 알려주는 것입니다. 과거 HTML4에서는 문서 유형이 여러 가지여서 문서 유형을 지정하는 소스가 길었습니다. 하지만 HTML5부터는 단 한줄로 문서 유형을 선언하면 됩니다.

<html>

 문서 유형을 선언한 후 실제 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그가 <html> 태그입니다. <html> 태그는 웹 문서가 시작된다는 뜻이고, </html> 태그는 웹 문서가 끝났다는 뜻입니다. <html> 태그에서는 lang이라는 속성을 사용해 문서에서 사용할 언어를 지정할 수 있습니다. 한국형 웹 콘텐츠 접근성 지침에 의해 웹 페이지의 기본 언어 선언을 규정해야합니다. 그래야 화면 낭독기에서 웹 문서를 소리 내어 읽어줄 때 해당 언어에 맞추어 발음이나 억양, 목소리 등을 다르게 해서 들려줄 수 있습니다. 또한, 검색 사이트에서 '한국어로 된 문서' 로 범위를 제한해 검색할 경우, <html lang="ko"> 라고 된 문서를 우선 검색합니다. 

<head>

  웹 브라우저 화면에는 보이지 않지만 웹 브라우저가 알아야 할 정보들은 모두 <head> 부분에 입력합니다. 문서에서 사용할 외부 파일들도 이곳에서 링크합니다.

<title>

 <head> 태그 안에서 가장 중요한 태그는 <title> 태그입니다. <title> 태그에서 지정하는 내용은 거의 모든 웹 브라우저의 제목 표시줄에 표시되고 해당 페이지를 방문하는 방문자나 검색 엔진은 제목 표시줄의 제목을 보고 페이지 전체의 내용을 추측할 수 있습니다.

<meta>

 <meat> 태그는 화면에 글자를 표시하는 문자 인코딩 방법을 비롯해 웹 문서 키워드 등을 지정할 수 있습니다. <meta> 태그에서 가장 중요한 부분은 문자 인코딩을 지정하는 것입니다. 웹 서버는 영어를 기본으로 하기 때문에 웹 문서에서 한글을 표시하려면 '문자 인코딩'을 지정해줘야 합니다. HTML5에서는 한글과 영문을 비롯해 모든 언어를 표시할 수 있는 'utf-8' 방식을 사용합니다. 또한 <meta> 태그를 이용해 문서에 대한 간단한 설명을 지정할 수 있는데 이렇게 지정한 짧은 설명은 검색 결과에 사이트 설명으로 표시됩니다.

<meta name="description" content="여기에 사이트에 대한 짧은 설명을 입력합니다">

<body>

 <body> 태그에는 실제 브라우저에 표시될 내용을 입력합니다. 

 

'Dev > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS] 리스트를 만들어 주는 <ul> <ol> <li> <dl> <dt> <dd> 태그  (0) 2020.01.17
[HTML+CSS] 텍스트 관련 <span> <abbr> <cite> <small> <sub> <sup> <s> <u> 태그  (0) 2020.01.17
[HTML+CSS] 텍스트 인라인 레벨 <strong> <b> <em> <i> <q> <mark> 태그  (0) 2020.01.17
[HTML+CSS] 텍스트 블록 레벨 <h> <p> <br> <hr> <blockquote> <pre> 태그  (0) 2020.01.17
[HTML+CSS] HTML이란.  (1) 2020.01.17

안녕하세요, 여행벌입니다.

앞으로 HTML5 + CSS3 공부했던 내용을 차근차근 정리해보겠습니다.

HTML 이란 무엇일까

컴퓨터에서 사용하는 모든 파일에는 각각 고유의 형식이 있습니다. 예를 들어 한글 프로그램으로 작성한 문서는 .hwp 확장자를 가집니다. 이처럼 웹 사이트에서 사용할 문서는 웹에 맞는 형식인 .html 확장자를 붙입니다. 하지만 일반 문서와 웹 문서는 큰 차이가 존재합니다. 일반 문서는 문서를 작성하는 프로그램과 그 내용을 보는 프로그램이 서로 같지만 웹 문서는 문서를 작성하는 프로그램과 그 내용을 보는 프로그램이 서로 다릅니다. 이때, 웹 문서를 작성하는 프로그램을 '웹 편집기(web editor)'라고 하고 웹 문서를 보는 프로그램을 '웹 브라우저(web browser)' 라고 합니다.

 

 HTML은 하이퍼텍스트 마크업 랭귀지(HyperText Markup Language)의 약자로 말 그대로 하이퍼텍스트를 마크업하는 언어입니다. '하이퍼텍스트'란 웹 사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능을 말하고 '마크업' 이란 태그(tag)를 사용해 문서에서 어느 부분이 제목이고 본문인지 표시하는 것을 말합니다. 즉, 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어가 HTML 입니다.

웹 표준이란

 쉽게 얘기하면 웹 표준은 웹 사이트를 만들 때 지켜야 하는 약속들을 정리해놓은 것입니다. 웹 표준을 지켜 사이트를 제작하면 사용자는 장소나 브라우저와 상관없이 쉽게 웹 사이트를 볼 수 있고 웹 개발자와 웹 디자이너들은 웹 표준을 지켜 웹 사이트를 개발하면 되므로 시간 낭비를 막을 수 있습니다. 웹 표준이 없다면 어떤 사이트는 크롬에서만 동작하고 어떤 사이트는 사파리에서만 동작하는 등 많은 문제가 발생합니다. 이를 막기 위해 웹 표준이 등장했고 HTML5와 CSS3를 이용하면 최신 웹 표준에 맞는 사이트를 제작할 수 있습니다.

 

 

'Dev > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS] 리스트를 만들어 주는 <ul> <ol> <li> <dl> <dt> <dd> 태그  (0) 2020.01.17
[HTML+CSS] 텍스트 관련 <span> <abbr> <cite> <small> <sub> <sup> <s> <u> 태그  (0) 2020.01.17
[HTML+CSS] 텍스트 인라인 레벨 <strong> <b> <em> <i> <q> <mark> 태그  (0) 2020.01.17
[HTML+CSS] 텍스트 블록 레벨 <h> <p> <br> <hr> <blockquote> <pre> 태그  (0) 2020.01.17
[HTML+CSS] HTML 기본 구조  (1) 2020.01.17

안녕하세요, 여행벌입니다.

오늘은 반복문을 제어하는 continue문에 대해서 다뤄보겠습니다.

continue 문

 continue 문은 반복문에서만 사용할 수 있습니다. 반복문에 사용할 경우 continue문 다음에 오는 코드는 무시하고 바로 조건식으로 이동해 조건 검사를 합니다. 즉, 반복문 안에 있는 continue 문은 "다음에 오는 코드는 무시하고 바로 조건식에서 조건 검사를 실행해!" 라고 말하는 것과 같습니다.

 기본 형은 다음과 같습니다.

for(초기값; 조건식; 증감식){
    continue;
    자바스크립트코드;
}
///////////////////////////
초기값;
while(조건식){
    증감식;
    continue;
    자바스크립트코드;
}

 예제를 통해 익혀보겠습니다.

 반복문을 이용해 i 를 0 부터 9까지 증가시키면서 홀수면 출력하는 코드를 구현해보겠습니다.

for(let i = 0; i < 10; i++){
    if(i % 2 == 0) //짝수면 SKIP
        continue;
    else // 홀수면 출력
        console.log(`${i}`);
}

 i % 2 == 0 이라는 뜻은 i 가 2로 나눴을 때 나머지가 0이라는 뜻으로 짝수를 의미합니다. i 가 짝수라면 continue 가 실행되므로 바로 증감식과 조건식이 수행됩니다.

 같은 코드를 while 문으로 구현해보겠습니다.

let i = 0;
while(i < 10){
    if(i % 2 == 0){
        continue;
    }else{
        console.log(`${i}`);
    }
    i++;        
}

 이렇게 코드를 구현하면 과연 잘 작동할까요?? 차근차근 코드를 따라가 보겠습니다. i = 0 이므로 조건식을 만족해 while 문 안의 코드를 수행하게 됩니다. 이때, i = 0이므로 if 문이 조건식이 참이 되고 continue 문이 수행됩니다. continue 문을 만나면 while 문은 다시 조건식부터 수행하게 되고, 증감식 i++ 은 수행이 되지 않으므로 무한 루프에 빠지게 됩니다.

let i = 0;
while(i < 10){
    if(i % 2 == 0){
        i++;        
        continue;
    }else{
        console.log(`${i}`);
        i++;        
    }
}

 이렇게 코드를 수정한다면 continue 문을 만나도 증감식은 진행되므로 우리가 원하는 결과를 얻을 수 있습니다.

 for문과 다르게 while 문은 증감식 코드를 continue 문 뒤에 작성하면 continue 문에 의해 무한 루프에 빠지게 되므로 조심해야 됩니다.

다음 포스팅부터는 객체에 대해서 다뤄보겠습니다.

'Dev > Javascript' 카테고리의 다른 글

[자바스크립트] 기초문법 #7 break문 - travelbeeee  (0) 2020.01.16
[자바스크립트] 기초문법 #6 반복문(for) - travelbeeee  (0) 2020.01.16
[자바스크립트] 기초문법 #5 반복문(while) - travelbeeee  (0) 2020.01.16
[자바스크립트] 기초문법 #4 선택문(switch) - travelbeeee  (0) 2020.01.16
[자바스크립트] 기초문법 #3 조건문(if) - travelbeeee  (0) 2020.01.16

안녕하세요, 여행벌입니다.

오늘은 반복문을 제어하는 break문에 대해서 다뤄보겠습니다.

break 문

 반복문인 while 문 또는 for 문에서 break 문을 실행하면 조건식과 상관없이 강제로 반복문을 종료합니다.   즉, break 문은 반복문을 강제로 종료할 때 사용합니다.

 기본 형태는 다음과 같습니다.

for(초기값; 조건식; 증감식){
    break;
    자바스크립트 코드;
}
/////////////////////////////
초기값;
while(조건식){
    break;
    자바스크립트 코드;
    증감식;
}

 예시를 통해 익혀보겠습니다.

for(let i = 0; i < 5; i++){
    console.log(`${i}`);
}

 위의 for 문을 실행하면 0 부터 4 까지 출력될 것입니다.

for(let i = 0; i < 5; i++){
    if(i === 3)
        break;
    console.log(`${i}`);
}

 break 문을 다음과 같이 추가하면 결과는 어떻게 될까요?

 i 가 3이 되는 순간 if 문에 의해 break 문이 실행되고, for 문은 깨지게 됩니다.

 결과는 다음과 같습니다. 0 1 2 만 출력되고 뒤의 3 4 는 작동하지 않은 것을 확인할 수 있습니다.

 while 문에서도 마찬가지입니다.

let i = 0;
while(i < 5){
    if(i === 3)
        break;
    console.log(`${i}`);
}

 같은 결과가 나오는 것을 확인할 수 있습니다.

 

 그렇다면, 반복문이 중첩되어있으면 break 문은 어떻게 작동할까요??

for(let i = 0; i < 5; i++){
    for(let j = 0; j < 5; j++){
        if(j === 3)
            break;
        console.log(`${i} : ${j}`);
    }
}

 두 번째 for 문 안에 break 문을 추가했습니다. 결과는 break 문은 가장 근접한 반복문 1개만! 종료시킵니다. 즉, 바깥쪽 for문은 계속 작동하게 됩니다.

 결과는 다음과 같습니다. break 문은 가장 가까운 반복문만 종료시키므로 바깥쪽 for문은 모두 작동돼서 i 는 0 부터 4까지 모두 출력되는 것을 확인할 수 있습니다. 하지만 j 는 break 문에 의해 반복문이 종료되므로 0 1 2  만 출력되는 것을 확인할 수 있습니다.

 break 문은 예외 처리를 하는데 자주 사용되므로 꼭 익혀두시기 바랍니다.

이상으로 break문 포스팅을 마치도록 하겠습니다.

 

'Dev > Javascript' 카테고리의 다른 글

[자바스크립트] 기초문법 #8 continue문 - travelbeeee  (0) 2020.01.16
[자바스크립트] 기초문법 #6 반복문(for) - travelbeeee  (0) 2020.01.16
[자바스크립트] 기초문법 #5 반복문(while) - travelbeeee  (0) 2020.01.16
[자바스크립트] 기초문법 #4 선택문(switch) - travelbeeee  (0) 2020.01.16
[자바스크립트] 기초문법 #3 조건문(if) - travelbeeee  (0) 2020.01.16

+ Recent posts

티스토리툴바