티스토리 뷰
f12를 누르면 styles에서 바꿀 수 있다.
엘리먼트를 선택하는 방법
tag 이름으로 선택
tr 혹은 td
만약 nav를 선택하고 싶다.
그러면 css에서 nav{}로 해서 tag 이름으로 선택하면 된다.
id 이름으로 선택
html shortcut은 html을 만들고 tab해서 html5를 선택하면된다.
f12를 눌러서 개발자 모드에서 style을 고른다.
그곳에서도 조작할 수 있다.
.data.no2를 하면 여러개의 엘리먼트 선택한다.
웹폰트 사용
웹폰트를 사용하는 방법, 다운로드 폰트 사용
웹폰트 같은 경우에는 구글 폰트를 많이 사용한다.
Reference : https://github.com/naver/d2codingfont
@font-face {
font-family: 'font-name';
src: url('link');
}
구글 폰트에서 특정 폰트의 get font에서 어떤 코드를 입력하면 되는지 나온다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">이걸 head 부분에 붙여넣는다.
적용을 하려면 특정 엘리먼트에 스타일을 적용할 수 있다.
<style>
body{
font-family : 'Roboto';
}
</style>
<style>
html, body{
font-family : 'Roboto';
}
</style>위에서 body를 #no로 하면 no id에만 적용할 수 있다.
보통 모두 적용시키려면 html, body로 적용한다.
2번째로는 다운로드 받아서 사용할 수 있다.
https://github.com/naver/d2codingfont
다운로드 -> asset의 zip 파일
압축을 풀고, d2coding all에 들어가서, 파일을 d2coding.ttc로만 남긴다.
이걸 해당 html이 있는 곳에 넣는다.
적용할 떄는 @font-face를 사용한다.
<style>
@font-face {
font-family: 'D2Coding';
src: url('D2Coding.ttc');
}
html, body{
font-family: 'Roboto','D2coding';
color: #00ff00;
font-size: 24px;
font-style: italic;
font-weight: bold;
line-height: 20px; #글자 간격
}아래에 들어가는 게 훨씬 우선순위를 가진다.
두 개를 같이 써주면 하나가 없을 때 다음 순서가 들어간다.
color에서 제일 앞에 있는 숫자는 r,g,b
3개로 표현하면 16진수로 표현해야 한다. 0~F
앞이 f면 red
가운데가 f면 green
뒤가
6개로 표현하면
2씩 묶어서 rgb를 표현한다.
16*16으로 256,256,256으로 해서 표현 가능하다.
font-size도 가능하고, font style이나 weight 사용 가능
글자의 굵기가 weight이다.
font-family : 글꼴 설정
color : 글자 색상 설정 : rgb, rgba 설정 가능
font-size : 글자 크기 설정 : 주로 px 사용
font-style : 글자 스타일 설정 : normal, italic
font-weight : 글자 굵기 설정 : normal, bold, lighter, 100 ~ 900
line-height : 글자 세로 간격 설정
letter-pacing : 글자 가로 간격 설정
text-align : 글자 정렬 : left, right, center ...
text-decoration : 텍스트의 밑줄이나 취조선 설정(스타일 없앨 때 사용한다)
레이아웃 스타일
만약에 kt라고 글자를 썼다고 해보자.
element에서 실제 엘리먼트 영역은 엄청 넓다.
여기에서 글자와 엘리먼트 사이의 영역을 padding이라고 한다.
그리고 해당 엘리먼트 테투리의 굵기를 border라고 한다.
border에서 다른 엘리먼트 사이의 공간의 여백을 margin이라고 한다.
즉, element->padding->border->margin 순으로 된다.
여백을 설정할떄는 하나만 설명하면 모든 마진을 설정하고,
두 개를 설멍하면 위아래, 좌우 설정
4개를 설명하면 top에서 시계방향으로 설정한다.
레이아웃 영역설정
margin : border 바깥 영역의 여백 설정
- 여백 설정 예시
- 5px : 모든 margin 5px
- 5px 10px : 위아래 5px, 좌우 10px
- 5px 10px 15px 20px : top에서 시계방향으로 5px 10px 15px 20px
border : 영역의 테두리 설정
- border style : solid, dotted, dashed ...
border-radius : 둥근 모서리 설정
padding : border 안쪽 영역의 여백 설정
width : 컨텐츠의 가로길이 설정 : px, %, auto
height : 컨텐츠의 세로길이 설정
border-radius는 모깎기이다.
width, height은 padding까지의 크기이다.
비율로도 설정가능 하다.
레이아웃 정렬
float : 레이아웃 정렬 설정 : left, right
- float 은 레이아웃의 높이값이 0으로 설정됨
display : 레이아웃 출력 속성 설정 : block, inline-block
- inline-block 은 block 설정된 상위 엘리먼트를 기준으로 정렬
position : 레이아웃 위치 설정
- relative : 문서 흐름(바로 이전 레이아웃)에 맞춰서 레이아웃 위치 지정
- absolute : relative로 설정된 상위 레이아웃 기준으로 위치 지정
- fixed : 브라우져 document를 기준으로 위치 지정설정
absolute는 div>div2가 있다고 했을 때, div1번에서 상대위치
a,10px,20px
10pixel div2가 온다.
fixed는 전체 화면을 기준으로 설정한다.
문서의 흐름 대로 : relative
상위 엘리먼트 기준으로 특정 위치 : absolute
전체 화면을 기준으로 특정 위치 : fixed
배경 설정
background-color : 배경색 설정
background-image : 이미지 파일을 배경으로 설정
background-position : 이미지 파일의 배경 위치 설정 : left right center top botton
화면 크기하고 다른 경우에 bakground position을 설정해준다.
img를 center로 만든다. 그러면 보여지는 이미지 위치 값을 설정할 수 있다.