CSS
css는 구조의 내부와 외부를 꾸미는 역할
css를 html에 적용하는 방법은 html 문서에 명시해뒀습니다.
text
html내 글자의 색상이나 글꼴, 크기등의 설정은 css로 변경 가능하다.
color: ;
//red, green, blue... & hex(16진수) 사용
//색상
font-family: ;
//폰트의 이름을 사용
//글꼴
font-size: ;
//절대단위 px, pt 등
//상대단위 %, em, rem, ch, vw, vh 등
//크기
text-aline: ;
//left, right, center, justify(양쪽정렬) 등
//정렬글꼴
글꼴의 경우 사용자의 컴퓨터 내에 개발자가 보여지길 원하는 폰트가 없을 경우 다른 폰트가 보여진다.
만약 반드시 특정 폰트로 보여지길 바란다면
.text {
font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}위와 같이 fallback글꼴을 미리 설정해주거나
웹폰트 기술을 이용해 웹 로딩 과정에서 폰트를 받아오도록 설정할 수 있다.(ex.Google Fonts)
크기
크기는 단위가 굉장히 다양하다.
절대단위 px, pt 등
상대단위 %, em, rem, ch, vw, vh 등
- 기기의 사양에 상관없는 절대 크기를 원할 경우 px(픽셀)을 사용한다.
인쇄와 같이 화면의 사이즈가 정해진 경우 유리하다.
but 사용자의 접근성이 떨어진다. 사용자 기기의 사양에 따라 보여주고자 하는 크기보다 작거나 크게 출력될 수 있다.
- 일반적인 경우 상대 단위인 rem을 추천한다.
root의 글자크기, 즉 브라우저의 기본 설정이 1rem이고, 앞에 붙는 숫자에 따라 배수가 된다. ex. 3rem은 1rem의 3배
사용자가 설정한 글자 크기에 따르기 때문에 접근성이 용이하다.
- 반응형 웹을 기준으로 만들 때
데스크탑, 스마트폰, 가로, 세로 등 여러 환경에 적용할 수 있도록 css를 각자 설정해 주어야 하는데, 이런 상황에서는 px을 기준으로 한다. (디바이스의 크기를 px 기준으로)
- 화면의 너비나 높이에 따른 상대적인 크기가 중요한 경우
vw, vh(viewport width, viewport height)를 사용한다.
100vw, 100vh를 사용하면 화면을 가득 채우는 모습이 된다.
https://www.apple.com/kr/macbook-pro-16/
정렬
텍스트를 정렬할 때에는 text-align을 사용한다.
text-align = left; //왼쪽 정렬
text-align = right; //오른쪽 정렬
text-align = center; //가운데 정렬
text-align = justify; //양쪽 정렬기본적인 셀렉터
- id
<h1 id="title">section.</h1>
#title {
color: red;
}
//아이디는 #으로 지정- class
<!-- 잘못된 예제 -->
<ul>
<li id="menu-item">Home</li>
<li id="menu-item">Mac</li>
<li id="menu-item">iPhone</li>
<li id="menu-item">iPad</li>
</ul>
//id는 문서내에서 이름이 겹쳐선 안된다.
<!-- 바른 예제 -->
<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>
.menu-item {
text-decoration: underline;
}
//여러 요소에 같은 스타일링을 적용하기 위해서는 class를 사용한다.- 하나의 엘리먼트 여러개의 class
<li class="menu-item selected">Home</li>
//나의 요소에 여러 class를 적용
//공백을 이용해 class 네임을 구분한다.
.selected {
font-weight: bold;
color: #009999;
}추가적인 부분
굵기: font-weight
밑줄, 가로줄: text-decoration
자간: letter-spacing
행간: line-height
- CSS의 사용목적을 이해할 수 있다.
- CSS의 기본 문법과 구조를 이해할 수 있다.
- CSS를 HTML에 적용하는 방법에 대해서 이해할 수 있다.
직접 HTML 안에 CSS를 정의하는 것을 권장하지 않는 이유를 이해할 수 있다. - CSS를 이용해 텍스트를 꾸밀 수 있다
- CSS에서 쓰이는 단위의 두가지 구분을 이해할 수 있다.
각 단위가 적합한 경우를 구분할 수 있다.
