HTML로 뼈대를 구성했다면, CSS로는 좀더 디자인 적인 요소들을 설정 할수있다.
문법을 하나하나 공부하기 보다는 아래의 예제를 눈으로 따라가보자.
코딩이라는 것은 직접 해보는 것이 이해하기 쉽다.
1. 기본 문법
먼저, HTML로 아래와 같이 작성해보자. (복사 붙어 넣기로 html 파일에 붙여넣자.)
혹시 HTML을 모른다면, HTML 부터 공부하고 CSS를 시작하자. (HTML 공부 링크 : HTML 태그 기본 문법)
html
<html>
<head>
<!-- css파일(외부)에서 사용하는 방법-->
<!-- <link href="web.css" rel="stylesheet" /> -->
<!-- css내부에서 사용하는 방법 -->
<style type = "text/css">
</style>
</head>
<body>
<p>(p) hello</p>
<p>(p) 반갑습니다.</p>
<p id="id-use">(p id="id-use") 아이디 적용</p>
<div id="id-test1">(div id="id-test1") id 1</div>
<div id="id-test2">(div id="id-test2") id 2</div>
<div class="class-test1">(div class="class-test1") 클래스 1</div>
<div class="class-test2">(div class="class-test2") 클래스 2</div>
<div id="id1", class="class1">(div id="id1", class="class1")</div>
<div id = "item-list">
<p>(p) 첫번째 자식 아이템1</p>
<p>(p) 첫번째 자식 아이템2</p>
<div>
<p>(p) 두번째 자식 아이템1</p>
<p>(p) 두번째 자식 아이템2</p>
</div>
</div>
</body>
</html>
결과
id, class
CSS
<p id="id-use">Hello shoney</p>
<div class="class-test1">클래스 적용테스트1</div>
body 부분에 div, p 태그 내부에 id와 class 값이 들어가있는 것을 확인 할 수있다.
CSS에서 선택자로 선택하기 위해서는 이렇게 id나 class 명을 부여해서 사용한다.
기본 태그 변경
p태그 글자 색상을 변경해보자. HTML에서 사용하는 방법은 <style> 태그를 사용해서 css를 직접 작성 할 수 있다.
CSS
<!-- css내부에서 사용하는 방법 -->
<style type = "text/css">
/* 기본 (p태그) */
p{
color: orange;
}
</style>
결과
p 태그에 색상을 orange로 했을 때, p 태그로 되어있는 글자들은 모두 오랜지 색으로 변경된다.
추가적으로 '*' 을 이용하면 전체 태그에 대해 적용 할 수 있다.
CSS
/* 기본 (p태그) */
p{
color: orange;
}
/* 전체 태그 */
*{
color: green;
}
결과
*(전체) 와 p태그를 동시 적용 했을 때, p태그가 우선순위인 것을 확인 할 수 있다.
#id로 불러오는 경우
CSS
/* id로 불러오는 경우 : # */
#id-use{
color: rebeccapurple;
}
결과
.class로 불러오는 경우
CSS
/* class로 불러오는 경우 : . */
.class-test1{
color: red;
}
결과
,(콤마) 를 이용해 여러개 동시 적용
CSS
/* , (콤마)를 이용해서 여러개를 함께 할 수있다. */
#id-test2 , .class-test2{
color: blue;
}
결과
id VS class 우선순위
두개다 동시 적용한 경우, id의 우선순위가 높은 것을 확인 할 수 있다.
CSS
#id1{
color: black;
}
.class1{
color: coral;
}
결과
하위 선택자, 자식 선택자
지금까지 작성한 css 는 맨위에 있는 html 을 기반으로 수정하면서 설명했다.
너무 상위에 html 소스가 있어서, 다시한번 아래에 작성했다.
하위 선택자와 자식 선택자를 html을 보면서 따라해보자.
html 구조
<div id = "item-list">
<p>(p) 첫번째 자식 아이템1</p>
<p>(p) 첫번째 자식 아이템2</p>
<div>
<p>(p) 두번째 자식 아이템1</p>
<p>(p) 두번째 자식 아이템2</p>
</div>
</div>
하위선택자
띄어쓰기로 표기한다, id가 item-list 의 밑에 있는 모든 p태그에 적용된다.
CSS
/* 하위 선택자 : 아이디 하위에 있는 모든 p에 적용됨 */
#item-list p{
color : red;
}
결과
자식선택자
'>' 로 자식을 선택한다. 바로 아래에 있는 p태그만 적용된다.
CSS
/* 자식 석택자 : 첫번째 자식만 적용됨*/
#item-list > p{
color: blue;
}
결과
2. 자주 사용하는 속성
크기 : width, height
width: 300px; /* 웹에서 px은 크기의 기본 단위입니다 */
height: 30%; /* 부모의 크기 대비 30%를 차지합니다 */
색상 : color, background-color
font-size: 30px;
font-weight: 100;
폰트 : font-size, font-weight
color: red; /* red, blue 등 css에서 이미 예약된 색상입니다 */
color: rgb(255,0,0); /* rgb는 색상을 표현하는 표준 색상값입니다 */
color: #ff0000; /* rgb를 16진수 형태로 표시할 수도 있습니다 */
background-color: red;
여백: margin, padding
margin: 16px; /*상하좌우 모두 margin 16px이 적용됩니다*/
margin-right: 8px; /*오른쪽에 margin 8px을 줍니다*/
padding: 0 8px 0 0; /*순서대로 상 우 좌 하에 padding 값을 줍니다.*/
border: 1px solid #ff0000 /*너비 : 1px, 스타일 : 실선, 색상 : 빨강(rgb)*/