Tech/CSS

CSS 정렬

2023.01.16

flex 핵심 : 여러 태그를 하나라 묶어서 정렬 flex는 기준을 부모박스로 두고 움직이게 된다. display: flex; flex-direction: column; -> 박스를 수직으로 나열 align-items: center; ->부모 박스의 가로를 기준으로 가운데 정렬 justify-content: center; -> 부모 박스의 세로를 기준으로 가운데 정렬 flex-direction: row; (defalut) -> 박스를 수평으로 나열 justify-content: center; ->부모 박스의 가로를 기준으로 가운데 정렬 align-items: center; -> 부모 박스의 세로를 기준으로 가운데 정렬 정렬 속성 flex-start : 처음으로 기본값 flex-end : 끝으로 정렬 sp..

Tech/CSS

CSS

2023.01.16

Cascading Style Sheet CSS는 HTML의 색, 크기, 정렬 등을 변경하여 꾸며주는 언어이다. 특성 (property) 색, 크기, 정렬 등이 존재한다. 기본문법 selector(선택자) { property(속성) : value(값) ; property(속성) : value(값) ; } 사용방법 html 태그 속성에 입력하는 방법 장점 : 스타일 적용 태그 즉시 확인 가능 단점 한번에 하나의 태그에만 적용 가능 전체 코드 가독성 나쁨 관심사 분리 안됨 태그에 입력하는 방법 장점 전체 코드 가독성 향상 유지보수 용이 단점 태그와 CSS 연결이 필요 관심사 분리가 안됨 CSS 파일을 만들어 불어오는 방법 장점 전체 코드 가독성 향상 유지보수 용이 관심사 분리됨 단점 태그와 CSS 연결 필요 ..

CSS 정렬

CSS

티스토리툴바