CSS (Cascading Style Sheets)는 웹페이지를 다양하게 꾸미는 데 필요한 코드입니다.
HTML과 같은 마크업 언어가 아닌 스타일을 적용할 수 있는 스타일시트 언어인 것이죠
각각의 요소가 어떻게 구성하는지 잠깐 살펴보자면
전체구조는 rule set 이라고 부릅니다.
각 요소들은
- 선택자 (selelctor)
맨 앞에 있는 요소 이름입니다. 위의 예제에서는 p 인것이죠
다른 요소를 꾸미기 위해서는 다른 선택자를 사용하면 됩니다.
p 대신에 p, li, h1 이렇게 말입니다
- 선언 (declaration)
color: red; 와 같은 규칙을 코딩하는 것이며 다양한 요소의 속성과 속성값 등을 기술합니다.
- 속성 (property)
rule 내에서 영향을 줄 속성을 선택합니다. 이 예에서는 color가 되겠죠?
- 속성 값 (property value)
속성의 오른쪽인 콜론(:)의 뒤에 다양한 속성 값을 기술합니다. 여기서는 red 가 됩니다.
( 룰셋을 만들 때 주의해야 하는 규칙 )
- 룰셋(rule set)은 반드시 { } (중괄호)로 감싸게 됩니다.
- 각 속성(property) 을 해당 값과 구분하기 위해 콜론(:)을 사용합니다.
- 각 선언(속성,속성값)을 다음 선언과 구분하기 위한 구분자는 세미콜론(;) 사용합니다.
(첫번째 예시)
p {
color : red;
width : 200px;
border : 1px solid black;
}
(두번째 예시)
p, li, h1, h2 {
color: red;
}
(참고1) 클래스 선택자 (Class Selector)
.myClass 클래스 선택값이 myClass으로 지정된 요소를 선택합니다.
/* CSS */
.class1 { background: yellowgreen; color: darkgreen; }
div.class2 {background: darkgreen; color: yellowgreen; }
<!-- HTML -->
<p class="class1">클래스 선택자</p>
<p class="class2">클래스 선택자</p>
<div class="class2">클래스 선택자</p>
(참고2) ID 선택자 (ID Selector)
.id 속성값이 myId로 지정된 요소를 선택합니다.
/* CSS */
.id1 { background: yellowgreen; color: darkgreen; }
div.id2 {background: darkgreen; color: yellowgreen; }
<!-- HTML -->
<p class="id1">아이디 선택자</p>
<p class="id2">아이디 선택자</p>
<div class="id2">아이디 선택자</p>
* 클래스, 아이디 선택자는 어떻게 사용되나?
한 페이지 내에서 여러번 반복될 필요가 있는 스타일은 클래스선택자를 사용하고, 단 한번 유일하게 적용될 스타일은 아이디선택자를 사용하는 것이 좋습니다.
다음은 실제 예를 들어서 설명하겠습니다.
어떤 문단의 요소들안의 글자를 red로 바꾸고자 할 때 이렇게 사용합니다.
이런 문구를 HTML에도 삽입해 사용하기도 하지만 일반적으로 버려도의 CSS파일을 만들어 사용합니다.
style.css 라고 해보겠습니다. 이 파일을 저장합니다.
그리고 HTML 파일에서 해당되는 style.css를 호출하여 사용해 보겠습니다.
<html> 과 </html> 사이의 <head> 와 </head>사이에
아래와 같은 코드를 넣습니다.
그러면 브라우져에서 아래와 같은 결과가 나옵니다.
또는 간단한 CSS 내용이라면 style.css 파일을 별도로 분리하지 않고 아래와 같은
<style> 태그를 다수 <head> 태그 사이에 넣고 사용해도 결과는 동일합니다.
결과는 똑같습니다
이것은 인라인스타일(inline) 이라고 표현할 수도 있는데 예를 들어 HTML페이지의 태그에 직접적으로 스타일을 기술해주는 것으로
<h1 style="color:blue; margin-left:30px;">What is this?</h1>
이런 형태는 디자인을 바로 적용할 수 있는 장점은 있지만 가독성과 일관된 디자인 스타일을 유지하는데 방해가 되기 때문에 반드시 필요한 경우가 아니라면 이런 형태의 태깅은 일반적으로 권유하지 않습니다.
전체적으로 테스트가 아닌 어느정도 조금이라도 일반적인 스타일 시트의 내용은 최소한 다음과 같은 정도는 됩니다.
이 샘플은 brackets 도움말 페이지에서 사용하는 CSS 입니다.
이것을 사용한 완성된 html 페이지는 다음과 같습니다.
무엇인가 가지런한(?) 모습이죠
여기서 CSS를 없애버리고 아무런 style sheet를 사용하지 않으면 어떻게 될까요?
다시 보면 이렇습니다.
내용상 해당되는 텍스트를 모두 보여주고는 있으나 무엇인가 가지런하지(?)는 않은 느낌이죠
그래서 개인홈페이지를 만들거나 블로그같은 페이지에서는 너무나 당연하게 스타일시트를 사용해야 하는 것입니다.
style sheet를 구성하는 요소는 굉장히 많습니다만
여기서 개발자 입장에서 그것을 모두 알 필요가 없으며 디자이너도 모르는 태그는 찾아서 맞춰가면서 태그코딩을 하면됩니다. 사실 개발자들도 수많은 개발 API 함수와 개발 라이브러리를 모두 알지 못합니다. 그져 어떻게 호출해서 사용하는가를 알아가는 것이 시작이며 그렇게 하나하나 찾아가는 것이 일이 되는 것입니다
마지막으로
CSS를 사용하는 가장 큰 이유는 이와같은 폰트같은 요소항목에 대한 설정도 있지만
정말 중요한 것은 전체적인 폼(form)을 만들어주는 역할이 그것입니다.
즉 html의 전체적인 형태를 만들어주는 역할이 가장 크다 할 것입니다.
- padding : 컨텐트 주의 공간값
- border : padding 바깥쪽의 실선값
- margin : 요소 바깥쪽을 둘러싼 공간값
- width : 요소의 너비
- background-color : 요소의 컨텐츠와 padding의 배경색
- color : 한 요소의 글자색
- text-shadow : 한 요소안의 글자 그림자
- display : 요소의 표시 형식
(페이지 전체의 색을 바꾸고 싶을 때)
html {
background-color: #00943F;
}
(설명 : 이것은 전체 페이지를 위한 배경색을 바꾸어 줍니다.)
(body 외부를 정렬할 때)
body {
width: 500px;
margin: 0 auto;
background-color: #FF9400;
padding: 0 30px 30px 30px;
border: 5px solid black;
}
(설명)
- width: 500px; ---> body가 항상 500픽셀의 너비를 갖도록 설정
- margin: 0 auto; ---> margin 또는 padding처럼 한 속성에 두개의 값을 설정할 때 첫번째 값은 요소의 상단과 하단(여기서는 0)으로 설정하고 ,두번째 값은 좌측과 우측 (auto는 가능한 수평공간의 왼쪽과 오른쪽을 같게 나눠주는 값)을 설정합니다.
- background-color: #FF9400; ---> 이것은 배경색을 설정합니다.
- padding: 0 30px 30px 30px; ---> padding에는 위의 그림설명에도 나와있듯이 컨텐츠 4방향의 약간의 공간에 값을 주기위한 것입니다. 상단은 no padding이며 놔, 우, 하단은 30픽셀로 설정합니다
(순서는 상단 우측 하단 좌측 순서임. 이것은 시계방향으로 순서를 매긴다고 생각하면 쉽게 이해)
- border: 5px solid black; ---> body의 외부 border 모든 선을 5픽셀의 실선으로 설정
(메인 페이지 제목 설정하기)
h1 {
margin: 0;
padding: 20px 0;
color: #00539F;
text-shadow: 3px 3px 1px balck;
}
(설명)
바디 상단의 틈을 제거하기 위한 padding: 0; 설정으로 해결하였고
padding 값을 통해 제목의 상단과 하단을 설정하고
제목 글자색을 html 배경색과 동일하게 설정하였으며
text-shadow를 사용하기 위해 차례대로 값을 적용한 것으로
픽셀값 첫번째부터 순서대로 (수평오프셋) (수직오프셋) (흐림반경) (기본색상)을 설정한 것입니다
(이미지 가운데 정렬하기)
여기서 부터는 난이도가 올라가는 부분으로 참조만 하시고 나중에 더 알게되서 이해하면 되겠습니다
img {
display: block;
margin: 0 auto;
}
body요소는 block레벨입니다. 이것은 페이지의 공간을 차지하고 margin과 여기에 적용된 다른 여백값을 가질 수 있다는 것을 의마합니다. 반면에 이미지는 inline요소입니다. 이것은 그렇지 못함을 의미합니다.
그러므로 이미지에 margin을 적용하기 위해서는 display: block;을 사용해 이미지에 block-level을 설정해 주어야 합니다.
아마도 dispay: block; 그리고 block-level과 inline등의 차이를 이해하려면 조금더 CSS를 공부해야 할 수 있습니다.
(추가 예시 설명과 실제 브라우져 화면 예시)
<html> 태그내에서 아래와 같이 CSS를 사용하기도 하며 각요소에 대한 설명은 다음과 같다
<head>
<style>
p{
color : red; <!--여기 아래에 태그를 집어 넣어주면 되요~!! -->
font-size : 30px;
font-family : cursive;
text-align : center;
text-shadow : gray 2px 2px;
}
</style>
</head>
<body>
<p>Hello World<p>
</body>
* CSS 태그 예시 *
(1) color 태그 : 글자의 색을 변경해줌, color : #ff0000; 사용가능
p{
color : red;
}
(예시)
(2) background-color : 배경색을 입혀준다
p{
background-color : red;
}
(예시)
(3) font-size : 폰트 글씨 크기
p{
font-size : 30px;
}
(4) font-family : 폰트 글씨체
p{
font-family : cursive;
}
(5) text-align : 위치정렬 (right, center, left)
p{
text-align : center;
}
(6) text-decoration : 밑줄 없애기, 링크 밑줄 없앨때 주로 사용
p{
text-decoration : none;
}
(7) text-shadow : 글짜에 그림자 만들기
p{
text-shadown: red 2px 2px;
}
(8) margin : 문자 위치 조절 , 이미지 위치 조절
p{
margin-top : 50px;
}
(9) border : 문자등에 테두리를 입힌다 (테두리색, 테두리종류, 테두리 크기 등)
p{
border : black solid 1px;
display : inline;
}
마지막으로 코딩하는 CSS에서 알아야 할 것은 우선순위 적용에 대한 이해입니다.
스타일시트를 수정하다 보면 내가 원하는 것을 설정했는데도 먹지 않는 다는 것이고
이것은 상당한 확율로 CSS 적용 우선순위에 관련있을 수가 있습니다.
결론적으로 우선순위는
브라우져디자인 정의 => 외부스타일시트 => 내부스타일시트 => 인라인스타일시트
다시말해 인라인스타일시트가 우선순위가 가장 높다는 의미입니다.
상위태그에서 정의된 디자인 속성은 하위태그로 상속되나
하위태그에서 상위태그에 정의된 디자인 속성을 변경할 수 있습니다.
[부트스트랩 = HTML, CSS, JS 프레임워크]
끝으로 실무에서 주로 사용하는 CSS인 부트스트랩에 대해서 잠깐 보고 가겠습니다.
웹페이지를 만들기 위한 CSS도 자주 사용하는 요소들이 있을 것이고 미리 좀 더 가지런하게(?) 만들어 놓은 그런것이 바로 부트스트랩이라고 합니다. 이것은 웹 프론트개발에서의 구조를 미리 만들어준 프레임워크입니다.
부트스트랩은 각종 버튼 ,테이블, 입력창 등 여러가지의 CSS 스타일과 레아이웃 정렬을 class만으로 제어할 수 있으며 웹개발을 진행할 시에 개발의 완성물을 통일시키기 위해 초기에 공통 CSS 프레임워크를 정하고 개발을 시작하는 경우가 있습니다.
자세한 것은 아래 링크를 참조해 주세요
부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크.
프리프로세서 부트스트랩은 평범한 CSS 로 제공합니다만, 그것의 소스코드는 2개의 인기있는 CSS 프리프로세서인 Less 와 Sass 를 사용합니다. 신속하게 프리컴파일된 CSS 로 시작하거나 소스를 빌드
bootstrapk.com
'테크노트 > css' 카테고리의 다른 글
| CSS 포지션(position) (0) | 2022.05.10 |
|---|---|
| CSS 디스플레이 타입 (display types) (0) | 2022.04.29 |
| CSS에서 사용하는 크기조정(Pixels, rem, em) (0) | 2022.04.06 |
| 초보개발자가 알아야 하는 CSS 기초 (0) | 2022.01.07 |
| CSS의 확장, 부트스트랩(bootstrap) (0) | 2021.11.05 |
댓글