본문 바로가기
반응형

좋아하는 것_매직IT/14.css

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. 인라인 스타일 시트가 가장 높음. 다시말해서, 인라인 스타일은 헤드 섹션에 지정된 스타일이나 외.. 더보기
2.웹프로그래밍, CSS, 스타일 시트를 문서에 삽입하는 3가지 방법에 대해서 알아볼까요? ^^ 스타일 시트를 사용해서 CSS를 삽입하는 방법은.. 공부해본바 크게 아래와 같이 3가지 임. 외부 스타일 시트 내부 스타일 시트 인라인 스타일 시트 ​​​​​​​방법1) 외부 스타일 시트 외부 스타일 시트는 말 그대로 스타일 시트를 외부에 파일로 저장하는 것. 외부 스타일 파일은 많은 페이지에 동일한 스타일을 적용하려고 할 때 좋은 방법 외부 스타일 파일을 사용하면, 아래와 같이 전체 웹 페이지의 스타일을 하나의 스타일로 일괄 변경가능함. 외부 스타일 시트를 사용하는 방법은.... 각 HTML 페이지는 link 태그를 이용해서 스타일 파일에 연결해야 함. link 태그는 헤드 부분에 있어야함 샘플코드 #설명 link : 외부 파일과 연결하려면 link 요소를 사용함. type="text/css" : 외부.. 더보기
1.웹프로그래밍, CSS, 선택자에 대한 개념을 잡아 보아요 !! ^^ CSS에서 말하는 선택자에 대해서... CSS 에서 가장 중요한 부분이 바로 선택자임. 그럼, 선택자(selector) 란 무엇일까요? 말그대로, HTML 요소를 선택하는 부분을 말해요.. ^^; W3C 참고 문서 http://www.w3.org/TR/css3-selectors/ 왜 선택자가 필요할까요? 변경하고자 원하는 요소를 선택할 수 있어야 하기 때문에.. 보통, 모든 요소에 동일한 스타일을 적용하는 일은 드문케이스.. 즉, 변경하고자 하는 요소를 선택 후 원하는 스타일을 적용하는게 대부분임. 예시 선택자의 종류는? 주로 사용하는 선택자 타입 선택자(type selector) 아아디 선택자(ID selector) 클래스 선택자(class selector) 이외의 알아두면 좋을 선택자 전체 선택자(u.. 더보기
반응형

티스토리툴바