CSS
CSS는 Cascading Style Sheets의 약자로 HTML과 같은 마크업 언어가 표현되는 방법을 결정
HTML이 웹 페이지의 구조를 담당한다면, CSS는 구조의 외부와 내부를 꾸미는 역할을 담당
CSS 관련 개발자로서의 역량
-
콘텐츠의 배치와 위치 (레이아웃 디자인)
-
텍스트를 강조하거나 밑줄을 치는 등, 최소한의 타이포그래피 (Typography)
-
정렬이나 배색에 대한 감각
-
UX에 대하여 고민해보고, UX가 잘 적용된 웹이나 앱을 분석해본 경험
CSS의 문법 구성
CSS 스타일 적용하는 방법
<head>
<link rel="stylesheet" href="#1.css" />
<link rel="stylesheet" href="#2.css" />
</head> html문서에서 head 태그 안에서 link 태그의 href 속성을 통해 연결해준다.
-
같은 줄에서 스타일을 적용하는 인라인 스타일
-
CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 style태그 내에 작성하는 내부 스타일 시트
-
그리고 위에 코드에 있는 외부 스타일 시트
관심사 분리 측면에서 외부 스타일 시트를 권장한다.
기본적인 셀렉터 (selector)
id로 이름 붙여서 스타일링 적용하기
#navigation-title {
color: red;
}id가 있는 요소를 선택할 때에는
#기호를 사용
id는 하나의 문서에서 한 요소에만 사용
class로 스타일을 분류하여 적용하기
.menu-item {
text-decoration: underline;
}동일한 기능을 하는 CSS를 여러 요소에 적용하기 위해서 class를 사용
class는 #이 아닌.을 이용해 선택
id와 class의 차이점
| id | class |
|---|---|
| # 으로 선택 | . 으로 선택 |
| 한 문서에 단 하나의 요소에만 적용 | 동일한 값을 갖는 요소 많음 |
| 특정 요소에 이름을 붙이는데 사용 | 스타일의 분류에 사용 |
CSS 주요 속성
색상
.box {
color: #155724; /* 글자 색상 */
background-color: #d4edda; /* 배경 색상 */
border-color: #c3e6cb; /* 테두리 색상 */
}글꼴
.emphasize {
font-family: "SF Pro KR", "MalgunGothic", "Verdana"; //차선은 fallback
}크기
.title {
font-size: 24px;
}
- 절대 단위: px, pt 등
- 상대 단위: %, em, rem, ch, vw, vh 등
기타 스타일링 속성
- 굵기:
font-weight - 밑줄, 가로줄:
text-decoration - 자간:
letter-spacing - 행간:
line-height - 정렬:
text-align - 안보이는 부분 스크롤 :
overflow
CSS 박스 모델
- 줄바꿈이 되는 대표적인 태그(Block): < div > < p >
- 줄바꿈이 되지 않는 대표적인 태그(Inline): < span >
block, inline-block, inline의 특징
| block | inline-block | inline | |
|---|---|---|---|
| 줄바꿈 여부 | 줄바꿈이 일어남 | 줄바꿈이 일어나지 않음 | 줄바꿈이 일어나지 않음 |
| 기본적으로 갖는 너비(width) | 100% | 글자가 차지하는 만큼 | 글자가 차지하는 만큼 |
| width, height 사용 가능여부 | 가능 | 가능 | 불가능 |
박스를 구성하는 요소
border (테두리)
p {
border: 1px solid red;
}margin (바깥 여백)
p {
margin: 10px 20px 30px 40px; // 시계방향으로 설정
}
p {
margin: 10px 20px; // top, bottom 10px left, right 20px
}
p {
margin: 10px; // 모두 10px 적용
}padding (안쪽 여백)
p {
padding: 10px 20px 30px 40px; // padding도 margin이랑 동일하게 적용됨
border: 1px solid red;
background-color: lightyellow;
}레이아웃 할때 주의사항
* {
box-sizing: border-box;
}박스 설정이 다 제 각기 다르면 레이아웃할 때 꼬이기 때문에
전체 설정을box-sizing: border-box로 통일한다.
둔필승총(鈍筆勝聰) - 기억보다는 기록을