기존에 사전스터디에서 HTML&CSS를 공부했지만 replit 을 진행하면서 생소했던 부분들만 정리해보았습니다.
<!DOCTYPE html>- 이 선언 문은 HTML5 버전을 사용한다는 의미
<meta charset ="utf-8">- 한글이 포함된 페이지라면 'utf-8'라는 문자 인코딩을 추가 해줘야함
<meta name ="viewport" content="width=device-width">- 디바이스의 가로크기가 곧 웹페이지의 가로와 같음
- Class의 경우 중복 사용이 가능, ID를 가진 태그는 단 하나!
* {
box-sizing : border-box;
}*: 모든 태그에 적용- 해당 구문은 가능하면 항상 쓰는 것이 좋음
- 보이는 대로 width를 주고 그안에 padding을 주는 것이 생각하기에 쉬움
<img alt="HTML" src="url">alt: 해당 이미지를 정상적으로 불러올 수 없을 때 텍스트를 출력src: 해당 이미지를 가져올 url
li {
padding-top: 10px;
}
li:first-children {
padding-top: 0px;
}
li:nth-childen(odd) {
color: red;
}
li:nth-childen(even) {
color: blue;
}- 같은 selector 내에서 선언된 위치에 따라 다른 스타일을 줄 수 있음
li:first-children: 리스트 중 첫번째li:last-children: 리스트 중 마지막li:nth-children(odd): 홀수 번째 리스트li:nth-children(even): 짝수 번째 리스트
