오늘의 생각
시작하며
오늘은 어제 배운 HTML에 이어 CSS를 배울 차례다.
프론트엔드 개발자가 되려면 CSS가 기본이면서도 CSS를 정말 잘해야한다는 말이 있다.
오늘도 의지를 불태워본다...
마치며
처음에 생각했던 것보다 CSS의 세계란 심오하고 팔수록 어려운 파트인 것 같다 @_@
그렇기에 오늘 더더욱 열심히 하는 하루였던 것 같다.
특히 CSS Selector 부분을 익히는데 다소 어려움이 있어 찬찬히 살펴보며 하나하나 이해하며 공부해나가다 보니 개념은 완벽히 이해하게 되었다~!
이제는 프로젝트에서 직접 써보면서 손으로 익히는 날만 남았다. 오늘도 하얗게 불태웠다~~
오늘의 학습내용
1. CSS (Cascading Style Sheets)란?
- 웹페이지의 사용자경험(UX)을 극대화시켜줄 수 있는 스타일시트 언어
- HTML로 웹페이지의 뼈대를 구축하고, CSS로 다양한 디자인 요소들(레이아웃, 기타 요소 등)을 입혀줄 수 있다.
2. UI(User Interface)
- Interface란 컴퓨터와 교류하기 위한 연결고리
- User Interface란 사용자가 웹어플리케이션을 편리하게 이용할 수 있도록 만들어주는 연결고리
- 좋은 사용자경험을 위해서는 직관적이고 쉬운 UI가 필수불가결한 요소다.
3. CSS 구성요소
- Selector
* Declaration block
- Declaration(Property + Value + ;)
1) background / background-color의 차이
- 2가지 모두 배경에 대한 CSS속성을 지정해 줄 수 있다.
- background는 띄어쓰기 구분으로 배경에 대한 다양한 속성을 줄 수 있다.
- background-color는 '색상'에 대한 속성만 지정해 줄 수 있다.
2) html과 css파일 연결하기
- link 태그를 통해 연결
- rel 은 연결하고자 하는 파일의 역할이나 특징
- href 속성에는 파일의 위치 입력. 연결하려는 두 파일이 동일한 폴더 내에 있다면 파일 이름을, 다른 폴더에 파일이 존재하는 경우, 절대 경로 또는 상대 경로를 입력.
<link rel="stylesheet" href="index.css" />4. CSS 스타일 적용법
1) 인라인 스타일
: html요소 내부에 style 속성 적용
: 관심사 분리 측면에서 권장하지 않음 / 파일로 굳이 구분하지 않아도 될 만큼 적은 CSS를 사용하는 특별한 경우에만 사용
<nav style="background: #eee; color: blue">...</nav>2) 내부 스타일 시트
: html head태그에 style태그를 작성하여 적용
: 관심사 분리 측면에서 권장하지 않음 / 파일로 굳이 구분하지 않아도 될 만큼 적은 CSS를 사용하는 특별한 경우에만 사용
<head>
<style>
nav {background: #eee; color: blue;}
</style>
</head>3) 외부 스타일 시트
: html과 별도의 css파일을 작성하여 적용
: 관심사 분리 측면에서 권장되는 방식
4) CSS 셀렉터
| id | class |
|---|---|
| #으로 선택 | .으로 선택 |
| 한 문서에 단 하나의 요소에만 적용 | 동일한 값을 갖는 요소 많음 |
| 특정 요소에 이름을 붙이는 데 사용 | 스타일의 분류(classification)에 사용 |
5) 텍스트 꾸미기
색상
- 글자의 색상을 변경하는 속성은 color
.box {
color: #155724; /* 글자 색상 */
background-color: #d4edda; /* 배경 색상 */
border-color: #c3e6cb; /* 테두리 색상 */
}글꼴
-
글꼴의 속성은 font-family
-
사용하려는 글꼴이 존재하지 않거나, 디바이스에 따라 지원하지 않을 때 대비용으로 fallback 글꼴 추가 가능. fallback을 위해 여러 글꼴을 사용하는 경우, 쉼표로 구분 가능. 입력된 순서대로 fallback이 적용됨.
-
구글 폰트 : https://fonts.google.com/
.emphasize {
font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}6) 기타 스타일링
- 굵기: font-weight
- 밑줄, 가로줄: text-decoration
- 자간: letter-spacing
- 행간: line-height
7) center, font 태그를 사용하지 말아야 하는 이유
: 관심사 분리 패러다임 적용으로 인해 더 이상 이 해당 태그를 사용하지 않음
8) 크기 단위
- 절대 단위: px, pt 등
- 상대 단위: %, em, rem, ch, vw, vh 등
[글꼴 사이즈를 정할 때]
-
기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우, px(픽셀)을 사용
-
일반적인 경우, 상대 단위인 rem 사용(em은 부모 엘리먼트에 따라 상대적으로 크기가 변경됨. 이에 비해 rem은 root의 글자 크기에 따라서만 상대적으로 변함.)
[화면 사이즈를 정할 때]
-
반응형 웹(responsive web)에서 기준점을 만들 때, 디바이스 크기별로 CSS를 달리 적용해야 함.
-
화면 너비나 높이에 따른 상대적인 크기가 중요한 경우, vw(viewport width)/vh(viewport height)를 사용. 1vw 는 보이는 영역 너비의 1/100을, 1vh 는 보이는 영역 높이의 1/100을 의미함.(화면을 꽉채우는 형식의 웹페이지들이 이러한 방식을 사용하고 있다.)
5. 박스 모델
1) block box / inline box
| block | inline-block | inline | |
|---|---|---|---|
| 줄바꿈 여부 | 줄바꿈이 일어남 | 줄바꿈이 일어나지 않음 | 줄바꿈이 일어나지 않음 |
| 기본적으로 갖는 너비(width) | 100% | 글자가 차지하는 만큼 | 글자가 차지하는 만큼 |
| width, height 사용 가능 여부 | 가능 | 가능 | 불가능 |
2) 박스를 구성하는 요소
[border]
: 박스 테두리
// 테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color)
p {
border: 1px solid red;
}[margin]
: 박스 바깥 여백
- 값을 두 개만 넣으면 top & bottom
- 값을 하나만 넣으면 모든 방향
- 특정 방향을 속성도 존재(margin-top, margin-right, margin-bottom, margin-left)
// 상, 하, 좌, 우 순서로 margin 적용
p {
margin: 10px 20px 30px 40px;
}[padding]
: 박스 안쪽 여백
p {
padding: 10px 20px 30px 40px;
}3) 콘텐츠가 박스를 벗어난다면
- overflow 속성을 지정해 박스보다 큰 콘텐츠에는 스크롤 표시
- 넘치는 콘텐츠의 내용을 가리고 싶을 땐, overflow 속성에 hidden 값을 사용
p {
height: 40px;
overflow: auto;
}4) 박스 크기 설정
: 박스의 여백을 모두 포함하여 크기를 측정하는 border-box 측정법 권장
6. CSS Selector
1) 기본
- 전체
* { }- 태그
: ' , ' 를 통해 복수 선택 가능
태그명 { }
태그명1, 태그명2 { }- ID
#ID명 { }- Class
.Class명 { }- attribute
: 같은 속성을 가진 요소 선택
태그명[속성명] { }
예)
a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { } 2) 자식 / 후손 / 형제
- 자식
: 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택
태그명1 > 태그명2 { }- 후손
: 첫 번째로 입력한 요소의 후손을 선택
태그명1 태그명2 {}- 형제
: 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택
태그명1 ~ 태그명2 { }- 인접 형제
: 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택
태그명1 + 태그명2 { }3) 기타
- 가상 클래스
: 요소의 상태 정보에 기반해 요소를 선택
a:link { } /*사용자가 방문하지 않은 <a>요소를 선택합니다.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택합니다. */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택합니다. */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택합니다. */
a:focus { } /* 포커스가 들어와 있을 때 선택합니다. */- UI요소
input:checked + span { } /*체크 상태일 때 선택합니다. */
input:enabled + span { } /*사용 가능한 상태일 때 선택합니다. */
input:disabled + span { } /*사용 불가능한 상태일 때 선택합니다. */- 구조 가상 클래스
p:first-child { } /*p태그 중 첫번째 자식 요소에 해당하는 p태그 */
ul > li:last-child { } /*ul태그의 자식요소 li태그 중 마지막 li태그 */
ul > li:nth-child(2n) { } /*ul태그의 자식요소 li태그 중 짝수번 쨰 li태그 */
section > p:nth-child(2n+1) { } /*section태그의 자식요소 p태그 중 홀수번 째 p태그 */
ul > li:first-child { } /*ul태그의 자식요소 li태그 중 첫번째 li태그 */
li:last-child { } /*li태그 중 마지막 요소 */
div > div:nth-child(4) { } /*div태그의 자식요소 div태그 중 4번째 요소*/
div:nth-last-child(2) { } /*div태그의 자식요소 중, 마지막에서 2번째 요소*/
section > p:nth-last-child(2n + 1) { } /*section태그의 자식요소 p태그 중 마지막에서 홀수번 째 p태그*/
p:first-of-type { } /*p태그의 형제 요소 중 첫 번째 p태그(first-child와는 다르게 첫 번째 자식 요소가 아닌, 처음 등장하는 p를 선택합니다) */
div:last-of-type { } /*div태그의 형제 요소 중 마지막 div태그 */
ul:nth-of-type(2) { } /*ul태그의 형제 요소 중 2번째 ul태그 */
p:nth-last-of-type(1) { } /*p태그의 형제요소 중 마지막에서 1번째 p태그 */- 부정
input:not([type="password"]) { } /*password 타입이 아닌 input태그 */
div:not(:nth-of-type(2)) { } /*div태그의 형제요소 중, 2번째 타입이 아닌 div태그 */- 정합성
input[type="text"]:valid { } /*text 타입이 valid한 input태그*/
input[type="text"]:invalid { } /*text 타입이 invalid한 input태그 */