[1] 강의
웹 프로그래밍(풀스택)
3. CSS - FE
4) CSS 기본 Style 변경하기
[2] 개념 정리
CSS style 적용은 글자색, 배경색 등이 가장 자주 사용되는 것들입니다.
이런 속성은 위치 값과 크기를 지정하는 것과 달리, 색상 위주로 값을 부여합니다.
색상 관련 값은 다양한 색을 일관된 방법으로 표현하기 위해 주로 16진수 표기법을 사용합니다.
font 색상 변경
color : red;
color : rgba(255, 0, 0, 0.5);
color : #ff0000; //16진수 표기법으로 가장 많이 사용되는 방법이죠.
font 사이즈 변경
font-size : 16px;
font-size : 1em;
배경색
background-color : #ff0;
background-image, position, repeat 등의 속성이 있습니다.
background : #0000ff url(“.../gif”) no-repeat center top; //한 줄로 정의도 가능
글씨체/글꼴
font-family:"Gulim";
font-family : monospace;
웹 폰트
웹폰트는 브라우저에서 기본으로 지원하지 않는 폰트를 웹으로부터 다운로드 받아 사용할 수 있는 방법입니다.
다양하고 예쁜 폰트들을 웹폰트로 사용할 수 있긴 하지만 다운로드를 받아야 한다는 단점이 있습니다.
다운로드 시간이 오래 걸리게 되면 화면에 노출되는 시간이 느려져 오히려 사용자에게 불편함을 느끼게 할 수 있는 것 입니다.
또한 다양한 해상도에서 깨지는 문제도 발생할 수 있습니다.
웹폰트는 수많은 종류가 있습니다.
대표적으로 구글 웹폰트가 있으며 최근에는 다양한 크기에서 품질을 유지하는 벡터 방식의 아이콘 웹폰트도 등장했습니다.
(unicode영역 중 Private Use Area (PUA) 영역을 활용해서 제작)
또한 웹폰트 방식말고, 기본 unicode를 사용해서 간단한 아이콘을 표현하는 것도 가능합니다.
아래 unicode를 사용한 HTML 코드를 참고하세요.
<div> 안녕하세요 ☺</div> //☺ 웹 화면에는 웃음 표시가 표현되는 코드입니다.
[3] 강의 정리
이번 시간에는 폰트랑 백그라운드 관련된 몇 가지 속성을 간단하게 알아보겠습니다. 폰트에 우선은 myspan이라는 그런 엘리먼트이다. 클래스를 가진 엘리먼트이다. color는 알겠죠. color : red; 이 정보가 red로 나오겠다. red를 표현하는 거 말고도 우리가 rgb. red, green, blue를 설정할 수 있습니다. red, 255 까지 숫자가 있다. 0, 이렇게 표현을 해서 255가 최대 max 치이다. red랑 똑같은 결과이다. 알파값을 또 줄 수가 있다. 알파값은 0.5이다. 희미하게 나오게 되어있다. 알파값을 바꿔 희미하게 준 것이다. 이거를 또 16진수로 표현할 수가 있다. #를 써가지고 16진수로 ff0000 이렇게 표시할 수도 있다. 다시 red로 돌아가면 이 두개가 이제 ff가 숫자로 255이기 때문에 16진수로 변환을 하면 이거 이제 뒤에 값은 0이다. 그래서 이렇게 할 수 있고 만약에 똑같다 그러면 f00 이렇게 축약을 해서 ff00000을 f00을 줄여서 할 수도 있다. 이렇게 나온다. 똑같다. 이렇게 표현을 할 수가 있고 color 값 설정을 변경하고 싶을 때는 이거를 클릭을 한다. 클릭을 해서 이렇게 선택된 상태로 어떤 색깔을 찾을 수가 있다. 찾아서 이 색깔을 쓰고 싶으면 이 값을 이용한다. HEX 값이 16진수를 얘기하는 거다. 그래서 이 값을 이렇게 쓸 수도 있다. 변환을 할 수도 있다. 16진수 값, rgba 값 이런걸 동일한 값을 여러 가지로 설정을 해서 쓸 수가 있다. 이렇게 해서 변경이 됐다. 이렇게도 테스트를 해 볼 수 있다.
폰트 사이즈를 font-size로 이렇게 표현을 한다. font-size: 16pz; 이렇게 표현을 할 수가 있다. 16픽셀, 하나의 픽셀 단위 단위 말고도 그 다음에 1em이라고 해서 16픽셀이 기본값이다. 16 픽셀 대비 상대적인 어떤 크기를 배수로 지정을 할 수 있다. 1em를 지정해 보자. 확대를 해서 1em, 1.2em, 1.3em, 1.4em, 1.5, 1.6, 1.8, 1.9, 2em 하면 두배가 됬다. 그러면 16픽셀이 아니라 32 픽셀이 된다. 16픽셀이 기본값이다. 그러면 그 기본값은 꼭 16픽셀이나, 그렇지 않을 수 있다. 상위 노드가 div이다. body 하위에 있는 바로 div의 font-size를 32픽셀이다. 이렇게 바꿨따. 그러면 이 font-size 값이 자식 노드에 상속이 된다. 그러면 기본값이 32 픽셀이 된다. 그러면 1em이 32 픽셀이다. 2em으로 바꾸면 64픽셀이 된다. 이게 상대적인 값이다. 2em인데 부모 노드가 16 픽셀로 바뀌면 16의 두 배인 32픽셀이 된다. 이행관계가 좀 어렵다. 잘 이해를 해야 한다. 자기가 갖게 되는 기본 속성값 그게 거의 다 상속받아서 갖게 되는 거다. 상속을 안 받으면 16픽셀이다. 지금 부모에 의해서 이 값이 바뀔 수 있다. em은 알파벳 m을 대문자 M이 가장 큰 폰트 크기라 한다. 그래서 단위를 만들었다. em. 픽셀 단위도 쓰긴 하지만 실제로 개발할 때는 em을 써서 상대적인 어떤 값을 많이 바꾸기도 한다. 픽셀과 em을 잘 알면된다.
color은 아까 쓴 대로 하면 된다. #ff0. 이렇게 하면 배경색이 이렇게 노란색이 나온다. 이렇게 backgrount-color도 지정을 할 수가 있다. 원하는 값을 이렇게 바꿔서 이 값이 맘에 들면 이 값을 쓰는 거다. 에디터를 쓰면 color picker이라고 해서 color를 선택할 수 있는 도구들이 바로바로 나타난다. 그걸 이용해서 개발할 때 편리하게 쓸 수도 있다. 간단하게 스타일, 폰트 이런 걸 알아봤다. font-family라는 게 있다. 예를 들어서 Gulim이다. 그러면 Gulim 이런 게 표시가 된다. 영어로 monospace이다. 그러면 또 다른 폰트가 나온다. 여러가지가 있다. sans-serif라는 폰트가 있다. 이런 폰트들이 각각 어떤 모양인지 검색을 해보면 여러 가지 폰트가 나온다. 가끔씩 보면 폰트 설정할 때 콤마 기준으로 쭉 나열된게 있다. 그런 것들은 폰트가 지구원되지 않으면 이걸, 이 폰트가 브라우저가 지원되지 않으면 이걸, 이렇게 해가지고 쭉 표시를 할 수도 있다. 여기서 monospace, 그 다음에 sans-serif라던가 이런 것들을 쭉 나열해가지고 여러가지 쓸 수 있다. font-family를 쭉 나열해서 여러 가지를 쓸 수 있다. 실제로 그러면 웹 사이트마다 어떤 폰트르 썼는가 그런 것들을 검증을 해서 혹은 인스펙터를 통해 가지고 font-family들을 봐서 괜찮을게 있으면 그걸 가져와서 쓸 수도 있다.
[4] 코드 정리
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
body > div {
font-size:16px;
background-color: #ff0;
font-family:"Gulim";
}
.myspan {
color : #f00;
font-size:2em;
}
</style>
</head>
<body>
<div>
<span class="myspan">my text is upper!</span>
</div>
</body>
</html>
'강의 > 웹 프로그래밍(풀스택)' 카테고리의 다른 글
| 부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 3-5-2 강의 정리 (0) | 2022.04.02 |
|---|---|
| 부스트코스 웹 프로그래밍(풀스택) - - 1. 웹 프로그래밍 기초 - 3-5-1 강의 정리 (0) | 2022.04.01 |
| 부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 3-3 강의 정리 (0) | 2022.03.28 |
| 부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 3-2 강의 정리 (0) | 2022.03.24 |
| 부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 3-2 강의 정리 (0) | 2022.03.24 |