22.10.24 CSS

인터페이스 - 컴퓨터와 교류 위한 연결고리 UI user interface

 

CSS 문법 구성

main(셀렉터) {

  background-color : #4a4a4a;   -선언

  속성명(property)    속성값    선언 구분자;

  }

셀렉터- 특정 태그의 이름이나 id, class를 선택해서 그거의 속성을 바꿔주는 거야

 

background-color와 background

-컬러는 요소의 배경 색을 지정

백그라운드는 색 뿐만 아니라 이미지와 gradient 값을 지정 가능

 

 

em CSS 크기 단위 중 배수 단위. 해당 텍스트 기본 크기를 1em으로 놓고 그에 대한 상대적인 크기로 숫자 순서대로는 위 오른, 아래, 왼 여백   -이건 부모 엘리먼트에 따라 상대적으로 크기 변경되어 계산 어렵.

rem 브라우저 기본 글자 크기가 1rem 이걸 기준으로 배수 단위,

백분율 단위% 는 기본을 100%로 놓고 그에 대한 상대적인 크기로

 

픽셀 단위(px)는 스크린의 픽셀 기준으로 하는 절대적인 크기로 (화면 크기가 변동될때 그대로라 비추)

 

 

CSS 파일을 HTML 파일과 연결

<link rel="stylesheet" href="css파일주소" />

<link rel="stylesheet" href="layout css파일주소" /> 이렇게 하나 더 연결 가능

<link> HTMl파일과 다른 파일 연결 태그

rel 은 연결하려는 파일의 역할

 

CSS 스타일 HTML 직접 적용 방법(인라인과 내부는 CSS 적은 경우에만 적용하는 것을 권장)

인라인, 내부 스타일 시트, 외부 스타일 시트

 

id 와 class 차이

-id

#으로 css에서 선택해줘

한 문서에 단 하나의 요소에만 적용 가능

특정 요소에 이름 붙임

-class

.으로 css에서 선택

동일 값 갖는 요소 여럿 선택 가능. 띄어쓰기로 class 이름 구분

스타일 분류

 

구글 폰트 https://fonts.google.com/

Google Fonts

 

font-weight : 글자 굵기

text-decoration : 밑줄, 가로줄

letter-spacing : 자간 조절

line-height 행간 조절

 

CSS 셀렉터 관련 참조 링크

https://poiemaweb.com/css3-selector

CSS3 Selector | PoiemaWeb

 

-CSS Rule Set (다시 봐야할 셀렉터 부분) 그래도 이해는 다 했다..!! 만세!!

h1(selector) {color(property): red(property value); font-size: 12px;(declaration)}(declaration block)

전체 셀렉터 : * { } (전체 하나가 아니라 하나하나 모든 elements 선택)

태그 셀렉터 : 태그명 { }

id 셀렉터 :  id attribute 값 지정, 일치하는 요소 선택. #id 어트리뷰트 값 { } (어트리뷰트 값 중복 불가능)

class 셀렉터 : .class 어트리뷰트 값 { } (어트리뷰트 값 중복가능)

자손/자식(1 level 하위) 자식 셀렉터 : 셀렉터A > 셀렉터B (셀렉터A의 모든 자식 요소 중 셀렉터B와 일치하는 요소 선택)

후손/하위(n level 하위) 후손 셀렉터 : 셀렉터A 셀렉터B (셀렉터A의 모든 후손 요소 중 셀렉터B와 일치하는 요소 선택)

인접 형제(동위) 셀렉터 : 셀렉터A + 셀렉터B (셀렉터A의 형제 요소 중 셀렉터A 바로 뒤에 위치하는 셀렉터B 요소 선택)

일반 형제 셀렉터 : 셀렉터A ~ 셀렉터B (셀렉터A의 형제 요소 중 셀렉터A 뒤에 위치하는 셀렉터B 요소 모두 선택)

가상 클래스 셀렉터 : 요소의 특정 상태(hover 마우스가 그위에 있는 상태 / 링크 방문 전/후 / 포커스 들어올때 등)에 따라.

                                  셀렉터:가상-클래스(ex. hover, link, visited, active, focus, not)

동시 셀렉터 : 셀렉터A셀렉터B (사이에 띄어쓰기 없으면 이 셀렉터 둘 다 만족하는 요소 선택)

p:first-child { } : 여기서 nth child 이런게 (p 엘리먼트 말고)다른 부모 엘리먼트의 첫번째 자식 엘리먼트가 p 엘리먼트 인걸 찾으라는 건가? 내가 이해한 바로는.. 자기가 첫번째 자식인 p 요소

p:first-of-type { } : 셀렉터에 해당하는 요소의 형제 요소 중 처음 등장하는 해당 요소(여기선 p 요소)

p:not(#only) { } : p(셀렉터) 요소 중에서 id only가 아닌 요소 다 선택

 

-하나의 타겟을 여럿이 타겟팅하여 각 적용하는 서식 종류가 같을 때 p태그 셀렉, id 셀렉, class 셀렉 이런식으로 우선순위가 따로 있어. 다 재끼고 우선순위 높은 애 적용(왼쪽부터 높은 우선순위)!important-inline-id-class-일반태그-전체 셀렉터(*)

 

block 박스 :  줄바꿈 되는 박스. 욕심쟁이.

                     width, height 이런 속성 적용 가능.

                     기본 너비 100%. 그 줄을 다 차지. 예) <p>, <div>

inline 박스 :  줄바꿈 일어나지 않고 크기지정 안되는 박스.

                     width, height 이런 속성이 적용 불가능.

                     글자만큼 기본너비. 예) <span>

                     -이럴 경우 display: inline-block; 추가해주면 속성 적용 가능( display 속성 추가. 값으로 inline-block 지정 )

inline-block 박스 :  줄바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는 박스.

                              width, height 이런 속성 적용 가능.

                              글자만큼 기본너비.

 

-CSS 박스 모델 : 밖에서부터 Margin Border Padding Content

-margin 과 padding

margin은 외부 여백(화면과의 여백) top right bottom,left; 순서.

  margin-left: 이런 식으로 특정 속성도 가능. (특이하게도 음수값도 지정 가능)

padding은 border기준 내부 여백 margin 규칙과 동일 적용.

 

CSS관련 세부 속성 

https://developer.mozilla.org/ko/

MDN Web Docs

 

border 두께 스타일 색상;

overflow: auto; 넣어주면 콘텐츠가 상자 밖으로 나와도 안에서 스크롤 표시해줘 overflow-x: hidden하면 세로로 스크롤. 값만 hidden하면 넘치는 부분 안보여

width를 내가 지정해도 padding이나 border 값 지정에 다라 내가 지정한 width와 다르게 나올 수 있어

  -이럴 땐 모든 요소 선택 셀렉터 이용 * {box-sizing: border-box;} 모든 요소에 box-sizing: border-box  를 추가

 

박스 크기 측정 기준 두가지 : content-box(박스 크기 측정 시 기본값) border-box(이걸 권장해)

 

오 종합퀴즈 다 맞았다 기특해 내 자신. 셀렉터 참고자료 올려준 동기님 감사합니다.

https://www.w3schools.com/css/css_exercises.asp

CSS Exercises

이거까지하기엔 시간이 허락이 되지 않았다..ㅎ