1일차

Wonju·2021년 11월 29일
0

5일정리하기

목록 보기
1/4

코딩에 필요한 것 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 변화

  1. 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 이라 부름. ~의 라는 의미로 볼 수 있음

profile
안녕하세여

0개의 댓글