HTML 기초부터 공부하기! (feat. M아카데미컴퓨터학원) 2

웹 1 학원 수업 내용 정리 둘째 날:)

 

 

css는 Cascading  Style Sheet의 약자로

계단식 시트(언어)

별명 폭포수라고도 한다.

HTML의 구조에 스타일을 더하는 언어이다.

css를 사용하는 이유는 html 로 만들어진 웹사이트의 뼈대에 스타일은 적용하기 위한 것이다.

사람 몸에 옷을 입히는 것과 같은...?

 

css를 쓰는 방식

1. 태그에 바로 스타일을 적용하는 방식

<strong style="color:red; font-size:30px"></strong>

 

2. style태그를 이용해서 문서에 포함시키는 방식

<style type="text/css">

    strong {color:red; font-size:30px}

</style>

 

3. 외부 css 문서를 html 내에 불러오는 방식 (★★★★★ 중요함)

-웹표준의 핵심인 구조와 표현의 분리때문

html(구조)+css(표현)

 

블락과 인라인블락

ex)div - 블락, span - 인라인블락

블락안에 인라인 들어갈수 있고, 인라인 안에 블락은 못 들어간다.

같은 블락이라도 들어갈수 있음 여부가 달라진다.

 

인라인블락과 블락의 영역표시

 

 

css의 속성의 종류

1. display

block, inline, inline-block, none

display 속성을 통해서 블록 - 인라인간 속성 변경이 가능하다.

 

인라인블락과 블락의 영역

 

display : inline-block

 

display : block

 

display : inline

 

display : none

 

2. position

위치를 잡는 속성 static, relative, absolute, fixed

절대좌표: 영역이 없는 한 좌측, 상단 끝

상대좌표: 하나의 div안에 있는 하위 div 좌표값의 기준은 상위 div의 자표값이 기준

-> 절대좌표와 상대좌표에 대한 이해가 필요하다.

 

3. margin, padding