목차
CSS 배워보기 첫번째 - style 적용하기
목차
1. CSS란 무엇인가
CSS란 웹페이지를 디자인적인 요소를 가미해 꾸며주는 도구라고 생각하시면 쉽습니다. CSS는 Cascading Style Sheets의 약자로 글꼴, 사이즈, 배경색, 위치 등을 지정하는 등의 웹페이지 꾸미기 도구를 말합니다.
하지만 근본적으로 CSS를 사용하게된 이유는 엄청난 수의 웹페이지가 생겨나면서 그 웹페이지들을 개선하고 수정해나가는 과정에서 각각의 페이지의 속성들을 수정하는 것은 엄청난 시간과 노동이 요구되었습니다.(예를 들어 CSS라는 글자의 색을 바꾸라는 지시사항이 떨어졌을 때 만약 그 회사가 운영하는 웹페이지가 3천 개라면 그 3천 개의 웹페이지를 일일이 수정하는 말도 안 되는 작업을 해야 하는 일이 생겨버린 것이죠.)
이때 CSS라는 언어를 사용하면 단한번의 수정사항을 통해 3천 개의 웹페이지가 동시에 수정되는 효과를 얻을 수 있는데 이런 부분이 HTML 5에서 웹페이지의 꾸미기는 CSS에서 다루도록 권장하게 된 가장 큰 이유라 할 수 있습니다.
2. CSS넣어보기 : body
body에 태그로 넣기
<td rowspan="3" style="text-align:center;">스마이트스티치 블로그</td>
위의 태그 안쪽에 style을 적용하는 것은 HTML 5에서 권장되지 않습니다. HTML 문서는 페이지의 구조적인 부분만 담당하는 것을 원칙으로 하고 디자인 적인 요소는 CSS파트에서 온전히 담당하는 것을 권장사항으로 두었습니다.
3. CSS 넣어보기 : head
head에 <style> 태그로 넣기
이런 식으로 <head> 태그 안에 CSS부분을 정의하는데 그 의미는 <td>라는 태그에 { }, 대괄호 사이의 속성 값을 적용하라는 의미의 CSS 문법입니다.
body태그 아래 본문에서 td태그에 해당하는 부분들은 저 CSS의 정의에 의한 속성들이 적용됩니다.
이중 font-size의 단위는 px(pixel, 픽셀)과 em
pixel은 화면을 구성하고 있는 하나하나의 점들을 얘기하며 보통 모니터의 해상도라고 표현하는 부분이 픽셀의 개수가 몇 개로 이루어진 화면을 보는 것인가를 말한다고 생각하시면 되겠습니다.
예를 들어 요즘 여기저기 많이 언급되고 있는 4K라는 해상도는 기술적으로는 가로로 4,096개의 픽셀을 가지는 화면을 말합니다. 자세한 사항은 글이 너무 길어지니 그냥 그렇게만 알고 넘어가겠습니다.
font-size:32px;이라고 정의하면 그 4천여 개의 점 중에서 32개를 사용하라는 뜻이 되는 것이죠.
하지만 그렇게 픽셀로 정의하다 보면 디스플레이마다 해상도가 다르고 콘텐츠 제작사마다 활용하는 해상도가 다를 테니 막상 사용자에게 보이는 크기가 제각각 일수도 있겠죠. 그래서 등장한 것이 em이라는 단위입니다.
em( )은 각각의 클라이언트(사용자)가 사용하는 PC에 기본적으로 설정되어있는 웹브라우저의 디폴트 폰트 사이즈가 있는데 그 웹브라우저의 디폴트 값을 절대 단위로 보고 그 값에 얼마만큼의 비율로 나타내느냐를 결정하는 상대적 단위입니다.
일반적인 브라우저의 디폴트 값은 16 정도이며 그래서 보통 2em이라는 값은 32px정도의 크기를 나타냅니다.
CSS는 여러 가지 속성을 부여할 수 있는데 그 속성들을 부여한 후 세미콜론(;)으로 하나의 속성이 정의되었다는 것을 표시하여줍니다. 위 세 개의 속성 중 맨 마지막 속성 뒤에는 세미콜론을 붙이지 않아도 속성이 적용되지만 그 앞 두 개의 속성 뒤에는 꼭 세미콜론을 넣어주어야 합니다.
4. 실습해보기
테이블을 만들고 각각의 셀에 들어갈 폰트 사이즈, 폰트 종류, 폰트의 위치를 CSS style로 head에서 정의 한 후 내용을 브라우저에서 살펴보면 아래와 같이 적용되는 것을 볼 수 있습니다.
5. 마무으리
티스토리의 경우 CSS부분 등은 스킨을 사용하는 것이 일반적이기에 크게 신경 쓰지 않아도 되는 부분이라 생각하실 수 있습니다만 후에 구글 seo 등을 생각하실 때에 좋은 블로그 글을 위해서 기본지식을 습득해두면 좋은 부분이 많이 있다고 생각합니다.
전문적인 웹디자이너가 아니더라도 자신의 블로그를 위해서도 관심을 가지면 좋을듯합니다. 저도 이제 막 프런트엔드 개발 공부의 첫걸음을 걷게 되었는데 혹시 이런 부분이 궁금하신 분들도 계실듯하여 제가 공부해나가는 것들 중 티스토리 블로그 운영이나 인터넷이 가장 중요한 생활의 기본 수단이 된 이 세상의 필수지식정도의 부분을 포스팅해 나가도록 하겠습니다.
그럼 오늘도 건강하세요. 감사합니다.
'정보통신기술,IT(Information technology) > 프론트엔드,Front-end' 카테고리의 다른 글
| CSS 배워보기 (2) - 크롬개발자 모드 사용해보기 (0) | 2022.12.15 |
|---|
댓글