2023/12/06⛳️ CSS🥲

---

 

 

❤ 김춘장이의 위키백과 - 나만의 공부 기록 Tistory ❤ 

GitHub - gayulz/StudyHistory: 나의 공부 기록 commit

 

 

---

 

 

 

 

Css란?

Html의 색 , 크기, 정렬 등을 변경하여 시각화를 담당하는 언어이다 HTML로 구조를 만들면 CSS로 꾸미기를 한다고 보면 된다 css 특성 : 속성 , 값 

coloer : 색상
background-coler : 배경색상
font-size : 폰트크기
width : 가로 크기
height : 세로 크기
border-radius : 테두리 둥글게

문법

단일 속성 지정

	선택자 { 		속성 : 값 ;  	 } 

다중 속성 지정

	선택자 {  		속성 : 값; 		속성 : 값; 		속성 : 값; 		속성 : 값; 	 } 

Css 사용방법

html 태그 속성에 즉시 입력방법
style태그에 입력
css파일 만들어 불러오기

html 태그 속성에 입력 방법
태그에 css속성이 바로 기록되어 있어, 별다른 지정이나 연결이 필요하지 않다
태그가 많아질수록 가독성이 떨어지고 수정 시 불편하다.
한 번에 하나씩만 수정이 가능함으로 유지보수 측에선 비효율적이다

style태그에 입력하는 방법

head에 style 태그를 사용하여 선택자 지정 후
body에서 사용한다.
선택자를 사용하여 여러 항목을 수정하거나 추가가 가능하기 때문에 유지보수가 편하다

css파일을 별도관리

파일을 완전히 분리를 한 뒤에 연결하여 사용한다
실무에서 가장 많이 사용한다

3가지 방법 장단점

css파일을 먼저 연결해준 다음에 선택자로 태그를 지정해 준다

박스모델

Html 태그들은 모두 박스 모델로 이루어져 있다
배경색이나 테두리가 안 보이기 때문에 박스형인지 모른다.
박스 요소 배치 시 가장 중요한 건 크기

 

바깥 테두리가 중심인 박스(border-box)
// 먼저 선언하는 게 좋음
border-box : padding 조절 시 border는 고정되고 사이즈 증감 시 contents의 크기가 변한다
내용이 중심인 박스 (content-box)
// 기본값 옵션으로 되어있음
content-box : padding 조절 시 contents는 고정되고 border의 크기가 변한다
padding은 택배 박스의 완충재라고 생각하면 된다.

Box size 전체선언방법

* {  box-sizing: border-box;  } 

개발공부 중인 개린이의 포스팅입니다📝