🔶HTML
1. 개요
- HTML은 웹사이트를 이루는 실체
- head와 body로 이루어져 있음
<html>
<head>
<title>코딩네컷 만들기</title>
</head>
<body>
<h1>몸통부분!</h1>
</body>
</html>2. 주요태그
- 모든 HTML 요소는 태그로 이루어져 있음
- 태그는 이름표 같은 것
- 많이 쓰는 태그들 (모를 땐 찾아보면 됨,, 외울 필요 X)
<div>division의 약자, 구역을 나누는 역할</div>
<p>paragraph의 약자, 문단</p>
<h1>heading 태그, 제목은 제목이에요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6 h 뒷 숫자가 ↑, 글자 크기는 작아지고 중요도 ↓ </h3>
<a href="https://spartacodingclub.kr/"> 하이퍼링크(링크가 연결된 글자) </a>
<img src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/free/logo_teamsparta.png" width="300"/>
<input type="text"> #로그인을 눌렀을때 입력할 수 있는 필드 input 필드(태그)라고 함
<button>버튼(누를 수 있는 어떤 형태)</button>3. 속성
- 태그 중 href, src 같은 부분을 속성이라 함
- 태그의 기능을 보태주고 부족한 부분을 채워주는 역할
- a 태그 자체로는 어떠한 사이트로 갈지 모름 but href 속성으로 위치 지정
- img도 src 속성이 있어야 어떤 이미지 보여줄지 지정 가능
- input도 type을 통해 어떤것을 입력받는지를 지정
4. class & id _선택자의 역할
- class와 id도 속성
- 스타일이나 동작 부여를 위해 태그를 선택해야함(css를 적용하기 위함)
- ID : 단 하나만 존재하는 요소를 표현, 유일한 값 식별
- CLASS : 비슷한 종류의 요소를 묶음, 비슷한 역할 태그를 모아서 클래스 부여
🔶CSS
1. 개요
- CSS : HTML 태그에 색칠을 하는 역할, 보기 좋게 스타일링 하는 것
- class와 id로 선택하여 여러가지 스타일링을 해줌(배경 색 등)
2. 사용
1. class 달고(html) 선택 태그에 스타일 부여(css)
.myclass {
color: red;
}
$ css 사용<h1>헤딩태그</h1>
# 이렇게 헤딩태그 생성
# 클래스를 부여해보면
<h1 class="myclass(클래스명)">헤딩태그</h1>
$ html 사용- class를 선택해서 스타일 부여하려면 style 태그가 필요함
- style 태그는 head 태그 밑에 둠!
- class 선택하는 방법: .클래스명 {}
- 입력후 저장하면 바로 live server에 색이 바뀐 것을 확인 할 수 있음
→ color: 색; 을 통해 글자 색 변경 가능
→ background_cloor: 색; 을 통해 배경 색 변경 가능
2. id 달고(html) 선택 태그에 스타일 부여(css)
#myid {
color: blue;
}
$ css 사용<h1>아이디 헤딩태그</h1>
# id 부여하면
<h1 id="myid">아이디 헤딩태그</h1>
$ html 사용- id 선택하는 방법: #아이디명 {}
기술블로그