클래스
HTML 요소에게 '이름'을 주는 첫번째 방법
<p class="big-blue-text centered-text">내용</p>
<style>
.big-blue-text {}
.centered-text {}
</style>클래스를 잘 활용해야 좋은 html, css를 쓸 수 있다.
id
HTML 요소에게 '이름'을 주는 두번째 방법
<p id="best-text"></p>
<style>
#best-text {}
</style>class와 id의 차이?
- 같은 클래스 이름을 여러 요소가 가질 수 있지만, 같은 아이디를 여러 요소가 공유할 수 없다.
- 한 요소가 여러 클래스를 가질 수 있지만, 한 요소는 하나의 아이디만 가질 수 있다. ( 단, 한 요소가 클래스도 여러 개 갖고 아이디도 하나 가질 수 있다. )
class와 id 사용
- 여러 요소 스타일링할 경우 -> class
- 한 요소만 스타일링할 경우 -> id
div 태그
묶어주고 싶은 요소들을 div태그로 감싸기. div태그는 요소들을 묶어주는 것 외에는 별 다른 기능이 없다.
<div>
<h1>내용</h1>
<p>내용</p>
</div>CSS 파일 생성
프로그래밍 할 때 반복적인 코드는 피해야한다.
css 파일을 생성하면 html과 연결해야한다.
📁 css
📘 style.css
<head>
<link href="css/style.css" rel="stylesheet">
</head>href : 연결시킬 파일의 주소
rel : relationship의 줄인말. css파일과 html 간의 관계를 적어주면 된다.
CSS의 여러 방법
외부 CSS 파일을 작성하고 link태그로 연결하는 것을 추천한다. 보기에 깔끔하고, 여러 파일에서 같은 코드가 있는 경우 외부 파일 하나로 깔끔하게 정리할 수 있다.
1. style 태그
<style> </style>
2. style 속성
<h1 style="color: red; font-size:72px;>내용</h1>
3. 외부 css + <link> 태그 ⭐️ 간단하게 이 스타일들이 어울리는 지 확인,테스트 하고 싶을 경우에는 1번과 2번 사용하기 좋음. 하지만 확인한 후에는 외부 css 파일과 link태그를 이용해 연결하는 것이 좋다!
꿀팁
- 코멘트, 주석 : 코드가 길고 복잡할 수록 적어주면 코멘트를 통해 쉽게 이해할 수 있다.
html의 경우
<!-- 머리말 -->
css의 경우
/* 머리말 */💡 한 줄 코멘트 단축키 ctrl + /
💡 여러줄 선택 후 코멘트 단축키 ctrl + shift + /
- 크롬 브라우저 개발자 도구
크롬 브라우저 도구 -> 개발자 도구 -> Elements
user agent stylesheet은 브라우저에서 제공해주는 style ! 이 곳에서 밑줄이 그이면 쓰이지 않았다는 뜻
computed은 실제로 이 요소에 입혀진 style들만 정리되어 나타내준다.
- 도움되는 웹사이트
- 구글
- W3schools
- Stack Overflow : 세계에서 가장 큰 프로그래밍 포럼 ( 모두 영어임 ... )
- jsfiddle.net : html, css, javascript 입력할 수 있는 창이 있음
⭐️ Stack Overflow에 질문을 할 때 jsfiddle.net에 코드를 작성하고 링크 복사 후 붙여넣은 뒤 질문을 하면 사람들이 코드를 확인하고 답변해줄 수 있다!
