https://tadaktadak-it.tistory.com/69?category=1024176 [CSS] background(배경) 1. 배경색(background-color) - HTML 요소의 배경색을 설정 color : white(색깔명) = #ffffff(16진수) = rgb(255,255,255)(RGB코드) background-color: 색깔명 혹은 RGB코드; 2. 배경 이미지(background-image) -.. tadaktadak-it.tistory.com 1. 배경이미지 스타일(background-image) - 웹 화면 또는 박스 모델 등의 배경으로 이미지를 삽입할 때 사용 * 배경 이미지 관련 속성 background-image 이미지를 삽입할 경우 사용 background-s..

1. block vs inline block 특징 - 가 대표적인 블록을 기본 속성으로 하는 태그 - 콘텐츠 또는 텍스트 등과 관련없이 화면의 너비(줄) 만큼 점유 - 즉, width, height를 주더라도 한 줄을 차지함 - margin, padding, height, width 모두 적용 가능 - 단, width, margin 의 경우 좌/우측은 block의 특성 상 태그가 너비 전체를 차지하므로 특수한 경우를 제외하고는 의미가 없을 수 있음 inline 특징 - 이 대표적인 인라인을 기본 속성으로 하는 태그 - 콘텐츠 또는 텍스트 등의 크기 만큼만 박스의 너비를 점유 - padding 모두 가능 - margin은 좌/우만 가능 - width, height 모두 적용 불가능 inline-block ..

1. CSS 박스 모델 - 모든 HTML 요소는 박스(box) 모양으로 구성된 박스 모델을 기본으로 함 - 박스 모델은 HTML 요소를 테두리(border), 패딩(padding), 마진(margin) 등을 갖음 박스 모델 용어 content(내용) 텍스트나 이미지 등 박스 내의 실제 내용 border(테두리) 박스의 테두리(내용과 패딩이 안에 포함) padding(패딩) content와 border 사이의 간격(안쪽 여백) margin(마진) border 밖의 여백으로, 주로 이웃 요소와의 간격(여백)으로 사용 박스 모델 기본 속성 width 박스의 넓이(default: display 속성에 의해 결정) height 박스의 높이(default: 일반적으로 콘텐츠의 높이) background 박스의 배경..

1. 배경(background) 스타일 https://tadaktadak-it.tistory.com/69?category=1024176 [CSS] background(배경) 1. 배경색(background-color) - HTML 요소의 배경색을 설정 color : white(색깔명) = #ffffff(16진수) = rgb(255,255,255)(RGB코드) background-color: 색깔명 혹은 RGB코드; 2. 배경 이미지(background-image) -.. tadaktadak-it.tistory.com - HTML의 모든 태그에 배경 색상 또는 이미지를 설정할 수 있는 속성 background-color HTML 요소의 배경색을 설정함. background-image HTML 요소의 배경 ..

1. CSS 레이아웃 - HTML 페이지를 부모 자식 관계를 설정하고 배치 - Z 인덱스로 상하를 구분하여 앞/뒤의 배치를 설정하기 위한 화면 구성 - 레이아웃은 CSS의 전부라고 해도 관언이 아닐 정도로 복잡 - 속성을 구성/구현하기 어려우며, 이는 수많은 시행착오를 통해 익힐 필요 있음 2. 디스플레이(display) 속성 - 레이아웃의 가장 기본적인 속성으로 가로 폭을 박스/화면 전체 차지할지 등 결정 - 태그마다 기본 속성을 가지고 있으며, 기본적으로 등은 block - 등은 inline 속성을 기본 값으로 갖는다. - 사용 예 : display: block; none 화면에서 태그를 숨김 block 대표적으로 태그의 기본속성 content/text와 상관없이 한줄 전체를 점유 가로영역(너비를 1..

1. CSS - Cascading Style Sheet - HTML로 작성된 웹 문서의 스타일의 디자인을 재정의하여 보다 시각적으로 보여주기 위한 스타일 시트 언어 장점 - 웹 구조(HTML)와 디자인(CSS)를 분리하여 관리할 수 있다. - 디자인(CSS)을 변경하여 동일한 HTML을 쉽게 재디자인 할 수 있다. - 반응형 웹을 만들기 위해서는 반드시 필요하다. 2. CSS 스타일 시트 안녕하세요 반갑습니다. 프론트엔드 과정입니다. HTML CSS - 인라인 스타일 : HTML 태그 안에 style 속성으로 작성 - 내부 스타일 :