[CSS 마크업순서]
코딩에 있어서 흐름이 굉장히 중요한데, 일단 다음과 같은 흐름으로 하면 초보자들도 손쉽게 진입할 수 있다고 본다.
흐름을 써 보자면, 아래의 순서대로 머리속에서 정리 해나가면서 코딩 작업을 한다.
<style>
/* 1. css 초기화 */
/* 2. 선택자 작성 */
/* 3. 위치선정 */
/* 4. 여백 */
/* 5. 꾸미기 */
</style>
1. 일단 <body>안에 간단한 구조를 짜고 <- html 마크업을 한 뒤,
2. <style>에서
해당 요소에 border:1px solid red;를 줘서 영역확인을 먼저 한다.
3. 다음 css를 초기화 시킨다
- html. body: margin,padding
- ul, ol, li, p: margin,padding
- a: color 지정, text-decoration: none
- li: list-style: none
4. 선택자를 작성을 한다. -> 배경색을 주거나, 컬러를 입힌다. <- 확인 작업
5. 위치 <--가장중요한 부분
- float (상대위치) <- 인접 요소의 영향을 같이 받는다.
공간분할하고나서, 안쪽공간을 다시 나눌때
왼쪽인가, 오른쪽인가 확인하고 float:left, float:right를 쓴다.
- position (절대위치) absolute; 포토샵의 레이어 처럼 공중에 뜬다. -> 높이값이 사라진다.
header가 자식요소를 감쌀 수 없게 된다. 그래서 따로 높이를 주어야 한다.
relative; <- absolute 자식요소를 감쌀 때
자식요소가 float 속성일경우 overflow:hidden; <- 자동으로 계산
레이어 공중으로 띄워야 할 때 쓴다.
- display
- flexnox
- grid
- margin:0 auto; <- 가운데로 몰기
6. 여백 / 꾸미기 <- 5번 작업이 끝난 후 자연스럽게 따라온다.
- marjin -> 바깥여백
- padding ->안쪽여백
- line-height ->줄간격 조절
- letter-spacing ->자간조절
영역별 위치속성 사용법
1. 헤더 : position:relative를 주고 로고나 메뉴는 position:absolute를 준다.
2. 본문 : 본문에 포함된 자식요소는 position:absolute를 주지 않는다.(수시로 높이가 가변적이기 때문에)
3.푸터 : 본문과 동일
- 자식요소가 position:absolute라면 부모요소는 반드시 높이를 준다
'STUDY > 멀티미디어콘텐츠과정' 카테고리의 다른 글
| #21 CSS 연습, 받은 디자인 파일에서 부터의 작업 (0) | 2021.12.27 |
|---|---|
| #20 css 연습, 헤더 만들어 css적용 (0) | 2021.12.23 |
| #18 CSS 레이아웃 - Position (0) | 2021.12.21 |
| #17 CSS 레이아웃 - Floats (0) | 2021.12.21 |
| #16 CSS 레이아웃 - 그리드 (0) | 2021.12.21 |
댓글