웹페이지를 만들기 위한 언어로 페이지의 구조를 잡고 이미지, 비디오 등 웹사이트에 보여줄 내용을 구성
span : 주로 텍스트가 삽입되며, 한 줄로 이어나옴(inline-element!)
div : 태그 자체가 의미를 가지지 않으며, 섹션을 나눌 때 사용함.
input의 type들
<div class="title></div>
<a href = https://naver.com></a>
# class, href 등이 속성에 해당
HTML 태그들에 디자인을 입혀주는 역할
<style>
tag{
/*스타일*/
}
.class{
/*스타일*/
}
#id{
/*스타일*/
}
</style>
margin: 20px auto;
와 같이 지정할 경우 가로 중앙에 위치하게 됨거의 대부분의 웹페이지에서는 padding, margin으로 인해 발생하는 애로점의 해소(구상한 것과 다르게 나타나는)를 위해 box-sizing 속성을 적용
<style>
*new {
box-sizing: border-box;
}
</style>
inline : 요소 옆에 요소를 위치시킬 수 있음. 즉 자신의 영역만을 채움 (대표적으로 span 태그)
block : 대부분의 요소 옆에 다른 요소를 붙일 수 없음, 한 줄을 꽉 채움 (대표적으로 p태그)
inline-block : inline과 block의 특징 융합
<style>
span {
display : inline-block; # 인라인 요소인 span을 block으로 변경
}
p {
display : inline-block; # 블록 요소인 p를 inline으로 변경
}
</style>
relative : 본인의 현재 위치를 기준으로 top, right, bottom, left 프로퍼티를 통해 이동
absolute : 가장 가까운 부모 요소에 의해 상대적으로 위치가 지정되며, static 속성을 가지지 않은 부모를 기준으로 이동함
fixed : 부모의 위치와 상관없이 고정되어 있음
주로 이미지 주변에 위치한 텍스트를 감싸기 위해 만들어진 프로퍼티이나, 레이아웃을 잡을 때도 유용하게 사용
float 속성은 left, right, none 값을 줄 수 있으나 해당 속성을 가진 자식 요소의 높이를 부모가 인지하지 못해 범위를 벗어나는 경우가 발생
[해결 방법]
clear: both; 속성을 적용하여 해결 - HTML을 더 입력해야하는 부담
overflow: hidden; - 주로 많이 사용하는 방법
반응형 웹을 구현하는 기술로, @media라는 문법으로 작성
<style>
@media only screen and (max-width: 480px) {
body {
font-size: 12px;
}
}
</style>