HTML, CSS

HTML, CSS

상태: 발행 완료
태그: Web
날짜: 2024년 3월 6일
생성 일시: 2024년 3월 6일 오전 9:01
최종 편집 일시: 2024년 3월 6일 오후 9:15

Hypertext 가 등장하면서 전 → 후 개념이 전↔ 후 개념으로 갈 수 있었음

브라우저들이 html을 해석해준다.

을 통해 해당 문서가 html로 문서라는 것을 나타낸다.

요소 : 하나의 요소는 여는 태그, 닫는 태그, 내용으로 구성 됨

속성 : 여는 태그쪽에서 작성됨

<p class="editor"> class는 속성의 '이름' editor는 속성의 '값'

<h1> 단순히 텍스트를 크게 만드는 것 X, 현재 문서의 최상위 제목이라는 의미를 부여하는 것

선택자

h1 { /* 선택자 */ 
    color : red ; /* 세미클론으로 선언 마무리 */
    font-size : 30px; /* 속성 과 값 */
}

inline Style <h1 style="color:beige; background-color: yellow;">

internal Style : 내부 스타일 방식

<style>
  h2{
    color:red;
  }
</style>

External Style : 외부 파일로 css적용시키는 것

Css Selectors 종류

기본 선택자

• 전체 * 선택자
• 요소 (tag) 선택자 ex) p, h1
• 클래스 선택자
• 아이디 선택자
• 속성 선택자

결합자

• 자손 결합자 (” “ (space)) ex) ul li{ }
• 첫번째 요소의 자손 요소를 선택
• 자식 결합자 (”>”) ul>li{ }
• 첫번째 요소의 직계 자식만 선택

id는 문서에서 한 번만 쓰는 것을 권장 함

Specificity 명시도 가중치

요소 선택자 > 클래스 선택자

1. importance
2. inline 스타일
3. 선택자 id > class > 요소
4. 소스 코드 선언 순서

Cascade 계단식 : 동일한 가중치를 가졌을 때 마지막에 정의 된 선택자가 높다

상속

텍스트와 관련된 요소는 상속됨

배치와 관련된 요소는 상속 되지 않음 width, height 등

관련 권장사항

요소 (태그) 이름은 ‘소문자’

속성은 따옴표는 “큰 따옴표”

html은 에러를 반환하지 않음 = 작성 주의

css 인라인 스타일은 사용하지 말 것

속성은 되도록 class만 사용할 것, 문서에서 단 한번 유일하게 적용될 스타일이다? id 선택자 사용을 고려