오늘은 CSS에 대해 배우고 어제 만들었던 자기소개 페이지를 꾸민다.
CSS
웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어
간단하게 내가 만든 HTML(구조)을 이쁘게 꾸며준다고 생각하면 쉽다.
프론트엔드 개발자는 디자이너가 열심히 만들어주신 디자인 요구사항들을 웹 페이지에 잘 구현할 수 있으면 된다.
직관적이고 쉬운 UI 제작은 프론트엔드 개발자의 기본 소양입니다.
내가 제일 중요하다고 생각하는 사용자에게 친화적인 개발자!!
우선 CSS파일을 만들어주고 index.html과 연결을 시켜주어야 한다.
<link rel="stylesheet" href="index.css" />이런식으로 link 태그를 이용해 index.css라는 파일을 연결해주고 CSS파일에 내용을 작성해주면 변하는 것을 볼 수 있다.
이제 작성을 해보자.
우선 앞서 HTML에서 내가 선언했던 id와 class에 따라서 문법이 달라진다.
쉽게 id는 Selector가 '#' , class는 '.'이다.
예를 들어 id가 'login'인 요소의 글자 색을 바꾸고 싶다면
#login {
color : red;
}class가 'password'인 요소의 글자에 밑줄을 넣고 싶다면
.password {
text-decoration : underline;
}하지만!!
id는 고유의 값이므로 단 하나의 요소에만 적용이 가능하고
class는 여러 요소가 같은 값을 가질 수 있으므로 여러 요소의 스타일 적용이 가능하다는 차이점이 있다.
color, text-decoration처럼 엄청나게 다양한 속성들이 있는데 그 내용은 다 다루지 못할 것 같아 생략...
다음으로 알아야 할 내용은 단위이다.
글씨 사이즈, 화면 크기를 정할 때 사용하는 단위도 상황에 따라 쓰임이 다르다.
- 절대 단위 :
px,pt등등 - 상대 단위 :
em,rem,vh,vw등등
요것도 종류가 상당하니 MDN 참고..!
단위에 따라 사용자의 환경에 따라 보여지는게 달라질 수 있기 때문에 잘 생각하고 사용해야 한다.
Box Model
모든 콘텐츠는 각자의 영역을 가지며, 일반적으로 하나의 콘텐츠로 묶이는 요소들이 하나의 박스가 된다.
Block VS Inline, Inline-block
Block - 줄 바꿈이 되는 박스
Inline, Inline-block - 옆으로 붙는 박스
요소들 마다 가지는 영역이 다르므로
block 요소 ---> MDN 짱1
inline 요소 ---> MDN 짱2
Box Model 4가지 요소
개발자 도구에서 자주 보던 그림이다...
Content
- 텍스트나 이미지가 들어가있는 박스의 실질적인 부분으로 색상, 너비, 높이 등을 지정할 수 있다.
Padding
- 내부 여백
- 값에 따라 상하좌우 값을 나눌 수 있음 (쉽게 시계방향으로 기억, top-right-bottom-left 순서)
Border
- 테두리
Margin
- 외부 여백
- Padding과 같은 시계방향 값을 가질 수 있다.
Box 크기 측정
유일하게 틀린 문제...
위에 border-box 안보고 너무 단순하게 height? 80이네 하고 골랐다...
깔끔한 해설
