startdeveloping웹 개발

https://css-speedrun.netlify.app/

id/class 차이점 id 선택자와 class 선택자는 특정 요소를 대상으로 스타일을 적용하기 위한 것입니다. 예를 들어 id와 class를 사용하면 모든 요소가 아닌 특정한 요소에만 스타일을 적용할 수 있습니다. id 선택자와 class 선택자의 차이는 문서 안의 '복수'의 요소에 스타일을 적용하는 것인가 아니면 '유일'한 요소에 스타일을 적용하는 것인가입니다. 결론적으로 말하면 id는 '유일'한 요소에 적용, class는 '복수'의 요소에 적용할 수 있습니다. id: '유일'한 요소에 스타일을 적용 선택자에 (#)과 (id)명을 붙여 식별 class: '복수'의 요소에 스타일을 적용 요소에 (.)과 (class)를 붙여 구별

CSS 색상 CSS 색상을 표현하는 방법은 색상명을 쓰는것과 16진수 표현법(hexadecimal code)이 있습니다. 색상명 색상명을 씁니다. .test { background-color: red; } 16진수 표현법(hexadecimal code) 16진수를 사용하여 색상을 표현합니다. .test { background-color: #FF0000; } 위의 코드의 FF0000이 뜻하는 것은 red: FF, green: 00, blue: 00을 16진수로 나타낸 것을 표현한 것입니다. 00이 가장 작은 수, FF가 가장 큰 수 이고 큰 숫자가 될 수록 밝은 색을 나타냅니다.

CSS 단위 CSS에서 사용하는 단위는 font-size, text-indent, line-height, width, height, padding 등 크기를 나타내는 값에 쓰입니다. 크게보면 절대 크기가 변하지 않는 절대단위와 상황에 따라 크기가 변하는 상대단위로 나뉩니다. 절대 단위 고정된 값을 출력하며 절대 크기가 변하지 않습니다. 이 방법은 크기가 가변적인 웹사이트가 아닌 경우에는 유용하나, 반응형 사이트에 적용하기 위해서는 매우 복잡하다는 단점이 있습니다. ※px(픽셀) 값을 주로 사용합니다. cm (센티미터) mm (미리미터) in (인치) px (픽셀) pt (포인트) pc (파이카) 상대 단위 부모 요소나 다른 요소의 크기에 영향을 받아 상대적으로 크기가 변합니다. 반응형 웹사이트를 작업할 ..

Block와 Inline Block 와 Inline을 나눠서 설명하겠습니다. 아래설명을 확인해주세요. Block 대부분의 HTML element(요소)는 block 요소입니다. , , , , , , 등이 모두 block 요소에 해당하는 태그입니다. block 요소는 한 영역을 차지하는 박스형태를 가집니다. 기본적으로 width값은 100%가 됩니다. 즉 이 요소의 좌우측에 다른 요소를 붙여넣을 수 없습니다. 그 자체로 한 줄을 완전히 차지합니다. margin, padding 속성이 적용된다. 너비(width)와 높이(height)값을 지정 할 수 있다. Inline inline 요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있습니다. , , 등의 태그들이 inline 요소입니다. 주로 텍스트를 주..

CSS란? CSS(Cascading Style Sheets)는 documents가 사용자에게 어떻게 보여질까를 기술하는 언어이다. HTML이 정보를 표현한다면 CSS는 HTML문서를 시각적으로 이쁘게 꾸며주는 역할을 한다. CSS 주석 표시 /* CSS 주석 */

CSS 선언 방법 CSS 선언 방법은 내부 스타일, 인라인 스타일, 외부 스타일이 있습니다. 1. 내부 스타일 내부 스타일은 HTML 파일 안에 2. 인라인 스타일 요소의 style 속성에 직접 스타일을 작성하는 방식 입니다. 우선순위상 우선하기 때문에 공통기능에 대해서 따로 파일로 관리하는 경우 변경이 불가능하기 때문에 유지보수에 어려움이 있는 방식입니다. 그렇기 때문에 권장하지 않는 방식입니다. ... 3. 외부 스타일 link 태그를 이용하여 외부 CSS문서를 가져와서 연결하는 방식입니다. 실무에서 주로 사용하는 방식으로 대부분의 프로젝트에서 이 방식을 사용하고 있습니다.