CSS
CSS 는 HTML 의 색, 크기, 정렬 등을 변경하여 꾸며주는 언어이다.
특성
특성(property) 에는 색, 크기, 정렬 등이 존재한다.
div {
color: red;
color: rgb(0,0,0); /* RGB */
color: #FF0000; /* HEX 값 */
font-size: 20px; /* 글자크기 */
font-weight: 300; /* 글자두께 */
text-align: center; /* 가운데 정렬 */
font-family: arial; /* 글꼴 */
width: 300px; /* 넓이 */
height: 300px; /* 높이 */
background-color: red; /* 배경색 */
border: 1px solid black; /* 테두리 */
border-radius: 5px; /* 테두리의 모서리 둥글게 */
}
CSS
복사
CSS 기본문법
단일 속성 지정선택자{
속성:값;
}
CSS
복사
다중 속성 지정선택자{
속성:값;
속성:값;
속성:값;
}
CSS
복사
CSS 사용방법 3가지
HTML 태그에 입력하기•
태그에 CSS 속성이 바로 기록되어 있어, 별다른 지정이나 연결이 필요하지 않다.
•
가독성이 떨어지며, 유지 보수 측면에서 굉장히 비효율적이다.
<a style=”~”>
HTML
복사
<style> 태그에 입력하기•
태그와 CSS 속성이 HTML 내에서 분리되어 있어서 어떤 태그에 CSS 속성을 적용할지 연결해 주어야 한다.
•
유지보수 측면에서는 유리할 수 있지만 관심사 분리가 안된다.
<head>
<style>
.example {
속성:값;,
속성:값;
}
</style>
</head>
<body>
<div class="example"></div>
</body>
HTML
복사
CSS 파일 분리•
태그와 CSS 속성이 파일로 분리되어 있어 어떤 태그에 CSS 속성을 적용할지 연결해 주어야 한다.
•
코드 가독성이 향상되며 관심사 분리가 가능하다.
[CSS 파일]
.example {
속성:값;,
속성:값;
}
CSS
복사
[HTML 파일]
<head>
<link href="경로" rel="stylesheet" />
</head>
<body>
<div class="example"></div>
</body>
HTML
복사
CSS 선택자
선택자는 CSS 에서 꾸밀 대상 즉, 속성을 줄 대상을 뜻한다.
<style>
/* 전체 선택자 */
* {
속성:값;
}
/* 태그 선택자 */
tag {
속성:값;
}
/* 클래스 선택자 */
/* HTML 에서의 클래스는 아래와 같다 */
/* <div class="class 명"> */
class 명 {
속성:값;
}
/* 아이디 선택자 */
/* HTML 에서의 클래스는 아래와 같다 */
/* <div id="id 명"> */
#[id 명]{
속성:값;
}
/* 가상 선택자 */
선택자:가상상황 {
속성:값;
}
</style>
CSS
복사
선택자는 tag → class → id 순으로 우선순위가 적용된다.박스모델
HTML 의 각각의 태그들은 모두 박스모델의 형태로 이루어져 있다.
margin : 박스의 바깥 여백 (기준: boder) boder : 박스의 기준이 되는 바깥 테두리 선. 선의 두께를 설정 할 수 있다. padding : 박스의 안쪽 여백이다. contents : 박스의 실질적인 내용 부분이다.박스 모델 화면 표시 방법
border-box : border 가 고정되고 contents 의 크기가 변한다. (박스가 고정) 실무에서 권장하는 방식이다. content-box : contents 가 고정되고 border 의 크기가 변한다. (박스가 커짐)정렬
정렬의 속성•
space-between : 아이템 사이에 균일간격 정렬
|——-—————-||—-——-——-—-|•
space-around : 아이템 둘레에 균일간격 정렬
|—-||—-||—-||—-||—-||—-|
|—-||—-||—-||—-||—-|•
spcae-evenly : 아이템 사이, 양 끝에 균일 간격 정렬
|——--||—--—||—--—||—--—|
|—--—||—--—||—--—| Flex•
컴퓨터에서는 대각선으로 이동하지 못한다.
•
flex 의 핵심은 여러태그를 하나로 묶어 정렬하는 데 있다.
•
정렬하는 데 중요한 점은 정렬시 기준이 필요하다는 점이다. flex 는 기준을 부모 박스로 두고 움직인다.
◦
빨간색 박스 : 자식 박스
◦
파란색 박스 : 부모 박스, 내용들을 정렬하기 위해 감싼다.
•
flex 정렬의 핵심은 파란색의 부모 박스 안에 빨간색의 자식 박스를 가로 또는 세로로 나열하고, 부모 박스로 자식 박스들을 정렬하는 것이다.
•
flex 속성
/* 부모박스 */
display: flex;
/* 행기준: row, 열기준: column */
flex-direction: row;
flex-direction: column;
/* flex-direction 기준 수평 방향으로 자식박스 정렬 */
justify-content: center;
/* flex-direction 기준 수직 방향으로 자식박스 정렬 */
align-items: center;
CSS
복사
position•
flex 에 종속 되지 않고, 박스를 개별적으로 위치시킬 수 있다.
/* 박스의 절대 위치 */
div {
position: absolute;
top: 0px;
left: 0px;
}
/* 부모 박스 기준으로 상대위치 */
div {
position: relative;
top: 0px;
left: 0px;
}
/* 화면을 기준으로한 절대 위치 */
div {
position: fixed;
bottom: 0px;
}
CSS
복사
•
화면의 맨 아래에 네비게이션바 고정하기
<!-- 모바일 내비게이션바 화면 하단에 고정하기 -->
<head>
<style>
.wrapper {
position: fixed;
bottom: 0px;
}
</style>
</head>
<body>
<div>
<div class="wrapper">
<div>메뉴1</div>
<div>메뉴2</div>
<div>메뉴3</div>
<div>메뉴4</div>
</div>
</div>
</body>
CSS
복사