깜빡하고 다음 챕터(Lean CSS Colors by building a Set of Colored Markers) 초반부 내용도 조금 들어가버렸다.
html 관련
self-closing tag를 쓸 때 아래처럼 맨 마지막에 ‘/’르 넣기도 한다. 없어도 애러는 안 남.
<meta charset="UTF-8" />
**<head>**안에
<link/>라는 element도 있음. CSS 파일 불러와서 적용할 때 사용.
<link rel=”stylesheet” href=”adress” />
<body> 안에서 정리할 때
<header>, <main>, <footer>
<section>이란 것도 있음. 이것도 header, main, footer 등 안에서 element들 묶을 때 씀
<article>말 그대로. 작은 내용..?. 보통 서로 관련있는 여러개의 정보가 들어간다고 함..
모바일에서도 페이지 잘보이게 하려면 아래 코드 복붙. <header>안에.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<div>
디자인을 위한 태그
<hr/>
가로 줄 긋기. 컨텐츠 구분선.
CSS
<head> 안에 <style> element를 넣음으로써 시작
하지만 CSS가 너무 길어질 테니 다른 파일로 따로 빼는 게 좋음.
<head> 안에 <link/>추가 후 attribute로 rel=”stylesheet” href=”.css file” 하면 됨.
<style> tag안에선 (=CSS는) 아래와 같은 스타일로 코드를 짬.
element {
property: value;
}
selector1, selector2, selector3{
property: value;
}
.classSelctor{
property: value;
}
element로 스타일을 지정할 수도 있지만, class를 지정해서 clas로 스타일을 지정할 수 있다.
classSelctor는 이름 앞에 온점(.)이 와야 함.
그리고 html의 element에는 attribute중 class 값을 지정. (문자열) 근데 html은 다 걍 문자열인가벼. 그리고 class 여러 개 지정할 때는 사이에 공백 하나 두기.
<element class=”class1 class2”>
특정 class의 element 아래에 있는 특정 element들을 지정하려면 아래 처럼.
.classSelector element{
property: value;
}
이미 지정한 element나 class들을 아래에서 새로 셀렉터 쓰고 중괄호 열어서 지정할 수 있다.
peudo-selector는 element인데 조건 붙는 거(visited, hover(mouse on), active(mouse down) …)
a:visited{
color:black;
}
properties below
text-align: 텍스트 얼라인. center=센터. 따옴표 없음.
background-color: 배경색. black white red같은것도 되는데, rgb(255,255,255)도 됨
background-image: 배경 이미지. 입력은 다음과 같이. url(https://~~~~.jpg)
width: 가로. 300px 같이 픽셀지정, 80%같이 비율지정 둘 다 가능.
max-width: 퍼센트로 했을 때 막 화면 커지면 너무 element도 커지니까 이거로 제한.
height: 높이
display: 디스플레이. value로 inline-block 하면 inline-block이 됨. block이라고 하면 block-level이 됨.
font-family: 폰트. 브라우저 디폴트 폰트 말고 바꾸고 싶을 때. 브라우저들이 공통으로 지원하는 폰트가 있음. 여기선 sans-serif 씀
font-style: 폰트 스타일. italic
font-size: 폰트 사이즈
border-color: 상하좌우 테두리 모두의 색깔
margin
element주변에 안 보이는 공간
margin-left, margin-right: 마진 두께. 둘다 auto하면 두개가 같아짐. element는 자동으로 가은데에 오겠지.
걍 margin: 하고 깡그리 한번에 정하는걸 shorthand라고 함. 그리고 띄어쓰기를 사이에 두고 값 두개를 연달아 적으면 첫번쨰 거는 top, bottom, 두번째 거는 left, right로 입력됨.
padding
element안에 테두리에 빈 공간. 여백. 안에 내용을 밀어넣는 느낌이라기보단, 걍 더 살찌네 element가.
padding-left, padding-right, 그리고 top도 있고 bottom도 있고.
그리고 걍 padding: value;하면 상하좌우 길이가 다 똑같아지고.
tips
inline block은 element들의 width만 신경 씀. 그래서 붙어버리기 쉬움. 따로 지정하면 좋음.
p를 display를 만져서 inline-block처럼 다루면 p element의 오른쪽에 추가로 공간이 생겨버려서, 다음 p가 줄바꿈이 됨. p의 width 퍼센트를 낮추면 해결됨(ex) 50%→49%
뭔가 공간이 있을 땐 html상에서 두 element의 사이에 아무것도 없게 딱 붙이면 됨.
그러면 49로 바꿀 필요도 없이 50퍼로 둬도 되네. 더 깔끔하네.
fallback: value가 available 하지 않을 때 차선책으로 쓸 것. 예시:
font-family: Impact, serif;
<h1>은 margin에 default로 값이 부여돼있음.
size같은 거 0으로 지정할 땐 px같은 단위 안 붙여도 됨.
그리고 negative한 수를 입력할 수도 있음.
<img/>는 inline처럼 행동함.
margin:auto하면 화면 중간에 배치될 줄 알았는데 위아래는 중간 정렬이 안되네?
RGB: 모니터
CMYK (cyan, magenta, yellow, black): 프린터
Lean CSS Colors by building a Set of Colored Markers
html 관련
class 여러 개 지정할 때는 사이에 공백 하나 두기.
<element class=”class1 class2”>
<br>: 줄바꿈
CSS 관련
tips
margin:auto하면 화면 중간에 배치될 줄 알았는데 위아래는 중간 정렬이 안되네?
RGB: 모니터
CMYK (cyan, magenta, yellow, black): 프린터
red green blue 기본값중에서 green은 (0,255,0)이 아니라 (0,127,0)이다.
이건 하다가 멈춤
