head테그 안에
meta charset="utf-8": 한글, 일본어, 중국어가 포함된 페이지라면 utf-8 값으로 문자 인코딩을 추가해줘야 함.
meta name="viewport" content="width=divice-width" :디바이스의 가로 크기가 곧 웹페이지의 가로와 같다는 의미. 모바일에서 웹사이트가 예쁘게 잘 보이려면 추가해야 하는 정보. 해당정보를 추가하지 않으면 데스크탑 버전의 웹 페이지가 축소되어 보이는 현상이 나타남.
span 테그
주로 텍스트를 넣는다. 줄이 바뀌지 않고 한줄에 이어서 나온다.
이렇게 한줄로 이어서 나오는 요소를 inline-element
p테그는 줄바꿈일어남.
div를 사용하는 이유
비슷한 부분끼리 그룹지어주고,
디자인에 맞게 레이아웃을 분리해주고
class나 id 라는 attribut를 부여하여 css 스타일을 입혀줄수 있기 때문이다.
a테그 vs link 테그
link: style 넣을 때만 주로 씀. (나중에 리액트하면 js에서 스타일을 불러들임)
a: 다른 웹페이지로 갈때
둘다 href 쓴다.
font family
font-family는 폰트 스타일을 지정하는 속성입니다.
#title {
font-family: Georgia, "Times New Roman", Times, serif;
}
Georgia, "Times New Roman", Times, serif 라는 값을 해석해보자면,
브라우저가 Georgia 라는 폰트를 지원해주면 Georgia 폰트로 적용
Georgia 폰트가 지원되지 않으면, "Times New Roman"을 적용,
이것도 지원되지 않으면 Times을 적용
앞의 세 가지 폰트가 전부 없으면 serif라는 폰트를 사용하겠다는 뜻입니다.
주의) "Times New Roman"만 ""(쌍따옴표)로 감싸져 있는데, 폰트 이름에 띄워쓰기가 되어있으면 ""(쌍따옴표)를 사용해야합니다.
사용자가 어떤 브라우저를 사용할지 모르기 때문에 font-family 값에는 보통 여러가지 폰트를 나열합니다. 가장 뒤에 위치한 serif같은 폰트는 모든 브라우저에서 지원하는 폰트입니다.
브라우저에서는 가장 먼저 태그를 확인하고 그에 맞게 기본(default) 스타일을 적용합니다.
해당 태그나 class, id에 css 값이 있다면 해당 스타일을 더 우선순위로 적용하게 됩니다.
font weight
.bold-font {
font-weight: bold;
}
font-weight 는 글씨 두께를 조절하는 property입니다.
normal, bold, 100, 200, ... 900 등의 값이 지정될 수 있습니다.
숫자 400과 normal은 같은 두께입니다.
숫자 700과 bold는 같은 두께입니다.
보통은 두껍거나 or 아니거나 두가지 경우면 되므로 간편하게 bold 값을 지정합니다.
color
hex 색상코드: 여섯자리로 표현 - #eb4639
rgb 값: 빨강, 초록, 파랑으로 표현 - rgb(235, 70, 57),
hsl: 색상, 채도, 명도(hue, saturation, lightness)로 표현 - hsl(4, 82%, 57%)
아래 세가지는 모두 같은 색입니다.
h1 {
color:
#eb4639;
}
h1 {
color:
rgb(235, 70, 57);
}
h1 {
color:
hsl(4, 82%, 57%);
}
border
선 스타일의 종류입니다.
dotted
dashed
solid
double
groove
ridge
inset
outset
상속
부모에게 color: red;라는 속성이 있더라도
본인의 요소가 해당 속성을 갖고 있다면 본인의 스타일이 적용됩니다.
