[CSS]3. 레이아웃

1. overflow: 자식 요소가 부모 요소의 범위를 벗어날 때 어떻게 처리할지 결정

 

(사용방법)overflow: 속성

visible일 때 hidden일 때

scroll일 때 auto일 때

 

2. float: 요소를 띄워서 배치하는 속성(요소끼리 겹치지 않게 배치)

글의 오른쪽에 사진 배치

 

3. css 선언방식

1)내장방식: HTML 문서 head 태그 안에 style 태그를 생성하여 디자인 작성

2)인라인 방식: HTML 요소에 직접 style 속성을 사용해서 디자인 작성

-명시도가 높으므로 내장방식 작성 권장

3)링크방식 : link 태그를 이용해서 스타일이 작성된 외부 문서를 연결

→외부문서가 style 태그 자체가 되는 것

→외부문서가 style 태그 자체가 되는 것

 

 

4. 웹폰트 사용하기

폰트사이트(눈누)-폰트선택-웹폰트로 사용 복사

 

5. CSS 프레임워크: Cascading Style Sheets 언어를 사용하여 웹 디자인을 가능하게 하는

라이브러리

 

1. Bootstrap

https://getbootstrap.com/

Bootstrap

2. Bulma

https://bulma.io/

Bulma: Free, open source, and modern CSS framework based on Flexbox

3. Materialize

https://materializecss.com/

Documentation - Materialize

 

●부트스트랩: HTML 문서 요소에 대한 다양한 디자인 제공

(사용방법)

1. 메인화면에서 link태그 복사하여 head태그에 붙여넣기

2. 적용할 요소들을 문서메뉴에서 선택하여 body에 붙여넣기

 

예)문서-컴포넌트-버튼

원하는 색 버튼의 코드 선택 복사하여 body태그에 붙여넣기

 

버튼 크기 조절하기

 

6. flex: 레이아웃을 배치하기 위한 기능

→display의 속성, 화면 조절하면 요소가 같이 조절됨

 

1)요소의 구분

-내가 배치하고 싶은 요소: item

-item의 부모요소: container

=>한 요소는 item이거나 container가 된다.

 

2)사용방법

1. container에 display: flex 작성 ->flex 기능 사용가능

2. container에 배치 속성, 정렬 작성

3)container에 작성할 속성

 

①flex 설정: display: flex →flex 설정해야 정렬, 배치 속성 적용됨

②flex-direction: 배치 방향 설정

 

● row(기본값): 요소가 수평으로 나열됨

-메인축: 가로(수평)

-서브축: 세로(수직)

 

*회색-container /*파란색-item

 

● column: 요소가 수직으로 나열됨

-메인축: 세로(수직)

-서브축: 가로(수평)

 

③메인축 정렬: justify-content

-메인축의 방향(수직, 수평) 기준에서 정렬

-메인축이 수평일 때는 가로축에서 가운데(center) 정렬

메인축이 수직일 때는 세로축에서 가운데(center) 정렬

 

④서브축 정렬: align-items

-메인축이 row일 때: 서브축은 column(수직)이므로 세로에서 가운데(center) 정렬

-메인축이 column일 때: 서브축은 row(수평)이므로 가로에서 가운데(center) 정렬

-container의 한 가운데에 배치: justify-content가 center이고, align-items를 center

 

⑤줄 넘김 처리: flex-wrap

스크롤 내리면 요소가 위로 올라가게 설정하기

→줄넘김 처리

 

 

4)item에 작성할 요소

-flex-basis: item의 기본크기 설정→container에서 item이 차지하는 비율

 

7. HTML 문서 템플릿

https://html5up.net/

HTML5 UP

 

<스타일 시트 명시도 계산>

● 전체선택자: 0

● 타입선택자: 1

● 클래스 선택자: 10

● 아이디 선택자: 100

● !important: 1000

 

!*important: 스타일 속성 뒤에 !important 추가

 

[TIP]파일이 커서 CSS 적용이 안 될 때

HTML 문서-개발자모드-새로고침 우클릭-캐시비우기 및 강력 새로고침