치악산 복숭아

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

elice/토끼성장일지

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

Juliie 2021. 9. 22. 17:12
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랑 관련이 있나...? [본문으로]
Comments