HTML 개요

글자와 상자

<span> 태그

대표적인 인라인 요소 ! 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도. 글자를 취급하는 용도.

• 요소가 수평적으로 쌓임
• 줄바꿈이 띄어쓰기로 표시
• 포함한 콘텐츠 크기만큼 자동으로 줄어듬
• 글자 요소이기 때문에 가로, 세로 사이즈를 가질 수 없음
• 글자 요소이기 때문에 margin(요소의 외부 여백을 지정하는 css 속성)과 padding(요소의 내부 여백을 지정하는 css 속성)의 좌우 값을 설정할 수 있지만 위아래는 설정할 수 없음.
• 인라인요소는 자식으로 블록요소(like <div>)를 넣을 수 없음

<div> 태그

대표적인 블록 요소! 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도.

• 요소가 수직으로 쌓임
• 부모 요소의 크기만큼 가로가 자동으로 늘어남. 늘어날 수 있는 만큼 늘어남.
• 세로의 크기는 포함한 콘텐츠 크기만큼 자동으로 줄어듬
• 상자 요소이기 때문에 width, height 속성을 설정할 수 있음
• 시각적으로 제어하는데 블록요소가 더 유용. (margin, padding 모두 적용)

---

CSS 개요

CSS 선언 방식

내장 방식

<style></style>의 내용(contents)으로 스타일을 작성하는 방식

• 장점: 별도의 .css 파일을 만들지 않고 .html파일에 css 내용을 적용할 수 있음
• 단점: 내용이 많아지면 한번에 처리하기 어려움. 유지보수에 권장하지 않음.

<style>
    div {
        color: red;
        margin: 20px;
    }
</style>

인라인 방식

요소의 style 속성에 직접 스타일을 작성하는 방식(선택자 없음)

• 장점 : 선택자를 찾지 않아도 됨.
• 단점 : css 우선순위로 인해서 변경하는데 불편. 권장하지 않음

<div style = "color: red; margin: 0px;"></div>

링크 방식

<link/> 로 외부 css 문서를 가져와서 연결하는 방식

• 병렬로 연결되기 때문에 한번에 가져와서 연결되어 빠르게 연결.

<link rel="stylesheet" href="./css/main.css">

div {
	color : red;
    margin : 20px;
}

@import 방식

css의 @import 규칙으로 css 문서 안에서 또 다른 css 문서를 가져와 연결하는 방식

• 직렬로 연결되는 방식이기 때문에 연결이 지연된다는 특징이 있음.

@import url("./box.css");
div {
	color : red;
    margin : 20px;
}