본문 바로가기
반응형

css

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 속성을 설정할 때.. 더보기
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진수 문자로 되어 있으며, 앞에 #기호를 가지고 있음. 빨간색,.. 더보기
3.웹프로그래밍, CSS, 다중 스타일 시트일 경우에는 어떻게 될까요? ^^ 다중 스타일 시트에 대해서. 하나의 요소에 외부, 내부, 인라인 스타일을 서로 다르게 지정하고 있을 경우 어떤 스타일이 사용될까요? 예를들면, 특정요소에 대하여 외부 스타일과 내부 스타일이 다를 경우 만일 요소를 예를 든다면.. 1. 외부 스타일 color:green 2. 내부 스타일 color:blue 최종적으로 적용되는 스타일은 무엇일까요? 정답 내부 스타일 일반적으로, 모든 스타일 시트는 아래와 같은 규칙 및 우선순위가 적용되며, 하나의 가상적인 스타일로 통합됨. 1. 웹 브라우저 디폴트 값 2. 외부 스타일 시트 3. 헤드 섹션에 저장된 내부 스타일 시트 4. 인라인 스타일 시트 즉, 우선 순위는 4. 인라인 스타일 시트가 가장 높음. 다시말해서, 인라인 스타일은 헤드 섹션에 지정된 스타일이나 외.. 더보기
반응형

티스토리툴바