코딩에 필요한 것 3가지: 인내심, 검색하기(공유하기), 열정
HTML
<tag>element</tag> : 약속된명령 with 고유한 기능
<hr>태그: 수평선 그려줌
<pre>태그: HTML 입력한 형태 그대로를 보여주는 태그(줄바꿈 이런거그대로 출력된다)
block: 페이지 가로 넓이 전체를 차지하는 요소
inline: 자신의 크기만큼만 차지하는 요소
종속태그
- 선택박스 태그:
<select>와<option> - 목록 태그:
<ol>/<ul>과<li> - 표 태그:
<table>과<th>/<tr>/<td>
HTML문서구조
-<head></head>: 검색엔진 위한 영역
-<body></body>: 브라우저에서 보이는 영역
CSS사용법
1. html태그 속성에 입력
2. <style>태그에 입력
3. CSS파일 만들어 불러오기 : 주로 사용하는 방법
태그를 선택해 꾸미는 선택자
1. * 선택자 : 전체선택
2. tag 선택자
3. class 선택자
4. id 선택자
5. inline-style 선택자
6. !important 최우선 선택자 : 우선순위 다 뚫어버림
<link href="../02-css/02-signup.css" rel="stylesheet" />
rel은 relationship의 약자.
box-sizing
박스모델 표시 방법 - 사이즈가 매우 중요
2가지 있음
1. border-box: 박스 테두리를 기준으로 padding조절 함에 따라 content 변화
- content-box: padding 조절 바깥으로 해서 content 변화 ㄴㄴ
content-box 가 기본값임. border-box로 사이징을 지정해주는게 좋다
Flex : 부모박스 안의 자식박스 들을 어떻게 정렬할까
display: flex; 하면 flex-direction, justify-content, align-items 생김
justify-content는 flex-direction과 항상 같은 방향을 갖는다
justify-content: center = 가운데 정렬
align-items: center = 상하로 가운데 정렬
display 옵션은 flex뿐 아니라 여러가지가 있음. 그 중 Position은,
position의 옵션은 absolute, relative, fixed 등 있음
기본값은 static.
absolute: 박스 자체의 절대적인 위치.
relative: 상위박스 기준으로 상대적인 위치
fixed: 현재 보고 있는 화면을 기준으로 하는 절대적인 위치
ex) 화면 맨 아래에 바 고정해놓는 경우
일반적으로는 간격 줄 때 margin보단 padding을 준다
왜?
한 페이지에서 만들어놓은 박스를 여러개 복붙할 수 있는데, 이떄 margin이 붙어있으면 귀찮아질 수 있기 때문
미니홈피 UI만들떄도 박스들 보면 다 양끝에 정렬되어있음
이런건 다 flex - justifycontent : space-between 으로 해줄수있음
class = "wrapper__left" 여기서 언더바 2개는 BEM 이라 부름. ~의 라는 의미로 볼 수 있음
