제가 쓴 책175 8. 배경(Background)과 경계(Border), 여백 8. 배경(Background)과 경계(Border), 여백 여러분이 HTML5에서 배경, 경계, 여백을 이해하기 위해서는 기본적으로 HTML 요소들을 웹 브라우저를 나타낼 때 어떻게 나타내는지 아는 것은 학습에 대단히 도움이 됩니다. HTML 요소들이 웹 브라우저에 표현될 때 직사각형 영역 안에 나타내며 해당 영역 안에는 컨텐츠(내용)가 들어가는 직사각형 형태가 존재하게 됩니다. 그래서 요소 내부에는 직사각형 형태의 컨텐츠와 요소에 해당하는 직사각형 사이의 여백을 padding이라고 하고 이를 상, 하, 좌, 우로 구분하여 나타내면 아래 그림과 같이 나타낼 수 있습니다. 다음으로 요소의 경계(border)를 실선(solid line)으로 나타낼 지 아니면 점선(dotted line)으로 나타낼 지 등을.. 2013. 8. 4. 7.7 Text Decoration 7.7 Text Decoration 텍스트에 효과를 주는 방법은 현재 정의된 명세에는 크게 선을 긋는 형태인 text-decoration 속성과 텍스트를 강조하는데 사용하는 text-emphasis 속성 그리고 텍스트에 그림자 효과를 주는 text-shadow 속성이 있습니다. 첫 번째 text-decoration은 또 세부적으로 들어가면 선의 색상이나 실선인지 점선인지 등을 설정하는 세부 속성들로 구분할 있는데 현재는 선을 긋는 형태만을 대부분에 브라우저에서 지원합니다. 다음으로 텍스트를 강조하는데 사용하는 text-emphasis 속성은 특정한 경우(Webkit 이용)을 제외하고는 지원이 되지 않으므로 여기서는 생략합니다. 마지막으로 텍스트에 그림자 효과(Shadow Effect)를 주는 방법에 대해.. 2013. 8. 4. 7.6 text-indent 속성을 이용한 들여쓰기 7.6 text-indent 속성을 이용한 들여쓰기 text-indent 속성은 단락(paragraph)이나 이와 유사한 형태의 요소들에 들여쓰기를 적용하거나 텍스트의 첫 줄에 들여쓰기를 사용할 수 있도록 하는 속성으로 다음과 같은 형식으로 사용할 수 있습니다. selector { text-indent: 속성값 } 속성값에는 px, em 같은 길이의 단위가 올 수 있고 % 형태로 사용이 가능하며 둘 중 하나를 명시하면 기본적으로 첫 줄에 들여쓰기가 적용됩니다. 메모장을 열어 HTML5의 기본적인 코드를 작성하고 다음과 같이 해당 부분을 작성합니다. … 대한민국은 민주공화국이다. 대한민국의 주권은 국민에게 있고, 모든 권력은 국민으로부 터 나온다.-헌법 1조 We give advice, but we we .. 2013. 8. 4. 7.5 문장 내 간격(Spacing) 처리하기 7.5 문장 내 간격(Spacing) 처리하기 문장이나 단락 등을 보면 사용자들에게 보여지는 글자나 단어들을 잘 알아볼 수 있도록 하기 위해서 글자 혹은 단어들 간의 간격을 조정해야 하는 경우가 있습니다. CSS3에는 이에 대해서 word-spacing, letter-spacing 속성을 이용하여 각각 단어, 글자에 대해서 간격을 조정할 수 있습니다. 7.5.1 word-spacing 속성을 이용한 단어 사이의 간격처리 word-spacing 속성을 이용하면 여러분들은 단어 내에 포함된 단어들 간의 간격을 조정하는데 사용되는 속성으로 다음과 같은 형식을 사용합니다. selector { word-spacing : 단어간 간격값 } 단어간 간격 값으로는 자동적으로 정해지는 normal 값과 앞서 수치 표현에.. 2013. 8. 4. 이전 1 ··· 13 14 15 16 17 18 19 ··· 44 다음
