[TIL] HTML + CSS

w3schools.com 참고

HTML(HyperText Markup Language)

HTML : content를 꾸미는, 표현하는 Markup (HTML5 : semantic tag)
XML : content를 서술하는 Markup

<p>
  p : paragraph(단락)
</p>

<table>
  <tr>
    <th>헤더</th>
  </tr>
  <tr>
    <td>행</td>
  </tr>
</table>

CSS(Cascading Style Sheet)

HTML문서를 꾸미고, 배치하는 등의 역할

CSS 적용 방식

1) in-line 방식 : style속성 사용, 우선 순위

<table style="width:100%"></table>
- width = 속성명(표준에 정의되어 있음, 외울 필요X)
- 100% = 속성값
- ; = 속성구분자
속성명="속성값";속성명="속성값";...

2) internal stylesheet 방식 : style태그 사용

<div style="border:1px solid red"></div>
<footer style="border:1px solid red"></footer>

div와 footer에 반복없이 동일한 스타일을 적용시키고 싶을 때, 
선택자를 사용하여 style태그와 함께 사용하는 방식
선택자에는 태그 선택자, 클래스 선택자가 있음.

<style>
	border:"1px solid red"
</style>

3) external stylesheet 방식 : 분리된 파일로 css적용

여러 페이지에 공통된 스타일을 적용시키고 싶을 때 사용하는 방식

CSS 우선순위

• 동일한 속성이 여러스타일에 의해 적용될 경우 높은 우선순위의 속성이 적용
  우선순위가 같다면, 나중에 정의된 속성이 적용
• 우선순위 : in-line 방식 > 클래스 선택자 > 태그 선택자

CSS Display

요소들마다 고유의 display 기본값이 정해져 있음 (변경 가능)

표현 O

• inline : 한행에 함께 배치 (한행 다중열)
  - width 같은 크기 속성 X (무시 됨)
• block : 한행에 한개열
  - width 같은 크기 속성 O
• inline-block : 배치는 inline을 따르고 box크기 관련 속성은 block을 따름
• flex..etc

표현 X

• none : dome tree 삭제하지 않고 살짝 숨겨놓는 느낌!(대상이 공간을 차지 X)

CSS Position 속성

요소를 배치하는 속성

• static : 기존 요소 다음에 배치 (기본값)
• absolute : 절대적 위치 지정 (기준 : non-static 조상 중 가장 가까운 조상)
• relative : 상대적 위치 지정 (기준 : 자신의 static 포지션일 경우)
• fixed

CSS float 속성

요소들을 나란히 옆으로 배치하는 속성

• left : --------------> 1 2 3
• right : <------------- 3 2 1

=> 부모 공간을 차지하지 않는다.
방법 1 : 부모에 높이 부여
방법 2 : overflow : hidden 지정

다음 요소 처리 방법 1. floating 배치가 끝나면 다음 요소가 floating 해제

• clear 속성
  - left : left floating 해제
  - right : right floating 해제
  - both : 둘 다 floating 해제
  

다음 요소 처리 방법 2. floating요소들을 감싸는 부모 만들기