한번 다시 들어보는 코딩애플의 html 기초
html 은 자료의 구조를 표현하기 위한 마크업 언어임.
어떤 역할을 하는지 항상 알려줘야하고,
웹표준을 잘 지키는 것.
<p>글 본문</p>
<h1>글 제목</h1>
<img src="이미지 경로">
<a href="">링크</a>
<button>버튼</button>
<ul><li>리스트</li></ul>
<ol><li>리스트</li></ol>
CSS
간단하게 삽입할 경우
<p style="font-size : 20px; color : red"> 글자 </p>
자주 사용하는 글자 스타일들.
font-size : 20px;
font-family : 'gulim';
color : black;
letter-spacing : -1px;
text-align : center;
font-weight : 600;
이미지 크기, 가운데 정렬
display : block;
margin-left : auto;
margin-right : auto;
width : 150px;
텍스트 일부만 변경
<p>안녕하세요 저는 <span style="color : red;">뛰어난</span> 개발자입니다.</p>
참고 : span 태그는 display:inline속성이 있어 폭, 높이를 단독으로 결정할 수 없음.
이친구를 감싸는 다른 태그에 폭, 높이를 설정해야 함.
CSS
셀렉터 종류
.profile { font-size : 20px } /*클래스*/
#special { font-size : 30px } /*아이디*/
p { font-size : 16px } /*태그*/
셀렉터의 우선순위
물론 class, id를 동시에 가지는 html 요소라면 스타일이 겹칠 수 있습니다. 그럴 경우 우선순위가 존재합니다. (비유적 점수임)
style="" (1000점) 직접지정
#id (100점) 아이디
.class (10점) 클래스
p (1점) 태그