HTML이란, tag들의 집합으로, 웹 페이지의 구조를 표현하는 마크업 언어
태그 | 설명 |
---|---|
<div> | 한 줄을 차지하는 공간 생성 |
<span> | 컨텐츠만큼의 공간 생성 |
<img> | 이미지 삽입 |
<a> | 링크 삽입 |
<ul> & <li> | 순서 없는 목록 & 목록 항목 |
<input> | 사용자 입력(Text, Radio, Checkbox) |
<textarea> | 텍스트 공간 생성 |
<button> | 버튼 생성 |
CSS란, 웹 페이지의 구조에 스타일과 레이아웃을 정의하는 스타일시트 언어
: CSS를 통해 UI(User Interface)를 개선함으로써 가독성을 높여 좋은 UX(User eXperience)를 이끌어내기 위함이다.
body(=셀렉터){
color(=속성명): red(=속성 값);
}
: HTML 문서에 <div> 와 <p>, <span> 등의 태그가 여러개 존재할 때, 그 중 특정 요소만 스타일링을 하기 위해 사용하는 방법
<p id="main-paragraph">This is main paragraph.</p>
#main-paragraph {
color: red;
}
: 여러 요소에 같은 id를 부여하지 못하기 때문에 여러 같은 요소를 스타일링 하기 위해 사용하는 방법
<ol>
<li class="fruit">Apple</li>
<li class="fruit">Banana</li>
</ol>
.fruit {
color: red;
}
: 여러 class를 하나의 요소에 적용하기 위해 사용하는 방법
<ol>
<li class="fruit selected">Apple</li>
<li class="fruit">Banana</li>
</ol>
.selected {
color: red;
}
속성명 | 설명 |
---|---|
color | 텍스트 색상 변경 |
font-family | 글꼴 변경 |
font-size | 텍스트 크기 변경(단위는 rem추천) |
font-weight | 텍스트 굵기 변경 |
text-decoration | 밑줄, 가로줄 |
letter-spacing | 자간 변경 |
line-height | 행간 변경 |
text-align | 가로 정렬 |
: 웹의 모든 컨텐츠가 가지는 직사각형 박스 형태의 영역
overflow: auto;
를 사용하면 크기가 큰 컨텐츠를 스크롤을 통해 표시 가능
box-sizing: border-box;
를 HTML 문서 전체에 사용하면 모든 박스에서 여백과 테두리를 포함하는 박스 크기를 계산한다.