얼음저장소

글꼴 h, p 태그 등은 reset.css 를 적용하면 설정들이 사라진다 font-style 글자의 기울기 nomal : 기울기 없음(기본값) italic : 이탤릭체 oblique : 기울어진 글자 font-weight 글자의 두께 nomal, 400 : 기본 두께 (기본값) bold, 700 : 두껍게 bolder : 상위(부모) 요소보다 더 두껍게 lighter : 상위(부모) 요소보다 더 얇게 100 ~ 900 : 100 단위의 숫자 font-size 글자의 크기 16px : 기본값 단위 : px, em, rem 등 단위로 지정 % : 부모요소의 폰트 크기에 대한 비율 smaller : 부모요소보다 작은 크기 larger : 부모요소보다 큰 크기 xx-small ~ xx-large : 가장 작은 ..

너비(width, height) 박스모델에서 사용 auto (기본값) : 브라우저가 자동으로 너비를 계산 단위 : px, em, vw 등 단위로 지정 Inline 요소 (span ...) 포함된 콘텐츠 크기만큼 자동으로 줄어듬 (auto) width, height 를 지정할 수 없음 Block 요소 (div ...) 가로 : 부모요소의 크기만큼 자동으로 늘어남 세로 : 포함한 콘텐츠 크기만큼 자동으로 줄어듬 max-width, max-height 요소가 커질 수 있는 최대 가로/세로 너비 none : 최대 너비 제한 없음 (기본값) 단위 : px, em, vw 등 단위로 지정 auto : 여기선 크게 중요하게 쓰이지 않음 min-width, min-height 요소가 작아질 수 있는 최소 가로/세로 너비..

부모 요소의 스타일이 자식요소에도 적용이 된다 모두 적용되는 것은 아니고 대부분 글자/문자 관련 속성들이 적용된다 (font-style, font-weight, ...) 강제 상속 부모요소가 있고, 자식요소가 있을때 수정이 필요한 경우 자식요소의 값을 고치지 못하는 경우가 생길 수 있다. 상속이 자동으로 안되는 부분들을 강제로 상속시킬 수 있 이때 속성값을 inherit 으로 지정하면 부모 요소의 값을 따라간다. 선택자 우선순위 점수가 높은 선언이 유리함 (명시도, 중요도) 점수가 같으면 가장 마지막에 해석된 선언이 우선됨 not 은 점수계산 하지 않음 ID 선택자 : 100점 Class 선택자 : 10점 태그 선택자 : 1점 전체 선택자 : 0점 인라인 선언 : 1000점 !important : 999..

스타일 선언 방식 인라인 방식 (너무 우선순위가 높아서 권장하지않음) 링크(병렬로 연결) : link css 내장 : \@import : 직렬로 연결, 링크방식의 css 파일 내에서 \@import url("주소"); 하는 것 ⇒ 직렬연결은 병렬에 비해 로딩이 오래걸린다 CSS 선택자 기본 ⇒ * : 전체 선택자, 모든 요소를 선택 ⇒ (태그) : 태그 선택자, 태그이름을 명시하면 선택(ex, div, li ...) ⇒ .(클래스) : 클래스 선택자, 클래스속성값 요소를 선택 ⇒ #(아이디) : 아이디 선택자, 아이디 속성값 요소를 선택 복합 ⇒ ABCXYZ : 일치 선택자, 선택자 ABC, XYZ 를 동시에 만족하는 요소 선택 (태그선택자를 먼저 써야 구분자로 구분가능) ⇒ ABC>XYZ : 자식 선택..

태그 설명 div 블록 요소, 별다른 의미 없음 h1 (1~6) 인라인 요소, 제목을 의미하는 요소 p 블록 요소, paragraph (문장)을 의미하는 요소 img 인라인 요소, 이미지를 삽입 / 필수요소 : src , alt ul 블록 요소, Unordered List 순서가 필요없는 목록의 집합 (ol도 있지만 잘 사용안함) li 블록 요소, List Item 목록 내 각 항목 a 인라인 요소, anchor 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소 span 인라인 요소, 특별한 의미 없음 br 인라인 요소, 줄바꿈 input 인라인 이면서 블록 요소 : 인라인-블록 요소, 수평으로 쌓이지만 가로,세로 여백 지정 가능 속성 type : 인풋받을 형식 지정 (text, checkbox, ..

인라인 요소 span : 대표적인 인라인 태그, 수평적으로 쌓임 aaabbb 이렇게 쓰면 띄어쓰기없음 aaa bbb 이렇게 쓰면 띄어쓰기 있음 (엔터쳐도 띄어쓰기로 출력) 콘텐츠(글자) 크기만큼 자동으로 가로 세로가 조절됨 css width height 를 조정해주어도 반응 없음 (가로세로 사이즈 지정할 수 없다) css margin 은 위,아래는 정상적으로 적용안되고 왼쪽, 오른쪽은 적용됨 padding은 은 위,아래는 정상적으로 적용안되고 왼쪽, 오른쪽은 적용됨 인라인요소는 내부에 블록요소를 사용할 수 없다 → 인라인 내 인라인은 가능 블록 요소 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도 요소가 수직으로 쌓임 가로는 부모요소의 크기만큼 자동으로 늘어남, 세로는 콘텐츠 크기만큼 가로, 세로 사..

- float 속성 : 좌우로 배치할때 float : left; margin으로 위치조정 rignt 도 상관없음 float 속성값 none : 띄우지 않음 (기본값) left : 왼쪽에 띄움 right : 오른쪽 initial : 기본값으로 설정함 inherit : 부모 요소로부터 상속함 float를 이용할때 생기는 이슈 부모역할 부분이 자식이 float설정이 되었을때 자식으로 인식못하는 경우가 있어서 위치가 제각각이 됨→overflow:hidden; →이것들로 해결 →overflow:auto; 겹치는 박스가 float를 무시할때가 있음→ clear : both; (양쪽 다 맞추기) → clear : left; (위의 속성에 맞춰야 함) 예시코드 HTML first second third CSS .wra..

CSS의 구성 1. 기본 구성 span { color : red; } span: selector(선택자) color: property red: value 2. style을 HTML페이지에 적용하는 방법 inline > internal > external 의 우선순위 순서로 적용 inline HTML태그 안에다가 적용다른 CSS파일에 적용한 것 보다 가장 먼저 적용 HELLO World! internal style 태그로 지정구조와 스타일이 섞이게 되므로 유지보수의 어려움별도의 CSS파일을 관리하지 않아도 되며 서버에 CSS파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없음 HELLO World ! external 외부파일(.css)로 지정 3. 상속 상위에 설정된 스타일을 하위에서도 사용 bo..

👉CSS CSS: Cascading Style Sheets | MDN CSS(Cascading Style Sheets, 종속형 스타일 시트)는 브라우저에서 웹페이지의 외형을 결정하는 선언형 언어다. 브라우저는 선택한 요소에 CSS 스타일 선언을 적용해 화면에 적절히 표현한다. 하나의 스타일 선언은 속성과 그 값으로 이루어져 있다. CSS는 Cascading Style Sheets의 약자 CSS는 여러 가지 스타일 정보를 기반으로 최종적으로 '경쟁'에 의해서 적절한 스타일이 반영 경쟁: 똑같은 속성을 CSS파일 혹은 inline으로 정의를 중복으로 한 경우, 다른 selector을 사용하였지만 결국 같은 노드를 가리키는 경우 어떤 스타일을 브라우저가 반영을 하는가? 기본 구성 div { width: 300..