I. 꾸미기 : TEXT(4-3) [38 ~ 42]
이제까지는 방을 만들었고 방에대한 크기, 몰딩, 벽지바르기 했다
1. 폰트 스타일링 (38)
이거를 만들 때 폰트속성을 검토해본다. 따지고 보면 배우기 녹록치 않다
(1) 폰트속성 - Font 패밀리 속성
color 은 font-color 이 아니다.
font-weigt 는 문제가 된다. bold 해도 안되는 경우가 있다.
family 가 와닫지 않는다.
(2) font-family
설치된 폰트를 확인히라 가면 폰트 가문(family) 에서 굵게 등을 설정이 가능하다.
단독으로 있는거는 가문이라고 할만한게 없다.
value로 다양한 설정(두께)이 가능하다
숫자는 1 ~ 1000까지 가질수있다. 일반적인 기본적인 두께로 가능하다
1) Font 적용하기 : .header-title 스타일
이 경우 font-family 에서 지정한 폰트외 다른 폰트들은 대체폰트 를 의미한다 폰트가 내 PC에만 있을수도 있다 순서대로 우선순위가 있다
2)
우선 css 파일에 설정시 레이아웃 블럭과 컨텐트 블럭을 구분한다
/* //==== <content block> ========================= */
.head-title{
font-family: 'Segoe UI', '굴림', '돋음';
font-weight: normal;
font-size: 16px;
color: #fff;
}따로 font 전용 으로 만들어준 뒤에 html에다가 클래스명으로 적용해주면 된다
3)
한편 폰트에 sans-serif 가 있다. 이는 Five generic names 이다
제네릭이기 때문에 무엇이든 될수있는 녀석을 의미한다 굳이 보면 폰트 계열로 볼 수있다
5가지가 있다
sanse serif는 끝나는 부분, 예컨데 M 에서 한 획을 없애는 상태를 의미한다
(sanse 는 X를 의미한다)
monospace는 IJKLMN 폰트가 가지는 간격이 같을까 차이가 있을까?
원래는 차이가 있는데 모두 간격이 같게끔 하는것이다 (고정간격글꼴)
cursive 필기체 같은것이다.
fantasy 데코레이팅이 가미된 글을 의미한다
4)
마지막에 sans-serif 를 쓰는이유는 폰트계열명중에 하나를 들고오라는 것을 의미한다
(3) font-style
obliqe는 누워있는것을 의미한다
deg로 각도 설정이 가능하다.
.head-title{
font-family: 'Segoe UI', '굴림', '돋음', sans-serif;
font-weight: normal;
font-size: 16px;
color: #fff;
font-style: italic;
}여기서 이탤릭이 되는 이유는 폰트 패밀리에 이탤릭체가 있기 떄문이다.
.head-title{
font-family: 'Segoe UI', '굴림', '돋음', sans-serif;
font-weight: normal;
font-size: 50px;
color: #fff;
font-style: oblique 150deg;
}oblique 도 각도를 할수 있지만 잘 안된다 왜냐하면 폰트패밀리에 있는거만 된다.
(4) font-synthesis
얘는 여러 브라우저에서 지원하지않는다. 즉 크롬에서 안되기 때문에 훗날 배우자
(5) font-stretch
이거도 폰트가 지원해야하는 것임, 여기서 간격은 한개 폰트자체의 좌우 길이를 의미한다.
/* //==== <content block> ========================= */
.head-title{
font-family: 'Segoe UI', '굴림', '돋음', sans-serif;
font-weight: normal;
font-size: 50px;
color: #fff;
font-style: italic;
font-stretch: ultra-expanded;
}결국 여기에 적용된다고 해도 달라지는것은 없다.
2. 무료 폰트 다운로드 (39)
(1) 폰트설치하기
기존에는 설치하는 것 말고 웹폰트로 배포가능한것으로 가능하다
브라우저 단에서도 충분히 가능하다
- 구글에서도 폰트 제공함 (https://fonts.google.com/)
@import url(style.css);
@import url('https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap');
/* ======== <레이어 블럭 > =========================== */이렇게 하면 가져다가 쓸 수있다
그러나 디자인 툴에서느 못쓰고 설치해서 쓸 수있게끔 할수있다
(2) 시스템 폰트에서 웹폰트로 사용하기
가끔은 민들어서 썻는데 애석하게도 woff / woff2 인 경우에는
내가 직접만든게 import 못하는 경우 webfont화 할 수있다
@font-face {
font-family: "newlec";
src: url("../font/aa.woff2");
}폰트패밀리명도 다시 설정이 가능하다
3. Border 스타일링 (40)
(1) 이론
박스 다룰 때 하려고 했으나, 이제 설명해보자 원래는 박스에 들어가는 것이다
border는 전체 4개면도 설정할 수있지만 각자도 설정이 가능하다
none hidden dotted dashed sloid double 등 다양한 모양이 상존해서 선택이 가능하다
최근에는 경계선 사이에서 꼭지점을 round를 쓴다. 즉 예전에는 지원이 안돼서 꼼수를 많이 이용했다
(2) 실습
1)
0.29 로 한다
기본적으로 저렇게 투명하게 표현이 가능하다.
/* //==== <content block> ========================= */
.head-title{
font-family: 'Segoe UI', '굴림', '돋음', sans-serif;
font-weight: normal;
font-size: 50px;
color: #fff;
/* font-style: italic; */
/* font-stretch: ultra-expanded; */
background-color: red;
width: 248px;
height: 50px;
border-radius: 20px 10px 30px 40px ;
}그냥 radius: 10px 하면 4곳 다 round 이다
좌상단부터 시계방향으로 하나씩 지정이 가능하다.
두개만 하면 좌상단부터 마주보는 방면이 서로 동일하다.
2)
그런데 글짜가 좌측 위로 있다
가운데로 오게하는 방법은 없을까? -> 텍스트 정렬을 알아보자
4. Text 정렬 (41)
(1) 강의
두가지 방법이 있는데, 이중에 어떤것을 쓸지 생각은 해두자
우선 고전적인 방법으로,
text-align 과 line-height가 있다
text-align 은 center 를 설정하면 가운데에 온다.
line-height 수직방향에서 가운데에 오고싶다면 45px이다.
텍스트가 두개이상 열을 가지고 박스안에서 가운데 두고싶으면 이거를 쓰면안된다
.head-title{
font-family: 'Segoe UI', '굴림', '돋음', sans-serif;
font-weight: normal;
font-size: 50px;
color: #fff;
/* font-style: italic; */
/* font-stretch: ultra-expanded; */
text-align: center;
line-height: 45px;
background-color: rgba(0, 0, 0, 0.2);
width: 248px;
height: 50px;
border-radius: 20px 10px 30px 40px ;
}
이렇게 하면 가운데 정렬이 가능하다
(2) 연습 : 버튼 스타일 하기
1) 설명
본 정보를 보고 따라해보자
2) 결과
.btn-cafe-menu-all{
/* text style */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 12;
font-weight: bold;
text-align: center;
/* content box style */
background-color: #D68814;
width: 83px;
height: 25px;
background-position: 272, 322;
border-radius: 10px 10px;
}
3) 해답
.btn-cafe-menu-all{
/* text style */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 12px;
font-weight: bold;
text-align: center;
color: #fff;
/* content box style */
background-color: #D68814;
width: 83px;
height: 25px;
background-position: 272, 322;
border-radius: 10px 0 10px 0;
}
III. 꾸미기 : BOX 및 icon (4-4) [43 ~ 49]
1. 텍스트에 아이콘 붙이기 (42)
(1) 기본 스타일링
아이콘이 들어왔다
.btn-rland-location{
/* text style */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 14px;
font-weight: bold;
color: #fff;
/* content box style */
background-color: rgba(110, 152, 9,0.65);
width: 173px;
height: 40px;
/* background-position: 272, 322;
border-radius: 10px 0 10px 0; */
}이렇게 설정해준다.
(2) 위아래 정렬 및 패딩 넣기
.btn-rland-location{
/* text style */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 14px;
font-weight: bold;
color: #fff;
line-height: 40px;
/* content box style */
background-color: rgba(110, 152, 9,0.65);
width: 173px;
height: 40px;
padding-left: 40px;
}
(3) 아이콘 넣기
.btn-rland-location{
/* text style */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 14px;
font-weight: bold;
color: #fff;
line-height: 40px;
/* content box style */
background-color: rgba(110, 152, 9,0.65);
width: 173px;
height: 40px;
padding-left: 40px;
background-image: url("../images/location.svg") ;
background-repeat: no-repeat;
background-position: 15px right;
}추가로 패딩을 패딩을 해주아야한다
(4) 이상한 박스의 크기
결국 패딩으로 커질걸 아니까 -40을 해주거나
다른 방법을 찾아서 한다.
2. Box Sizing (43)
박스에다가 너비를 주고 박스의 경계선 사이에 넣은거라고 생각할수도 있다
지금까지 너비준거는 content에 준것이다.
결국 보더는 같이 늘어난다 패딩을 넣으면 보더가 늘어난다
그러나 우리가 생각하는 박스사이징은 경계선 사이에 박스크기 400을 주는것이다
패딩을 주면 컨텐트가 줄어들게끔 해야한다.
.btn-rland-location{
/* text style */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 14px;
font-weight: bold;
color: #fff;
line-height: 40px;
/* content box style */
background-color: rgba(110, 152, 9,0.65);
box-sizing: border-box;
width: 173px;
height: 40px;
padding-left: 40px;
background-image: url("../images/location.svg") ;
background-repeat: no-repeat;
background-position: 15px right;
}
3. SVG 아이콘 (44)
지금까지 제공된 아이콘은 비트맵아이콘인데, 나머지는 그림으로 그리는 도형은 비트맵 대신에 벡터이미지를 이용한다
두개 차이는 어떻게 되는것일까?
(1) 태그가 그린 그림
이렇게 좌표로 그림을 그리는 것이다.
데이터로 그림을 그린것이다.
(2) SVG 의 장점 : 벡터 이미지와 비트맵 이미지의 차이점
벡터이미지는 확대를 해도 그림이 매끄럽게 잘 확대가 된다.
비트맵은 비트 하나하나에다가 색을 넣은것이다.
비트맵은 키워달라고하면 포토샵으로 다시 그려달라고한다
xd, 피그마로 svg로 저장이 가능하다. 이렇게 하면 위 툴을 이용해서 바로 이용이 가능하다
태그로 된것은 태그로 된 것은 HTML에만 쓸수있고, CSS에는 이용못한다
이경우 변형을 해야한다
변형을 도와주는 사이트 (https://yoksel.github.io/url-encoder/)
결과로 <> 같은것이 없어졌다.
4. BOX의 크기 고려사항1 (45)
메뉴 알랜드오시는 길은
컨텐트자체의 스타일이지 이것 외부에 방의 스타일은 아니다.
즉 방과 컨텐트는 구분해주어야한다
결국 이는 btn content이다.
<nav class="cafe">
<!-- 나누어진 부분에 우두머리는 2번으로 하자 -->
<!-- <h1>
부안에 오면 꼭! 들리는 카페
</h1> -->
<div>
<a href="" class="btn-cafe-menu-all">
전체메뉴
</a>
</div>
<!-- <nav>
<h1 style="color:blue; font-size: 20px;">인기메뉴</h1>
<li><a target="_blank" href="./menu/detail.html"><img height="100" src="./images/ddal.jpeg" alt="딸기청"></a></li>
<li><a href="./menu/detail.html"><img height="100", src="./images/ddal.jpeg" alt="알랜드"></a></li>
<li><a href="./menu/detail.html"><img height="100", src="./images/ddal.jpeg" alt="아메리카노"></a> </li>
</nav> -->
<div >
<a href="" class="btn-rland-location">알랜드 오시는 길
</a>
</div>
</nav>이렇게 a태그를 넣어주어서 바꾼다
동일하게 나왔는가?
몇가지가 의도치 안게, 나오지않는다. 너비 높이가 적용되지않았다.
5. Box Layout Modes (46)
(1) Display 속성 *****
박스의 종류는 매우 많다
앞서 이야기한 문장,제목,목록,표,폼은 엄밀히 말하면 블럭이 아니다.
블럭은 추후에 이야기하겠지만 아웃사이드 네임이다. 인사이드 네임은 따로있다 테이블 플렉스 등
블럭이라는 것 안에 존재하는 컨텐트 블럭이다. 인사이드에 해당하는 디스플레이네임들이다.
이 디스플레이도 결국 방인데 나중에 보자
다른건 차치하더라도 inline이면 너비가 높이를 지정못한다. 하려면 block 이나 inline-block 로 바꿔야한다.
(2) position : static - 자동 조절되는 위치
블럭과 달리 인라인 계열은 수평으로 배치된다.
우리가 사용하는 a태그는 블럭스타일을 가져야한다. 크기를 지정할수 있으면서 인라인 처럼 배치되는 것으로 바꾸어야한다.
.btn-cafe-menu-all{
/* text style */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 12px;
font-weight: bold;
text-align: center;
color: #fff;
/* content box style */
display: inline-block;
background-color: #D68814;
width: 83px;
height: 25px;
background-position: 272, 322;
border-radius: 10px 0 10px 0;
}
.btn-rland-location{
/* text style */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 14px;
font-weight: bold;
color: #fff;
line-height: 40px;
/* content box style */
display: inline-block;
background-color: rgba(110, 152, 9,0.65);
box-sizing: border-box;
width: 173px;
height: 40px;
padding-left: 50px;
background-image: url("../images/location.svg") ;
background-repeat: no-repeat;
background-position: 15px right;
}
사이 사이에
에 넣어준다
(3) a 태그의 밑줄 제거하기
이거는 기본값으로 되어있다 이거를 싫으면 데코레이션을 아예없앨수 있다.
<style.css>
a{
text-decoration: none;
}
(4) a태그와 div 태그
지금 컨텐트 블럭 하나하나를 스타일링 하고있다.
우리가 보는 만큼 딱 사이즈가 된다
가구를 두기 위해서는 방이 있어야하는 것 처럼 a태그 밖에 div태그를 두자
즉 a태그는 가구이다.
6. Box의 크기 고려사항2 (47)
(1) 박스크기를 고려
두번째 고려사항이 있다.
텍스트가 달라졌을 때 박스의 크기에 변동이 있는지 고려가 필요하다
우선 박스의 너비 높이가 가변이어야한다
박스의 크기에 복숨걸기보다 컨텐트와 박스간의 여백에 포커스를 두자
그래서 여백에 신경쓰자.
이렇게 하면 여백을 맞추면 같은 크기를 가지게 된다. 우리가 하려는 것이 포커스를 맞추자
.btn-cafe-menu-all{
/* text style */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 12px;
font-weight: bold;
text-align: center;
color: #fff;
/* content box style */
display: inline-block;
background-color: #D68814;
/* width: 83px;
height: 25px; */
padding: 3px 14px;
background-position: 272, 322;
border-radius: 10px 0 10px 0;
}width 와 height를 주석처리하고 패딩처리를 하면 글씨가 바뀌어도 박스사이즈도 같이 바뀐다
7. Box의 크기 고려사항3 (컨텐츠 크기의 변화) (47-2)
텍스트의 길이뿐만 아니라 크기(size)가 바뀐다면?
패딩은 잘 지켜지더라도 비율적으로 같이 커지지가 않는다.
비율적으로 달라지는 경우는 em 을 써주면된다.
8. 텍스트를 아이콘 버튼으로 (48)
(1) menu링크를 이미지로 스타일 하기
이번에는 텍스트가 아에 없는 것을 박스를 달 것이다.
분명히 사용된느 컨텐트 모양이긴한데 텍스트가 없다
텍스트가 있지만, 없앤 것임
이제는 메뉴버튼이라는 텍스트를 햄버거로 바꾸자.
(2) 박스 크기 조절하기
높이를 24px 너비를 24px 를 주자! a태그는 너비가 적용되겠는가? 인라인이라서 그렇다
인라인녀석으로서 화면 모양을 좌우하는 것이 display이다
display 가 inline이더라도 block 로 할수있다.
그냥 블럭으로 하면 inline잃어 버리기 떄문에 한줄에 다른 컨텐트가 설수가 없음
기본적으로 한줄 다 차지하는게 블럭이라면, 한줄 다같이 나란히 인라인이다
블럭으로 하면 다른 것과 같은 라인에 있을수없고, 인라인 하면 너비 높이 줄수없다
두개다의 이점을 가지게 하는법? inline block 이라는 display방식이 있다.
(3) overflow 가 발생한 컨텐츠 가리기
함부로 컨텐트를 지우면안된다.
1) 남아 있는 부분은 hidden 으로 가릴 수있다
2) 그러나 남은 '메' 를 없애기 위한 text-indent 라는 꼼수를 이용한다
들여쓰기 방식을 이용한다 즉 10px 만큼 미루라는 의미이다.
그렇다면 24px만큼 미루어준다.
.img-btn-menu{
background-image: url("../images/menu.svg");
background-repeat: no-repeat;
background-position: left top;
width: 24px;
height: 24px;
display: inline-block;
overflow: hidden;
text-indent: 24px;
}
최소 24px를 주면 이렇게 '메' 가 없어진다
사라지긴 했는데 햄버거를 30px로 하면은 다시 나타난다
우리는 +쪽으로 도망가게 하지않고, 마이너스로 멀리보낸다.
.img-btn-menu{
background-image: url("../images/menu.svg");
background-repeat: no-repeat;
background-position: left top;
width: 24px;
height: 24px;
display: inline-block;
overflow: hidden;
text-indent: -999px;
}
이렇게 다 하면 아이콘을 만들었다.
보충
a 태그: 인라인? 블럭라인?
'배움 __IL > addtionalFrontEnd' 카테고리의 다른 글
| Vue.js 관련 개념 정립 (0) | 2023.05.05 |
|---|---|
| TIL : 웹퍼블리싱 CSS 4회 (4-5) (0) | 2023.02.05 |
| TIL : 웹퍼블리싱 CSS 2회 (4-1 , 4-2) (0) | 2023.02.04 |
| TIL : 웹퍼블리싱 CSS 1회 (1,2,3) (0) | 2023.02.04 |
| TIL : 웹퍼블리싱 HTML 6회 (12,13) [완] (1) | 2023.02.04 |