본문 바로가기

728x90
반응형

CSS

(59)
[CSS] 선언 방식 ▶ CSS 선언 방식 1. 인라인(Inline) 방식 - HTML 요소(태그)의 style 속성에 직접 작성하는 방식. - 직접 작성하기 때문에 선택자를 작성할 필요가 없음. - 사용 예시 /* HTML */ hello - 반복적인 사용이 많은 경우나 유지보수 등에서 위와 같이 직접 입력하는 방식은 좋은 방법이 되지 못함. - 사용 빈도를 떠나 직접 입력하는 행위는 지양하는 것이 좋음. 2. 내장(embedded) 방식 - HTML 문서의 안에 작성하는 방식. - 사용 예시 /* HTML */ hello 3. 링크(link) 방식. - HTML의 를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식. - 사용 예시 /* HTML */ hello /* main.css */ div{ color:red; f..
[CSS] 기본 문법 ▶ CSS 기본 문법 - 문법 형식 선택자{속성: 속성값; 속성: 속성값;} - 먼저, HTML의 CSS를 연결할 때 사용하는 선택자를 작성. - 중괄호를 열고 닫은 범위 내에 특정한 CSS 명령인 속성과 그 속성에 해당하는 실질적인 값을 적음. - 속성과 값은 하나의 세트. - 하지만 위의 예시와 같이 옆으로 나열하여 작성하는 방식은 코드가 많아지면 가독성이 떨어짐. - 일부 경우를 제외하고는 아래와 같이 작성. 선택자{ 속성: 속성값; 속성: 속성값; } - 선택자(Selector)의 역할 - 속성과 값을 지정할 대상을 검색. - HTML의 특정한 부분을 검색해 연결해 줌. - 속성(property)과 값(value)의 역할 - 검색된 대상에 지정될 CSS 명령. - 예를 들어 글자색을 빨간색으로 하..
[CSS] CSS 적용 우선순위 스타일을 적용하는 데에는 다양한 방법이 있으며 동시에 여러 가지 방법을 사용할 수도 있기 때문에 Element에 적용되는 스타일이 충돌할 수도 있다. 따라서 스타일 적용에 대한 우선순위 규칙을 알아 둘 필요가 있다. CSS 적용의 우선순위는 아래와 같다(1이 높은 우선순위, 6이 낮은 우선순위). 1. !impoartant : 속성 값 뒤에 !important를 붙인 속성 2. Inline style attribute : HTML에서 style을 직접 지정한 속성 3. ID 선택자(#id)로 지정한 속성 4. Class 선택자(.class), pseudo class(가상 클래스, ex. :first-child) 5. Tag Element : tag 이름으로 지정한 속성 6. 상속된 속성 : 부모 태그의 ..

728x90
반응형