⏺학습한 내용🕵️‍♂️

⭕ CSS 강의내용

🔘 텍스트 색 바꾸는 2가지 방법

1. head에서 style 태그로 속성, 속성값을 주는 방식
2. body에서 h tag 하위에 style속성, background 속성값 주는 방식

단점 -> 코드가 길어지면 가독성이 떨어짐 (유지보수때 힘듦)

🔘 연동시키는 방법

외부에서 파일을 가져올 때 link tag 사용
rel => 연동 될 파일의 속성을 말해줌 ex) stylesheet
type => 연동 될 파일의 구성을 말해줌 ex) text/css
href => 연동 될 파일의 경로를 입력함

🔷Menu - view - layout - column2 입력 시 HTMl/CSS 동시작업

🔷CSS에서의 주석 입력 => /* */

---

✅ 선택자

🔘 CSS에서 HTML 문서의 특정영역에 접근하는 방식 (4가지)

◼ type 선택자

html 태그를 기준으로 접근하고자 할때

◼ id 선택자

html에서 id를 부여하고 css에서 #id속성값을 넣으면 됨

◼ class 선택자

id와 비슷한데 별명을 부여하고 css에서 .별명을 넣으면 됨

즉, 같은태그인데 서로다른 색상을 적용하고 싶을때

attibute 선택자

html 타입에 속성값을 가지고 디자인을 하는 것

---

✅ Cascading

🔘 id/class 차이

◼ id는 이름이라 하나만, class는 별명이라 여러가지 사항을 넣을 수 있다.

◼ 동일한 id 속성값은 하나의 문서에 오로지 한개, class는 여기저기 똑같은 값 입력가능

🔷동일한 선택자를 선택했을때는 나중에 작성된 속성값에 우선순위를 둠.

🔷우선순위 : style > id > class > tag

✅ 미세먼지 팁

🔘 css 공간 설정 = width,height

입문때는 백그라운드 칼라 설정으로 확인가능

css에서 width, height %값의 결과는 부모태그의 크기에 영향을 받는다.

🔘 border는 한번에 세가지 속성을 정할수있음

선의 종류, 굵기, 색깔(순서는 바껴도 상관이 없음)

🔘 텍스트 데코레이션

글자에 밑줄을 적용할때 사용

크게 2가지타입 유용

underline - 글자 밑부분에

lin-through - 글자 가운데 선 생성

🔘 text align -> 텍스트 정렬

주의사항-> 해당태그 안에서의 좌,중,우 로 이동한다(백그라운드 칼라설정으로 이동 범위 확인)

🔘 백그라운드 이미지는 크기를 조정할때 잘릴 수 있지만 img태그는 비율은깨져도 모두이미지가 나옴

정보성을 갖고있는 이미지라면 img 태그를 사용해야한다!

데코할거면 백그라운드!

⏺학습내용 중 어려웠던 점🤦‍♂️

아직까지 어려운점 없이 잘 따라가는 중,,

⏺해결방법🙋‍♂️

쏟아지는 명령어들을 외워야 하나 생각을 했었지만 기능들이 이름과 직관적이기도 하고 자주 사용하면 외울 필요없이 사용할 듯,,

⏺학습소감🙇‍♂️

개인적으로 HTML, CSS 창을 한번에 같이 작업하는게 좋았는데, 원래 한 화면에 창을 4개씩 띄워놓고 작업하기 때문에 개발환경에서도 빠르게 적응할 수 있길..!