📗
CSS 기본 문법
자, 이제 웹페이지를 더욱 예쁘게 꾸미기 위해 CSS에 대해 조금 더 깊게 들어가보겠습니다.
CSS에는 두 가지 부분이 있습니다. 브라우저에게 무엇을 바꾸고 싶은지 명령을 내리는 부분, 그리고 브라우저에게 어떻게 바꾸고 싶은지 명령 내리는 부분이 있습니다. 예제를 이용해 함께 보도록 하겠습니다.
CSS 부분을 보시면 아래와 같이 적혀있습니다.
body {
color: blue;
}
위에 적인 부분을 나누어 보자면,
body: 브라우저에게 무엇을 바꾸고 싶은지 명령하는 부분입니다.color: blue;: 브라우저에게 어떻게 바꾸고 싶은지 명령하는 부분입니다.
무엇을 어떻게 바꾸고 싶은지와 더불어 몇 가지 문법적인 규칙도 존재합니다. 다음과 같이 CSS에 추가해보세요.
body {
color: red;
font-size: 30px;
}
화면의 글씨 크기가 커진 것을 볼 수 있습니다. 어떻게 바꾸고 싶은지를 표기하는 부분의 각 줄은
;(세미콜론)으로 끝나도록 되어있습니다. 그리고 바꾸고 싶은 내용을 적은 부분은 {와 } 사이에 감싸져 있습니다.만약에
h1에 해당하는 요소만을 검은색으로 변경하고 나머지 텍스트는 파란색을 유지시키고 싶다면 어떻게 해야할까요?CSS로 무엇을 어떻게 바꾸고 싶은지 적어주시면 됩니다. 기존의 CSS 코드 전체를 아래와 같이 수정해보세요.
h1 {
color: black;
font-size: 30px;
}
h1 요소는 이제 우리가 원하는대로 검은색이 되었습니다. 하지만 나머지 텍스트들은 더 이상 파란색이 아닙니다. 나머지 요소들도 파란색으로 변경해달라고 CSS를 적어보겠습니다.h1 {
color: black;
font-size: 30px;
}
li, p {
color: blue;
font-size: 30px;
}
이제 우리가 원하는대로 모두 색깔이 변경되었습니다. 그런데 웹디자이너가 찾아와서 "헤더 텍스트(h1)를 조금 두껍게 해줄 수 있을까요?"라고 물어봅니다. 구글에 CSS로 텍스트 두께를 조정하는 방법을 찾아보시고 한번 해보세요.
그리고 또 다시 웹디자이너가 찾아와, "첫번째 리스트 요소만 글씨 크기를 작게 20px로 해줄 수 있을까요?"라고 말합니다.
여러 가지 방법이 있지만,
id 속성을 이용하여 우리는 해결할 수 있습니다. 여러분이 스타일을 수정하고 싶은 요소에게 id 속성 값을 아래와 같이 주세요.<html>
<head></head>
<body>
<h1>바닐라코딩</h1>
<ul>
<li id="first">HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
<p>함께 열심히 공부해보시죠!</p>
</body>
</html>
이제 우리는 CSS에서 해당
id 값을 이용해 요소를 선택하고 우리가 원하는 스타일을 적용할 수 있습니다.h1 {
color: black;
font-size: 30px;
}
li, p {
color: blue;
font-size: 30px;
}
#first {
font-size: 20px;
}
CSS에서
id 값을 이용해 요소를 선택하기 위해서는 id 값 앞에 #를 붙여주면 됩니다. 최종적으로 여러분의 코드는 아래와 같이 수정되어 있습니다.다음 단계에서는 요소를 선택하는 조금 더 다양한 방법들을 살펴보겠습니다.
Last modified 1yr ago