[엘리스 AI트랙] 01-01 ~ 01-03 웹 프로그래밍 기초

WIL은 한 주간 새롭게 알게 된 내용 위주로 작성하고 있어요 ✏️

 

[01-01] 9 / 14

 

□ 설치

□ 실행

□ 배포

 

1. 인터넷과 웹의 차이점

• 웹은 인터넷의 부분집합
• 인터넷이 도로라면, 웹은 그 위에 달리는 자동차
• 웹은 인터넷에서 운영되는 하나의 앱

 

2. 클라우드와 호스팅은 본질적으로는 같다

 

---

 

[01-02] 9 / 15

 

1. Emmet

• HTML 단축 플러그인

 

 

---

 

[01-03] 9 / 16

 

1. 박스 모델

박스 모델의 구조

• border를 기준으로 margin(안쪽) padding(바깥쪽) 나누기
• margin과 padding의 작성 순서
  • top / right / bottom / left (시계 방향)
  • 상하 / 좌우

 

2. Block 요소와 Inline 요소

• Block 요소: y축 정렬로 컨텐츠가 나타남
  • p, div, h1 ~ h6... 
  • 줄바꿈 현상이 나타남
  • width / height 값 사용 가능 → 공간 만들기 가능
  • margin / padding 값 사용 가능 → 상하 배치 작업 가능
• Inline 요소: x축 정렬로 컨텐츠가 나타남
  • a, span...
  • 줄바꿈 현상 X
  • width / height 사용 불가
  • margin, padding의 top / bottom 사용 불가

 

3. margin 병합 현상

• 형제지간의 margin 병합
  • margin-bottom과 margin-top 중 값이 더 큰 값으로 적용

.older { margin-bottom: 150px; }
.younger { margin-top: 100px; }
/* 이 경우 적용되는 margin 값은? 150px (O) 250px (X) */

• 부모자식간의 margin 병합
  • 자식에게 margin-top 값이 주어졌다면 부모에게도 영향이 간다

// HTML
<main>
	<article>안냐세요</article>
</main>

// CSS
article {
	margin-top: 100px;
}

/* 이 경우 부모인 <main>도 같이 밑으로 내려가게 됨*/

 

 

4. 레이아웃에 영향을 미치는 속성

• display
  • inline, block, inine-block

 

• float
  • left, right
  • 브라우저를 기준으로 특정 방향으로 정렬하고자 할 때 사용
  • 공중에 떠 있어 레이어층을 만들게 됨^[각주:1]
  • 레이어가 겹쳐지지 않는 상태로 왼쪽에서부터 정렬시키고 싶은 경우 float: left 를 연속적으로 입력

 

• clear
  • left, right(한 쪽만), both(양쪽 다)
  • float를 사용하면 레이어가 생겨서 이후 clear를 안 써주면 겹치게 됨
  • → float를 다 쓰면 이후 정상적인 배치가 되도록  clear로 꺼주기! 
    
    • float를 마지막으로 사용한 지점 그 다음 태그에 clear 넣기

 

• 브라우저와 공간 사이의 공백 제거하기

  • * { padding: 0; margin: 0; }

  • html과 body 태그 및 다른 태그들도 margin과 padding값을 갖는 경우가 있기 때문에 *로 초기화하는 방법 추천

 

• header / main - article / footer

 

 

 

1. z-index랑 관련이 있나...? [본문으로]