[HTML/CSS] CSS의 LIST속성 본 포스팅은 우선 CSS의 작성법 이해했다는 가정하에 작성되었습니다. 잘 모르겠으면 관련 포스팅을 참조해주세요. ▶관련 포스팅◀ [TIP/Blog] - [HTML/CSS] 폰트 사이즈 단위 [TIP/Blog] - [HTML/CSS] CSS란? CSS의 작성법 [TIP/Blog] - [HTML/CSS] HTML에 CSS를 적용하는 방법!! [TIP/Blog] - [HTML/CSS] 〈OL〉, 〈UL〉목록 태그만들기!! List속성은 앞서 다룬 ", 목록 태그만들기!!" 의 내용과 비슷합니다만 이번엔 HTML이 아닌 CSS로 효과를 주기 때문에 좀더 다양한 형태로 표현이 가능해요. 순서가 없는 은 다음과 같은 효과를 부여합니다. * Disc * Circle * Squ..
[HTML/CSS] CSS의 TEXT속성 본 포스팅은 우선 CSS의 작성법 이해했다는 가정하에 작성되었습니다. 잘 모르겠으면 관련 포스팅을 참조해주세요. ▶관련 포스팅◀ [TIP/Blog] - [HTML/CSS] 폰트 사이즈 단위 [TIP/Blog] - [HTML/CSS] CSS란? CSS의 작성법 [TIP/Blog] - [HTML/CSS] HTML에 CSS를 적용하는 방법!! [TIP/Blog] - [HTML/CSS] CSS의 Font속성 TEXT속성은 문자나 단락을 조절하기 위해 사용합니다. 앞서 다룬 Font의 경우 글자 자체의 형태를 변형하는 속성이였다면 TEXT는 문자의 방향이나 간격등을 설정해주는 속성이에요. TEXT는 다음과 같은 효과를 부여합니다. * Color * Direction * L..
[HTML/CSS] CSS의 Font속성 본 포스팅은 우선 CSS의 작성법 이해했다는 가정하에 작성되었습니다. 잘 모르겠으면 관련 포스팅을 참조해주세요. ▶관련 포스팅◀ [TIP/Blog] - [HTML/CSS] 폰트 사이즈 단위 [TIP/Blog] - [HTML/CSS] CSS란? CSS의 작성법 [TIP/Blog] - [HTML/CSS] HTML에 CSS를 적용하는 방법!! [TIP/Blog] - [HTML/CSS] CSS의 Background속성 Font속성은 글꼴을 설정하기 위해 사용합니다. Font는 다음과 같은 효과를 부여합니다. * Font-style * Font-variant * Font-weight * Font-size * Font-family Font-style 태그 속성 속성값 비고 ..
[HTML/CSS] CSS의 Background속성 본 포스팅은 우선 CSS의 작성법 이해했다는 가정하에 작성되었습니다. 잘 모르겠으면 관련 포스팅을 참조해주세요. ▶관련 포스팅◀ [TIP/Blog] - [HTML/CSS] 웹 문서의 개념 [TIP/Blog] - [HTML/CSS] HTML의 기본구조 [TIP/Blog] - [HTML/CSS] CSS란? CSS의 작성법 [TIP/Blog] - [HTML/CSS] ID속성, CLASS속성 Background속성은 배경효과를 나타내기 위해 사용합니다. Background는 다음과 같은 효과를 부여합니다. * Background-color * Background-imege * Background-repeat * Background-position * Backg..
[HTML/CSS] HTML에 CSS를 적용하는 방법!! 앞선 포스팅에서 웹문서는 "바디" 즉 몸이 되는 HTML과 이를 꾸며주는 "의상" CSS로 구성된다고 했었죠? HTML에서 상용되는 기본 태그들을 다뤄서 몸은 어느정도 만들 수 있게 되었고 이제는 옷을 입혀보도록 해요. ▶관련 포스팅◀ [TIP/Blog] - [HTML/CSS] 웹 문서의 개념 [TIP/Blog] - [HTML/CSS] HTML의 기본구조 [TIP/Blog] - [HTML/CSS] CSS란? CSS의 작성법 HTML에 CSS를 적용하는 방법은 3가지가 있어요. • Inline Style Sheet 태그의 style속성에 CSS스타일을 적용하는 방법이에요. • Internal Style Sheet HTML문서 안에 스타일태그안에 작성..
[HTML/CSS] , 목록 태그만들기!! 흔히 카테고리나 목차 등을 나열 할 때 목록을 표현 하게되죠? 목록태그는 목록의 범위를 나타내는 목록 태그와, 목록의 각 항목을 나타내는 태그가 함께 사용됩니다. 목록 태그는 순서가 있는 목록 과 순서가 없는 목록 이 있어요. 순서가 있는 목록 태그 속성 속성값 비고ol type 표현값 1 / a / A / i / I, 기본값1 start 번호 시작숫자 li type 표현값 1 / a / A / i / I, 기본값1 value 번호 시작숫자 순서가 있는 목록태그는 속성과 속성값을 모두 생략하고 작성할 수 있으며 번호 형식은 숫자를 기본으로 합니다.번호 형식을 지정하려면 숫자"1"은 아라비아 숫자, 소문자"a"는 영어소문자, 대문자"A"는 영어대문자, 소문자아이"..
[HTML/CSS] 표 만들기 태그!!(2) 앞서 태그의 구성에 대해 간단히 다뤘는데 이번엔 태그에 들어가는 속성에 대해 다뤄볼게요. ▶관련 포스팅◀ [TIP/Blog] - [HTML/CSS] 표 만들기 〈TABLE〉태그!!(1) 테이블 태그 태그 속성 속성값 비고 table align 정렬 left / right / center, 기본값left border 숫자 테두리의 두께, 기본값0 bordercolor 색상코드 0000FF, FFFFFF 등등, 테두리 색상 width/height 숫자 표의 너비 / 높이 cellpadding 숫자 셀 테두리와 내용 사이의 간격 cellspacing 숫자 셀과 셀 사이의 간격 background 파일명이나 URL 표의 배경 이미지 삽입 bgcolor 색상코드 000..
[HTML/CSS] 표 만들기 태그!!(1) 일반적으로 문서 작성을 할때 표를 많이 만들어 보셨죠? 웹 문서에서도 표를 만들수 있는데 이때 사용되는 태그는 단순히 표로써의 역할만 하는것이 아니라 문서 구성을 위한 레이아웃을 잡을때도 사용해요. 저 같은경우엔 거의 모든 포스팅에 포함 되어 있을정도로 많이 사용하는 태그에요. 표의 구성 중학교 수학시간에 행열에 대해 배우셨죠? 표는 데이터가 들어가는 셀들이 모여 행과 열을 이루고, 행과 열들이 모여 하나의 표가 완성됩니다. 태그 비고 table 테이블을 선언하는 태그 caption 테이블에 표기하는 캡션 tr 한 행을 구성하는 태그 th 제목셀이며 일반 셀과 다르게 강조되어 나타남 td 일반 셀이며 내용을 구성함 일반적으로 이렇게 속에 혹은 를 넣어 구성을 ..
[HTML/CSS] 움직이는 글자 태그!! 웹 문서에서 글자를 돋보이게 하기 위해 태그를 사용 할 수 있어요. 간판의 "네온사인" 같은 느낌을 낼 수 있지만 사실 요즘에는 gif이미지로 표현 하는것이 훨씬 자유롭고 멋지게 만들 수 있기 때문에 요즘에는 거의 사용하지 않는 태그에요. 마퀴태그 태그 속성 속성값 비고 marquee align 위치 top / middle / bottom width/height 숫자 가로, 세로 보여줄 범위 hspace/vspace 숫자 텍스트 바깥 여백 behavior scroll 가로로 지나감(기본값) slide 한쪽 끝에 닿으면 멈춤 alternate 범위 안에서 왕복 direction 방향 up / down / left / right scrolldelay 숫자 지연속도 ..
[HTML/CSS] 이미지 넣기 태그!! 이미지는 웹 문서를 한눈에 파악하기 쉽도록 해주는 가장 중요한 매체로 웹 페이지에서 텍스트와 함께 가장 많은 부분을 차지하기 때문에 반드시 알고 있어야해요. 이미지 삽입 태그 태그 속성 속성값 비고 img src 파일명이나 URL 이미지 파일의 경로와 파일명 혹은 URL alt 이미지 설명 이미지에 대한 대체 텍스트 border 테두리 지정 테두리선 두께 지정 align left / right 등 정렬 top/middle/bottom/left/right 지정 width 숫자 / % 등 너비 이미지의 가로크기 height 숫자 / % 등 높이 이미지의 세로크기 hspace 좌우 여백 숫자 이미지의 좌우여백 vspace 상하 여백 숫자 이미지의 상하여백 * alt 속..