개발자첫걸음

※리스트(list)란 여러 요소들을 일렬로 나열한 목록이나 명단을 의미합니다.
HTML에서는 여러 요소들을 일렬로 나열한 목록이나 명단을 표현할 수 있는 태그를 제공하고 있습니다.

STYLE 속성을 이용하여 다양한 속성 부여도 가능합니다. CSS를 활용하여 다양한 연출이 가능하며 TABLE 태그와 같이 많이 사용되는 태그 중 하나입니다. CSS를 활용한 방법들은 다음 시간에 정리하도록 하고 기본적이 LIST태그에 대해서 알아보겠습니다.

목차

1. <ul></ul> 순서가 없는 목록

2. <ol></ol> 순서가 있는 목록

3. <dl></dl> 정의 목록

1. <ul></ul> 순서가 없는 목록

UNORDERED LIST의 약자로 HTML에서 순서가 없는 목록은 <ul> 태그로 시작하며, 여기에 포함되는 각각의 목록 요소는 <li> 태그로 시작된다. 각각의 목록 요소 앞에는 기본적으로 글머리 기호인 검은색의 작은 원(bullet)이 표시된다. 

TYPE 값을 변경하여 목록 기호를 변경할 수 있다.

*list-style-type:none; 값으로 지정하면 기호를 표시하지 않을 수도 있다.

@결과

2. <ol></ol> 순서가 있는 목록

ORDERED LIST의 약자로 순서가 있는 HTML 목록은 <ol> 태그로 시작하며, 여기에 포함되는 각각의 목록 요소는 <li> 태그로 시작된다. 각각의 목록 요소 앞에는 기본 마커로 아라비아 숫자가 표시된다.

TYPE 값을 변경하여 목록 기호를 변경할 수 있다.

*list-style-type:none; 값으로 지정하면 기호를 표시하지 않을 수도 있다.

list-style-type 속성

• decimal : 숫자 (기본설정)
• upper-alpha or A : 영문 대문자
• lower-alpha or a : 영문 소문자
• upper-roman or I : 로마 숫자 대문자
• lower-roman or i : 로마 숫자 소문자

@결과

또는

@코드로 보기   

    <ol type="a">

        <li>목록1</li>

        <li>목록2</li>

        <li>목록3</li>

    </ol>

 

@결과

3. <dl></dl> 정의 목록

DEFINITION LIST의 약자로 HTML은 설명 목록이라고 해서 정의 리스트를 지원하는데, 용어와 그에 대한 정의를 모아놓은 목록으로써 <dl> 태그로 표시한다. <dt> 태그에는 용어의 이름이 들어가고, <dd> 태그에는 해당 용어에 대한 정의가 들어간다.

<dd> 태그 영역은 자동으로 들여 쓰기가 적용된다.

@결과

※이번 시간에는 비주얼스튜디오코드(Visual Studio Code)의 기본적인 구조와 태그들에 대해서 알아보겠습니다.

우선 전체적인 태그들과 해당하는 옵션들을 파악해 보면서 사용방법과 활용에 대해서는 다음 시간에 정리하도록 하겠습니다.

목차

1. 기본 구조

2. 블록 레벨 요소

3. 기본 태그

1. 기본 구조

2. 블록 레벨 요소

<header> : 1.HTML 문서의 헤더 영역을 의미하는 태그로 제목이나 내비게이션, 검색등의 내용들을 포함할 수 있다.
                   2. 텍스트, 인라인 요소, 블록레벨 요소를 포함할 수 있지만 < header >, < footer > 태그는 포함할 수 없음.

<section> : 1.HTML문서에서 맥락이 같은 요소들을 주제별로 그룹화해 주는 태그이며, 섹션 주제에 대한 제목 요소를

                   포함하는 것이 좋다.
                   2. 텍스트, 인라인요소, 블록 레벨 요소를 포함할 수 있음.

<footer> : 1.HTML문서의 푸터 영역을 의미하는 태그로 섹션 작성자나 저작권에 대한 정보 관련된 문서의 링크를 포함할 수 있다.
                 2. 텍스트, 인라인요소, 블록 레벨 요소를 포함할 수 있지만 < header >, < footer > 태그는 포함할 수 없음.

<nav> : 1.HTML문서의 메인 메뉴나 목차 등을 정의해 주는 태그
             2. 텍스트, 인라인요소, 블록 레벨 요소를 포함할 수 있음.

<alticle> : 1.HTML문서에서 독립적으로 배포 또는 재사용이 가능한 게시물, 블로그 포스팅 등을 의미하는 태그.
                 2. 텍스트, 인라인요소, 블록 레벨 요소를 포함할 수 있음.

<aside> : 1. 메인 콘텐츠와 직접적으로 관련이 없는 영역을 의미하는 태그이며, HTML문서의 오른쪽이나 왼쪽의 사이드메뉴나 광고등의 영역으로 사용.
                2. 텍스트, 인라인요소, 블록 레벨 요소를 포함할 수 있음.

3. 기본 태그

<h></h> 태그(heading) : <h1>~<h6>까지 존재하며 제목태그로 사용된다. 숫자가 작을수록 폰트 사이즈가 크고 굵게

                                          표현된다.

<p></p> 태그(pargraph) : 하나의 문단을 만들 때 사용. 문단은 새로운 줄에서 시작되며 문단 사이에는 공백이 생긴다.

<br> 태그(break) : 엔터를 입력하여 줄 바꿈을 하더라도 실제로는 줄 바꿈이 적용되지 않는다. <br> 태그를 이용하여

                               엔터 효과를 가지게 한다.

<hr> 태그(horizontal rules) : 단순히 웹 페이지에 수평선을 그어주는 태그. 

<pre></pre> 태그 : 입력한 내용 그대로를 출력한다. 엔터, 스페이스, 탭 등이 적용된 형태로 출력된다.

<q></q> 태그(quote) : 짧은 문장을 인용할 때 쓰이는 태그, 브라우저에서는 큰따옴표로 출력된다.

<blockquote></blockquote> 태그 : 긴 문장을 인용할 때 쓰이는 태그. 브라우저에서는 들여 쓰기로 출력된다.

<abbr></abbr> 태그(abbreviation) : 축약 텍스트를 표시하는 태그. 밑줄이 그어진 축약 텍스트에 마우스를 올리면

                                                            말풍선으로 텍스트의 뜻이 표시된다. 

@텍스트 포매팅(text formatting) 태그 : 텍스트에 효과를 주는 태그들을 의미한다.

<b></b> : 텍스트를 굵게 출력

<strong></strong> : 텍스트를 굵게, 강조하여 출력 (중요함을 의미)

<i></i> : 텍스트를 이탤릭체로 출력

<em></em> : 텍스트를 이탤릭체로, 강조하여 출력 (중요함을 의미)

<small></small> : 텍스트를 작게 출력

 : 아래첨자

 : 위첨자

<ins></ins> : 삽입된 텍스트에 밑줄 출력

<del></del> : 삽입된 텍스트에 취소선 출력

<mark></mark> : 삽입된 텍스트에 형광펜처럼 강조 표시

@목록 관련 태그

<ol></ol> : 순서 있는 목록의 시작과 끝을 나타낸다.

<ul></ul> : 순서 없는 목록의 시작과 끝을 나타낸다.

<li></li> : 목록의 각 항목을 나타낸다.

<dl></dl> : 설명 목록의 시작과 끝을 나타낸다.

<dt></dt> : 설명 목록의 이름(제목)을 나타낸다.

<dd></dd> : 설명 목록의 값(설명)을 나타낸다.

※비주얼스튜디오 코드(Visual Studio Code)의 유용한 설정들과 단축키들을 알아보도록 하겠습니다.

이제 시작하는 단계이기 때문에 전문적인 세팅보다는 사용하기 편리한 기능들 위주로 정리해 두었습니다.

목차

1. 기본 설정

2. 확장(Extensions) or 플러그인 or 패키지 설치

3. 단축키

1. 기본 설정

[파일]→[기본설정]→[설정]으로 들어가거나 cmd + , 를 누른다.

@Auto Save

옵션을 onFocusChange로 바꾸어 에디터에서 포커스가 벗어나는 순간 작성내용이 자동으로 저장되도록 하는 기능.

- cmd + S를 누르지 않아도 터미널에서 바로 변경된 내용으로 컴파일을 할 수 있다.

@Tab Size

- 탭을 눌렀을 때 입력 될 공백 수 설정이다. 기본값 4로 설정되어 있다. 

@Font Size

-  cmd +,- 로 View의 전체 배율을 변경하는 것과 달리 코드의 폰트 크기만 조절한다. 기본값 12로 설정되어 있다.

@format on save

- 저장할 때 자동으로 포맷을 정리해 주는 기능.

2. 확장(Extensions) or 플러그인 or 패키지 설치

3. 단축키

@기본 편집 단축키

@편집 단축키

@파일 관리 편집 단축키

@언어 편집 단축키

@확장프로그램 단축키