CSS는 스타일링이다.
하지만 CSS는 단순이 디자인만을 위한것은 아니다.
- 적당한 위치에 콘텐츠 배치 ( 레이아웃 )
- 텍스트 강조와 같은 최소한의 타이포그래피 ( 조판,typography )
- 최소한의 접근성 ( 예를들어 색상 )
위에 세가지 요소가 있어야 더 나은 사용자경험 (UX : User Experience)을 갖게 된다.
또는 색약이나 장애인들이 웹사이트를 이용할때에도 CSS가 도움을 줄 수도 있다.
CSS에 대한 오해
CSS는 디자이너의 영역이다?
백엔드개발자가 목표라고해서 CSS를 안배워도 된다는것은 착각이다.
날씨가 덥다고 옷을 안입고 나가는것과 같은 논리.
좋은 로직으로 짜여진 좋은 기능을 보여주는데, 실질적으로 사용자가 보는것은
CSS로 디자인된 페이지를 보게된다.
결국 보는게 이쁘거나, 효율적으로 디자인되어있어야
사용하기에도 더좋다는말인것이다.
포토샵같은거 써야하는거아닌가요?
포토샵으로 무언가 만들어서 사용하는일은 거의 드물다고 보는게 맞다.
대부분 무료 아이콘이나 svg파일의 이미지로 이루어져있다.
혹은 지금에 와서는 진짜 포토샵으로 디자인해서 아이콘이나 로고, 이미지등을 개발자에게 전달해주는
영역의 종사자가 사라져가고있다고 필자는 알고있다.
왜냐하면 디자인영역의 툴이있는데 프론트엔드 개발자가 다루기쉽게 여러 툴들이 등장하고 사용빈도가 높아지고있기 때문이다.
CSS는 배우기 어렵다?
필자는 솔찍히 공감한다.. JS, React..로직적인 언어를 공부하는거보다.
CSS가 더 어렵다고 느껴진다. 내가 CSS를하면서 제일 뿌듯했던때는 내가원하는데로 CSS가 그려졌을때이다.
그만큼 원하는데로 다루는게 가능하면 좋은데 그렇게까지 가는과정이 많이 어렵다고 생각한다.
CSS 따라하기
<header>``<main>``<nav>``<aside>``<footer>태그들은 <div> 태그와 똑같이 작동한다.
이를 시맨틱 태그라고한다. 태그의 의미를 담아 콘텐츠 영역을 논리적으로 구분하기 위한 용도로 쓰인다.
index.html 로 먼저 html을 짜준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modern CSS</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<header>This is the header.</header>
<div class="container">
<nav>
<h4>This is the navigation section.</h4>
<ul>
<li>Home</li>
<li>Mac</li>
<li>iPhone</li>
<li>iPad</li>
</ul>
</nav>
<main>
<h1>This is the main content.</h1>
<p>...</p>
</main>
<aside>
<h4>This is an aside section.</h4>
<p>...</p>
</aside>
</div>
<footer>
<ul>
<li>개인정보 처리방침</li>
<li>이용 약관</li>
<li>법적 고지</li>
</ul>
</footer>
</body>
</html>기본적으로 수직으로 레이아웃이 잡혀있는것을 볼수있다.
이러한구조는 모바일에서 많이쓰였던거같다.
div로만 대충짜면 항상 밑으로 flow하게되는 html구조가 보여진다.
여기서 밑밑한 디자인을 먼저 index.css를 만들고
body {
margin: 0;
padding: 0;
background: #fff;
color: #4a4a4a;
}
header, footer {
font-size: large;
text-align: center;
padding: 0.3em 0;
background-color: #4a4a4a;
color: #f9f9f9;
}
nav {
background: #eee;
}
main {
background: #f9f9f9;
}
aside {
background: #eee;
}색상이라던가 먼저 디자인을 입혀주는것이다.
근데 필자도 이번 실습을 통해서 처음으로 layout.css라는것을 분리해본것인다.
이런저런 여백이라던가 flex라던가 정말 layout에 관한 코드만 들어간 css파일을 분리해서
새로 작성한다.
layout.css
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container {
display: flex;
flex: 1;
}
main {
flex: 1;
padding: 0 20px;
}
nav {
flex: 0 0 180px;
padding: 0 10px;
}
aside {
flex: 0 0 130px;
padding: 0 10px;
}
추가로 본문 html에서 layout.css 를 추가해줘야한다.
<link rel="stylesheet" href="index.css" />
<link rel="stylesheet" href="layout.css" />마찬가지로 인덱스css와 마찬가지로 추가해주면 잘먹는다.
selector 선택자
기본적으로 css에 속성을 주려면
선택해서 그 태그에 줘야한다.
그러려면
첫째로
tag 자체에 줄수있다.
<div> 태그가 있다면
<div> 태그 가 사용된곳이면 전부다~ 글씨를 빨갛게 해줘. 이런식으로 css를 짤수있다.
두번째로
class를 먹여서 css를 입힐수있다.
<div class="red_font"> 이런식으로 직관적으로
저 클래스안에 있으면 빨간글씨겠구나. 하게 작명하는것도 중요하다.
css 내부에서는
.red_font{
무언가 글씨색을 바꿔주는 코드
}이렇게 .으로 접근하면된다.
엘리먼트가 여러 값을 가질수 있다.
동일한 클래스를 가진 엘리먼트들이 많다.
세번째로 (비권장 , 적어도 스타일링에 관해서는)
id를 부여해서 접근할수있다.
근데 개인적으로 정말.. id는 JS에서의 접근자로 주로 사용한다.
그러므로 스타일 입히는데 id와 class를 섞어서 쓰는것은 비추천
#hover-button{
..여기서 스타일입히시려구요?..
}
당연히 접근은 #으로 하면 됩니다.
엘리먼트가 단 하나의 값을 가진다.
id는 고유해야한다.
텍스트 꾸미기
색상
color : #ff0000 글자의 색상
background-color:#d4edda 배경 색상
border-color:#c3e6cb 테두리 색상 (테두리 설정을 해야보인다)
글꼴
font-family:"SF Pro KR", "MalgunGothic", "Verdana";
여러 글꼴을 쉼표로 구분하여 적을 수 있는데 이는 순서대로 fallback(표현하고 싶은 글꼴이 없을 시에 사용하는 대비책)을 위한 글꼴이다.
다른글꼴 입히기
google font 라는 서비스에서 다양한 웹폰트를 사용할수있다.
사용법 생략 (구글링)
크기
font-size:24px
알아야 할 몇가지 단위들
- 절대단위 : px, pt 등
- 상대단위 : %,em,rem,ch,vw,vh 등
-
절대적이고 확실한 크기로 정하고싶을때
- px를 사용하면된다.
- 다만 접근성이 불리하다.- 모바일기기같은 작은화면 , 고해상도인경우 적합하지않다.
- 기본적으로 고해상도에서는 1px이 모니터의 한점보다 크게 업스케일(upscale)되기 때문에, 뚜렷하지 못한 형태로 출력 될 수 있다.
- px를 사용하면된다.
-
보통의 경우
- rem 을 추천한다. (사실 써본적없다.. px사랑해..)
- root의 글자크기 , 즉 브라우저의 기본글자 크기가 1rem이며 , 두배로 크게 하고싶다면 2rem .. 작게하려면 0.8rem 등으로 조절해서 사용 할 수 있다.
- 접근성에 유리하다.- (em은 부모 엘리먼트에 따라 상대적으로 크기가 변경된다 그래서 계산이 어렵다.)
- rem은 root의 글자 크기에 따라서만 상대적으로 변해서 좀더 예측이된다.
- rem 을 추천한다. (사실 써본적없다.. px사랑해..)
-
반응형 웹(responsive web)에서 기준점을 만들때
- 반응형 웹은 디바이스의 너비에 따라서 유동적인 레이아웃이 적용되는 웹사이트를 말합니다.
예를들어서 웹사이트에서볼때, 스마트폰에서 세로모드로 볼때, 가로모드로볼때, 태블릿으로 볼때가 각각 다르다. 이때 디바이스 크기별로 css를 달리 적용해야하는데. 이때 디바이스 크기를 나누는 기준을 보통 px로 정합니다. (iphone 12 Pro Max의 너비는 414px이다. 보통 450px미만의 너비를 갖는 디바이스는 스마트폰 세로모드로 생각해도 좋다.)
-
화면 너비 및 높이에 따른 상대적인 크기가 중요한 경우
- 이때에는 vw,vh를 사용하자. 웹사이트에서 보여지는 영역을 viewport 라고 하며 , vw,vh에서의 v는 viewport를 의미한다.(width,height..) 간혹 화면을 가득 채우며 딱 떨어지게 스크롤되는 사이트를 본적이 있을것이다. 이는 100vw , 100vh를 사용해서 구현한것이다.
- %는 html이 차지하는 모든영역 , 즉 지금은 보이지 않으나 스크롤 했을때 보이는 영역까지 포함됬을때의 비율이다.
기타 스타일링
font-weight 굵기
text-decoration 밑줄또는 가로줄
letter-spacing 자간
line-height 행간
정렬
text-align left , right , center, justify(양쪽정렬)
세로로정렬할 경우는 문제가 복잡. 설명 생략
<center>``<font>를 사용하지말자.
박스모델
모든 콘텐츠는 고유한 영역이 있다.
여기서 이제 block 과 inline 에 대해서 다뤄지는거같다.
그리고
border 테두리
padding 안쪽여백
margin 바깥여백
넘치는 컨텐츠 처리
overflow : auto 라는것이 있다.
