[HTML & CSS]선택자 종류 문법 배치속성 반응형 플렉스 박스 정렬

1. CSS (Cascading Style Sheets) 적용하기

 

1) HTML 내부에서 적용하기

 

CSS 코드

<style>                                  -- 선택자       p {           color: brown;                    -- color = 속성, brown = 속성값       } </style>

 

2) 외부 CSS 파일 적용하기

 

2. CSS 선택자

 

1) 종류

 

- 전체 선택자(*) : head를 포함한 HTML 문서 내의 모든 요소를 선택한다.

 

- 유형(type) 선택자

- tag selector - 특정 태그 지정해 작성하는 방식이다.

 

 - 아이디 선택자(#)

- 요소를 식별해주는 선택자이다. - 특정 아이디 하나를 선택할 때 사용한다. - #아이디 : 아이디를 지정하여 일치하는 요소(태그)를 선택한다. 단, 아이디는 중복 할 수 없다.

 

- 클래스 선택자(.)

- 여러 태그를 하나의 클래스로 묶을 수도 있고, 태그 하나에 여러 클래스 이름을 붙여줄 수 있다. - .클래스명 : 클래스명과 일치하는 요소를 선택한다. 하나 이상 지정 가능하다.

- 복합 선택자

1) 자손 선택자  - 조상의 모든 자손을 선택하는 방식이다. - 조상 하위에 있는 자손을 선택한다. - 조상과 자손은 띄어쓰기를 통해 구분한다.

 

- 문법

<style> 조상 자손 { } </style>

 - 자식 선택자 

- 인접 형제 선택자 

- 일반 형제 선택자

3. 배치 속성

 

1) 블록 레벨 요소 & 인라인 레벨 요소

 

- display 속성

- 블록 레벨 요소 : 요소가 있는 가로 줄 전체를 차지한다.

- 인라인 레벨 요소 : 요소가 있는 공간만을 차지한다.

 

2) 인라인 레벨 요소로 바꾸기

 

- display 속성으로 inline을 적용한다.

- 딱 콘텐츠 너비만큼만 가로 공간을 차지한다.

 

3) 블록 레벨 요소로 바꾸기

- 줄바꿈이 일어나지 않았던 태그까지 모두 줄바꿈이 일어난다.

 

 

4. 박스 모델 : 마진, 테두리, 패딩

 

1) 기본적으로 모든 HTML 요소를 감싸는 상자이다.

2) 요소 : 텍스트, 사진

패딩(padding) : 요소 주변 영역을 감싸고 해당 부분은 투명색이다. 테두리 (border) : 요소와 패딩을 감싸는 테두리이다. 마진(margin) : 테두리 밖의 영역을 감싼다. 해당 부분은 투명색이다.

5. 반응형 웹 페이지 만들기

 

1) html, css를 자동으로 맞춰서 보여주는 기능이다.

2) 미디어 쿼리  

@media (적용할 속성) {적용값}     @media 미디어타입 (적용 조건) {       규칙     }     @import url("url.css")

6. 플렉스 박스

 

1) 더 다양한 레이아웃을 만들고자 고안된 기법이다.

2) flex : 유연한

 

3) 플렉스 박스는 UI 디자인에 최적화된 레이아웃을 정의하는 CSS이다.

- 이미지, 텍스트 같은 요소를 원하는 곳에 배치하는데 사용한다.

- 여백을 없앨 수 있고, 축을 변경할 수 있다.

- 제 1원칙 : 부모만이 플렉스할 수 있다.

- 플렉스박스를 사용하려면 부모자식 관계에서 부모에 적용해야 자식이 영향을 받는다.

 - display flex

- 주축 정렬하기

- 교차축 정렬하기

 

4) display flex

- 속성값 : block, inline, flow, grid, flex

- 자식 요소를 원하는 방향으로 유연하게 배치할 수 있다.

- flex : 마진이 사라진다.

 

5) 주축 정렬하기

- justify-content 속성

- flex-start : 시작부분에 정렬 - flex-end : 끝에 정렬 - center : 중앙에 정렬 - space-between : 요소가 축을 따라 펼쳐짐 (각 요소 사이에 공간이 있음) - space-around : 요소가 축을 따라 펼쳐지지만 가장자리 주변에도 공간이 있음

 

 - 웹 페이지의 축을 따라 요소 사이에 공간을 만드는 방법을 정의한다.

 

- 축

- 주축 : 가로 - 교차축 : 세로 - flex-direction : 축을 변경해줄 수 있다.

 

6) 교차축 정렬하기

- 세로 축으로 가운데 정렬하기

- align-items

- 속성값

- stretch : 요소의 길이와 교차축의 길이를 같게한다. - flex-start : 시작 위치에 정렬 - flex-end : 끝 정렬 - center : 중앙 정렬

 

7) 플렉스 축 방향 바꾸기

- 별도의 속성 지정이 없다면 주축은 가로를, 교차축은 세로를 의미한다.

- justify-content가 주축을 정렬 - align-items가 교차축을 정렬

 

- flex-direction에 의해 바뀔 수 있다.

- 축 방향 바꿔주는 속성 - row (기본값) : 가로 방향(행) 배치 - row-reverse : 역순으로 가로 방향(행) 배치 - column : 세로 방향(열) 배치 - column-reverse : 역순으로 세로 방향(열) 배치

 

 

7. 위치 지정하기

 

1) position (위치) : 웹 페이지의 요소를 어떻게 배치할 지 정한다.

2) 네가지 위치값

- static(기본값) : 기본 위치 - fixed : 웹 브라우저 화면 기준 고정 위치 - relative : 기본 위치(static) 기준으로 한 상대적인 위치 - absolute : static이 아닌 가장 가까운 조상 기준의 상대적 위치

 

3) static(기본값) : 기본 위치

- 변화나 움직임이 없다는 의미이다.

- position값을 따로 지정해주지 않으면 모든 태그는 static 상태이다.

 

4) fixed : 웹 브라우저 화면 기준 고정 위치

 - '고정된'이라는 뜻이다.

- fixed 적용된 요소는 페이지를 스크롤해도 항상 같은 위치에 있다.

- 일반적으로 웹 페이지 상단에 있는 메뉴바 혹은 네비게이션바에 fixed를 적용한다.

 

5) relative : 기본 위치(static) 기준 상대적인 위치

- '상대적인'

- 어디를 기준으로 하는 상대적인가?라고 했을 때, 자기 자신을 기준으로 상대적을 말한다.

- 자기 자신을 기준으로 top, left, right, bottom에 간격을 주고 싶을 때 사용한다.

 

6) absolute : static이 아닌 가장 가까운 조상 기준 상대적 위치

- 조상 : 부모가 될 수 있는 모든 요소를 말한다.

- position값이 fixed, relative, absolute 중 하나이면서 가장 가까운 조상의 위치를 기준으로 움직인다.

- 특정 태그를 기준으로 움직이고 싶을 때 효과적이다.