TIL-6, CSS 기초

어제는 HTML, CSS, JavaScript의 정의와 그중에 HTML의 기초를 공부했다.
오늘은 CSS에 대해서 공부해보자.

---

여러가지 속성들

text-align:
-> 텍스트 정렬 속성. left, center, right를 입력해 텍스트를 좌측, 중앙, 우측으로 정렬할 수 있다.

color:
-> 글자 색을 바꾸는 속성. 원하는 색상의 이름(ex. red, green) 또는 색상 코드를 입력해 바꿀 수 있다.

background-color:
background-image:
background-repeat:
background-attachment:
background-position:
-> 순서대로 색상, 이미지, 반복 여부, 이미지 스크롤 관련, 배경 이미지 위치 변경을 할 수 있다.

---

CSS에서 사용하는 단위

em
-> 상위 요소 크기의 몇배인지 정함.

html { font-size: 16px; }
body { font-size: 1.5em; }
.a { font-size: 2em; }

html 요소의 크기는 16px,
Body 요소의 크기는 상위 요소인 html의 1.5배인 24px,
.a 요소의 크기는 상위 요소인 body의 2배인 48px.

rem
-> 최상위 요소 크기의 몇배인지 정함.

html { font-size: 16px; }
body { font-size: 1.5em; }
.a { font-size: 2rem; }

body요소의 크기는 상위 요소인 html의 1.5배인 24px.
.a 요소의 크기는 최상위 요소인 html의 2배인 32px.

---

css 파일을 html에 적용하는 방법

css 파일을 html에 적용할 수 있는 방법에는 3가지가 있다.

1. 인라인 스타일

<nav style="background: #eee; color: blue">...</nav>

위와 같이 html 내의 각 속성에 style=""를 입력해 직접 적용.

2. 내부 스타일 시트

<style> css 코드 </style>

html 내의 head속성 안에 위와 같이 style 속성을 만들고, 그 속성 안에 css코드를 입력해 적용해준다.
이 때, id로 이름을 붙여서 스타일링 하는 법을 알아야한다.
h1 태그를 스타일링 하고 싶을때,

h1 {
  color: red;
}

style 속성 안에위와 같이 작성하면 되는데 이렇게 한다면 코드내에 있는 모든 h1태그가 스타일링된다.

<h1 id='styling'> 내용 </h1>

그래서 위와 같이 h1태그에 id를 붙여준다.

#styling {
  color: red;
}

그 후 위와 같이 style 속성 안에 '#'으로 id를 불러와 그 id만 스타일링 한다.

//예시
<h1 id='styling'>스타일링 할것 </h1>
<h1> 스타일링 안할것 </h1>
이렇게 하면  위의 id가 붙은 h1만 스타일링된다.

3. 외부 스타일 시트 name.css파일을 만들어 html에 link로 연결.

<link rel=“stylesheet” href="name.css” />

link태그는 html파일과 다른 파일을 연결.
link태그의 rel은 연결하고자하는 파일의 역할이나 특징.

---

class로 동일한 기능을 하는 css를 여러 요소에 넣기

<ul>
  <li class=“menu-item”>Home</li>
  <li class=“menu-item”>Mac</li>
  <li class=“menu-item”>iPhone</li>
  <li class=“menu-item”>iPad</li>
</ul>

위와 같이 각 li 요소에 class를 설정해주고,

.menu-item {
  Text-decoration: underline;
}

위와 같이 각각의 요소에 CSS를 적용할 수 있다.
이 때, ' . ' 로 class를 불러와 스타일링한다.

그리고,

<li class=“menu-item selected”>Home</li>
.selected {
  font-weight: bold;
  color: #009999;
}

위와 같이 class중에서도 한 속성만 선택해 스타일링 할 수 있다.
이때, 공백으로 적용하려는 class의 이름을 분리한다.

id와 class의 차이점.
id -> '#' 으로 선택, class -> ' . ' 로 선택
id -> 하나의 요소에만 적용, class -> 동일한 값을 가질 수 있음
id -> 특정 요소에 이름을 붙임, class -> 스타일의 분류에 사용

---

글꼴, 글자 스타일링

글꼴 변경

font-family
->

.emphasize {
  font-family: “SF Pro KR”, “MalgunGothic”, “Verdana”;
}

글꼴이 존재하지 않거나, 지원하지 않는 글꼴일때 쉼표로 구분해서 입력한 fallback 글꼴(위에선 "MalgunGothic", "verdana")로 대체한다.
fallback은 순서대로 적용된다.

글자 크기 변경

font-size
->

.title {
  font-size: 24px;
}

글자 크기의 단위.
절대단위 : px, pt 등
상대 단위 : %, em, tem, ch, vw, vh등

화면 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기
-> px
일반적인 경우
-> rem. 브라우저의 기본 글자 크기 1rem
반응형 웹에서 기준점을 만들 때.

글자 스타일링

font-weight: nomar | bold | bolder | lighter | number | initial | inherit

normal : 보통 굵기. 숫자 400과 같다.
bold : 굵은 굵기. 숫자 700과 같다.
bolder : 상속된 값보다 굵은 굵기.
lighter : 상속된 값보다 얇은 굵기.
number : 100, 200, 300, 400, 500, 600, 700, 800, 900 등
initial : 기본값으로 설정.
inherit : 부모 요소의 속성값을 상속받는다.

텍스트 밑줄, 가로줄, 윗줄 등

text-decoration: underline; 밑줄
text-decoration: overline; 윗줄
text decoration: line-through; 가운데 줄
text decoration: wavy underline; 물결 밑줄
text decoration: wavy underline red; 물결 밑줄 빨간색

기타 조절

letter-spacing: normal | .2rem | 1px | -1px; 자간 조절

letter-height: normal | 2.5 | 3em | 150% | 32px; 행간 조절

text-align: center | lett | right | justify; 문자 정렬

---

Box model

element

Block element
-> 줄바꿈이 됨 (대표적으로 <div>, <p>) width, height 속성 적용됨
Inline element
-> 줄바꿈이 안됨 (대표적으로 <span>), width, height 속성이 적용되지 않음.
Inline-Block element
-> 줄바꿈이 되면서 block element 특징을 가짐 (inline element처럼 다른 요소 옆에 붙으면서, block element처럼 고유의 크기를 가짐) width, height 속성 적용됨

Box model border

border-width
-> border의 두께
border-style
-> border의 스타일. Border-style: dotted; 로 하면 점선으로.
border-color
-> border의 색상.
border-radius
-> border를 둥근 모서리로 만듦. border-radius: 20px;

margin(바깥여백) 변경

margin: 10px 20px 30px 40px;
-> 시계 순서대로 top, right, bottom, letf
margin : 10px 20px;
-> 위아래 10px, 좌우 20px
margin : 10px;
-> 모든 방향에 10px

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
-> 위와 같이 각각에 특정할 수도 있음. (음수값을 넣으면 다른 element와 겹치게 할 수도 있음)

위의 내용들은 padding(안쪽여백)에도 적용.

overflow를 통해 박스 밖으로 빠져나온 콘텐츠를 정리할 수 있다.
overflow: auto; 를 해주면 자동.
overflow-x, overflow-y 는 y만 실행되는데 왜그러는지 더 알아보자

{
box-sizing: border-box;
}
모든 요소를 선택하는 셀렉터로 모든 요소를 선택한 후
box-sizing 속성을 추가, border-box라는 값을 추가하면 기본 여백과 테두리 두께를 포함한 후 위에 설정한게 실행된다