Learn Basic CSS by Building a Cafe Menu 정리

2022. 9. 21. 15:50

깜빡하고 다음 챕터(Lean CSS Colors by building a Set of Colored Markers) 초반부 내용도 조금 들어가버렸다.

html 관련

self-closing tag를 쓸 때 아래처럼 맨 마지막에 ‘/’르 넣기도 한다. 없어도 애러는 안 남.

<meta charset="UTF-8" />

**<head>**안에

<link rel=”stylesheet” href=”adress” />

<body> 안에서 정리할 때

<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” 하면 됨.

element {
 property: value;
}

/*or*/

selector1, selector2, selector3{
	property: value;
}

/*or*/

.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)이다.

이건 하다가 멈춤

'공부 > Web' 카테고리의 다른 글

html 좀더 공부 (0)	2022.10.11
php email (0)	2022.10.11
php Programming Language Tutorial - Full Course (0)	2022.10.11
Learn HTML by building a Cat Photo App 정리 (0)	2022.09.20

해킹관련 메모장