[15일 메이킹 프로젝트] 프로젝트 도입 전 복습 - HTML/ CSS

 

HTML / CSS

 

1. 태그란?

브라우저에게 어떻게 문서를 출력할 것인지 명령을 내릴 수 있다.

문서의 구조, 형태를 표현하며 html 문서를 꾸며주는 역할. 

https://developer.mozilla.org/en-US/docs/Web/HTML<< html 태그를 검색, 공부할 수 있다.

<tag> content </tag> //open & close

2. attribute란? 

태그에 속성을 부여하는 것.

<tagname attrname = "attrvalue"> content </tagname>

3. class란?

해당 class가 붙은 태그를 지정해 css에서 부를 수 있다.

<tagname class = "classname"> content </tagname>

//css에서 부를 땐//
.classname { 속성부여; }

 

4. id란?

class와 마찬가지로 해당 id가 붙은 태그를 지정해 css에서 부를 수 있다.

차이점은, 1개의 element에 1개의 id 값을 줄 수 있다. (class는 여러 tag에 동일하게 적용 가능)

<tagname id = "idname"> content </tagname>

//css에서 부를 땐//
#idname { 속성부여; }

5. CSS란?

Cascading Style Sheets 의 약자.

cascading 즉, 계단식으로 적용되므로 작성 순서가 중요하다.

css의 적용방법은 두가지로,

- html파일 내에 작성해 적용시킬 수 있다.

- 별도의 css 파일을 link로 html 파일에 import 시킬 수 있다.

 

6.inline과 block의 차이

하나의 요소 옆에 다른 요소가 올 수 있는가의 차이.

inline : 옆에 놓일 수 있다 (가로나열).  높이와 너비가 없다.

block : 옆에 놓일 수 없다 (세로나열). 높이와 너비가 있다.

 

7. margin, border, padding

border : 태그의 테두리를 설정하는 속성. border를 경계로 밖은 margin, 안은 padding.

margin : border 바깥쪽의 공간. 브라우저는 자동으로 margin값을 준다.  

padding : border 안쪽의 공간. 

 

css에서 이들의 속성을 변경할 수 있다.

tagname {
margin: 20px 15px; //20px(top,bottom),15px(left,right)
margin: 10px 20px 30px 40px //10px top,20px right,30px bottom,40 left (시계방향순.)
}

* inline의 margin은 left, right 방향으로만 적용. top, bottom을 추가하고 싶다면

tagname {
display: block; //inline -> block
)