CSS 07 : float, clear 속성

CSS 07 : float, clear 속성

CSS 07 : float, clear 속성 float 속성 html요소에 적용시키면 기본적인 흐름에서 벗어나 둥둥 떠다니듯 배치가 됨. 인접한 텍스트나 인라인 요소가 그 주위를 자연스럽게 감싸도록 배치가 되는 것을 말함. none : 기본값. 요소를 띄우지 않음. left : 왼쪽에 띄움 right : 오른쪽에 띄움 inherit : 부모 요소로부터 상속함 initial : 기본값으로 설정 clear 속성 float의 left나 right값을 취소함. clear: none; - 기본값 clear: left; - 왼쪽을 취소 clear: right; 오른쪽을 취소 clear: both; 둘다 취소 예시 팥빙수 조아팥빙수 조아팥빙수 조아팥빙수 조아팥빙수 조아 팥빙수 조아팥빙수 조아팥빙수 조아팥빙수 조아팥빙..

  • format_list_bulleted CSS
  • · 2022. 11. 1.
  • textsms
CSS 06 : 네비게이션 바(상단바) 만들기

CSS 06 : 네비게이션 바(상단바) 만들기

CSS 06 : 내비게이션 바(상단바) 만들기 inline-border를 활용해 웹페이지의 상단바를 만들어 보자. home about service contact feedback 태그는 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 내비게이션 링크(navigation links)들의 집합을 정의할 때 사용한다. 요소를 사용하는 일반적인 예로는 메뉴, 목차, 인덱스 등이 있다. 왼쪽에 동그란 점을 없애고 각 글자들의 링크를 없앤다. home about service contact feedback 글꼴 속성과 list 속성 값을 none으로 초기화하였다. style코드를 다음과 같이 수정한다. 글자를 흰색으로 바꾸고 nav태그의 배경색을 blueviolet으로, 전체 패딩과 마진 값을 0으로 초기화한..

  • format_list_bulleted CSS
  • · 2022. 11. 1.
  • textsms
CSS 05 : display 속성(none, block, inline, inline-block

CSS 05 : display 속성(none, block, inline, inline-block

CSS 05 : display 속성(none, block, inline, inline-block display 속성 HTML요소를 어떻게 표시할지를 결정. display: block이면 Block Level Element이며, display: inline일 경우 inline Level Element. -> 기본 4가지 값 none : 요소를 보이지 않게 설정. block : 가로 영역을 모두 채움 inline : 콘텐츠만큼 영역을 차지. 줄 바꿈 X. width, height지정 X inline-block : inline처럼 콘텐츠만큼 영역을 차지해 가로 배치 가능, block처럼 내부 속성인 width, height등과 같은 값은 변경 가능. block Display Block content conte..

  • format_list_bulleted CSS
  • · 2022. 11. 1.
  • textsms
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