TIL 2 - HTML, CSS (2)

HTML

🔔 시맨틱 태그

1. header, footer, main, nav

• header : 페이지 소개나 제목을 담당하는 태그
• footer : 저작권 정보나 사이트 제공자 정보를 넣는 태그
• main : 몸통을 담당하는 태그
• nav : 내비게이션 바를 만드는 태그

2. section, article, aside

• section : 구획을 구분하는 태그
• article : 포스트를 담당하는 태그
• aside : 메인 내용과 관련이 있지만 직접적인 연관성이 없는 부분을 분리하는 태그

---

CSS

• 풀어서 쓰면 Cascading Style Sheets
• HTML은 콘텐츠에 구조와 의미를 주기 위한 언어라면, CSS는 콘텐츠에 스타일과 모양을 주기위한 프리젠테이션 언어

✔️ 선택자

1. 전체 선택자

* {
	margin: 0;
	text-decoration: none; 
 }

2. 태그 선택자

p {
	color: green;
 }

3. 클래스 선택자

/* class1 클래스를 가진 모든 태그를 지정 */
.class1 {
	color: green;
 }
/* div 태그 중 class2 클래스를 가진 태그를 지정 */
div.class2 {
	color: green;
 }

✔️ 자주 사용하는 CSS 속성

• 참고 링크 : https://www.walterz.net/2017/08/18/%EC%9E%90%EC%A3%BC-%EC%82%AC%EC%9A%A9%EB%90%98%EB%8A%94-css-%EC%86%8D%EC%84%B1/

✔️ 메뉴바 화면 상단 고정

1. 고정시킬거야! - header 영역의 position 속성을 fixed로 지정
2. 어디에 고정? - header 영역의 offset 속성을 이용해서 설정
   • 화면 상단에 빈틈없이 붙이는 경우 : top = 0
   • 화면 양측에 꽉차게 하는 경우 : left, right = 0 (또는 width = 100%)