HTML 특수 코드 정리

특수코드 값 실제 표현
 &lt;  < (부등호 꺽쇠)
 &gt;  > (부등호 꺽쇠)
 &nbsp;  ' ' (공백, Space 한칸)
 &amp;  & (앰퍼샌드)
 &quot;  " (큰따옴표 하나)

 

'HTML CSS' 카테고리의 다른 글

HTML 정리  (0) 2022.10.24

HTML

웹표준사이트 http://www.w3schools.com/tags/

Xml : 웹에서 구조화된 문서를 전송할 수 있도록 설계된 표준화된 텍스트 형식

<!doctype html> -> html5로 코딩하겠다(타입 선언)

Doctype – DTD(Document Type Definition) 선언

블록 레벨 엘리먼트 : div, h1~h6, p, hr, ul, li, ol, dl, dt, dd 등 독립적인 형태의 상자를 의미

인라인 엘리먼트 : span, img, a, em, strong 등 마크업할 때 인라인 엘리먼트는 단독으로 마크업 될 수 없고 반드시 블록 레벨 엘리먼트 안에 둘러싸여야 한다.

키워드 지정하기

  • 웹 페이지 홍보의 수단으로 meta 요소를 이용하여 검색 키워드를 지정 할 수 있다.

<meta name=”subject” content = “문서 정보 제공”/>

<meta name=”keywords” content = “키워드, 키워드, 키워드”/>

주소 태그 <address> 작성자 정보 콘텐츠 </address>

하이퍼 링크 <a>  ex) <p><a href=”파일명 또는 URL” target=”_blank” title=”대체설명”> 텍스트 또는 이미지 </a></p>

이미지 <img> ex) <p><img src=”이미지 명” alt=”대체텍스트” /> <p>

Alt 속성은 이미지가 보이지 않는 환경에서 대체 텍스트를 제공하기 위한 목적으로 사용

대체 텍스트를 지정하기 어려운 경우에는 longdesc 속성을 이용

비순서형 목록 <ul>

  • 순서가 중요하지 않은 리스트
  • 여러 계층의 단계를 가진 목록을 작성하는데 사용

<ul> <li></li> </ul> ul안에 li를 같이 사용

순서형 목록 <ol>

  • 순서가 중요한 리스트

정의형 목록 <dl>

<dl>

<dt> 용어제목></dt>

<dd>용어설명</dd>

</dl>

강조 <strong>& <em>

테이블 요소 <table>, <tr>, <th>, <td>

셀병합(colspan, rowspan)

<td colspan=”2”> 열이 서로 다른 2개의 셀을 병합

테이블 제목 및 요약문 <caption> 요소와 <summary>

Caption : 테이블의 내용을 대표할 수 있는 제목을 삽입

Summary : 간단한 제목보다 테이블의 내용이 무엇인지를 설명(시각적으로 테이블 접근이 쉽지 않은 사용자를 위해)

제목셀과 내용 셀의 연관성(scope)

열 그룹 요소<colgroup>

행 그룹 요소<thead>, <tfoot>, <tbody>

폼<form>

<form action=”서버URL” method=”get” 또는 “post”>

폼 요소 그룹화 : <fieldset>

<fieldset>의 타이틀 : <legend>

<labe> 폼을 구조화하고 접근성을 높일 수 있는 요소

명시적 레이블 : <p><laber for=”username”>이름</label><input type=”text id=”username”>

<input> 요소

Type 속성에 사용할 수 있는 컨트롤 값 : text ,password, radio. Checkbox, file, image, submit, reset, button, hidden

인라인 프레임<iframe>

인라인 프레임을 이용하여 콘텐츠를 삽입할 경우에는 iframe요소를 사용

<iframe src=”삽입할 문서” id=”식별자” name=”변수명” width”가로 크기” title=”삽입된 콘텐츠의 성격이나 내용을 대체할 수 있는 설명”> <iframe>  (title 꼭 사용)

<span> 인라인 요소를 그룹화할 때 사용

<article>은 스스로 쓰일 수 있는 내용이라는 점에서 section보다 좀 더 구체적인 의미를 지니고 있음

Article : 내용이 독립적이고 스스로 쓰일 수 있는 내용이라면

Section : 내용이 서로 관계가 있다면 section

Div : 의미적으로 관계가 없다면 div를 사용

<nav> 요소

Nav 태그는 사이트에서 주요한 네비게이션 역할을 하는 링크 그룹을 담을 때 사용

<aside>요소

주요한 내용이 아니라 부차적인 내용을 담는 태그

<canvas> 요소

그래프나 게임 같은 동적인 비트맵 그래픽을 표시하는데 사용

<figure> 요소

책이나 잡지에서 이미지, 차트 등이 나올 때 이를 설명하는 문구와 함께 소개

CSS

사용 예) body {color: gray font-size : small}

Class와 id 선택자

Ex) p.note{color:orange;}

Ul#gnb{list-style-type:none;}

h1[title]{background:#ffff00;}

가상클래스

  • a:link{color:blue;}

A:visited{color:purple}

A[href=[”use”]

선택자

  • 자식 선택자 : 선택자 > 선택자 부모 요소 바로 뒤의 자식 요소
  • 인접 형제 선택자 : 선택자+선택자

선택자 그룹화 : div>p, #wrap, p.note, p, h1[title] {color:red;}

상속(inherit)

a {border:inherit;}

겹침(cascading)

우선순위

스타일의 우선순위 결정 규칙 : 가장 마지막에 지정된 스타일을 우선적으로 적용

단위

  • px(픽셀), em, ex, %

css속성

  • 박스 모델 : 실제 화면에 차지하는 가로 영역 크기 계산기

Width+border+margin+padding

Padding

음수값/ auto값 불가능

Margin

음수값/auto값 가능, 브라우저별로 약간의 마진을 적용하는 경우가 있으므로 초기화 시켜주는 것이 좋음

Inline 사용시 상하 margin 적용안됨(단 display:inline-block으로 바꿔주면 가능) 자와 margin 적용 가능

Margin 겹침 현상

두개 이상의 margin값이 세로 방향으로 만났을 때 하나의 maring으로 합쳐지는 현상

Text-indent : 문단의 첫 줄 들여쓰기

Display:none

Visibility:visible  -> 둘의 차이는 후자는 높이값을 가지고 있음

Z-index(요소박스 겹치는 순서) : position이 있을떄만 유용하게 사용 가능 없으면 있는거에 무시됨

'HTML CSS' 카테고리의 다른 글

HTML 특수 코드 정리  (0) 2022.10.24

+ Recent posts

티스토리툴바