모바일 화면을 위한 meta 태그
<meta name="viewport" content="width=device-width">
디바이스의 가로 크기 = 웹 페이지의 가로
모바일에서 웹사이트가 잘 나오기 위해 추가해야하는 정보. 추가하지 않으면 데스크탑 버전의 웹페이지가 축소되어 나옴.
span / p / div
span - inline tag
p - block tag
div - 비슷한 부분을 그룹하거나 디자인에 맞게 레이아웃 분리, 또는 class나 id 부여를 위한 태그
img 태그 사이즈 단위
html에서 img 태그의 width나 height 입력 시 px 단위 생략함. 속성의 단위가 px
CSS 폰트
font-family 문법
- 띄어쓰기가 있는 폰트명은 ""로 묶어주어야 함.
- 보통 여러 폰트 나열, 대체 폰트를 지정하기 위함. 없다면 브라우저에서 적당한 폰트 자동으로 지정.
font-weight
100-900 등의 값 지정. 400 normal, 700 bold
font-color (x)
폰트의 컬러는 font-color나 text-color가 아닌 그냥 color
span
가운데 정렬을 해도 차지하는 영역이 인라인인 경우에는 가운데 정렬되지 않음
CSS로 하는 들여쓰기
text-indent: 숫자px;
코드로 하는 띄어쓰기
- 태그 안에서 띄어쓰기를 원할 경우 원하는 길이만큼 중복하여 삽입
border
border: 두께 선스타일 선색깔;
어떤 순서든 결과는 같으나 전 세계적으로 약속된 규칙이므로 지켜는 것이 좋음
선 스타일 종류
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
underline
text-decoration: underline;
밑줄 치는 스타일이 있으나 커스터마이징 하기 힘들어 border-bottom으로 밑줄 치는 것을 선호함
padding+content width = width
* {
box-sizing: border-box;
}컨텐츠와 패딩 값이 모두 합쳐진 것이 width값이 되도록 하는 스타일
selector
태그+클래스/아이디 - 태그이자 클래스/아이디
클래스+ +태그 - 클래스 안의 해당 태그만
div .container li.first-list
li 태그인데 "first-list" 클래스인 요소에 css를 적용한다. 그런데 div 태그 내부의, "container"클래스 내부에 있는 요소에만 적용한다.
image
-
html - img 태그
- 가로나 세로 둘 중 하나만 지정하면 비율에 맞게 알아서 조정됨
-
css - background-image
- css에서 넣어줄 경우 이미지 사이즈는 html에서 해당 태그 만큼의 영역이기 때문에 width나 height값을 따로 입력해줘야 함
- 값을 입력해도 원본 이미지 사이즈는 영역만큼 보여지지 않기 때문에
background-size: 100%를 추가해주어야 함
HTML
<body>
<img class="js-img" alt="js" src="https://www.w3schools.com/whatis/img_js.png">
<div class="img">
<img class="js2-img" src="https://www.w3schools.com/whatis/img_js.png" alt="JavaScript">
</div>
</body>CSS
.js-img {
width: 300px;
}
div.img {
width: 300px;
}
.js2-img {
width: 100%;
}