230207_28일차 : SQLD특강 / HTML,CSS

1교시, 2교시, 3교시, 4교시 - SQLD특강(SQL자격검정 실전문제 문제풀이)

5교시, 6교시, 7교시, 8교시 - HTML/CSS(CSS)

1. CSS

1) 속성

① Flex : flex box라고도 불리며, 레이아웃을 배치하기 위해 나온 기능 / 부모요소:Container, 자식요소:item

- Container : display:flex / flex-direction : row(default=가로), column(세로)  > 이를 통해 메인축과 서브축이 정해진다 / justify-content : 메인축 정렬 ) center, space-between(양끝공간없음), space-around(양끝공간있음) 등 / align-items : 서브축 정렬 ) center 등 / flex-wrap : 줄넘김처리/ item이 100%를 넘으면 줄넘김처리) wrap(줄넘김처리), no-wrap(default 처리하지않음)

- Item : flex-basis : 20%(item의 기본크기를 설정/각 item마다 크기를 다르게 설정가능)

실습 주의) container에 입력해야할 flex를 이용해야한다.

② Position : 자유자재로 요소의 위치를 배치하는 속성

① static : 정적인 / 위치속성이 비활성화

② relative : 상대적인 / 기준은 현재 나의 위치(초기위치상태)

③ absolute : 절대적인 / 기준은 속성이 static이 아닌 부모, 없다면 body

④ fixed : 고정적인 / 스크롤을 무시하고 화면을 기준으로 고정

 

2) 스타일시트 선언 방식

① 인라인 스타일방식 : 요소 내 style 속성으로 스타일지정 / 우선순위가 높음. 긴급시 사용

② 내부 스타일방식 : head요소 내 style 생성하여 

③ 외부 스타일방식 : link태그를 사용해서 연결(rel:무슨관계인지/href:연결할파일이 어디있는지)

④ 임포트 방식

- 스타일시트 우선순위