CSS 04 : Box Model(content, padding, border, margin), Box Sizing

CSS 04 : Box Model(content, padding, border, margin), Box Sizing

CSS 04 : Box Model(content, padding, border, margin), Box Sizing Box Model CSS 속성 박스 모델은 속성을 지정하지 않으면 브라우저가 선언한 기본값으로 세팅되며, 우리는 CSS 속성으로 박스 모델 값을 변경할 수 있다. 가장 안쪽 영역부터 content, padding, border, margin이라고 한다. Content width, height : 가로, 세로 너비 지정 ex) width: 200px; 인라인 요소에는 width, height가 적용되지 않음. 인라인 요소는 콘텐츠만큼의 영역을 갖기 때문 display: inline-block으로 가로 세로 너비를 변경 가능함. span { border: 1px solid red; width:..

  • format_list_bulleted CSS
  • · 2022. 11. 1.
  • textsms
CSS 03 : 글꼴 속성 정리 MDN

CSS 03 : 글꼴 속성 정리 MDN

CSS 03 : 글꼴 속성 정리 MDN (예시) 글꼴 종류 지정 font-family: serif, monospace; => serif라는 글꼴을 적용하고 만약 안되면 monospace 글꼴을 적용함.(하나만 써도 됨) 글자 크기 font-size: 16px; 이텔릭체 여부 지정 font-style: italic; 글자 굵기 지정 font-weight: bold; 소문자를 작은 대문자로 바꿈 font-variant: small-caps; 단위 px : 픽셀 단위 rem : 루트 요소의 글꼴 크기(html). ex) 2rem은 html글꼴 크기의 2배 em : 요소의 글꼴 크기. 현재 자기 자신 폰트 사이즈의 몇배로 할것인가? vw : viewport 너비의 1% viewport는 현재 보이는 화면 사이 ..

  • format_list_bulleted CSS
  • · 2022. 10. 31.
  • textsms
CSS 02 : 선택자 정리

CSS 02 : 선택자 정리

CSS 02 : 선택자 정리 전체선택자 에스트릭 : 모든 요소를 선택할 때 쓰는 전체 선택자. 브라우저의 기본 속성을 초기화 할 때 사용함. h2 태그를 사용하는 모든 곳에 공통적으로 속성을 부여함. class 선택자 : 특정 class값에만 공통적으로 속성을 부여함. 동해물과 백두산이 마르고 닳도록 id 선택자 : id 선택자는 웹문서에서 중복되지 않는 단 하나의 요소만을 선택할 수 있어야 함. 굿 아이디어! 속성 선택자 : 주어진 속성을 가진 모든 요소 검색함. a[href] { color: purple; } /* 태그에 href속성이 존재하는 모든 요소들에 대해 적용함.*/ a[href='https://example.org'] { color: green; } /* 태그에 href속성이 "https:..

  • format_list_bulleted CSS
  • · 2022. 10. 30.
  • textsms
CSS 01 : 인라인, 내부, 외부 스타일 적용 방법

CSS 01 : 인라인, 내부, 외부 스타일 적용 방법

CSS 01 : 인라인, 내부, 외부 스타일 적용 방법 1. CSS의 구조 h1 { color: blue; } h1: 선택자 color: 속성명 blue: 속성 =>어떠한 요소를 선택해서 어떠한 스타일 규칙을 적용하겠다. 2. CSS 적용 방법 인라인 스타일 내부 스타일 외부 스타일 인라인 스타일 스타일을 꾸미고 싶은 요소에 CSS를 적용한다. 제목 인라인은 직접적으로 태그에 스타일을 적용하는 방법이다. 여러 속성을 적용할 때는 ;으로 구분한다. 현업에서는 잘 사용하지 않는다고 한다. 내부 스타일 헬스 오늘도 헬스장에서 운동을 합니다. head 태그 내의 style태그에서 특정 id나 class의 통일된 속성을 적용시키는 방법. A.html에 있는 style을 B.html에서 사용하려면 B.html에다가..

  • format_list_bulleted CSS
  • · 2022. 10. 30.
  • textsms