본문 바로가기
반응형

좋아하는 것_매직IT

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 / # 으로 설정할.. 더보기
9.웹프로그래밍, CSS, 마진(margin)과 패딩(padding) 대해서 알아볼께요. ^^ 블로그목적 CSS관련 마진과패딩에 대해서 공부및 정리후 공유하려고한다. 마진(margin)과 패딩(padding) 대해서 한번 알아볼께요 ^^; HTML 요소 크기 설정 CSS 에서는 모든 요소의 크기를 width / height 속성을 이용 HTML 요소 크기 변경 resize 속성을 both라고 설정하면 양방향 크기 조정 매커니즘을 제공하여 사용자가 요소의 높이와 너비를 모두 조정할 수 있게 함. resize 값 both horizontal vertical none 마진 설정 CSS에서 지정이 가능함. 마진은 음수로 지정될 수 있음. 음수로 지정되면, 요소가 겹쳐 보이게 됨. 웹디자인에서는 이것을 고의적으로 이용하는 경우도 많음. 특히 이미와 텍스트를 나란히 표시할 때 사용함. 값 설명 비고 auto.. 더보기
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 속성을 설정할 때.. 더보기
4.웹프로그래밍, CSS, 색상은 어떻게 표현할까요? ^^ 블로그 목적 CSS색상을 표현하는 방법에 대해서 공부하고 정리해본다. CSS 관련 색상에 대해서 알아볼까요? ^^ 컴퓨터의 색상은 빛의 3원색, 즉 빨간색, 녹색, 파란색을 혼합하여 만들어 짐. 그럼, CSS에서 색상을 표현하는 4가지 방법은 ? 이름 ex) "red" 16진수 ex) #FF0000 10진수 ex) rgb(255, 0, 0) 퍼센트 ex) rgb(100%, 0%, 0%) 16진수로 색상을 나타내는 방법 색상은 기본적으로 16진수 코드로 정의 됨. 16진수 코드 빨간색, 녹색, 파란색 값을 각각 2자리의 16진수로 표시한 것. 가장 낮은 값 0(16진수 00) 가장 높은 값 255(16진수 FF) 하나의 컬러값은 총 6개의 16진수 문자로 되어 있으며, 앞에 #기호를 가지고 있음. 빨간색,.. 더보기
반응형

티스토리툴바