[패스트캠퍼스 프론트엔드 과정] 5~10일차(2주차 - 2022.04.15~20)

5~10일차 (2주차) 배운내용

HTML

시맨틱 웹은 의미로 적인 웹이라는 뜻으로 웹 상의 정보에 잘 정의된 의미 를 부여함으로써 사람뿐만 아니라 컴퓨터도 쉽게 문서의 의미를 자동화 하여 처리 할 수 있도록 한 것이다.

시맨틱 웹의 목적은 검색엔진이 크롤링 할 때 , HTML 코드 만으로 그 의미를 인지하게 하기 위함이다. HTML 로 작성된 문서는 컴퓨터가 해석할 수 있는 메타데이터와 사람이 사용하는 자연어 문장이 뒤섞여 있는데 , 시맨틱 태그를 이용하면 개발자가 의도한 요소의 의마가 명확히 드러날 수 있다. 이를 통해 코드의 가독성을 높이고 유지보수를 쉽게 한다.

non-semantic 요소 : div, span 등 이 있으며 이들 태그는 contents에 대한 어떤 설명도 하지 않는다.

semantic 요소: form, table, img 등이 있으며 contents의 의미를 명확히 설명한다.

<header> : 문서나 섹션의 머릿말을 의미하고, 한 문서에 여러개 사용가능하다.

<main> : 해당 페이지의 본문을 의미하여 페이지 마다 하나만 존재해야 한다.

<footer> : 문서나 섹션의 꼬릿말을 의미하고, 한 문서에 여러개 사용할 수 있다. 보통 작성자의 정보 등이 들어간다.

<aside> : 본문과 직접적인 연관성이 없는 분리된 내용을 의미한다. 주로 사이드바에 사용된다.

<nav> : 네비게이션을 의미한다.

<section> , <article> : 같은 성경의 내용 묶음을 의미한다. <main> 과 달리 조금 더 자유로운 의미로 사용되어 <section> 안에 <article> 을 작성할 수 있고 반대로도 가능 하다.

출처

important : 9999999999(무한대) 점 - 가장 우선으로 선언.

inline 선언 : 1000점.

ID 선택자 : 100점.

Class 선택자: 10점. (가상클래스 선택자(:)도 포함된다.)

부정 선택자(not()) : 10점. (부정 선택자 내에는 어떤 선택자가 있어도 부정 하기 때문에 점수계산에 포함 하지않는다.)

태그 선택자 , 가상요소선택자(::): 1점.

전체 선택자(*):0점.

상속: 점수를 별도로 계산하지 않음.

inline 선언과 !important 는 사용을 권장하지 않음.

index.html
<body>
<div id="hello" class="hello">Hello world!</div>
</body>

style.css

.hello{ /* 10점 */
    color: red;
}

#hello{ /* 100점  (우선 적용된다.)*/
    color: blue;
}

style.css

/* 점수가 같은경우 */

.hello{ /* 10점 */
    color: red;
}

.hello{ /* 10점 - 더 나중에 해석된 선언이 우선 적용 한다. */
    color: green;
}

이 문제에 관하여([패스트캠퍼스 프론트엔드 과정] 5~10일차(2주차 - 2022.04.15~20)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kbm12/패스트캠퍼스-프론트엔드-과정-510일차2주차-2022.04.1520

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다