1013 ul, ol, dl 태그 공부 & 어도비 브라켓 다운로드

1. 브라켓

<어도비 브라켓 다운로드 후 emmet(스마트폰의 앱과 같은 기능) 설치하기>

1. 어도비 브라켓 다운로드 (brackets.io/)

 

2. 브라켓 열었을 때 

맨 오른쪽 상단 블럭 모양 아이콘 들어가서

검색에 emmet 검색 후 다운로드.

emmet은 브라켓에서 단축키의 역할을 함.

emmet은 브라켓뿐만 아니라 모든 에디터에 다 있는 것.

3. 설치 후 브라켓의 왼쪽 상단 메뉴를 보면

도움말 옆에 Emmet이 보이는 것을 확인할 수 있음.

 

<기본적인 준비>

1. 사용할 폴더 준비

2. 브라켓에 끌어다가 놓기

3. 브라켓내 폴더명 바뀜

해당 폴더 클릭 후 마우스 오른쪽 버튼 누르면

Open as Mrackets project 뜸

 

<저장>

1. 파일 열고 새 파일

2. ★저장할 때 확장자명 꼭 써야

메모용도로 쓸 거라면 .txt

홈페이지를 만들 거라면 .html로 저장

 

<에디터 미리보기 기능>

왼쪽 최상단 번개모양 아이콘(블럭 아이콘 바로 위) 누르면 

웹 페이지에서 실시간 미리보기 가능

 

 

2. 수업 

 * 웹 브라우저 : 인터넷 화면을 보여주는 프로그램

(ex : 주요 5대 브라우저 Chrome, Fire Fox, Safari, Opera, Explorer ...)

1) 브라우저는 종류가 많다

2) 사람들이 저 다섯 개를 많이 쓰는구나 

3) ★ 크로스 브라우징(브라우저별 테스트)을 기억해야 한다.

4) 크롬에서 정상적으로 나오면 사파리에서도 제대로 나올 가능성이 높다. 

고로 굳이 맥을 구매할 필요할 필요는 읍다.

5) 그러나 요즘 우리나라에서는 조금 상황이 다름. 

외국에서는 익스플로러가 없는 수준.

한국, 일본만 익스플로러 사용이 높았으나

2019년 기준으로 익스플로러 사용 비중이 5%가 안 됨.

낮은 대신에 우리나라에 한해선 새로운 상황이 생김.

- 스윙브라우저(알약 설치하다가 설치되는 브라우저)

- 웨일(네이버가 만들어서 배포한 브라우저)

따라서 우리나라에선 상황에 따라 스윙브라우저, 웨일 테스트가 필요할 수 있다.

 

* HTML (Hyper Text Markup Language)

: 웹 페이지를 작성하는 언어

웹 문서 / html 문서 / html 페이지 

 

* HTML 언어의 특징

1) "<"와 ">" 사이에 명령어(tag, element) 작성

 

html4

xhtml 1.0

- 우리가 배울 언어

- 기본적인 언어 이해 쉬움

- xhtml 언어로 만든 홈페이지 남아있을 가능성 있어

- 기존 홈페이지 유지 보수할 때 xhtml 문법대로 수정해줘야 하니까

알아둘 필요 있음. 

- <tag(태그) property(속성) = "value(속성값)"

 

html5 

- 실무에서 쓰고 있는 언어 

그런데 아직 5년도 안 됨. 외국은 10년도 넘음. 

- <element(요소) attribute = "value"

- xhtml 문법도 사용 가능 

 

2) 시작태그와 종료태그로 구성

3) 종료태그가 없거나 생략 가능한 태그

- ★ 종료태그가 없는 태그: br, img, hr, meta, input ...

- 종료태그 생략 가능한 태그: 주석, p, option ...

 

4) 반드시 종료 선언(xhtml, html4나 html5는 굳이 필요 없음)

- 종료태그가 없는 태그 : 태그 뒤에 "/"표기

ex) <br> ------------------> <br />

    <img src=""> ----------> <img src="" />

- 종료태그 생략 가능한 태그 : 반드시 종료태그 작성

 

5) 디버깅(버그가 있다고 얘기해주는 것)을 하지 않음

자바스크립트는 오타 하나만 잘못 써도 실행이 안 됨. 

html은 잘못 써도 이해한대로 화면에 결과를 만들어버림.  

6) 반드시 대소문자 구분(xhtml)

- 모든 태그와 속성은 소문자로만 작성

- 그러나 xhtml뿐만 아니라 거의 대부분 소문자로만 작성 

 

7) 문서 상단에 반드시 DOCTYPE(설명서) 선언

 

 

*태그의 형식

<명령어 속성 = "속성값>

<tag property ="value">

<element attribute = "value">

 

 

* 속성의 특징

1) 태그와 속성, 속성과 속성은 공백으로 구분

ex) <a href="#"> --> O

    <ahref="#"> --> X

    

2) 여러 개의 속성을 사용할 수 있지만(A)

ex) A : <img src="/" width="길이" height="높이"> --> O

 

같은 속성을 두 번 이상 사용 불가(B)

B : <img src="/" width="300,400"> --> X

 

3) 하나의 속성에는 값을 한 개만 지정

ex) <img src ="/" width="300, 400"> --> X

 

4) 속성값은 원래의 이름이 한글인 경우를 제외하고 한글 사용 불가

ex) <img width="300"> --> O

    <img width="삼백"> --> X

    

예외 태그 : meta 문서의 속성을 정의하는 태그

<meta name="keywords" content="영화,한국영화,외국영화">

name(질문)하고 content(답) 세트다. 

name이 질문하고 content가 답하는 구조 

name: 어떤 단어 쓸 거야? content: 콘텐트에 있는 단어 검색하면 나갈 거야.

 

5) 속성값에는 "" 생략 가능

(xhtml에서는 생략 불가)

 

 

* 표준화 페이지 기본 형식

 

 

 

head : 문서 속성 담아두는 것

body : 화면에 출력될 내용 담아두는 것

 

 

* 웹 페이지 생성

1. 저장할 때 확장자는 반드시 .html 또는 .htm(실무에서 잘 안 씀)

2. 가장 먼저 보여질 화면의 이름은 반드시 "index.html" ★

따라서 main page - index.html 

sub page - notice.html

search.html

map.html

event.html 

 

 

* 주요 태그(실무에서 자주 쓰이는 것 위주)

1. meta

- 문서의 속성 정의

- head 태그 내에 작성

 

- keywords 검색 키워드 

- description 사이트 설명

 

2. title

- 문서의 제목 정의

- head 태그 내에 작성 

- 스크린 리더기가 가장 먼저 읽어주는 부분 ★

(Screen Reader : 화면을 읽어주는 장치, 화면 낭독기, 소프트웨어 (JAWS, *NVDA Sense(한국이 많이 씀, 실로암 센터가 개발) 앞으로는 TTS라는 형태로 바뀔 예정. Text to speach) 

- 타이틀은 서브메뉴 이름과 똑같다. 듣는 사람이 이해할 수 있게끔 

- 페이지 정보를 미리 알 수 있게 해주기 때문에 중요하다.

- 접근성 항목에도 나와있고 표준성 항목에도 나와있다. 

- 문자셋 보다는 아랫쪽에 ★ 안 그러면 깨지니까

 

3. h(Heading)

- 제목 표시

- h1(큰 제목) ~ h6(작은 제목)

- 줄 바꿈 + 볼드체 적용

- 문단, 단락 등 내용상의 제목 

- 전체 태그 중에 유일하게 레벨이 있는 태그 

 

4. p(pragraph)

- 문단 구분

 

5. br(break)

- 줄 바꿈 

 

entity type : 장치들이 쓰는 글자

&_____;

 

ex) &nbsp;

no break 줄 바꾸지 말고 space 공간 만들어라 

 

ex) &copy; 카피 

 

 

6. 목록 태그

<grouping elements (그룹태그들)>

- ul(Unordered List : 비순차목록, 비정의목록 : 목록 자체에 대한 설명이 없다)

- ol(Ordered List : 순차목록, 비정의목록 : 목록 자체에 대한 설명이 없다)

- dl(Definition List : 정의목록, 목록 자체에 대한 설명 추가)

 

- li(List Item : ol, ul의 항목)

 

- dt(Definition Term: 목록에 대한 정의)

- dd(Definition Description : 정의 목록의 항목)

 

 

- 목록 태그를 좀더 쉽고 편하게 이해하는 방법!

1) Web Developer 다운로드

크롬 웹 스토어에서 

Web Developer를 다운 받는다!

 

 

2) Disable All Styles

그런 다음 검색 엔진에 가서

웹 디벨로퍼를 실행한 뒤 

css 효과를 제거하면 ~

 

 

이렇게 css 효과가 제거된 화면을 확인할 수 있는데

여기서 ul, ol, dl 을 확인할 수 있다. 

 

 

이렇게 순서가 중요하지 않은 목록은

당연히 ul 태그로 묶여있을 것이고,

 

전체 서비스 중에서도

커뮤니케이션에 관련된 목록이 있고

미디어에 관련된 목록이 있다.

 

이렇게 목록에 대한 설명(정의)으로

묶여있는 그룹이 dl인 것. 

 

 

1) ul 태그 활용 

 

 

2) dl 태그 활용 

 

이렇게 태그를 입력한 뒤 미리보기를 하면~

 

 

css 제거한 다음과 똑같쥬? 

a 태그를 넣어서 링크까지 만들어줘도 됨 ㅎ