HTML(HyperText Markup Language): markup language
태그 사용 빈도
self closing tags(태그에 contents 포함)
줄 바꿈(line break)
<br>
구분선(horizontal rule)
<hr>
이미지 추가
<img src="이미지 주소">
입력창
<label for="input">라벨 이름</label>
<input type="text" placeholder="안내 문구" id="아이디">
id: 글자를 눌러도 선택할 수 있게 해 줌
선택창
<input type="radio" name="그룹명" id="아이디">
<label for="radio">라벨 이름</label>
라벨 이름
체크박스
<input type="checkbox" name="그룹명" id="아이디">
<label for="checkbox">라벨 이름</label>
라벨 이름
not self closing tags
HTML문서 구조
<html> 페이지 작성
<head> 외부 소스 참조
<title> 페이지 제목</title>
</head>
<body> 페이지 내용
</body>
</html>
제목
<h숫자>내용</h숫자>
내용
볼드 처리
<b>내용</b>
내용
글자 기울이기
<i>내용</i>
내용
큰 계층 나누기(section)
<section>내용</section>
계층 나누기(division)
<div>내용</div>
단락(paragraph)
<p>내용</p>
구조 나누기(inline, 정보 길이만큼만 가로 공간 차지)
<span>내용</span>
리스트
<ul>(unordered list) 또는 <ol>(ordered list)
<li>(list item)
</li>
<li>
</li>
...
<li>
</li>
</ul> 또는 </ol>
링크 걸기
<a href="링크"> 링크 이름</a> (anchor)
새 창으로 링크 걸기
<a href="링크" target="_blank"> 링크 이름 </a>
문서 내 링크 이동
1. <p id="태그 이름">내용</p> (id 설정)
2. <a href="#태그 이름">내용</a> (내용 클릭 시 id로 이동)
</p id="태그 이름">
버튼
<button> 버튼 이름 </button>
시멘틱 태그(div와 같은 기능을 하지만, 각 기능에 대한 내용을 컴퓨터에게 알려주기 위한 태그)
header : 헤더를 의미
nav : 내비게이션을 의미
aside : 사이드에 위치하는 공간을 의미
section : 여러 중심 내용을 감싸는 공간을 의미
article : 글자가 많이 들어가는 부분을 의미
footer : 푸터를 의미
주석
<!-- 내용 -->
CSS(Cascade Style Sheet): style sheet language
색 변경
ex) color: blue;
폰트 크기 변경
ex) font-size: 30px;
폰트 굵기 변경
ex) font-weight: 800;
글씨체 변경
ex) font-famly: 'Nanum Gothic', sans-serif;
margin(바깥쪽 여백)
ex)
margin: 30px(상하좌우 전체 여백)
margin-top: 10px
margin-bottom: 20px
margin-left: 50px
margin-right: 30px
padding(안쪽 여백)
ex)
padding: 30px(상하좌우 전체 여백)
padding-top: 30px
padding-bottom: 30px
padding-left: 30px
padding-right: 30px
font family(원하는 폰트 적용)
@import url('폰트 주소');
font-family: "폰트 이름";
Block 요소
항상 줄 바꿈, Block과 Inline 모두 자식으로 품을 수 있음
자신을 포함한 블럭 공간(가로 100%)을 차지
Inline 요소
같은 줄에 표현, Inline만 자식으로 품을 수 있음
자신이 존재하는 공간만 차지
선택자
전체 페이지 변경
body {
변경내용
}
일부 태그만 변경
ex) h1 {
변경내용
}
여러 태그 변경
ex)
html
<ul>
<li>내용</li>
...
<li>내용</li>
</ul>
<p>내용</p>
css
li, p {
변경내용
}
class에 해당하는 태그만 변경
ex)
html
<span class="클래스명">내용</span>
<div class="클래스명">내용</div>
css
.클래스명 {
변경내용
}
id에 해당하는 태그만 변경
ex)
html
<ul>
<li id="id명">내용</li>
...
<li>내용</li>
</ul>
css
#id명 {
변경내용
}
변경 우선순위
type>class>id
Compound(동시 나열)
ex) h1, h2, #abc {
변경내용;
}
Descendent(특정 id의 하위 리스트 모두 변경)
ex)
html
<ul id="id명">
<li>리스트명</li>
...
<li>리스트명</li>
</ul>
css
#id명 li {
변경내용
}
Child(특정 id 하위에 있는 직속 자식 리스트만 모두 변경, 손자 이하 리스트 제외)
ex)
html
<ul id="id명">
<li>리스트명</li>
<li>리스트명
<ul>
<li>손자 리스트명</li>
...
<li>손자 리스트명</li>
</ul>
</li>
...
<li>리스트명</li>
</ul>
css
#id명 > li {
변경내용
}
Universal(페이지의 모든 요소 변경)
* {
변경내용
}
Attribute(특성을 가진 요소 변경)
ex)
html
<img src="이미지 주소" alt="특성값">
css
img[alt="특성값"] {
변경내용
}
자리 배치
Flex(자식들을 다양하게 자리 배치)
display: flex;(Flex 적용)
flex: 숫자;(크기 조정)
flex-direction: row;
flex-direction: column; (가로 세로 변경)
justify-content: center; (가로축 중앙으로)
align-items: center; (세로축 중앙으로)
Inline Block(블록 요소를 인라인 요소처럼 한 줄에 배치)
display: inline-block;
Position(정밀하게 위치 조정)
현재 위치 기준
요소 이름 {
position-relative;
top: 20px;
bottom: -50px;
left: 1000px;
right: -250px;
}
가장 가까운 relative 적용된 부모 요소를 기준으로 위치 조정(해당 요소의 시작 위치인 왼쪽 위에서 시작)(없는 경우 전체 페이지 기준)
요소 이름 {
position: absolute;
top: 20px;
bottom: -50px;
left: 1000px;
right: -250px;
}