본문 바로가기

문단을 나누는 P태그 문단을 나누는 P태그 사용법 태그 속성 비고 align="left" 왼쪽정렬 align="right" 오른쪽정렬 align="center" 가운데정렬 align="justify" 맞춤정렬 P태그에서 가장 많이 사용하는 속성은 바로 align(정렬)입니다. left정렬은 항상 default로 적용되어있기때문에 잘 사용하지는 않지만 가운데정렬과 오른쪽 정렬은 종종 사용하는 정렬방식입니다. 지금 제가 운영하고 있는 티스토리에서도 내부적으로 본문의 글을 가운데정렬 시키거나 오른쪽 정렬시킬때 이 P태그의 align속성을 활용해서 정렬을 시키더군요. justify속성은 맞춤정렬인데 맞춤정렬이란 한 문단이 길어져서 화면의 끝에서 자동 줄바꿈이 일어날때 그 가장자리 부분을 일정하게 맞춰주는 정렬방식입니다. 이 P태그의.. 더보기
UI 태그, OL태그, DI태그, LI태그 UI 태그, OL태그, DI태그, LI태그 사용법 속성 태그 비고 목록 태그 UL 글머리 기호를 앞에 붙여 목록을 만드는 형식 OL 번호를 앞에 붙여 목록을 만드는 형식 DL 기호 없이 문단으로 목록을 만드는 형식 LI UI와 OL내부에서 활용되는 태그 1. UL태그는 앞에 글머리 기호를 붙여 목록을 만드는 방식으로 순서가 필요없는 목록을 만들때 주로 사용합니다. 2. OL태그는 주로 순서가 필요한 목록을 만들때 주로 사용하는데 ol type="속성"을 줘 다양한 형태의 목록을 만들 수 있습니다. 또 3. DL는 앞에 기호없이 문단의 여백으로 목록을 만드는 방식입니다. 시작은 제목은 내용은 태그로 설정합니다. 4. LI태그는 UI와 OL태그의 안에 들어가는 태그입니다. 이 LI태그가 UI와OL태그의 실질.. 더보기
하이퍼링크 하이퍼링크 만들기 태그 속성 비고 하이퍼링크 태그 link 방문하지 않은 하이퍼링크의 색상 alink 마우스로 클릭한 하이퍼링크의 색상 vlink 이미 방문한 하이퍼 링크의 색상 href 클릭시 이동시킬 페이지 title 마우스 Over시 나올 링크의 설명 target 이동시킬 페이지의 형태(새창,현재창에서 열기 등등) A태그에는 다양한 속성이 있는데 위에있는 속성들이 대표적입니다. 1. link는 아직 방문하지 않은 링크의 색상을 지정해줄 수 있습니다. 2. alink는 마우스로 클릭시 나타내는 링크색상을 지정해주는 속성입니다. 3. vlink는 방문한적이 있었던 사이트의 색을 지정해주는 속성입니다. 4. href는 그 태그를 클릭할 시 이동시킬 페이지의 주소입니다. 5. title은 마우스를 대고 있.. 더보기
Font 속성 Font 속성/스타일(굵기,기울기,밑줄선,취소선) 설정 속성 태그 비고 글꼴 속성/스타일 글자 굵기 글자 굵기 글자 기울기 취소선 긋기 밑줄긋기 위 첨자 밑 첨자 타자체 주변보다 크게 주변보다 작게 CSS없이 HTML에서 간단하게 구현할 수 있는 여러가지 태그들입니다. 1. 태그와태그는 글자를 진하게 만들어주는 태그로 서로 차이점은 없습니다. 2. 태그는 글자에 기울임을 줘서 이탤릭자처럼 만들어줍니다. 3. 태그는 글자에 취소선을 그어주는 태그입니다. 4. 태그는 글자에 밑줄을 그어주는 역할을 합니다. 5. 와는 각각 그 글자를 위/아래의 작은 첨자로 만들어주는 기능을합니다. 주로 단어의 설명을 기술할때 가끔 사용합니다. 6. 태그는 글자를 타자체로 만들어 줍니다. 7. 태그와태그는 글자를 주변의 폰트크.. 더보기
DIv태그 사용법 오늘은 div태그에 대해 알아보겠습니다. div태그는 Division의 약자로 웹사이트의 레이아웃(전체적인 틀)을 만들때 주로 사용합니다. div는 웹페이지에서 논리적 구분을 정의하는 태그입니다. div 태그를 사용하여 각각의 블록(공간)을 알맞게 배치하고 CSS를 활용하여 스타일을 적용할 수 있습니다. 특히 요즘에는 레이아웃 배치를 거의 Div를 활용해 구성하는 추세이기때문에 그 쓰임새는 더 중요해졌다고 말할 수 있겠습니다. DIv태그 사용법 & 예제 태그 속성 비고 style 스타일 width 가로 크기 height 세로 크기 border 테두리 굵기 background-color 배경 색상 float 정렬 margin 여백 div 속성입니다. 1. style은 태그의 스타일을 지정해주는 것으로 다른.. 더보기
<span>태그 사용법 태그는 아주 다방면으로 활용이 가능한 유용한 태그입니다. 주로 와 태그와 함께 웹페이지의 일부분에 스타일을 적용시키기 위해 사용됩니다. span 태그안에 아무런 컨텐츠가 없다면 해당 부분은 아무런 변화가 없지만 span태그 내부에 객체가 들어가면 그 객체의 크기만큼 공간이 할당이 됩니다. 태그로 요소를 감싸면 CSS나 Javascript로 그 부분을 변형시키는것이 가능해 집니다. 태그 사용법 태그 속성 비고 display diplay요소 변경 width 가로크기 height 세로크기 background-color 배경색 변경 color 글자 색 변경 font-style 글자 형식 변경 margin 외부 여백설정 padding 내부 여백설정 border 테두리 설정 1. display는 태그의 요소를 변경.. 더보기
HR태그 수평선 긋기 HR태그 사용법 태그 속성 비고 태그 수평선 화면 비율/크기 조절 수평선의 색 교체 수평선 크기 조절 HR태그에는 여러가지 속성이 있으나 위의 3가지 속성이 대표적입니다. 1. width속성은 width="500px" 이렇게 크기를 지정하거나 width="50%" 화면에 나타날 비율을 정할 수 있습니다. 2. color은 HR태그의 색상을 설정할 수 있습니다. 3. size속성을 활용하여 수평선의 굵기도 설정해줄 수 있습니다. 예제 문서에 줄을 그어봅시다. 1. 웹브라우저의 종류 1. 1 인터넷 익스플로러 1. 2 파이어폭스 1. 3 오페라 2. 운영체제의 종류 2. 1 Windows XP 2. 2 리눅스 2. 3 맥 OS 더보기
Font 속성 Font 속성/스타일(굵기,기울기,밑줄선,취소선) 설정 속성 태그 비고 글꼴 속성/스타일 글자 굵기 글자 굵기 글자 기울기 취소선 긋기 밑줄긋기 위 첨자 밑 첨자 타자체 주변보다 크게 주변보다 작게 CSS없이 HTML에서 간단하게 구현할 수 있는 여러가지 태그들입니다. 1. 태그와태그는 글자를 진하게 만들어주는 태그로 서로 차이점은 없습니다. 2. 태그는 글자에 기울임을 줘서 이탤릭자처럼 만들어줍니다. 3. 태그는 글자에 취소선을 그어주는 태그입니다. 4. 태그는 글자에 밑줄을 그어주는 역할을 합니다. 5. 와는 각각 그 글자를 위/아래의 작은 첨자로 만들어주는 기능을합니다. 주로 단어의 설명을 기술할때 가끔 사용합니다. 6. 태그는 글자를 타자체로 만들어 줍니다. 7. 태그와태그는 글자를 주변의 폰트크.. 더보기