0628 회고

• HTML의 구조 잡기
• CSS 심화 배우기

HTML

구조를 잡을 때 사용하는 태그

👉 <article> 태그

• 태그 내에 구역을 대표하는 타이틀 <h#>태그가 반드시 존재해야 한다.

👉 <main> 태그

• IE(Internet Explorer)는 지원하지 않으므로 role="main" 속성을 반드시 입력해야 한다.

<main role="main"> <!--본문 작성-->
  <article> <!--정보 작성-->
    ...
  </article>
</main>

CSS

Cascading

👉 디테일에 의한 캐스케이딩

• 더 구체적으로 작성된 선택자의 우선 순위가 높다.
• 현직에서는 이미 작성된 css 코드를 건드리지 않고 유지보수 진행하기 위해 더욱 디테일하게 css를 작성하여 수정 적용하곤 한다.

// style.css
header p {color: red;} // 윗쪽에 작성됐더라도 더 구체적이기에 이 부분이 적용된다.
p {color: blue;}

👉 선택자에 의한 캐스케이딩

• style > id > class > type 순으로 우선순위가 높다.

<h3 style="color: pink" id="color" class="color"> color </h3>

//style.css

#color {color: blue;}
.color {color: red;}
h3 {color: green;}

• pink > blue > red > green 결국 pink가 적용 되는 것을 확인 할 수 있다.

font-family

• 브라우저마다 지원하는 폰트가 다르다.
• 입력한 순서대로 우선순위가 적용된다.
• sans-serif는 모든 브라우저에서 지원하기 때문에 마지막에 작성하는 디폴트 값이다.

font-family: Arial, sans-serif;

background

• background-image: url(이미지 경로): 배경에 이미지 삽입
• background-repeat
  - x축으로 반복: repeat-x
  • y축으로 반복: repeat-y
  • 반복하지 않음: no-repeat
• background-position: 공간 안에서 이미지의 좌표를 변경한다.

Block과 Inline

1. Block

• <p>, <header>, <h1>~<h6>, ...
• 줄바꿈 현상이 나타난다.
• width / height 값을 사용 가능하다. 즉 공간을 만들 수 있다.
• margin / padding 값을 사용 가능하다. 즉 상하배치 작업이 가능하다.

2. Inline

• <a>, <span>, ...
• 줄 바꿈 현상이 없다.
• width / height 값을 적용할 수 없다.
• margin-top, margin-bottom을 적용할 수 없다.

마진 병합 현상

1. 형제지간의 마진 병합

<div class="box1">HELLO</div>
<div class="box2">HELLO</div>

// style.css
.box1 {margin-bottom: 150px}
.box2 {margin-top: 100px}

• 위와 같은 경우 margin-bottm과 margin-top이 겹쳐서 총 250px의 공간이 생길 것으로 생각할 수 있으나, 둘 중 숫자가 큰 값으로 병합되어 적용된다.

2. 부모자식간의 마진 병합

<main role="main">
  <article>
  </article>
</main>

article {
  width: 200px;
  height: 200px;
  margin-top: 100px; 
}

• 자식인 <article>뿐만 아니라 부모인 <main>에도 영향을 미친다. 즉 article이 main 안에서 margin-top 100px을 가져 밑으로 내려오지 않는다. main 자체가 통으로 margin-top 100px을 가져 밑으로 내려오게 된다.

display

• a {display: inline-block}: block과 inline 두 요소의 성격을 모두 가지게 된다. 블록 단위로 가로세로 모양을 유지하면서 상하로 이동도 가능하다. 보통 navbar에서 많이 사용된다.

float과 clear

👉 float: 선택자를 띄워 새로운 레이어 층을 만든다. 포토샵에서의 레이어 마냥 겹겹이 올린다고 생각하면 된다.

• {float: right;}, {float: left;} : 선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬시킬 때 사용

👉 clear

• float에 대한 속성을 제어하고자 할 때 사용한다.
• 보통 {clear: both}를 자주 사용하곤 한다.

회고

1. 역시 기초가 탄탄해야 후에 가서 고생을 덜 한다더니. html/css에서도 부족한 부분이 계속 생겨나는 듯하다.
2. 특히 css에서의 마진 병합 현상은 매번 헷갈렸는데 이번 기회에 정리 할 수 있어서 좋았다.
3. 또한 float과 clear 덕분에 margin과 padding으로 좌우 배치 시키는 노가다를 덜 수 있음에 안도했다. 역시 배워야 덜 고생한다.