HTML, CSS 관련 기본사항

*HTML

- 문서의 내용을 의미, 부모-자식 / 형제 관계가 존재

- 주석 표현 : <!-- -->

- 줄바꿈 : <br>

- 여는 태그 : <태그명>

- 닫는 태그 : </태그명>

- 태그의 종류 (아래 외에도 많은 종류의 태그 존재

• <div></div> : 박스
• <nav></nav>
• <section></section>
• <article></article>
• <a href="주소" target="_blank">링크이름</a> : a 엘리먼트는 링크 버튼, href는 이동할 주소, target은 새 창으로 띄울지 여부

 

*CSS

- 모든 디자인, 스타일 리스트같은 역할

- 기본적으로 스타일이 적용되어 있고, CSS 통해서 설정값 변경을 해주는 것.

- 속성의 종류 (아래 속성 외에도 다양한 속성 존재)

• background-color : 배경 색
• font-weight : 폰트 두께
• font-size: 3rem : 폰트 사이즈(rem은 배율, px로도 표기 가능)
• display : block : 화면 표시

 

*CSS display 속성의 특징

1. block

- 세로방향(위-아래), 넓이가 부모 사이즈에 맞게 설정된다.

- 블록화

- 한 줄을 무조건 혼자 사용

- 스스로 margin-left, margin-right 사용하여 정렬한다.

- 위-아래 정렬 시 여백이 존재하지 않는다.

2. inline-block

- 가로방향(옆), 넓이가 입력된 값의 사이즈 만큼만 설정된다.

- 글자화

- 한 줄에 최대한 여러개가 나온다.

- 부모의 text-align에 의해서 정렬된다.

- 옆으로 정렬 시 여백이 존재한다.

3. 예외

- a, img, span 엘리먼트는 기본적으로 display가 inline 이다.

- inline요소에는 width, height, margin, padding 속성이 제대로 적용되지 않는다.