뼈대를 잡았다면 이제는 살을 붙일 차례!
CSS라는 살을 붙여주자.
CSS
웹 페이지 스타일과 레이아웃을 정의하는 스타일 시트 언어.
왜 필요할까?
개발자들은 컴퓨터 언어를 알았기 때문에 CLI(Command Line Interface)로 자신이 만든 애플리케이션과 소통 가능했다. 컴퓨터 언어를 모르면 사용할 수 없던 것이다.
애플리케이션이 일반 유저가 사용가능하게 만들려면 유저 친화적으로 가야했다. 유저가 보기 좋게 꾸며야 했다. UI(User Interface)라고 유저와 상호작용하기 쉽게 만들었다. UI를 만드는 것은 프론트엔드 개발자의 역할.
CSS 적용하기
보통 html파일과 css파일을 따로 만들어서 적용한다.
// index.css
body {
margin: 0;
background: #fff;
}
header, footer {
text-align: center;
}문법 구성
Selector: body, header, footer로 요소의 이름이나 클래스를 선택하는 것.
선택 후 속성명(marin,background, text-align .etc)과 속성명에 대응하는 속성값(0, #fff, center .etc)같은 value를 적어서 선언한다.
여기서 궁금한 점
background와 background-color의 차이점?
- background-color는 단순히 오직 색만 나타낼수 있다.
예시 -background-color: red;- background 속성은 단축속성으로
background-color,background-image,background-repeat,background-position등 여러 속성을 부여할 수 있다.
예시 - `background:url("mg.url") no-repeat;
CSS 파일을 만들었다면 html과 연결을 시켜야 한다. html 파일 <head> 부분에 붙여넣는다.
<link rel="stylesheet" href="index.css"/><link>는 다른 파일과 연결하는 목적으로 사용. rel은 연결하고자하는 파일의 역할이나 특징, href는 파일 위치를 추가.
selector
보통 많이 쓰이는 셀렉터 id와 class를 구분할 필요가 있다.
css 파일에서 id와 class selector 앞에 붙여 선택하는 기호가 있다. id는 #, class는 .
id는 한 문서에서 고유한 것이고 class는 여러 개의 요소가 같은 이름을 가질 수 있다.
하나의 요소에 여러 개의 class를 쓸 수 있다. 이 class에 각각 css들을 만들어 적용시킬 수 있다.
절대 단위와 상대 단위
절대 단위: px, pt 등
상대 단위: %, em, rem, ch, vw, vh 등
절대 단위는 브라우저의 크기가 변해도 고정된 픽셀로 제공한다. 고정되어 있기 때문에 사용자가 크게 보고 싶어도 작게 볼 수 밖에 없다. 픽셀은 화면의 사이즈가 정해진 경우에 유리.
일반적인 경우에 브라우저의 기본 글자 크기인 rem가 추천된다. 상대 단위이며 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리. em는 부모 요소를 따르므로 관리하기 어렵다.
화면 사이즈
같은 웹사이트라도 사용자가 무엇으로 보느냐에 따라 UI도 달라야한다. 반응형 웹이 그렇다. 크기에 따라 CSS를 다르게 적용해야한다. 이때는 상대적 크기인 vw, vh
박스모델
모든 컨텐츠는 고유한 영역있다.
줄 바꿈이 되는 박스(block) vs 옆으로 붙는 박스(inline, inline-block)
- 줄 바꿈이 되는 block 박스 -
<div>,<p>- 줄 바꿈이 없이 옆으로 붙는 inline 박스 -
<span>- 줄 바꿈이 일어나지 않는 동시에 block 특징을 가지는 inline-block 박스
inline 박스는 크기를 설정하는 속성이 작동하지 않는다.
display: block: 줄 바꿈 O, 무조건 한줄 점유하고 다음 태그는 무조건 줄바꿈이 적용.display: inline: 줄 바꿈 X, 크기 적용 X, content 크기 만큼만 공간 점유.display: inline-block: inline 속성특징과, block 속성특징을 둘 다 가지고 있는 속성. inline처럼 옆으로 붙으면서 block처럼 자체의 크기를 갖는다. inline에서 할 수 없던 크기를 설정할 수 있다.
박스를 구성하는 요소
Margin, Border, Padding, Content
- Margin: 바깥 쪽 여백
- Border: 테두리
- Padding: 안쪽 여백
박스를 벗어나는 콘텐츠 처리
p {
overflow:auto;
}auto를 쓰면 스크롤이 되게 만들고, 말고도 스크롤이 되지 않게 하는 hidden, 가로방향 overflow-x, 세로방향 overflow-y로 스크롤 방향도 정할 수 있다.
박스 크기 측정 기준
content-box vs border-box
기본적인 기준은 context-box로 설정되어 있다. 박스의 크기를 측정하는 기본값이다. width를 content 기준으로 하여 Margin, border, padding 등을 붙여 크기가 만들어진다. 여기서 단점은 부모, 자식 관계에서 여백을 고려하지 않고 만들면 레이아웃이 자꾸 벗어날 수가 있다. content에 크기를 붙이는 것이기 때문이다.
추천하는 방법은 border-box다. width가 여백, 테두리 등등을 포함하는 것이 기준이다. 이렇게 하게되면 레이아웃을 잘 벗어나지 않게 된다.
* {
box-sizing: border-box
}모든 요소를 셀렉해서 전체 다 설정해줘야 헷갈리지 않겠다.
Selector
자식 / 후손 / 형제 셀렉터
header > div {}: 자식 셀렉터. 바로 아래<div>자식들만 select.header div {}: 후손 셀렉터. 아래 모든<div>자식들 select.section ~ p {}: 형제 셀렉터. section과 인접한 형제 엘리먼트 p를 모두 select.section + p {}: 인접 형제 셀렉터. 첫번째 입력한(section) 그 다음에 오는 첫번째<p>요소를 select.
구조 가상 클래스 셀렉터
p:first-child {}- p 엘리먼트 중에서 그 p 엘리먼트가 존재하는 부모 엘리먼트 중에서 가장 첫번째오는 p 엘리먼트 select.
ul > li:last-child {}- ul 엘리먼트 자식 중에서 마지막에 li가 마지막 child라면 select.
ul > li:nth-child(3) {}- ul 엘리먼트 자식 중에서 3번째 자식이 li라면 select.
section > p:nth-child(2n+1) {}- section 엘리먼트 자식 중, 홀수 p 자식들만 select.
div:nth-last-child(2) {}- div 중에서 그 부모 엘리먼트에서 따졌을때 마지막에서 2번째 있는 div 엘리먼트 select.
section > p:nth-lastchild(2n+1) {}- section 엘리먼트 자식 중, 마지막부터 세서 홀수번째인 p 엘리먼트들만 select.
p:first-of-type {}- p 엘리먼트의 형제 엘리먼트 중, 첫번째 등장하는 p 엘리먼트를 select.
div:last-of-type {}- div 엘리먼트의 형제 엘리먼트 중, 마지막 div 엘리먼트를 select.
ul:nth-of-type(2) {}- ul 엘리먼트의 형제 엘리먼트 중, 두 번째 ul 엘리먼트를 select.
p:nth-last-of-type(1) {}- p 엘리먼트의 형제 엘리먼트 중, 마지막에서 두 번째 p 엘리먼트를 select.
:nth-child(n) - 이거는 다른 엘리먼트의 순서까지 포함해서 세야한다.
:nth-of-type(n) - 이거는 요소들만 모아서 거기서 순서를 세야한다.
마지막으로
CSS는 어렵다. 많이 하면서 실력을 높이는게 답이겠지. 보기좋은 떡도 맛도 좋은 법.
꾸미는 걸 잘 못해서 디자인적으로 성숙해져야겠다.
