본문 바로가기
반응형

웹프로그래밍

13.웹프로그래밍, CSS, 테이블(table) 스타일을 꾸며보는 방법에 대해서 알아볼께요..^^ 블로그목적 CSS관련 테이블에 대해서 공부및 정리후 공유한다. 테이블의 스타일을 변경하려면 어떻게 해야 될까? 정답 CSS 를 사용하면 개선 및 변경이 가능하다. 테이블의 스타일의 속성은? 속성 설명 비고 border-collapse 이웃한 셀의 경계선을 합칠 것인지에 대한 여부 width 테이블의 가로 길이 height 테이블의 세로 길이 border-spacing 테이블 셀 사이의 거리 empty-cells 공백 셀을 그릴 것인지 여부 border 테이블의 경계선 table-align 테이블 셀의 정렬 설정 그럼, 테이블의 스타일을 변화시켜보자! 테이블의 경계 border(경계선) 테이블 뿐만 아니라, HTML 요소의 경계선을 설정할 때 사용하는 중요한 속성임. 속성 스타일 색상 두께 예시 ​​​​​.. 더보기
12.웹프로그래밍, CSS, 리스트(list) 스타일을 꾸며보는 방법에 대해서 알아볼께요 ^^ 블로그목적 CSS관련 리스트에 대해서 공부및 정리 후 공유한다. 리스트 스타일을 한번 꾸며 보아요. 리스트 스타일도 CSS로 지정이 가능함. 속성 속성 설명 비고 list-style 리스트에 대한 속성을 한줄로 설정함. 리스트 항목 마커를 이미지로 지정함. list-style-position 리스트 마커의 위치를 안쪽 or 바깥쪽으로 지정함. list-style-type 리스트 마커의 타입을 지정함 예시 list-style-type : disc, circle, square : decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, .. 더보기
11.웹프로그래밍, CSS, 링크(Link)스타일을 꾸며보는 방법에 대해서 알아볼께요 ^^ 블로그목적 CSS관련 링크스타일에 대해서 공부하고 정리 후 공유한다. 링크(Link)란? 사용자가 클릭하면 정해진 웹 페이지로 이동하는 속성을 가짐. CSS에서는 이런 링크에 대한 스타일도 지정할 수 있음. ​ 링크 스타일에 대해서 알아보자. 링크는 보통 4가지 스타일을 가진다. a:link 방문되지 않은 링크의 스타일 a:visited 방문된 링크의 스타일 a:hover 마우스가 위에 있을 때 스타일 a:active 마우스로 클릭할 때의 스타일 링크 스타일을 설정 시 규칙 주의! 반드시 a:link / a:visited 다음에 a:hover 가 위치해야함. 그리고 a:hover 다음에 a:active 가 위치해야함. 링크의 스타일 설정하기 색상설정 예시 웹브라우저 실행화면 위의 소스코드를 웹브라우저에서.. 더보기
10.웹프로그래밍, CSS, 배경설정은 어떻게 할까요? 궁금하시면 클릭!^^ 블로그목적 CSS의 배경설정하는 방법을 공부하여 정리해본다. CSS를 이용하여 배경설정하는 방법에 대해서 알아볼께요. CSS를 사용하면 요소의 배경을 설정할 수 있어요. ^^ 아래는 배경과 관련된 속성이예요~ 속성 설명 비고 background 한 줄에서 모든 배경속성을 정의함 background-color 배경색을 정의함. background-image 배경 이미지를 정의함. background-position 배경 이미지의 시작 위치를 지정함. background-size 배경 이미지의 크기를 지정함. background-repeat 배경 이미지의 반복 여부를 지정함. 배경색 설정 background-color 배경을 파란색으로 설정하는 예시 3가지 위와 같이 color / rgb / # 으로 설정할.. 더보기
8.웹프로그래밍, CSS, 경계선(border)에 대해서 알아볼께요. ^^ 블로그 목적 CSS관련 경계선에 대해서 공부하고 정리해본다. 경계선(border) 스타일 및 색상을 설정하려면? HTML 요소 경계선의 스타일과 색상을 지정하려면, CSS border 속성을 이용하면됨. ​ 경계선 스타일 border-style 경계선 스타일은 border-style 속성으로 설정할 수 있음. 예시 border-style 로 3D 효과를 발생시키는 설정은? (단, IE는 3D 효과를 지원하지 않음) groove ridge inset outset 상하좌우 경계선을 서로 다르게 설정할 수 도 있음. 예시 위의 예시에서 확인할 수 있는 것과 같이 border-style 속성으로 한번에 상우하좌 스타일을 지정가능함. 경계선 폭 border-width 경계의 폭을 지정하는 속성은 border-wi.. 더보기
7.웹프로그래밍, CSS, 박스모델에 대해서 궁금하시면 클릭 한번 해보세요^^! 블로그 목적 CSS3 박스모델에 대해서 공부및 정리하여 공유한다. 박스모델을 알아보기 전에 CSS3 에 대해서 정리는 하고 갈께요. CSS3에 대해서 알아볼께요. CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc. 직독직해 해보면, CSS는 언어이다 / 구조화된 문서의 표현의 설명을 위한 / (구조화된 문서를 예를들면 HTML, XML 같은) / 화면에 / 종이에 / 기타등등 다시 정리해서 / 제가 이해한 관점으로 잘 정제해서 말씀드리면, CSS 는 HTML/XML 같은 구조화된 문서에 대해서 시각적으로 아름답게(?) 꾸며주고 표현해주는 언어이.. 더보기
6.웹프로그래밍, CSS, 텍스트 스타일 설정에 대해서 알아볼까요? ^^ 블로그 목적 CSS에서 텍스트 스타일 설정에 대해서 공부 및 정리하고 공유해본다. CSS에서 텍스트 스타일 설정에 대해서.. CSS에서는 다채로운 텍스트 장식 기능을 제공함. 텍스트 정렬 텍스트 색상 텍스트 변환 기타 등등. 텍스트 스타일 속성 속성 설명 color 텍스트의 색상을 지정함 direction 텍스트 작성 방향을 지정함. (가로쓰기 / 세로쓰기) line-height 텍스트 줄의 높이를 지정함 letter-spacing 글자 간 간격을 지정함. text-align 텍스트의 수평 정렬을 지정함. text-decoration 텍스트 장식을 지정함. text-shadow 텍스트의 그림자 효과를 지정함. text-indent 텍스트의 들여쓰기를 지정함. text-transform 텍스트의 대소문자 .. 더보기
5.웹프로그래밍, CSS, 폰트 설정에 대해서 알아볼까요? ^^ 블로그 목적 CSS 관련 폰트설정에 대해서 공부및 정리하고 공유해본다. 폰트(font)의 중요성 웹페이지는 텍스트를 통해서 많은 정보를 전달함. 다시말해서, 텍스트의 폰트 스타일은 매우 중요하다고 생각함. 텍스트의 폰트는 페이지 디자인의 절대적인 영향력을 가지고 있음. CSS의 폰트 설정 종류 색상 장식 크기 기타등등 그럼, 폰트의 속성은 무엇이 있을까요? font 한 줄에 모든 폰트 속성을 설정할 때 사용함 font-family 폰트 패밀리 설정 font-size 폰트 사이즈 설정 font-style 폰트 스타일 설정 font-weight 폰트의 볼드체 여부 설정 그럼, 폰트의 종류는? 텍스트 폰트는 위에서 설명한 속성 중 font-family을 이용해서 설정함. font-family 속성을 설정할 때.. 더보기
반응형

티스토리툴바