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 중 하나이면서 가장 가까운 조상의 위치를 기준으로 움직인다.
- 특정 태그를 기준으로 움직이고 싶을 때 효과적이다.