TIL 34 | HTML & CSS (wecode 시작)

기술 블로그는 가독성이 좋게 작성해야하는데...

1. Introduction to HTMl	HTML로 웹페이지의 구조를 잡을 수 있다.	tag(태그), attribute(속성), elemenet(요소)
2. HTML tags	HTML의 기본 구성 태그들과 기본 태그들	!DOCTYPE, html, head, body, h1, h2, h3, h4, h5, span(inline-element, 한 줄로 나옴), p(paragraph, 줄바꿈), a, div
3. HTML Attributes	태그에 속성을 지정해서, 디자인적인 요소를 활용하거나 기능을 사용할 수 있다.	href, id(id를 가진 태그는 단 하나), class(id 역할이랑 비슷하고, 여러 태그에 중복된 이름 부여 가능)
4. Introduction to CSS	CSS는 HTML 태그들에 디자인을 입혀준다. CSS 작성법은 테이블 아래를 참고하기	인라인 스타일, style 태그, css 파일(추천)에 작성, CSS 파일을 꼭 링크하기
5. CSS Font Style	다양한 font style	font-family, font-size, font-weight, font-style, color(기본 색, hex, rgb, hsl 등 - 'color picker 검색)
6. CSS 문구 스타일	텍스트 정렬, 들여쓰기	text-align, text-indent, blockquote(인용문), 스페이스 효과를 주려면 태그 안에   입력하기
7. Margin과 Padding	요소에 여백을 스타일할 수 있는 Margin, Padding	Margin(border 외부에 생기는 영역), Padding(border 내부에 생기는 영역), margin(padding): 위 오른쪽 아래 왼쪽
8. Border	테두리 스타일	border: 두께 선스타일 선색깔, 선 스타일 예시: dotted, dashed, solid, double, groove, ridge, inset, outset 등
8-1. Box-sizing	Box를 일정하게 만들어준다고나할까?	box-sizing: border-box;, 모든 tag에 스타일 적용하는 selector는 '*'
9. 상속(Inheritance), 그룹(Grouping)	상속: 부모의 스타일이 자식에게도 적용 - 구체적인 것이 우선!	그룹: 이 태그, 저 태그, 여기저기 막 그냥 ','를 사용해서 같은 스타일을 적용할 수 있다.
10. CSS Selector	selector 표현과 우선 순위	CSS에서는 selector를 a .b div .c. span 처럼 결합해서 지정할 수 있다. CSS 우선 순위: tag <<<<< class <<<< id <<<<<< inline css
11. [HTML/CSS] 이미지	HTML에서 이미지를 생성하기 img src="이미지 주소" alt="이미지가 안 뜨면 보여줄 텍스트"	CSS에서는 background-img를 property로 사용한다. 이미지를 추가하고, 가로 값을 입력해주기.
12. Block vs Inline	Block elements: 한 줄을 다 차지, Inline elements: 바로 옆에 위치할 수 있다.	display: blcok, inline-block, none 등, float: left, right 등
12-1. margin auto	margin: 10px auto;	margin: 10px auto 10px auto; 와 같음, margin: 10px auto;는 요소가 가로 중앙에 온다.
13. List	ol, ul, li	list-style, selector:first-chile, last-child, nth-child(odd), nth-child(even)
14. Table	table, thead, tbody, tr, th, td	셀 병합: colspan(열 병합), rowspan(행 병합) 속성 사용
15. Input	사용자가 직접 텍스트를 입력할 수 있는 input, textarea 태그	input type="text", "password", "number" placeholder="도움말을 넣으시오" - textarea: 더 긴 텍스트를 입력하고 싶으면 추가
16. CSS Position-absolute	position: relative, absolute

CSS 작성법

Selector {
	property: property value;	# 이 라인을 Declaration이라고 함.
}

p {
	color: red;
}
-> p라는 태그의 내용을 빨간색으로 바꾼다.

.profile-info{
	color: grey;
}
-> class 속성이 있는 태그를 지정할 때는 '.'을 앞에 붙여주고, class의 값을 지정해서 CSS 효과를 준다.

#personal-info {
	border: 1px solid blue;
    text-align: center;
}
-> id 속성이 있는 태그를 지정할 때는 '#'을 앞에 붙여주고, id의 값을 지정해서 CSS 효과를 준다.

HTML 문장 사이에 스페이스를 넣고 싶다면

tag 안에 스페이스 효과를 주고 싶으면  를 원하는만큼 입력해주면 된다.

밑줄을 꾸미고 싶다

text-decoration: underline; 으로는 
밑줄 스타일을 마음대로 바꿀 수 없어서 
border-bottom: 3px solid black; 
padding-bottom: 10px; 
같이 CSS를 입력해서스타일을 줄 수 있다.

css의 selector에 어떤 표현을 하면 attribute를 바꿀 수 있다

input::placeholder {
	color: #bbb;
}
# 슬픈 사실은 attribute를 표현한다고 모두 콜론을 쓰는 것은 아니라는 것.

type에 스타일을 입히고 싶다면

input[type="text"] {
}

위 두 개를 응용하면

input[type="text"]::placeholder {
	color: red;
}

element 위에 마우스에 올리면 손가락 모양이 나오게 해보자

button:hover {
	cursor: pointer;	
}

box-sizng, 모든 css 파일에 꼭 넣어야하는 속성

* {
	box-sizing: border-box;
}