-
가로를 웹 페이지의 가로와 같게하기
< meta name="viewport" content="width=device-width"> -
span tag
주로 텍스트를 넣어줌
줄이 바뀌지 않고, 한 줄에 이어서 나옴
이렇게 한 줄에 이어서 나오는 요소를 inline-element라고 한다 -
p tag
텍스트를 주로 넣어줌
주로 문단을 통으로 넣을때가 많다
span과 달리 줄바꿈이 일어남 -
class
중복된 이름 가능 -
id
중복된 이름 불가 -
하나의 태그에 2개 이상의 속성 부여 가능
ex)
< div id="a" class="b"></ div> -
가능하면 html과 css파일은 따로하는것이 유지보수에 좋다
-
type
link 태그로 연결되는 파일이 어떤것인지 알려주는것
css파일을 연결할 때에는 항상 type="text/css" -
rel
html과 css와의 관계를 설명하는 속성
css파일을 링크할 때에는 항상 stylesheet값을 대입한다 -
밑줄긋기
text-decoration:underline -
font-family: Georgia, "Times New Roman", Times, serif;
폰트 이름에 띄워쓰기가 되어 있으면 쌍따옴표를 사용해야함
사용자가 어떤 브라우저를 사용할지 모르기 때문에 font-family값에는 보통 여러가지 폰트를 나열한다
serif 같은 폰트는 모든 브라우저에서 지원하는 폰트이다 -
font-weight: bold;
font-weight = 글씨 두께를 조절
normal, bold, 100,200,...900등의 값이 지정될 수 있다
400 == normal 같은두께
700 == bold 같은두께
보통은 두껍거나 보통이거나 두가지 경우면 되므로 간편하게 bold값을 지정 -
css 들여쓰기
text-indent: 50px; -
인용구문을 넣을때 쓰는 태그
< blockquote></ blockquote> -
밑줄의 두께나 색깔등을 커스터마이징 하려면
border-bottom으로 구현해서 스타일 주기 -
상속
css가 가진 특성이다
말그대로 스타일이 상속되어 자식에게도 같은 스타일이 적용된다는 의미
ex)
< p class="p-tag">ㅇㅇㅇ</ p>
< p id="third-line">ㅎㅎㅎ.</ p>
< div class="pre">
< span>pre 클래스 안에 있는 span</ span>
</ div>
p.p-tag{
}
p태그이면서 p-tag클래스이다
p#third-line{
}
p태그이면서 third-line 아이디이다
.pre span{
}
pre클래스 내부에 있는 span -
태그들의 우선순위
p {
font-size: 30px;
}//1점
.p-tag {
font-size: 15px;
}//10점
p.p-tag{
font-size: 100px; //1 + 10 = 11점
font-size가 세개로 중복적용이 돼 있다
셋중에서 p.p-tag가 적용이 된다
-
우선순위는 점수계산으로 이루어진다
tag < class < id < inline
inline styling(13줄에 style 요소로 직접): 1000점
id: 100점
class: 10점
tag: 1점 -
img
alt:이미지가 뜨지 않았을때(서버에서 이미지가 삭제됐거나 잘못된 이미지 주소일때) 이미지 대신 보여줄 텍스트
src: 이미지 파일 경로 or img url주소 -
background-img로 배경이미지 추가
