코딩눕

[HTML] 초보도 따라하는 HTML - 6 (<ol> & <ul> / <table>)

코딩눕 — Sat, 20 Apr 2024 16:21:56 +0900

목록과 표

우리가 일반적으로 문서를 작성하다 보면, 어떤 주제에 대한 세부 내용들을 표시하기 위해 목록을 사용하거나, 특정 데이터들을 가독성 있게 분류하기 위해 표(table)를 사용합니다.

HTML 문서 역시 특정한 조건을 가진 항목들을 분류하기 위해 사용되는 목록을 나타낼 수 있는 <ol>과 <ul> 태그, 표를 나타낼 수 있는 <table> 태그를 제공합니다.

<ol> & <ul>

<ol>과 <ul> 태그는 각각 순서가 있는 목록과 순서가 없는 목록을 나타내는 데에 사용됩니다. 두 태그 모두 열고 닫는 태그가 있으며, 각 세부 목록들을 적기 위해 <ol>, <ul> 태그 안에 <li> 태그를 사용합니다.

아래에서 각 태그에 대해 좀 더 자세히 알아보겠습니다.

<ol>

See the Pen Untitled by MK P (@MK-P-the-animator) on CodePen.

<ol> 태그를 사용하면 순서가 있는 목록을 만들 수 있습니다. "type" 속성을 사용해 목록의 순서를 표현하는 방식을 변경할 수 있습니다. 만약 type 속성을 설정하지 않았다면 기본값인 "1"(숫자)로 설정됩니다.

type="1": 숫자(기본값)
type="a": 영문 소문자
type="A": 영문 대문자
type="i": 로마 숫자 소문자
type="I": 로마 숫자 대문자

<ul>

See the Pen Untitled by MK P (@MK-P-the-animator) on CodePen.

<ul> 태그를 사용하면 순서가 없는 리스트를 만들 수 있습니다. <ol> 태그에서 사용하던 type 속성은 적용되지 않는 것을 확인할 수 있습니다.

목록 표시 기호를 바꿔주는 list-style

See the Pen Untitled by MK P (@MK-P-the-animator) on CodePen.

만약 <ol>과 <ul> 태그의 목록 표시 기호를 없애거나 변경하고 싶다면 list-style을 사용할 수 있습니다. <ol> 태그의 경우 type 이라는 태그의 속성값을 통해 변경할 수 있지만, list-style을 사용해 보다 다양한 옵션을 선택할 수 있습니다.

그 밖에 목록 표시 기호와 관련된 css들은 추후 자세히 다뤄보도록 하겠습니다.

<table>

See the Pen Untitled by MK P (@MK-P-the-animator) on CodePen.

표의 행과 열

<table> 태그는 표를 만들기 위해 사용되며, 행(row)과 열(column)로 이루어져 있습니다. 행을 만들기 위해 <tr> 태그를 사용하며, 셀을 만들기 위해 <tr> 태그 안에 <th>(표의 제목), <td> 태그를 사용합니다.

<table> 태그를 실제 표와 같이 나타내기 위해서는 간단한 스타일을 적용해야 합니다. 위의 예제에는 총 5개의 표가 있는데, 아무 스타일도 적용하지 않은 첫 번째 <table>은 어떠한 구분선도 나타나지 않는 것을 알 수 있습니다.

아래는 표를 꾸미기 위해 사용된 스타일 속성에 대한 설명입니다.

border: 선과 관련된 css 속성자로, "border: 선의 굵기 선의모양(직선, 실선, 점선...) 선의색깔" 형식으로 표현한다.
border-collapse: 테이블 테두리가 합쳐지는 방식을 지정하는 css 속성자이다.
- border-collapse: collapse: 테이블 요소들의 테두리가 합쳐진다.
- border-collapse: seperate: 테이블 요소들의 테두리가 개별적으로 표시된다.(기본값)

[HTML] 초보도 따라하는 HTML - 5 (텍스트 관련 태그)

코딩눕 — Thu, 18 Apr 2024 21:57:59 +0900

택스트 관련 태그

HTML 문서 안에 텍스트는 <body> 태그 안에만 작성하면 웹 페이지에 표시됩니다. 하지만 HTML에서는 텍스트 작성을 위한 태그들이 별도로 존재합니다.

이 텍스트 관련 태그들을 사용해 보다 쉽게 텍스트 관련 설정을 할 수 있고, 검색 엔진이 웹 페이지를 분석하는 데에 도움을 주기도 합니다.

<hn>

See the Pen Untitled by MK P (@MK-P-the-animator) on CodePen.

<hn> 태그는 웹 문서의 제목을 나타내는 태그입니다. h1~h6 까지 총 6 종류가 있으며, 작은 숫자일수록 텍스트의 크기가 크고 상위 타이틀로 인식합니다.

h1: 해당 웹 페이지 또는 메인 섹션의 제목으로 사용. 하나의 페이지에 하나만 사용하는 것이 일반적
h2: 일반적으로 섹션의 제목으로 사용됨
h3: 섹션 내 하위 제목으로 사용됨
h4 ~ h6: 더 하위의 섹션 또는 세부 정보를 제공하기 위해 사용됨

<p>

See the Pen Untitled by MK P (@MK-P-the-animator) on CodePen.

<p> 태그는 영단어 "paragraph"의 줄임말로, 텍스트 단락을 구분하기 위해 사용됩니다. 위의 예제를 보시면 각각의 <p> 태그마다 단락으로 구분되어 있는 것을 알 수 있습니다.

<br>

See the Pen Untitled by MK P (@MK-P-the-animator) on CodePen.

"line break"의 약어인 <br> 태그는 스타일을 사용하지 않고 줄바꿈을 할 수 있게 도와줍니다. 위의 예제를 보면 <br> 태그를 사용한 부분에 줄바꿈이 되는 것을 확인할 수 있는데, 텍스트 뿐 아니라 각 HTML 태그 간 줄바꿈 역시 되는 것을 볼 수 있습니다.

다만 이 방법은 css 스타일을 이용해 단락을 구분할 때 문제가 생길 수 있기 때문에 권장하는 방법은 아닌 점 참고하시면 되겠습니다.

<strong> & <b>

See the Pen Untitled by MK P (@MK-P-the-animator) on CodePen.

<strong>과 <b> 태그 모두 텍스트를 굵게 만들어 줍니다. 하지만 두 태그에는 다른 점이 있습니다.

<strong>: 화면 낭독기가 해당 부분을 강조
<b>: 단순히 텍스트만 굵게 표시

<em> & <i>

See the Pen Untitled by MK P (@MK-P-the-animator) on CodePen.

<em>, <i> 태그는 각각 "emphasis", "italic"의 줄임말이며, 모두 글자에 기울임 효과를 추가합니다. 두 태그는 어원에서 알 수 있듯이 웹 문서 상 표시되는 방식은 같으나 사용 방법이 다릅니다.

<em>: 문장흐름상특정 부분을 강조할 때 사용
<i>: 단순히 다른 텍스트와 구분할 때 사용

<blockquote>

See the Pen Untitled by MK P (@MK-P-the-animator) on CodePen.

<blockquote> 태그는 인용구를 작성할 때 사용합니다. 위의 예제를 보면 <blockquote> 태그 안에 있는 텍스트가 들여쓰기되어 표시되는 것을 확인할 수 있습니다. 또한 화면 낭독기도 <blockqoute>로 감싸진 부분을 다른 텍스트와 구분합니다.

<sup> & <sub>

See the Pen Untitled by MK P (@MK-P-the-animator) on CodePen.

<sup>, <sub> 태그는 각각 "supscript", "subscript"의 약어이며, 의미에서 알 수 있듯이 위첨자, 아래첨자를 표시할 때 사용합니다.

기타 텍스트 관련 태그

See the Pen Untitled by MK P (@MK-P-the-animator) on CodePen.

그 밖의 다양한 텍스트 관련 태그들입니다.

<abbr>: 줄임말을 표시하고, <abbr> 태그에 title 속성을 사용해 부연설명을 할 수 있으며 해당 텍스트에 마우스를 올리면 표시된다.
<cite>: 웹 문서나 포스트에서 참고 내용을 표시한다.
<small>: 텍스트를 작게 표시
<code>: 소스 코드 작성 시 사용
<s>: 취소선
<u>: 밑줄
<ins>: 공동 작업 문서에 새로운 내용을 추가할 때 사용한다.
<del>: 공동 작업 문서에 있는 내용을 삭제할 때 사용한다.

[HTML] 초보도 따라하는 HTML - 4 (class와 id & 둘의 차이)

코딩눕 — Wed, 17 Apr 2024 22:37:52 +0900

class와 id 속성

HTML 문서를 작성하기 위해서는 필연적으로 같은 태그를 여러 번 사용해야 합니다.

See the Pen Untitled by MK P (@MK-P-the-animator) on CodePen.

예를 들어, 위의 HTML 코드에서는 총 네 개의 <p> 태그가 쓰였고, 1, 2번 <p> 태그의 글자색을 파란색으로, 3, 4번 <p> 태그의 글자색은 붉은색으로 정하고 싶다면, 위와 같은 방법이 있습니다.

(자바스크립트를 사용하지 않는다는 기준으로)

HTML 태그의 style 속성을 사용
css의 가상 클래스인 nth-child를 사용

하지만, 극단적으로 글자색이 파란 <p> 태그는 200개, 빨간 거는 500개가 되어야 한다면(태그 순서대로...), 앞으로의 코딩 인생이 힘들어질 것입니다. 그렇기 때문에 같은 이름의 태그라도 서로를 구분해 줄 무언가가 필요합니다.

이 때 class와 id 속성을 사용하면 모든 문제가 해결됩니다.

class 속성

<!-- 케밥 케이스를사용한 클래스 표기법  -->
<p class="color-red">반갑습니다.</p>
<p class="color-red">저는 반달레이 실바입니다.</p>
<p class="color-red">안녕히 계세요.</p>

<!-- 스네이크 케이스를 사용한 클래스 표기법 -->
<p class="color_blue">안녕하세요.</p>
<p class="color_blue">저는 윤루카스입니다.</p>
<p class="color_blue">저는 차갑습니다.</p>

태그에 클래스 속성을 사용하는 방법은 태그 시작 부분에 class="정하고 싶은 클래스 이름"을 적으면 됩니다. 다만 클래스명을 작성하는 일반적인 관례가 있는데, 보통은 "스네이크 케이스" 또는 "케밥 케이스"를 많이 사용합니다.

id 속성

<!-- 카멜 케이스를 사용해 작성한 id 속성 -->
<p id="colorBlue">지렁이도</p>
<p id="colorRed">밟으면</p>
<p id="colorgreen">아프다.</p>

id 속성도 클래스와 마찬가지로 태그 시작 부분에 작성하시면 됩니다. 다만 작성 방식은 "카멜 케이스를 사용합니다.

See the Pen Untitled by MK P (@MK-P-the-animator) on CodePen.

class와 id 속성을 사용하여 css 스타일을 적용한 예시입니다. class의 경우 ".클래스명", id의 경우 "#아이디명"을 통해 명시해 줍니다.

지금은 글자 색을 정하는 속성인 "color"만 사용했기 때문에 style 태그와 별 차이가 없다 생각할 수도 있지만, 여러 속성을 이용해 스타일을 지정하는 것이 매우 흔하기 때문에 매우 효과적입니다.

<button id="submitBtn" class="btn" type="button">접수하기</button>
<button id="clearBtn" class="btn" type="button">접수하기</button>

필요에 따라서는 하나의 태그에 id와 class 모두 지정할 수 있습니다.

class와 id의 차이점

class와 id 속성 모두 여러 태그에 같은 스타일을 적용시킨다거나, 자바스크립트 코드를 이용해 요소를 제어하기 위하는 등의 방법으로 사용됩니다. 하지만 둘의 차이점이 있습니다.

id는 고유값(unique)이다.

See the Pen Untitled by MK P (@MK-P-the-animator) on CodePen.

위의 예제의 자바스크립트 코드(JS)는 HTML 문서에 있는 "color-red"라는 클래스 속성값을 가지는 태그들과, "colorPurple"이라는 id 속성값을 가지는 태그를 찾고, 작업을 반복하는 반복문을 돌려 글자색인 'color' 스타일 속성의 값을 바꿔주는 코드입니다.

결과를 보시면 "color-red" 속성을 가지는 두 개의 <p> 태그의 글자색은 모두 주황색으로 바꿔었지만, "colorPurple"이라는 id 속성값을 가지는 태그는 분명 두 개가 있는데 맨 처음 해당 id 값을 가지는 태그만 글자 색상이 바뀌었다는 점입니다.

이 부분이 class 속성과 id 속성의 차이입니다. 자바스크립트의 getElementBy~ 함수를 사용해 id 속성을 가진 HTML 태그를 제어할 때, 여러 태그가 같은 id 값을 가지고 있다면 해당 id 값이 가장 먼저 사용된 태그만 조작된다는 점 입니다.

이 외에도 id값을 중복으로 사용하게 되면 다양한 문제가 발생할 수 있기 때문에 id는 각 태그마다 고유한 값을 사용해야 합니다.

[HTML] 초보도 따라하는 HTML - 3 (<div>태그와 시맨틱 태그)

코딩눕 — Sun, 14 Apr 2024 11:44:57 +0900

웹 페이지의 영역을 나눠주는 <div> 태그와 시맨틱 태그

우리가 웹 페이지에서 볼 수 있는 요소들은 <body> 태그 안에 작성됩니다. 하지만 그냥 작성된 것이 아닌 각각의 역할에 따라 레이아웃이 구분돼서 작성되어야 사이트를 보다 구조화할 수 있습니다.

예를 들어, 네이버를 크게 나눠보면 헤더(header), 메인(main), 사이드바(sidebar), 여기엔 나와있지 않지만 스크롤을 내려 확인할 수 있는 푸터(footer) 영역 등으로 이루어져 있고, 그 안에서 쪼개지는 다양한 레이아웃이 있습니다.

이렇게 관련 있는 콘텐츠마다 영역을 나눠주기 위해 <div>와 시맨틱 태그를 사용하는데, 각 태그들에 대해 알아보는 시간을 가져보도록 하겠습니다.

<div>

"division"의 약어로, 웹 페이지 콘텐츠의 레이아웃을 나눠주는 역할
태그 자체에 특별한 의미는 없지만, role 속성을 사용해 어떤 역할을 하는지 명시할 수 있다.

See the Pen Untitled by MK P (@MK-P-the-animator) on CodePen.

시멘틱 태그가 나오기 이전에 사용한 태그입니다. 하지만 <div> 태그 자체에는 어떤 역할을 하는지 알려주지 않기 때문에 class와 id 속성, 또는 role 속성 등을 사용해 역할을 명시했습니다.

시맨틱 태그

"sementic"(의미의, 의미론적인)과 "tag"가 합쳐진 말로 포함된 콘텐츠의 목적을 정의해주는 태그
<div> 태그와 마찬가지로 레이아웃을 나누는 역할을 하지만, 태그의 의미 만으로 역할을 알 수 있다.
웹 브라우저가 HTML 문서를 보다 쉽게 이해할 수 있게끔 도와줘 웹 접근성을 향상 시켜준다.
검색 엔진이 크롤링을 효율적으로 할 수 있게 도와줘 검색 엔진 최적화(SEO)에 도움을 준다.
코드의 가독성 향상으로 유지보수에 도움을 준다.

아래는 자주 사용되는 시맨틱 태그들입니다.

태그 명	역할
<header>	웹 사이트의 머리 영역
<nav>	웹 문서에서 다른 위치로 이동시키거나, 다른 웹 문서로 이동시키는 링크를 만드는 영역
<main>	웹 문서의 핵심 내용 영역
<article>	개별 콘텐츠 영역
<section>	제목에 따라 구분되는 여러 콘텐츠들을 묶는 영역. 이영역은 재배포를 못하는 콘텐츠로 인식됨
<aside>	사이드바 영역
<footer>	사이트 정보나 저작권 정보, 연락처 등을 표시하는 영역

이 외에도 다양한 시맨틱 태그들이 있습니다. 웹 페이지를 만들 때, 먼저 목적을 가지는 영역을 시맨틱 태그로 나눈 다음, 단순히 레이아웃을 나누거나 스타일 적용을 위한 경우는 <div> 태그를 사용해 보다 구조화된 웹 페이지를 만들 수 있습니다.

[CSS] 초보도 따라하는 CSS - 1편 (CSS란?)

코딩눕 — Sat, 13 Apr 2024 15:41:11 +0900

CSS(Cascading Style Sheet)란?

W3C가 개발한 스타일 시트 언어
HTML과 같은 마크업 언어가 실제 표시되는 방법을 기술함.

HTML로 웹 페이지를 만들 수 있게 됨과 동시에, 당연하게도 사람들은 내 웹 페이지를 예쁘게 꾸미고 싶은 욕구를 가지게 됩니다. 이러한 이유로 등장한 HTML 태그에는 <font>, <i>, <b> 등이 있습니다.

See the Pen Untitled by MK P (@MK-P-the-animator) on CodePen.

이러한 태그들은 얼핏 봐도 큰 문제가 있습니다. 만약에 내가 꾸미고 싶은 태그가 100개가 된다면, 또는 극단적으로 그 이상이 된다면 이런 디자인 관련 태그들을 모두 적어줘야 한다는 점입니다. 이런 편의성 문제를 제외하더라도, 이런 디자인 관련 태그들은 HTML 문서가 나타내고자 하는 정보가 아니기 때문에, 문서의 질이 떨어지게 됩니다.

이러한 이유 때문에, WC3에서는 HTML에서 디자인적인 요소를 분리해 보다 구조화된 문서를 만들기 위해 CSS를 개발해 발표하게 됩니다.

CSS 사용법

css의 작성 방법은 다음과 같습니다.

h1 {
  font-size: 50;
  color: red;
}
p {
  font-weight: 600;
  color: orange;
}

/* 태그명(class, id 명...){
  속성: 값;
  속성: 값;
  ....
  속성: 값
} 

<태그명(class, id 명...)>: 내가 스타일을 주고 싶은 태그를 다양한 방법으로 지정
<속성: 값>: 중괄호{} 안에 작성하며, 정하고 싶은 스타일 속성과 그 값을 정한다. 
            만약 여러 속성을 정하고 싶으면 값 뒤에 ;를 붙여 속성들을 구분한다(마지막은 생략 가능)
*/

태그의 클래스, id에 대해서는 추후 서술하도록 하겠습니다.

작성한 css를 HTML 문서에 적용하는 방법은 아래와 같습니다.

1) <style> 태그

See the Pen Untitled by MK P (@MK-P-the-animator) on CodePen.

HTML 문서의 <head> 태그 안에 <style> 태그를 사용할 수 있습니다. 이 스타일 태그 안에서 "태그명(클래스, id명...){스타일 속성}"의 형식으로 작성할 수 있습니다.

2) 외부 CSS 파일 import

또는 원하는 경로에 ".css" 확장자의 파일을 만들고 css를 작성한 다음, 적용시키고자 하는 HTML 문서 <head> 태그 안에 <link> 태그를 사용해 import 할 수 있습니다.

<link rel="stylesheet" type="text/css" href="./hi.css">

<!-- rel: 현재 리소스와 외부 리소스의 연관관계를 명시 
	 rel="stylesheet": 외부 스타일시트(css 파일)를 불러옴=> 필수 속성
     
     type: 링크된 외부 리소스의 미디어 타입을 명시(href 속성이 있어야만 사용 가능)
     html5에서는 생략 가능(생략하는 것을 권장)
     
     href: 불러올 외부 리소스의 경로
-->

3) 태그에 직접 사용

See the Pen Untitled by MK P (@MK-P-the-animator) on CodePen.

또는 스타일을 적용하고 싶은 태그의 시작 부분 안에 직접 작성하는 방법이 있습니다.

이 경우는 해당 태그에만 스타일이 적용됩니다.

위와 같은 방법으로 css를 사용해 HTML 문서를 보다 아름답게 꾸밈과 동시에, <font> 등과 같은 태그를 사용해서 발생하는 문제점을 개선할 수 있습니다.

또한, 따로 css를 파일로 분리해 import 하는 방식을 활용하면 웹 사이트에 사용되는 모든 HTML 문서들이 공통으로 사용하는 스타일들을 하나의 css 파일에 정리해 두고 각 문서에 <link> 태그만 추가하면 되기 때문에 코드 작성 시간을 단축시키고 재사용성을 크게 높일 수 있습니다.

[HTML] 초보도 따라하는 HTML - 2편 (HTML 기본 구조)

코딩눕 — Fri, 12 Apr 2024 12:03:43 +0900

HTML 기본 구조

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

<!DOCTYPE html>

웹 브라우저가 문서를 어떻게 해석해야 하는지 알려주는 선언문(태그 X)
HTML 문서가 어떤 버전의 표준을 따르는지 명시
이를 통해 해당 문서를 렌더링하는 데에 필요한 적절한 규칙 & 모드를 선택
브라우저에게 표준 모드로 렌더링하도록 유도하여, 호환성 문제 방치 및 최신웹 표준을 준수하게 함
작성 시 대, 소문자를 구분하지 않음

<!DOCTYPE html> 
<!DOCTYPE HTML>
<!doctype html>

<HTML>

HTML 문서의 시작을 알리는 태그
문서의 모든 내용은 <html> 태그 안에 있어야 한다.
<html> 태그에 가장 많이 사용하는 속성은 "lang"이며, 해당 문서의 기본 언어를 지정.
이를 통해 스크린 리더나 브라우저, 검색 엔진 등에 사용해야 하는 언어 정보를 제공.

<html> <!-- 언어설정: unknown(기본값) = <html lang=""> -->
<html lang="en"> <!-- 영어 -->
<html lang="ko"> <!-- 한국어 -->
....

<head>

HTML 문서의 메타 데이터(<meta>)와 제목, 스타일 시트(<style>) 및 스크립트(<script>)와 폰트와 같은 기타 리소스 등에 대한 정보를 적을 수 있는 태그
외부 스타일 시트 및 스크립트를 불러올 수도 있다.

<meta>

<head> 태그 안에 작성하며, 문서의 메타 데이터(metadata)를 정의하는 데에 사용
이렇게 설정된 메타 데이터는 문서에 작성된 콘텐츠에 대한 정보를 제공하는 데이터로, 브라우저 및 검색 엔진 등이 사용한다.

<!-- HTML 문서의 문자 인코딩을 지정 -->
<meta charset="UTF-8">
<!-- 모바일 장치에서 페이지가 올바르게 렌더링되도록 뷰포트 설정을 지정 (반응형 웹 디자인을 위한 태그) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 검색 결과나 소셜 미디어에서 페이지의 설명으로 사용 -->
<meta name="description" content="웹 페이지의 설명">
<!-- 검색 엔진 로봇(ex: 구글 검색 엔진 크롤러)에게 페이지를 색인할지 여부를 지정 -->
<meta name="robots" content="index, follow">
<!-- 문서의 저자를 지정 -->
<meta name="author" content="짱구">
<!-- 문서와 관련된 키워드를 지정 -->
<meta name="keywords" content="맛집, 성수동 맛집, 바퀴벌레 튀김">

description 태그

<title>

웹 페이지의 제목을 설정
웹 페이지의 주제와 목적을 명확하게 전달하는 역할

<title> 태그에 표시한 제목이 표시된다.

<body>

웹 페이지에 표시되는 모든 내용을 작성하는 태그
텍스트, 이미지 등과 관련된 다양한 태그를 사용해 <body> 태그에 작성
이를 통해 웹 페이지를 다양하게 구성할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
	<!-- body 태그 안에 다양한 태그를 사용해 화면에 표시될 내용을 작성한다 -->
    <h1>NO CSS, JavaScript</h1>

    <img src="./no-css.jpg">
    <h3>행동 강령</h3>
    <ul>
        <li>HTML만 사용한 웹 사이트에 Social Credit +1000을 부여한다.</li>
        <li>이를 어길 시 Social Credit -3000을 부과한다.</li>
        <li>만약, -30000 Social Credit을 달성하면 해당 사이트에 비정상 트래픽을 발생시켜 AWS 비용 1000000000원을 발생시킨다.</li>
    </ul>
    <h3>로그인</h3><br>

    <form>
        <input type="text" placeholder="ID를 입력하세요."><br>
        <input type="password" placeholder="비밀번호를 입력하세요."><br>
        <span>* 당신의 데이터는 안전하게 보호되지 않고 URL에 그대로 나타납니다.</span><br>
        <button>로그인</button>&nbsp;<button type="button"><a href="no-css-js-club/가입">회원가입</a></button>
    </form><br>

    <h3>공격 대상 웹사이트</h3>
    <p>건방지게 CSS, JavaScript를 사용한 배신자의 웹사이트</p>
    <input type="text" placeholder="배신자의 웹 사이트 url">
    <button>접수</button> 
</body>
</html>

결과

[HTML] 초보도 따라하는 HTML - 1편 (HTML 정의 & 파일 생성)

코딩눕 — Thu, 11 Apr 2024 18:18:30 +0900

HTML이란?

Hyper Text Markup Language의 약어
웹 페이지를 만들 때 사용되는 마크업 언어

Hyper Text란?

텍스트 안(하이퍼 링크)에 다른 문서, 이미지, 오디오 등의 다른 매체로 연결될 수 있는 텍스트
기존의 책과 같은 문서는 한 문장이 다음 문장과 연결되거나, 현재 페이지가 다음 페이지와 연결되는 선형적 구조
하이퍼 텍스트(Hyper Text)는 각각의 텍스트 요소들이 서로 링크로 연결되어 있는데
사용자는 이 링크를 통해 임의의 순서로 문서 내의 다른 부분으로 비순차적으로 이동할 수 있음

출처: 위키백과

위의 사진이 하이퍼 텍스트에 대해 가장 잘 표현한 그림입니다.

마크업 언어(Markup Language)란?

태그 등을 이용해 문서의 구조와 서식을 정의하는 언어

즉, HTML은 텍스트 안에 다른 매체(웹 페이지)로 이동할 수 있게 해 주면서,
텍스트 기반으로 웹페이지의 구조를 설명하는 데에 사용되는 마크업 언어입니다.

HTML은 프로그래밍 언어??

HTML이 프로그래밍 언어인지 아닌지 고민하는 AI

HTMl은 프로그래밍 언어가 아니며, 프로그래밍 언어와는 사용 목적이 다릅니다.

	HTML	프로그래밍 언어
명령 실행 능력	X	O
변수 및 함수	X	O (변수를 사용해 데이터 저장 및 함수를 통한 기능 정의)
실행 방식	웹 브라우저에서 해석 및 표시	컴퓨터에서 실행
목적	웹 페이지 구조 및 콘텐츠 정의	데이터 처리 및 알고리즘 실행 등...

HTML 요소

출처: TCP School

태그, 속성, 내용으로 구성
태그는 일반적으로 시작 & 종료 태그로 구성되며, 종료 태그가 없는 경우도 있음
속성은 HTML 요소에 추가 정보를 제공하며, 속성명 & 속성 값으로 이루어짐
내용은 웹 페이지에 표시되는 콘텐츠를 의미하며, 태그 사이에 위치

HTML 문서 만들기

HTML에 대한 설명은 뒤로 하고, VSCode를 사용해 HTML 문서를 만들어 보겠습니다.

* 만약 VSCode가 설치되어 있지 않다면 아래의 글을 참조하시길 바랍니다.

https://nobase-coding-diary.tistory.com/9

[Visual Studio Code] 초보도 쉽게 할 수 있는 VSCode 설치

우리가 코딩을 하기 위해서는 코딩 언어를 작성할 수 있는 무언가가 필요합니다. 예를 들어, Window 기준으로 기본적으로 깔려 있는 메모장이 그 예시인데요. 하지만 이 경우에는 코드를 작성한

nobase-coding-diary.tistory.com

1) 프로젝트 폴더 만들기

우선 원하는 경로에 파일들을 관리할 프로젝트 폴더를 하나 만들어 줍니다.

2) VSCode 열고 생성한 폴더로 이동

"파일 > 폴더 열기"로 이동해, 아까 만든 "프로젝트" 폴더로 이동해 줍니다.

HTML 파일 생성 및 기본 구소 생성

"탐색기 > 새 파일"을 클릭한 후 "파일명.확장자"를 입력합니다.

여기서 확장자를 ".html"로 하면 HTML 문서가 만들어집니다.

HTML 문서

Visual Studio Code는 코드 단축 기능을 제공합니다.

아까 만든 HTML 문서에 !를 입력한 다음 "!"를 클릭하면 (or 방향키 아래 > Enter) 빠르게 HTML 기본 구조가 완성됩니다.

[Visual Studio Code] 초보도 쉽게 할 수 있는 VSCode 설치

코딩눕 — Wed, 10 Apr 2024 17:30:41 +0900

우리가 코딩을 하기 위해서는 코딩 언어를 작성할 수 있는 무언가가 필요합니다.

예를 들어, Window 기준으로 기본적으로 깔려 있는 메모장이 그 예시인데요.

하지만 이 경우에는 코드를 작성한 메모장 파일의 확장자를 변경하고, 명령 프롬프트(cmd)를 통해 코드를 실행해야 한다는 점에서 매우 불편합니다.

그렇기 때문에, 코드 작성 및 실행을 위한 프로그램을 설치하는 것을 강력히 권장합니다.

그중에서, 쉽게 이용할 수 있는 Visual Studio Code(VSCode)에 대해 간단히 알아보고, 설치하는 과정을 적어보겠습니다.

Visual Studio Code(VSCode)란?

마이크로소프트(MicroSoft)에서 개발한 텍스트 에디터 프로그램
크로스 플랫폼을 지원하여 윈도우(Window), 맥(Mac), 리눅스(Linux) 모두에서 사용 가능
자체 터미널 보유 및 다양한 확장 프로그램(PlugIn) 지원
플러그인 설치를 통한 다양한 프로그래밍 언어를 사용할 수 있음(C, C++, JAVA, Python...)

Visual Studio Code의 가장 큰 장점은 모든 플랫폼에서 사용할 수 있다는 점과, 플러그인만 설치하면 특정 프로그래밍 언어에 종속된 다른 IDE들과는 다르게, 다양한 언어를 오직 VSCode만을 사용해 이용할 수 있다는 점입니다.

~~(참고로 Visual Studio Code는 IDE가 아닙니다. 하지만 개발을 도와주는 다양한 확장 프로그램을 설치하면 IDE에 준하는 기능을 이용할 수 있습니다.)~~

* 공식 문서

https://code.visualstudio.com/docs/supporting/FAQ#_what-is-the-difference-between-visual-studio-code-and-visual-studio-ide

Visual Studio Code Frequently Asked Questions

code.visualstudio.com

Visual Studio Code 설치

Visual Studio Code에 대한 설명은 이 정도로 마치고, 설치 방법에 대해 알아보겠습니다.

설치 환경: Window 11

1) Visual Studio Code 공식 홈페이지 방문

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

빨간색 박스가 그려진 Download 버튼 중 아무거나 선택해 프로그램을 다운로드할 수 있습니다.

(2번의 경우 다양한 다운로드 옵션을 선택할 수 있습니다.)

저는 1번을 눌러 다운로드를 해 볼 텐데, 두 가지 옵션이 있습니다.

Stable: 배포 전에 충분한 테스트를 거친 버전이며, 안전성이 높습니다. (추천)
Insiders Version: 새로 개발 중인 기능들이 추가된 버전으로, 안전성이 다소 낮습니다.

원하시는 옵션을 선택해 다운로드하시면 됩니다.

2) 설치한 Set Up 파일을 실행

다운로드가 완료되었다면, SetUp 파일을 실행해 줍니다.

약관 동의 누르시고 "다음" 눌러주신 다음...

VSCode가 설치될 경로를 확인한 다음 "다음"을 눌러줍니다.

여기서 설치 경로를 바꿀 수 있습니다.

설치 과정에 포함시킬 항목들을 체크한 다음 "다음"을 눌러줍니다.

다 추가하는 것을 추천드립니다.

* 각 항목들에 대한 설명

"code(으)로 열기" 작업을 ~: 폴더나 파일을 VSCode로 바로 열 수 있게 마우스 우클릭 메뉴에 code로 열기를 표시
”Code을(를) 지원되는 파일~”: VSCode를 기본 편집기로 사용
PATH에 추가: 명령 창(CMD, 파워셀 등)에서 code를 입력하면 VSCode가 바로 실행

"설치"를 눌러주면...

Visual Studio Code 설치가 완료됩니다.

설치하면 유용한 확장 프로그램

앞서 말한 대로 Visual Studio Code는 다양한 확장프로그램을 지원합니다.

이를 통해 각종 편의 기능을 이용할 수 있어 코딩 환경을 보다 쾌적하게 해 줍니다.

1) 한국어 언어팩

Visual Studio Code 프로그램을 열면 좌측에 네모 블록 모양의 "확장"을 누른 다음, "Korean Language Pack for Visual Studio Code"를 검색하면 한국어 언어팩이 표시되는데, 이걸 클릭해 설치(Install)하시면 VSCode를 한국어로 이용할 수 있습니다.

2) Live Server

우리가 HTML 문서를 작성한 다음 저장하면 아래처럼 확장자가 ". html"인 파일이 만들어집니다.

그리고 이 파일을 열어야지 내가 만든 HTML 웹 페이지를 볼 수 있는데, 꽤나 귀찮은 작업입니다.

그래서 Visual Studio Code에서는 에디터에서 내가 작성한 html 페이지를 빠르게 확인할 수 있는 확장 프로그램을 제공합니다.

마찬가지로 "확장" 탭에서 "Live Server"를 검색해 해당 확장 프로그램을 설치하시면 됩니다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

설치 후 HTML 문서를 여는 방법이 녹화된 동영상입니다.

우클릭 시 나타나는 "Open With Live Server"를 눌러 손쉽게 내가 작성한 HTML 문서를 웹 페이지에서 확인할 수 있습니다.

SQLD 합격 후기 및 공부 방법

코딩눕 — Mon, 1 Apr 2024 22:05:07 +0900

예전부터 한 번 따볼까 생각만 했던 SQLD 시험을 봤었습니다.

3월 9일 52회 차를 치렀었고, 높은 점수는 아니지만 다행히 합격을 했습니다.

총 7일 동안 공부하였는데, 다른 분들께 도움이 되었으면 좋을 것 같아 어떻게 준비했는지 공유해보려 합니다.

목표 설정

우선, 공부에 앞서 현 상황과 어떻게 공부할 것인지, 어떻게 하고 싶은지 생각해 본 결과

공부에 너무 많은 시간을 투자하고 싶지 않다.
고득점이 목표가 아니다. 합격점이 목표다.
sql, 오라클에 대한 어느 정도의 사전 지식이 있다.

이 정도의 결론이 나왔습니다.

그래서, 저는 7일이면 충분히 합격할 수 있겠다 생각하였습니다.

정보 탐색 및 교재 구매

그다음 사람들은 어떤 식으로 공부하는지 궁금해 구글링을 해 봤습니다.

많은 분들이 sqld 독학에 대한 좋은 정보를 제공해 주셔서 공부하는 데에 도움이 되었습니다.

그중에서 저는 아래의 블로그를 가장 많이 참조해 교재 및 커뮤니티 등에 대한 정보를 얻었습니다.

https://soo-vely-dev.tistory.com/227

SQLD 2주 합격 후기 및 공부 방법(직장인/노랭이/독학)

회사에서 오라클을 깊게 다루다보니, '이 참에 SQL 자격증을 취득해볼까?' 라는 생각이 문뜩 들어 SQLD 공부를 시작하였고, 제 47회 SQLD 시험을 합격하였습니다! SQLD란? SQL 개발자(SQLD*, SQL Developer)란

soo-vely-dev.tistory.com

그리고 네이버 sqld 커뮤니티 카페에도 가입했습니다.

https://cafe.naver.com/sqlpd/13374

[국가공인] SQL 개발자(SQLD) 가이드(2020.08.25.)

요약자료(4개) 링크를 추가했습니다. (2020.08.25.) 정리된 SQL 개발자 가이드로 시험을 대비할 수 있도록 자료실 교재 및 기출문제 복원자료를 취합하였습니다. ...

cafe.naver.com

그리고 교재를 선택해야 했었는데, 많은 사람들이 추천했던 "SQLD 자격검정 실전문제(통칭 노랭이)"를 구매했습니다.

SQLD 시험을 주최하는 한국 데이터 산업 진흥원에서 공식 출간한 책인데, 개정판이 나와서 그걸 샀습니다.

실제로, 시험 응시할 때, 책에 나와있던 기출문제와 같거나 변형된 문제가 몇몇 보였습니다.

해당 교재는 문제만 있기 때문에, 만약 sql에 대한 사전 지식이 없으시다면 개념서를 같이 구매하시는 것도 추천드립니다.

~~다만 답안을 잘못 표기한 문제가 꽤 있고, 해설이 불친절하기 짝이 없어 내면의 분노가 치솟았습니다. 잘못된 답안은 정오표에서 확인 가능합니다.~~

SQL 자격검정 실전문제 정오표_20240221.hwp

0.06MB

문제 풀기 및 복습

SQLD는 "제2장 SQL 활용"까지만 공부하시면 됩니다.

첫날은 모든 문제를 푸는 것을 목표로 삼았습니다.

문제를 풀어보면서, 내가 아는 부분과 모르는 부분이 무엇인지, 출제 방식은 어떻게 되는지 등을 파악했습니다.

~~(저는 7시간 정도 걸렸습니다.)~~

저의 경우 메모장에 답을 적고 채점한 다음에, 틀린 문제만 책에 체크를 해 뒀습니다.

다음 날은 오답을 확인하고, 보완해야 하는 부분은 무엇인지 확인했습니다.

가장 큰 문제는 1 단원에 나오는 소위 "아 다르고 어 다르다." 하는 문제들과, 2 단원에 나오는 장문의 쿼리였습니다.

1 단원은 과락을 피하기 위해 암기가 필요한데, 기본적인 부분은 아래의 블로그를 참조하였습니다.

https://mjn5027.tistory.com/100#3.%20%EC%86%8D%EC%84%B1

[ SQLD ] 1장 - 데이터 모델링의 이해 요약

데이터 모델링의 이해 요약 1. 데이터 모델의 이해 > 데이터 모델링 정의 - 현실 세계의 데이터를 데이터 관점으로 업무 분석하는 기법 - 데이터베이스를 구축하기 위한 분석 및 설계의 과정 > 데

mjn5027.tistory.com

그리고 정규화에 대한 부분은 아래의 블로그를 참조하였습니다.

https://mangkyu.tistory.com/110

[Database] 정규화(Normalization) 쉽게 이해하기

지난 포스팅에서 데이터베이스 정규화와 관련된 내용을 정리했었다. 하지만 해당 내용이 쉽게 이해되지 않는 것 같아서 정규화 관련 글을 풀어서 다시 한번 정리해보고자 한다. 1. 정규화(Normaliz

mangkyu.tistory.com

sqld 공부를 요약하신 분이 있는데, 아래의 블로그에서 요약본을 다운로드하였습니다.

https://present4n6.tistory.com/entry/SQLD-%EC%9E%90%EA%B2%A9%EC%A6%9D-%ED%9B%84%EA%B8%B0-%EB%B0%8F-SQLD-%EC%9A%94%EC%A0%90-%EC%A0%95%EB%A6%AC-%EA%B3%B5%EC%9C%A0

SQLD 시험 합격 후기 및 SQLD 요점 정리 파일 공유

SQLD 자격증 취득 후기 (SQL Developer) 예전에 쳤던 데이터베이스 자격증 시험인 SQLD 시험 후기를 작성해보겠습니다. SQLD 를 취득했을 당시가 군 복무를 하던 때였는데 사실 군 복무를 할 때만 해도

present4n6.tistory.com

2 단원의 경우, 서브쿼리와 join이 포함된 쿼리에는 익숙해서 집계함수와 자주 나오는 윈도우 함수와 결과의 차이 등을 아는 데에 집중했습니다.

모르는 함수나 쿼리가 있으면 검색하기 전에, 먼저 sql developer로 부분 부분 쪼개서 쿼리를 실행해 봤습니다.

그리고 결과를 보고 어떤 기능을 하는지 추론해 봤는데, 이렇게 하니 해당 함수나 문법에 대해 이해하는 데에 큰 도움이 되었습니다.

3일째 되는 날, sqld에 단답 서술형이 있다는 걸 알았습니다.(...!!!)

서술형 문제는 아래의 블로그들을 참조했습니다.

https://yunamom.tistory.com/355#answer32

[SQLD] 45 ~ 49회 기출문제 주관식 모음 ( 총 32문제/정답 )

SQLD 45 ~ 49회 기출문제 단답형 모음 문제 1. 45회 단답형 1 (1과목). 업무에서 필요로 하는 인스턴스로 관리하고자 하는 의미상 더 이상 분리 되지 않는 최소의 데이터 단위는? (노랭이 1과목 14번

yunamom.tistory.com

https://dev-astra.tistory.com/362

[SQLD 시험 대비] 시험장 가기 전에 꼭 봐야 할 주관식 문제 모음

시험장 가기 전에 꼭 봐야 할 주관식 문제 모음 들어가며 시험에 나올 수 있는 주관식 문제들을 정리해본다. 자료 출처 : 노랭이 문제집, SQLD 시험 대비 문제집 등 문제 1 Q. 모델링의 특징 3가지를

dev-astra.tistory.com

모든 유형이 나오는 것은 아니지만, 꼭 알아야 할 문제들만 있어서 도움이 되었습니다.

추가로 3일째 되는 날까지 노랭이를 총 3 회독하였습니다.

~~(토, 일 주말이 껴 있어서 시간적 여유가 있었습니다.)~~

남은 기간은 교재 이외에 풀려 있는 실전 문제들을 찾아서 풀었습니다.

참고한 곳은 네이버 sqld 카페와 아래의 블로그입니다.

https://starrykss.tistory.com/1987

[SQLD] SQL개발자 단원별 내용 정리 & 실전 문제

SQL개발자(SQLD) 단원별 내용 정리 & 실전 문제 SQL개발자(SQLD) 자격증을 준비하면서 블로그에 올렸었던 글들을 한 페이지에 정리해본다. 개념 정리 인터넷 블로그, 교재 등을 보면서 정리했던 내용

starrykss.tistory.com

결과적으로 공부시간은 아래와 같습니다.

주말: 7~8시간
평일: 2시간
=> 25~26시간

만약 시간이 되신다면 아래의 유튜브 강의를 들어보시는 것도 추천드립니다.

https://www.youtube.com/channel/UCoc7x15NFZ97UbwfdmMZxlw

SQL전문가 정미나

안녕하세요, SQL전문가 정미나입니다. 이 채널의 궁극적인 목표는 전공자 포함 Database에 관심이 있는 초보자분들께 조금이나마 도움을 드리는 것입니다. 지금은 어떨지 모르겠지만 제가 학부생

www.youtube.com

https://www.youtube.com/channel/UCosmeBx3OuKP1YwGmT6ar2Q

김강민SQLP

서울대학교 공과대학 출신 SQL 전문가 (SQLP) 쏭즈캠퍼스(http://songscampus.co.kr) 김강민 강사 강의문의 : snumae12@naver.com

www.youtube.com

https://www.youtube.com/channel/UCa-EVMr9Gd3W4POilGJ84Zw

전광철 OCP

SQL자격검정 실전문제 풀이는 물론 SQL 학습과 관련한 채널입니다. 특히, SQLD,SQLP 자격을 위한 시험 준비를 위해 "SQL 자격검정 실전문제 - 한국 데이터진흥원"를 교재로 채택했습니다. 1과목(플

www.youtube.com

시험 전략

딱히 전략이라 할 것도 없긴 한데, 시험을 볼 때 아래의 내용을 꼭 지키려 했습니다.

문제 하나에 1분 이상 투자하지 않기
쿼리 긴 거는 재끼기
마킹 실수하지 않기 (이건 어디까지나 저 한정...)

1번과 2번이 비슷한데, 처음 문제를 볼 때에는 보이는 문제부터 빠르게 풀어버렸습니다.

만약 1분이 다 되어가는데 풀 각이 안 나오면, 확실한 보기는 지우고 문제로 넘어가고, 쿼리가 길면 보지도 않고 과감히 재꼈습니다.

그렇게 한 번 걸러내면 어느 정도 문제를 풀었기 때문에 심적으로도, 실제 시간적으로도 여유가 있기 때문에 보다 집중해서 문제를 풀 수 있었습니다.

보수교육

만약 합격하셨다면, SQLD를 합격한 다음 1년 6개월 이후부터 2년 이내에 보수교육을 받으면 자격증 영구 갱신이 가능하니 꼭 받으시길 바랍니다.

긴 글 읽어 주셔서 감사합니다.