CSS / 01 / 기초-5

태그의 위치를 변경할 수 있는 속성 👉 position

[ ❗ ] 헷갈리지말고 개념을 잡아 보기 🫡

① 박스모델 > 여백 : 요소(content)의 주변 여백(공간)을 조절
② position : 요소(content) 자체의 위치를 조절 (상대적 / 절대적)

---

position의 종류

1. static : 기본값
내가 작성한 코드의 순서대로 태그가 생성된다.

• 11시 방향 시작점에서 그냥 순차적 나열 거기
  
  

---

2. relative : 특정 태그에게 새로운 층을 부여해서
위치를 이동시킨다. (≒ 상대경로)

• [⭐] 원래 태그가 생성 된 위치를 기반으로 움직인다.

---

3. absolute : 특정 태그에게 새로운 층을 부여해서
위치를 이동시킨다. (≒ 절대경로)

• 화면 상단의 점을 시작점으로 시작 : 원래 위치는 중요하지 않음
• 부모태그가 static인 경우 👉 화면 최상단 기준
• 부모태그가 relative, absolute, fixed인 경우 👉 부모태그 기준
• div 태그는 서로 포함 되는 경우가 많기 때문에, 부모태그에 relative로 처리해줘서 포함관계를 잘 표시하자 !
  

---

4. fixed : 화면의 특정 부분에 태그를 고정하겠다.

• 리모컨,설정버튼,최상위버튼 등 사용자가 스크롤 내려도 화면에 고정하는 내용에 사용
  

---

[🥶] CSS는 우선순위가 정말 중요하다 !


만약, 코드를 아무리 찾아도 찾지 못 해서 수정하지 못 할 때
👉 !important;

• 권장사항은 절대 아님 !! ( 틀이 다 깨질 수 있음)
• 진짜 죽어도 못 찾겠어서, 강제로 적용하고 싶을 때.

p{
 color : red !important;
}

---

✅ css코드의 실행위치

① 내부방식 : html 파일 안에 직접 css 작성

• 단점 : 코드가 노출, 재사용성 ↓, 전체 코드의 양이 증가한다

• 언제? : 로컬 개발(태그와 css 한 눈에 확인), 간단 스타일(권장사항은 아님)

  
  

② 인라인 : 태그안에 직접 style 속성을 명시하는 방법

• 단점 : 코드가 노출, 재사용성 ↓, 전체 코드의 양이 증가한다

• 언제? : 간단 스타일(1~2개) ▶ 중요하지 않은 디자인

  
  

③ 외부방식 : html파일과 css파일을 구분시켜서 개발
▶ link를 통해서 html 파일과 css파일을 연결

• 장점 : 코드가 노출 X, 재사용성 ↑, 유지보수에 용이

---

[✅ 실제 개발시] 반드시 외부 방식으로 개발 하자 !!
[✅ 서버 업로드시] 꼭 꼭 꼭 백업을 미리 해놓기 !!