웹문서를 제작하는 단계는 크게 세 가지로 구분할 수 있습니다.
이 세 가지는 웹문서의 제작의 이해를 위해 알고 있으면 무슨 작업을 해야 할지 도움이 되리라 생각됩니다.
가장 먼저 진행하는 작업은 구조입니다. html 태그를 이용해 문서를 만들고 마크업 하는 것이 이것에 해당합니다.
다음 작업은 표현입니다. 마크업된 html 요소에 크기를 정하고 색상을 입혀 꾸미는 작업을 하는 것입니다. 바로 이 작업을 css가 담당하게 됩니다.
그리고 최종적으로 동작을 제어하는 작업입니다. 마우스를 요소 위로 올린다던가 클릭한다던가 자동으로 사라지는 애니메이션을 작동시킨다던가 하는 움직임이 들어가는 작업이 이것에 해당합니다. 이것을 담당하는 것은 자바스크립트입니다.
사실 위 세 가지 방식은 일부 겹치는 부분이 있습니다. html이 일부 표현을 하기도 하고 javascript도 표현에 참여할 수 있습니다. 또한 CSS가 일부 동작을 하기도 합니다. 그러다 보니 작업을 하다 보면 css로 할 것을 javascript로 하기도 합니다. 하지만 기본적 세 가지 단계는 각각에 기능에서 해주는 것이 좋습니다. 어쩔 수 없는 상황이 아니라면 말이지요
한 가지 더 팁으로 말씀드리자면 javascript는 가능한 줄이는 것이 좋습니다. css로 해결할 수 있는 상황이라면 css로 처리하는 것이 웹문서를 최적화하는데 도움이 될 수 있습니다.
지금부터 진행할 css강좌는 그러니 표현을 담당하게 될 것입니다.
css는 Cascade Style Sheet의 약자입니다. 연속화 방식 자료표 정도로 해석될 듯싶습니다. 즉 웹문서 요소의 표현을 연속적으로 나열한 시트(자료표?) 정도로 이해하면 될 것 같습니다.
html 기본강좌에 간혹 보여드린 예로 설명드리겠습니다.
<body>
<h1>이문열 삼국지</h1>
<h2>책 소개</h2>
<p>젊은 세대를 위해 내용을 손보고, <span style="font-size: 1.2em; font-weight: bold; color: red;">한자어 독음을 달아</span> 읽기 쉬운 『삼국지』</p>
</body>
위 웹문서의 span 태그의 style 속성을 보게 되면
"font-size: 1.2em; font-weight: bold; color: red;" 나와 있는 것을 보실 수 있습니다. 세미콜론(;)을 기준으로 나누어 보면
font-size: 1.2em;
font-weight: bold;
color: red;
이렇게 표시되고 "속성:값;"의 형태가 연속적으로 나열되고 있습니다.
font-size는 글자의 크기를,
font-weight는 글자의 두께를
color는 글자의 색상을 표현하는 것입니다.
다시 풀어서 설명하자면 span으로 둘러싼 부분("한자어 독음을 달아")의 글자 크기를 "1.2배로 키우고 두껍게 하고 붉은색으로 표현해라"라고 웹브라우저에게 알려준 것입니다.
'강좌 및 설정 > CSS 기본 강좌' 카테고리의 다른 글
| CSS 선택자 네번째 (그룹 선택자) (1) | 2022.12.09 |
|---|---|
| CSS 선택자 세번째 (결합자) (0) | 2022.12.08 |
| CSS 선택자 두번째 (class 다중 적용) (0) | 2022.12.07 |
| CSS 선택자 첫번째 (기본 선택자와 우선순위) (0) | 2022.12.04 |
| CSS 적용 방식 (0) | 2022.12.01 |