본문 바로가기

제가 쓴 책/HTML5, CSS3 and JavaScript171

5. 색(Color) 5. 색(Color) 오늘날 컴퓨터 모니터는 수백만 가지 색(color)을 표현할 수 있습니다. 이렇게 엄청난 색들 가운데서 여러분들이 원하는 색을 웹 페이지에 나타내기 위해서는 색(Color)에 대한 기본적인 이해가 필요합니다. CSS3에서 사용할 수 있는 색(Color)에 대하여 W3C에서는 작년(2011) 6월 권고안(Recommendation)을 채택하였고 해당 정보는 “http://www.w3.org/TR/css3-color/”에 있습니다. 위 권고안을 바탕으로 어떻게 색(Color)을 CSS3에서 다룰 수 있는지 알아봅니다. 5.1 색(Color) 관련 속성(Property) 색(color) 관련한 속성으로 HTML 요소(Element)의 내용(content)인 텍스트(text)의 색(colo.. 2013. 8. 4.
4. CSS에서 사용되는 수치(Measurements) 4. CSS에서 사용되는 수치(Measurements) HTML 요소들에 대한 스타일을 설정하다 보면 많이 보이는 것이 pt, em 같은 수치 단위들을 보게 됩니다. 이러한 수치 단위는 HTML 요소의 많은 속성들, 예를 들면 글꼴 크기(font-size), 여백(margin) 등과 같은 속성들에 보통 절대값이나 상대값에 기반한 크기를 사용합니다. 그래서 수치에 대해서 소개하고자 합니다. 먼저 절대값에 기반한 수치 표현을 알아볼까요? 4.1 절대값 수치 특정한 길이(length)나 높이(height)를 다음과 같은 단위로 명시하여 나타낼 수 있습니다. 단위 설명 pixel(px) 픽셀(pixel)은 컴퓨터 화면의 한 점(dot)를 나타냄 point(pt) 1 pt는 1/72 인치(inch)와 같음 pic.. 2013. 8. 4.
3. CSS 적용 우선 순위 3. CSS 적용 우선 순위 여러분은 조금 전 웹 페이지에 어떻게 CSS 코드를 이용하여 스타일을 적용할 수 있는지에 대해서 3 가지 방법을 배웠습니다. 웹 사이트를 만들다 보면 다수의 스타일을 적용하게 되며 3 가지 방법을 혼합하여 상황에 따라 사용하게 됩니다. 그런데 만약 일부 스타일을 중복될 경우 어떻게 내부적으로 처리될까요? 조금 전 3가지 방법을 이용한 결과로 다음과 같이 동일한 결과를 얻었습니다. 이 3 가지 방법에 대한 스타일이 적용되는 우선 순위는 다음과 같습니다. 이제 확인을 위해 메모장을 열어서 다음과 같이 “inlineStyle.html”과 동일한 형태로 코드를 작성합니다. CSS를 이용하는 방법 여러분들이 CSS를 웹 페이지에 적용하는 방법은 태그 블록 내에 직접 CSS 관련 코드를.. 2013. 8. 4.
2.2 필요한 HTML 태그 내에 직접 CSS 코드 입력 방법 2.2 필요한 HTML 태그 내에 직접 CSS 코드 입력 방법 필요한 HTML 태그 내에 직접 CSS 코드를 입력하는 방법은 스타일을 적용할 해당 HTML 태그 내에 style 속성을 이용하여 직접 스타일을 기술하는 방법으로 HTML 문서는 다음과 같은 구조로 되어 있습니다. … 위와 같은 구조를 참고하여 방금 전 “withheadTag.html”의 스타일 적용 결과와 동일하게 결과화면을 보려고 합니다. 이를 위해 메모장을 열어서 위와 같은 구조로 코드를 작성하고 태그 안에 다음과 같이 코드를 작성하면 됩니다. CSS를 이용하는 방법 여러분들이 CSS를 웹 페이지에 적용하는 방법은 CSS를 이용하는 방법 여러분들이 CSS를 웹 페이지에 적용하는 방법은 태그 블록 내에 직접 CSS 관련 코드를 입력하는 방.. 2013. 8. 4.

티스토리툴바