반응형

<blockquote>,<q> 태그 

- 블럭단위의 긴 인용문은 <blockquote> 태그를, 인라인 단위의 짧은 인용문은 <q>  태그를 사용한다

- cite 속성에는 인용한 웹사이트의 URL 주소를 기재.

- title 속성에는 접근성을 위해 글에대한 제목/상세 설명을 기재

<blockquote>를사용하면 티스토리에서는 이렇게 나타낸다

<abbr>,<acronym> 태그

abbr => 축약어 한글자씩 읽는다

acronym => 두문자어 약어를 그대로 발음한다.

 

 

<ins>,<del> 태그

- 인라인 요소 

- 문서에 추가된 내용이나 삭제된 내용을 명시할 때 사용한다.

ex1) <ins>를 사용하면 텍스트 하단에 밑줄이 그어진다.

ex2)<del>을 사용하면 텍스트 중간에 밑줄이 그어진다
    

 

<sup>,<sub> 태그

- 수학 공식에 사용되는 수식이나 원소기호를 나타낼 때 사용하는 윗첨자와(sup) 아랫첨자 (sub )

ex) H2O, 22

 

 

<address>태그

- 블럭요소

- 사용시 기본 이탤릭체가 설정되어있다. 보통 none값으로 사용한다.

ex) 서울시 뭐라구 홍길동 123번지

 

 

 

반응형

'공부방 > Programming' 카테고리의 다른 글

<CSS3> 3강 CSS기본 규칙  (0) 2020.06.10
<CSS3> 2강 CSS단위  (0) 2020.06.09
<HTML5> 7강 img 태그 / <map> 태그  (0) 2020.06.08
<CSS3> 1강 CSS란, CSS 적용 방법  (0) 2020.06.08
<HTML5> 6강 dl, dt, dd 정의형 목록태그  (0) 2020.06.05
반응형

<img> 태그

- image 의 약자

- 이미지를 처리하는 태그이다.
- inline 요소 (하위계층)
- 시작태그로만 구성되어있다.(닫는태그가 없다.)

- width height 값으로 사이즈를 조정할 수 있다.

- alt 값은 그래픽 정보를 접할 수 없는 사람들을 위한 텍스트 정보로 사진에 대한 설명을 기재한다.(의미없는 사진은 x)

- padding 속성을 갖을 수 없다

 

img태그 속성

- src="이미지 경로/파일명.확장자"  (source)

- alt="텍스트정보" (접근성-리더기가 읽는다)

   ex) <img src="이미지경로/파일명.jpg" alt="이미지">
    

css속성을 사용한 배경이미지 처리 

- background:url(이미지의경로) 위치 rpeat값 (repeat/no-repeat/repeat-x/repeat-y)

- top/bottom/left/right/center  px(left) px(top)/% % .

- 아무것도쓰지않으면 left top 을 기본값으로 가진다.

 

a태그를 사용한 링크 이미지

- 이미지태그를 a태그로 감싸면 이미지 태그에 하이퍼링크가 걸린다.

   ex) <a href="도메인주소" target="_blank><img src="이미지경로/파일명.jpg" alt="이미지"></a>

 

 

<map> 태그

- 이미지의 특정 부분을 지정 분할에서 링크를 연결하는 것.. 

- <area> 태그와 함께 사용해야 한다.

- shape는 이미지 크기를 지정한다

 - <map name> 이미지 맵의 이름을 지정한다. 여기 이름이 img태그의 usermap 속성에 사용된다.

 

ex)

<img src="도메인주소"  usemap="#imgMap">

<map name="imgMap">

  <area shape="rect" coords="1, 1, 2, 2" href="도메인주소" target="값" alt="값" />

  <area shape="rect" coords="4, 4, 6, 6" href="도메인주소" />

</map>

 

*맵은 수정중

반응형

'공부방 > Programming' 카테고리의 다른 글

<CSS3> 2강 CSS단위  (0) 2020.06.09
<HTML5> 8강 blockquote/q 태그, abbr/acronym 태그, del/ins 태그, sup/sub 태그, address태그  (0) 2020.06.09
<CSS3> 1강 CSS란, CSS 적용 방법  (0) 2020.06.08
<HTML5> 6강 dl, dt, dd 정의형 목록태그  (0) 2020.06.05
<HTML5> 5강 ul, ol, li 목록태그  (0) 2020.06.02
반응형

CSS란

cascading style sheets의 약자로 소스 구성이나 배치등을 보완하기 위해 개발된 독립적인 언어이다.

html을 바탕으로 사용할 수 잇으며 html이 만든 뼈대위 옷을 입히는 역할로 디자인 기능을 수행한다

문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 하였다.

CSS는 서버가 아닌 웹 브라우저에서 해석되어 화면에 적용되기 때문에 웹 서버의 부담을 줄여주면서도 다양한 기능을 수행할 수 있다.

CSS2 => CSS3 로 넘어오면서 adobe flash 기능을 대체하게 되었으며 css의 기능은 더욱더 확대될 전망이다.

 

 

css 사용

css 를 사용함으로써 웹 문서의 편집을 자유롭게 할 수 있고, 통일감있는 웹페이지를 만들수 있다. 

css 는html과 마찬가지로 소문자로 작성한다.

css 는 <style> 태그안에 작성한다.

css 는 html 태그에 직접 주는 인라인 스타일과 <head> 영역 안에 작성하는 임베디드 스타일, css파일을 만들어 링크로 연결하는 링크드 스타일로 사용한다.

 

 

css 적용 방법

 

1) 인라인 스타일,로컬 스타일 

- HTML 태그에 직접 적용하는 방법이다.

- 가장 직관적인 방법으로 간단한 코딩외에는 거의 사용하지 않는다.

 

2) 임베디드 스타일,페이지 스타일

- <head> 태그안에 적용하는 방법이다.

- 한곳에 코드가 모여있어 작은 업무를 수행할때 쓰는 방식이다.

 

3) 링크드 스타일

- .css 파일을 만들어서 연결하는 것으로 가장 적합한 방법이다.

- 프로젝트 크기가 어떠하든 링크드 방식을 사용하는게 적절하다.

ex)<link rel="stylesheet" href="css/ex.css"> - 태그명(선택자){속성:값; 속성:값; 속성:값: ...}

 

* 한페이지에 css 적용방법을 한번에 모두 동일하게 줄 경우 우선순위는 "우선순위 인라인 스타일>임베디드 스타일>링크드 스타일" 이다

 

정리

* css 는 링크드 스타일을 권장한다.

* css 는 html이 그린 뼈대위에 옷을 입히는 역할로 디자인 기능을 수행하고 있다. 초기에는 단순했던 css가 디자인 적으로 할 수 있는 기능이 많아지고 있다. 때문에 css를 잘 다루려면 포토샵, 일러스트 지식이 있어야한다.

* 이제는 웹 디자이너로써 프로그래밍을 알아야 하며 프로그래머로서 디자인을 알아야한다. 

 

반응형

'공부방 > Programming' 카테고리의 다른 글

<HTML5> 8강 blockquote/q 태그, abbr/acronym 태그, del/ins 태그, sup/sub 태그, address태그  (0) 2020.06.09
<HTML5> 7강 img 태그 / <map> 태그  (0) 2020.06.08
<HTML5> 6강 dl, dt, dd 정의형 목록태그  (0) 2020.06.05
<HTML5> 5강 ul, ol, li 목록태그  (0) 2020.06.02
<HTML5> 4강 a 하이퍼링크 태그  (0) 2020.06.01
반응형

<dl> 

- definition lists 의 약자

- block level element 이다.

 <dl> 태그의 직계 자손은  <dt>, <dd>만 올 수 있다.

- 키워드와 설명으로 구성되는 정의형 목록의 범위를 생성한다.

- 용어 설명에 적합한 태그이다. 

 

<dt>

- definition term의 약자

- 목록의 제목을 나타낸다.

- <dt>요소는 inline요소만 사용 가능하다.

- <dl>태그안에서만 사용될뿐 

- <dt>는 여러개가 와도 상관이 없다.

 

<dd>

- definition description의 약자

- <dt>를 설명하는 태그이다.

- <dt>, <dd> 순서는 상관없다.  계층으로 보면 dt = dd

- 블럭요소 인라인요소 모두 갖을 수 있다.

- default 값으로 40px 들여쓰기가 되어 있다. 

- <dl>태그안에서만 사용된다. 

- <li>태그와 같은 성질을 가지고 있다  .

 

<ol>, <ul> 태그와 과 <dl> 태그와의 차이점

 

중요한 목록안에 서브로 사용할 수 있는 목록 태그.

실무에서 웹접근성에 중요한 리스트를 <ul> 태그로 나타낸다면 보다 중요하지 않은 리스트에 사용함으로써 웹접근성을 향상 시킨다.

 

 

 

 

반응형

'공부방 > Programming' 카테고리의 다른 글

<HTML5> 7강 img 태그 / <map> 태그  (0) 2020.06.08
<CSS3> 1강 CSS란, CSS 적용 방법  (0) 2020.06.08
<HTML5> 5강 ul, ol, li 목록태그  (0) 2020.06.02
<HTML5> 4강 a 하이퍼링크 태그  (0) 2020.06.01
<HTML5> 3강 strong, (b) 강한강조태그, em (i) 약한강조태그  (0) 2020.05.31
반응형

 

<ul>태그

- unorder list 약자

- 순번이 없는 목록태그

- 인라인 요소이다.

- 순번대신 불릿을 가지고 있다.

- CSS 속성에 따라 다양한 형태의 불릿을 표시할 수 있다.  (list-style: circle ,disc, square)

- 실무에서는 불릿이 불편하여 잘 사용하지 않고 (ul{list-style : none})  필요할때는 다른 기법으로 사용한다 (img, background)

- <ul>태그의 직계 자식은 <li>태그만 사용할 수 있다.

 

- 리스트, 네비게이션 메뉴, 캐러셀 등 연관된 콘텐츠가 반복적으로 나열되어 있을 때 자주 사용된다.

 

<ol>태그

- order list 약자

- 순번이 있는 목록태그

- 인라인 요소이다.

- CSS 속성에 따라 1,2,3 abc등 여러 기호로 표시할 수 있다.  (list-style: lower-romanm, upper-roman... )

- <ul>태그의 직계 자식은 <li>태그만 사용할 수 있다.

- 검색어순위 등에 사용된다. ul태그에 비해 상대적으로 사용 빈도가 적다.

 

<li>태그

- 항목을 나열할 때 사용한다. (독립적으로 쓰이지 않고, ul, ol태그와 함께 사용된다.

- 들여쓰기가 되어 있다.

 -<li>요소는 <div>를 제외한 모든 블럭요소를 자식으로 사용할 수 있다

- <ul>,<ol>자식인 <li>태그 안에 또 <ul><ol>태그를 중첩할 수 있다.

   ex1) ul > li > ul    ex2) ol > li > ol

 

정리

목록태그는 계층 수단의 표현으로 사용된다.

순서가 필요한 목록은 ul, 필요없는 경우는 ol 태그를 사용한다. 대부분 ul태그를 사용한다.

실무에서는 불릿과 들여쓰기의 기본 형태를 잘 사용하지 않고 css에서 none을 default 값을 적용하여 사용한다.

 

 

반응형

'공부방 > Programming' 카테고리의 다른 글

<CSS3> 1강 CSS란, CSS 적용 방법  (0) 2020.06.08
<HTML5> 6강 dl, dt, dd 정의형 목록태그  (0) 2020.06.05
<HTML5> 4강 a 하이퍼링크 태그  (0) 2020.06.01
<HTML5> 3강 strong, (b) 강한강조태그, em (i) 약한강조태그  (0) 2020.05.31
<HTML5> 2강 p 단락태그, div 박스태그, span강조태그  (0) 2020.05.30

+ Recent posts

티스토리툴바