.png)
뭐 많이 배웠는데 뭐 배웠더라...
제일 중요한 건 a 태그 라고 배웠다.
a 태그: 링크로 인해 정보사회가 시작되었다. 페이지와 페이지를 연결하는 하이퍼 텍스트로 문서 사이를 오갈 수 있게 되었다.
✔ 설치
✔ 실행
✔ 배포
세 가지 체크리스트만 제대로 해도 성공이다.
2교시 실습/ HTML & CSS
공간을 만들때 사용하는 태그
header / main / footer 를 이용해 웹페이지 상단, 본문 하단 영역을 만든다.
<body>
<header>
<nav>
</nav>
</header>
<main>
</main>
<footer>
</footer>
</body><header>– 웹사이트 상단 영역<nav>– 웹사이트 내 메뉴 버튼을 담는 공간<main>– 웹사이트 본문 내용<article>– 문서 내에서 독립적인 컨텐츠를 위한 공간<footer>– 웹사이트 하단 영역<div>– 임의의 공간을 담는 공간
특히로는 임의로 구역(id 또는 class)를 나누어서 style 값을 주기 좋다.
tip
3번씩 입력하기 위해선 특정 태그를 여러번 입력할 때!
h1{hello}*3 Tap을 해주면 바로입력됨 개꿀.
CSS 연동방법
적용우선순위
1. inline > 2. internal > 3. external
Inline Style Sheet – 태그 안에 직접 원하는 스타일을 적용
<h1 style="color: blue;">Hello World</h1> Internal Style Sheet – <style> 태그 안에 CSS 코드를 작성
<style>
h1 { color: blue; }
</style>- External Style Sheet –
<link>태그로 CSS 문서를 불러와<link rel="stylesheet" href="style.css">
적용우선순위
1. inline > 2. internal > 3. external
css의 세가지 선택자
스타일 적용 우선순위는 style > id > class > type
-
Type 선택자 – 특정 태그에 스타일 적용
<head> <style> h1 { color: blue ; } </style> </head>
2. Class 선택자 – `.`으로 클래스 이름을 선언하고, 해당 클래스에 스타일을 적용
<head>
<style>
.coding { color: blue; }
</style>
</head>
<body>
<h1 class= "coding">Class Elice</h1>
</body>
3. ID 선택자 – #으로 ID를 선언하고, 해당 ID에 스타일을 적용
<head>
<style>
#coding { color: blue; }
</style>
</head>
<body>
<h1 id= "coding">ID Elice</h1>
</body>
트렌디 풀스택 개발자