잉고래의 잇다이어리

css 테두리 속성들 css의 border 속성을 사용하면 요소(element) 테두리의 스타일, 너비 및 색상을 지정할 수 있습니다. 지난 css 문법을 다시한번 복습하면 css 구문은 선택자(selector)와 선언블록으로 구성되고 각 선언블록은 속성(property)과 값(value)로 구성된다고 하였습니다. 다시말해 border란 속성은 선택자의 테두리 모양을 지정합니다. border-style 속성 border-style 속성은 4면의 테두리에 어떤 종류의 테두리를 표시할지 지정합니다. 만약 개별 면에 스타일을 주고자 하는경우 border-[각면]-style라고 속성을 지정하면 됩니다. 예를 들어 윗면의 스타일을 지정할 경우 border-top-style의 속성값을 지정하면 됩니다. 예: bor..

css background 속성 CSS의 배경 속성은 요소(element)의 배경 효과를 정의하는데 사용됩니다. 예를들면 div 태그에 background-image 속성을 적용하면 글의 배경으로 이미지를 표시할 수 있습니다. 이러한 배경 속성에는 다음과 같은 것들이 있습니다. background-color : 배경색 background-image : 배경 이미지 background-repeat : 배경 반복 background-attachment : 배경 부착 background-position : 배경 위치 background-color 속성 background-color 속성은 요소의 배경색을 지정합니다. 웹페이지의 배경색은 다음과 같이 설정할 수 있습니다. 컬러 값은 지난번 '3가지 CSS col..

CSS의 색상지정 방법을 알아보자 시작 전에 참고로 이 글은 이전 CSS 학습 글에 이어진다. 이전 글은 학습목차를 참조하도록 하자. 다시 돌아와서 CSS 요소의 색상을 변경하고자 하는 경우, 색상 지정 방법에는 3가지가 있다. 미리 정해진 color의 이름을 속성 값으로 넣거나 RGB 혹은 16진수 값을 속성 값으로 입력하는 것이다. color 이름 - 예) "red" RGB 값 - 예) "rgb(255, 0, 0)" HEX 값 - 예) "#ff0000" color 이름 Red, Green, Blue, Orange, Yellow, Cyan, Black 처럼 정해진 색상 이름을 color 속성 값으로 지정하는 방법이다. 참고로 color 이름은 대소 문자를 구분하지 않는다. 무슨 말이냐면 "Red"와 "..

CSS를 쓰는 3가지 사용법 브라우저는 CSS 즉 스타일 시트를 읽으면 스타일 시트의 정보에 따라 HTML 문서의 서식을 지정한다. 쉽게 말해 스타일에 따라 HTML을 예쁘게 꾸며주는거다. 그러려면 HTML에 스타일을 넣어줘야 하는데, 넣는 곳에 따라서 외부 스타일 시트, 내부 스타일 시트, 인라인 스타일 이렇게 3가지 방법이 있다. 스타일 시트를 HTML에 삽입하는 세 가지 방법을 알아보자. 참고로 이 포스팅은 CSS에 대한 지난 글에 이어지는 글이다. 순서대로 읽어보면 이해하기 편하다. CSS 소개 : CSS는 왜 Cascading Style Sheet일까? CSS가 생겨난 이유 : CSS가 없던 시절의 문제 CSS 문법 소개 : CSS 기초 문법 2가지 구문만 알면 오케이~ CSS의 선택자 1편 :..

CSS 선택자의 다양한 모습들 다시한번 복습하자면 CSS에서 선택자는 스타일을 적용 할 요소를 선택하는 데 사용되는 패턴이다. 지난 '기본적인 CSS 선택자 3가지' 글에서, 선택자는 요소 이름(Element Name), ID, 클래스(Class)와 같은 3가지 기본적 요소들로 선택될 수 있다고 하였다. 하지만 이 외에도 정말 다양한 선택자 정보들로 요소들을 선택 할 수 있는데, 이번 시간에는 그것들이 뭔지 알아보자. 참고로 선택자는 지원하는 CSS 레벨에 따라서 차이가 있다. 참고로 이 포스팅은 아래의 이전 글들에 이어지는 글이다. CSS 소개 : CSS는 왜 Cascading Style Sheet일까? CSS가 생겨난 이유 : CSS가 없던 시절의 문제 CSS 문법 소개 : CSS 기초 문법 2가지 ..

CSS Selector 지난번에는 CSS의 구문 구성을 알아보았다. 다시 복습하면 CSS 문법은 선택자(Selector)와 선언 블록(declaration block)으로 구성됨을 기억하자. 이번 시간에는 선택자에 대해 좀 더 자세히 알아보고자 한다. CSS 선택자(Selector)는 HTML 요소(Element)를 요소 이름(element name), ID, 클래스(class), 속성(attribute) 등에 따라 찾거나 선택하는데 사용된다. 각각의 경우에 따른 선택자 사용법을 알아보자. 요소 이름 선택자 (element name Selector) 요소 선택자는 요소 이름을 기반으로 요소를 선택한다. 한글로 요소라고 써서 좀 헷갈릴 수 있는데 HTML의 태그 요소를 지칭한다. 아래와 같이 쓰면 페이지의..