옛날에 미리 정리해둔 공부내용을 다시 한번 꺼내어보면서 회고를 남겨본다..

회고가 제일 빡세...

CSS 코드 정리

• width: 000px; —→ 넓이
• border:00; —> 테두리 두께
• 테두리 스타일: solid 등등
• padding: 박스 안 넓이
• margin-top, bottom, left, right: 00px;박스를 기준으로 위, 아래, 오른쪽, 왼쪽 넓이를 설명
• h1:: before{content: Topic:”;} 은 h1에 있는 텍스트 전에 Topic: 이라는 텍스트를 넣어달라는 요청
• font-size: 말그래도 글자크기
• font-family: 글씨체
• font-style: 글자 스타일
• p::first-letter {}—> 모든 p태그의 첫번째글자에 괄호에 들어가는 스타일을 넣어달라는 태그

<코딩알려주는 누나 포트폴리오>

replit

replit

Positioning 속성값들

1. Static: 웹사이트의 기본 속성값, top right bottom left 등 위치 속성은 무시됨.

2. relative: Html 태그가 있는 위치에서 left right top bottom 값을 통해 움직임

3. absolute: 부모영역에서 lest right top bottom 을 이용해 주어진 위치로 움직임

   • 단! 여기서 부모란? 무보태그가 relative, absolute fixed 속성중 하나여야함. 만약 부모태그가 해당 속성을 가지고 있지 않다면 body태그 기준으로 움직임 왜냐하면 body 태그는 ㄱrelative를 기본 속성으로 가지고 있기때문이다

4. fixed: ablsolute와 비슷 하지만 스크롤로 내려도 그 위치에 고정, 무조건 브라우저 창 기준임

5. sticky: relative 와 비슷 하지만 스크롤로 내리면 fixed 처럼 그 위치에 고정

Flexbox의 특징

1. display: flex는 모든요소를 가로로 둔다
2. display: flex는 부모한테 적용을 하고 자손을 컨트롤한다.
3. justify-content: 가로로 요소들을 움직인다(flex-start: 맨앞으로, center: 가운데로, flex-end: 맨끝으로, space-between: 중간에 공간을 줘서 퍼뜨린다. space-around: space-between 보다는 좁게 공간을 준다)
4. align-items: 세로로 요소들을 움직인다.
5. flex-direction: column 가로로 정렬된 요소를 세로로 바꾸고 justify-content는 세로로 align-items는 가로 방향으로 바뀐다.

• HTML 5부터는 시멘틱 태그를 제공해준다
• 의미론적인 태그를 제공해준다 그래서 일일이 class를 쓸 필요없이 main 파트면 css에main만 써서 굳이 class를 쓰지 않아도 되는 귀찮음을 덜어준다.
• 의미론적인 태그이니 div태그랑 별만 다를것은 없다.

<부트스트랩관련 공부내용>
코딩알려주는 누나