코딩눕

목록과 표 우리가 일반적으로 문서를 작성하다 보면, 어떤 주제에 대한 세부 내용들을 표시하기 위해 목록을 사용하거나, 특정 데이터들을 가독성 있게 분류하기 위해 표(table)를 사용합니다. HTML 문서 역시 특정한 조건을 가진 항목들을 분류하기 위해 사용되는 목록을 나타낼 수 있는 과 태그, 표를 나타낼 수 있는 태그를 제공합니다. & 과 태그는 각각 순서가 있는 목록과 순서가 없는 목록을 나타내는 데에 사용됩니다. 두 태그 모두 열고 닫는 태그가 있으며, 각 세부 목록들을 적기 위해 , 태그 안에 태그를 사용합니다. 아래에서 각 태그에 대해 좀 더 자세히 알아보겠습니다. HTML 삽입 미리보기할 수 없는 소스 태그를 사용하면 순서가 있는 목록을 만들 수 있습니다. "type" 속성을 사용해 목록의 ..

택스트 관련 태그 HTML 문서 안에 텍스트는 태그 안에만 작성하면 웹 페이지에 표시됩니다. 하지만 HTML에서는 텍스트 작성을 위한 태그들이 별도로 존재합니다. 이 텍스트 관련 태그들을 사용해 보다 쉽게 텍스트 관련 설정을 할 수 있고, 검색 엔진이 웹 페이지를 분석하는 데에 도움을 주기도 합니다. HTML 삽입 미리보기할 수 없는 소스 태그는 웹 문서의 제목을 나타내는 태그입니다. h1~h6 까지 총 6 종류가 있으며, 작은 숫자일수록 텍스트의 크기가 크고 상위 타이틀로 인식합니다. h1: 해당 웹 페이지 또는 메인 섹션의 제목으로 사용. 하나의 페이지에 하나만 사용하는 것이 일반적 h2: 일반적으로 섹션의 제목으로 사용됨 h3: 섹션 내 하위 제목으로 사용됨 h4 ~ h6: 더 하위의 섹션 또는 세..

class와 id 속성 HTML 문서를 작성하기 위해서는 필연적으로 같은 태그를 여러 번 사용해야 합니다. HTML 삽입 미리보기할 수 없는 소스 예를 들어, 위의 HTML 코드에서는 총 네 개의 태그가 쓰였고, 1, 2번 태그의 글자색을 파란색으로, 3, 4번 태그의 글자색은 붉은색으로 정하고 싶다면, 위와 같은 방법이 있습니다. (자바스크립트를 사용하지 않는다는 기준으로) HTML 태그의 style 속성을 사용 css의 가상 클래스인 nth-child를 사용 하지만, 극단적으로 글자색이 파란 태그는 200개, 빨간 거는 500개가 되어야 한다면(태그 순서대로...), 앞으로의 코딩 인생이 힘들어질 것입니다. 그렇기 때문에 같은 이름의 태그라도 서로를 구분해 줄 무언가가 필요합니다. 이 때 class와..

웹 페이지의 영역을 나눠주는 태그와 시맨틱 태그 우리가 웹 페이지에서 볼 수 있는 요소들은 태그 안에 작성됩니다. 하지만 그냥 작성된 것이 아닌 각각의 역할에 따라 레이아웃이 구분돼서 작성되어야 사이트를 보다 구조화할 수 있습니다. 예를 들어, 네이버를 크게 나눠보면 헤더(header), 메인(main), 사이드바(sidebar), 여기엔 나와있지 않지만 스크롤을 내려 확인할 수 있는 푸터(footer) 영역 등으로 이루어져 있고, 그 안에서 쪼개지는 다양한 레이아웃이 있습니다. 이렇게 관련 있는 콘텐츠마다 영역을 나눠주기 위해 와 시맨틱 태그를 사용하는데, 각 태그들에 대해 알아보는 시간을 가져보도록 하겠습니다. "division"의 약어로, 웹 페이지 콘텐츠의 레이아웃을 나눠주는 역할 태그 자체에 특..

CSS(Cascading Style Sheet)란? W3C가 개발한 스타일 시트 언어 HTML과 같은 마크업 언어가 실제 표시되는 방법을 기술함. HTML로 웹 페이지를 만들 수 있게 됨과 동시에, 당연하게도 사람들은 내 웹 페이지를 예쁘게 꾸미고 싶은 욕구를 가지게 됩니다. 이러한 이유로 등장한 HTML 태그에는 , , 등이 있습니다. HTML 삽입 미리보기할 수 없는 소스 이러한 태그들은 얼핏 봐도 큰 문제가 있습니다. 만약에 내가 꾸미고 싶은 태그가 100개가 된다면, 또는 극단적으로 그 이상이 된다면 이런 디자인 관련 태그들을 모두 적어줘야 한다는 점입니다. 이런 편의성 문제를 제외하더라도, 이런 디자인 관련 태그들은 HTML 문서가 나타내고자 하는 정보가 아니기 때문에, 문서의 질이 떨어지게 됩..

HTML 기본 구조 웹 브라우저가 문서를 어떻게 해석해야 하는지 알려주는 선언문(태그 X) HTML 문서가 어떤 버전의 표준을 따르는지 명시 이를 통해 해당 문서를 렌더링하는 데에 필요한 적절한 규칙 & 모드를 선택 브라우저에게 표준 모드로 렌더링하도록 유도하여, 호환성 문제 방치 및 최신웹 표준을 준수하게 함 작성 시 대, 소문자를 구분하지 않음 HTML 문서의 시작을 알리는 태그 문서의 모든 내용은 태그 안에 있어야 한다. 태그에 가장 많이 사용하는 속성은 "lang"이며, 해당 문서의 기본 언어를 지정. 이를 통해 스크린 리더나 브라우저, 검색 엔진 등에 사용해야 하는 언어 정보를 제공. .... NO CSS, JavaScript 행동 강령 HTML만 사용한 웹 사이트에 Social Credit +..

HTML이란? Hyper Text Markup Language의 약어 웹 페이지를 만들 때 사용되는 마크업 언어 Hyper Text란? 텍스트 안(하이퍼 링크)에 다른 문서, 이미지, 오디오 등의 다른 매체로 연결될 수 있는 텍스트 기존의 책과 같은 문서는 한 문장이 다음 문장과 연결되거나, 현재 페이지가 다음 페이지와 연결되는 선형적 구조 하이퍼 텍스트(Hyper Text)는 각각의 텍스트 요소들이 서로 링크로 연결되어 있는데 사용자는 이 링크를 통해 임의의 순서로 문서 내의 다른 부분으로 비순차적으로 이동할 수 있음 위의 사진이 하이퍼 텍스트에 대해 가장 잘 표현한 그림입니다. 마크업 언어(Markup Language)란? 태그 등을 이용해 문서의 구조와 서식을 정의하는 언어 즉, HTML은 텍스트 ..

우리가 코딩을 하기 위해서는 코딩 언어를 작성할 수 있는 무언가가 필요합니다. 예를 들어, Window 기준으로 기본적으로 깔려 있는 메모장이 그 예시인데요. 하지만 이 경우에는 코드를 작성한 메모장 파일의 확장자를 변경하고, 명령 프롬프트(cmd)를 통해 코드를 실행해야 한다는 점에서 매우 불편합니다. 그렇기 때문에, 코드 작성 및 실행을 위한 프로그램을 설치하는 것을 강력히 권장합니다. 그중에서, 쉽게 이용할 수 있는 Visual Studio Code(VSCode)에 대해 간단히 알아보고, 설치하는 과정을 적어보겠습니다. Visual Studio Code(VSCode)란? 마이크로소프트(MicroSoft)에서 개발한 텍스트 에디터 프로그램 크로스 플랫폼을 지원하여 윈도우(Window), 맥(Mac),..

예전부터 한 번 따볼까 생각만 했던 SQLD 시험을 봤었습니다. 3월 9일 52회 차를 치렀었고, 높은 점수는 아니지만 다행히 합격을 했습니다. 총 7일 동안 공부하였는데, 다른 분들께 도움이 되었으면 좋을 것 같아 어떻게 준비했는지 공유해보려 합니다. 목표 설정 우선, 공부에 앞서 현 상황과 어떻게 공부할 것인지, 어떻게 하고 싶은지 생각해 본 결과 공부에 너무 많은 시간을 투자하고 싶지 않다. 고득점이 목표가 아니다. 합격점이 목표다. sql, 오라클에 대한 어느 정도의 사전 지식이 있다. 이 정도의 결론이 나왔습니다. 그래서, 저는 7일이면 충분히 합격할 수 있겠다 생각하였습니다. 정보 탐색 및 교재 구매 그다음 사람들은 어떤 식으로 공부하는지 궁금해 구글링을 해 봤습니다. 많은 분들이 sqld 독..