[클라우딩 어플리케이션 엔지니어링 TIL] 5일차 - CSS II

Intro..

---

 

오늘은 CSS에서 가장 중요한 내용을 많이 배웠다.

특히, CSS의 꽃(?)이라고 알고 있는 flex에 대해 학습했다.

헷갈리고 어렵지만 재밌는 CSS!

 

 

오늘 학습한 내용

: CSS margin, padding, border, display, float, position, flex, grid...

---

박스 모델

크기 지정

• width, height (너비, 높이) / max-width, max-height (최대 너비, 최대 높이)
  • 블록 레벨 요소에서만 사용 가능하다.
  • auto 값을 사용해 브라우저가 값을 계산해서 지정하게 할 수도 있다.
• margin, padding (박스 외부, 내부 여백)
  • 블록 레벨 요소에서만 사용 가능하며, 인라인 요소에선 좌/우만 적용 가능하다.
  • margin은 음수 값이 가능
  • 마진 상쇄: 경우에 따라 요소 간 외부 여백이 상쇄되는 현상
    • 인접 형제간의 외부 여백 상쇄 현상으로 제일 큰 여백을 따라감
    • 부모와 자식 요소의 여백을 분리할 권한이 없을 때 상쇄
      • 부모와 자식 요소 분리하는 법
        
        • 부모에 테두리(border) 넣기
        • 부모와 자식 사이에 콘텐츠 넣기
        • 부모에 내부 여백(padding) 넣기

<style>
  .line1 { margin-bottom: 20px; }
  .line2 { margin-top: 30px; }
</style>

<p class="line1">line1</p>
<p class="line2">line2</p>

<!-- (20+30)px = 50px이 아닌 제일 큰 숫자인 30px 적용 -->

 

 

테두리

• border
  • color, style, width (top, right, bottom, left 값을 개별로 줄 수도 있다. 'border-top: ...')
    • border-color: CSS color 값
    • border-style: solid, dotted...
    • border-width: 선의 두께
    • border로 한번에 color, style, width 지정 가능

div {
  border: 1px solid black;
}

• box-sizing
  • 박스 크기를 계산할 때 내부 여백, 테두리의 크기를 포함할 지 결정하는 속성
  • 기본 값은 'content-box'이며 padding, width/height, border-width 크기가 모두 더해진다.
  • 'border-box': width, height 값에 맞춰 pading, border 적용
  • 주로 border-box로 많이 사용한다.

.content-box {
	box-sizing: content-box;
	width: 100px;
	border: 1px solid red;
	padding: 10px;
} /* 100 + 2 + 20 = 122px */

div {
  width: 200px;
  height: 100px;
  background-color: #ddd;
  padding: 10px; /* 10 10 10 10 */
  border: 1px solid black; /* 1 1 1 1 */
  /* (300 + 20 + 2) X (300 + 20 + 2) */
  overflow: auto;
  box-sizing: border-box;
  /* 300 X 300 */
}

 

 

초과

• overflow: 지정한 박스 크기를 초과했을 경우 대처 방법
  • visible (기본 값): 그대로 넘치게 노출
  • hidden: 넘친 콘텐츠 숨김
  • scroll: 스크롤바 (콘텐츠가 넘지 않아도 스크롤바가 생김)
  • auto: 브라우저가 자동으로 스크롤바 on/off
  • overflow-x, overflow-y로 분리해서 지정 가능하다.
• opacity: 박스 투명도
  • 기본 값은 1
  • 0~1사이 값 (소수점 사용 가능)
  • 투명도가 적용되면 자식 요소도 함께 투명해지나 그렇다고 opacity가 상속된 건 아니다.

 

 

표시 유형

display

• 요소 블록, 인라인에 대한 처리의 선택과 자식 요소를 배치하는 레이아웃을 설정할 수 있는 속성
• 태그마다 가진 기본 값이 있다. (block이나 inline)
• display: none; 값을 지정하면 요소가 존재하지 않는 것처럼 처리할 수 있다.
  • none으로 사라진 요소는 접근성 트리에서도 제외되기 때문에 스크린 리더가 읽지 않는다.

visibility

• 시각적으로 숨기는 속성
• visibility: hidden;
  • display: none; 과 달리 시각적으로 숨기는 기능이라 공간을 그대로 차지한다.
  • 숨겨진 요소는 접근성 트리에서 제외되므로 스크린리더가 읽지 않는다.

float

• 문맥에서 빠져 좌우측에 배치되는 속성

 

position

• 문서 상에 요소를 배치하는 방법
• top, right, bottom, left 값으로 위치를 제어할 수 있다.
• z-index로 z 축을 제어해서 쌓이는 순서도 정의 가능 함.
• 적용 가능 값
  • static: 문서의 흐름에 따라 배치. offset, z-index는 제어 불가
  • relative: 문서 흐름에 따라 배치하고 현재 위치 기준으로 offset, z-index 제어 가능하다.
  • absolute: 문서 흐름에서 제거하고 가장 가까운 위치의 relative 요소에 상대적으로 배치 (없으면 body 기준)
  • fixed: 문서 흐름에서 제거하고 브라우저의 화면 기준으로 배치
  • sticky: 문서 흐름에 따라 배치되나 요소가 스크롤에 닿으면 따라다님 (헤더같은 곳에서 많이 쓰임)

 

유연한 상자 만들기 Flexbox

: 일차원 레이아웃

• justify-content: 가로축 정렬
  • flex-start, flex-end, center
  • space-between: 콘텐츠 처음, 마지막은 끝에 나머지는 균등하게 정렬
  • space-around: 콘텐츠 + 여백이 균등하게 정렬
  • space-evenly: 콘텐츠 제외, 여백만 균등하게 정렬
• align-items: 세로축 정렬
  • stretch: (기본 값) 부모의 크기만큼 자식 요소들 늘어남
  • flex-start, flex-end, center
  • baseline: 폰트 크기에 따라 정렬 됨
• flex-grow, flex-shrink (값 0 or 1): 유연성 조절
  • 자식요소에 속성을 적용해야 함
• flex-basis: 크기 조절
  • 자식요소에 속성을 적용해야 함
  • 기본 값은 auto이고, px값으로 크기 조절 가능
  • 보통 grow, shrink, basis 묶어서 사용한다
    • ex) flex: 1 1 auto
• flex-direction: 축 변경 (row: 가로, column: 세로)
• gap, order: 여백과 순서
  • order: 자식 요소의 순서 (기본 값 0)
    • 뒤에 있는 요소를 맨 앞으로 보내고 싶다면 -> 요소에 order: -1;
    • 시각적으로 바뀐 것이고 마크업은 고대로 유지된다.
• flex-wrap: 자식 요소들이 넘칠 때 아래로 내려 줄 지 결정 (wrap, nowrap, wrap-reverse)

 

바둑판 상자 만들기 Grid

: 수평선과 수직선을 가진 2차원 레이아웃 만들기

flex보다 사용 빈도가 낮지만 grid는 페이지 전체 레이아웃을 만들 때 좋음

• grid-template: 바둑판 조절
  • grid-template-rows, grid-template-columns
  • repeat: 반복

.wrapper {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  /* 한 줄에 100px 3개 반복 */
}

• grid-row, grid-column: 셀 확장

.content {
  grid-row: 1 / 3;
} /* 1에서 3까지 두 칸 차지하겠다는 의미 */

.content2 {
  grid-row: span 2;
} /* content2가 위치한 지점에서 2칸 차지하겠다는 의미 */

• grid-template-areas, grid-area: 영역 지정하고 배치
  • header, slider, content 등 위치 잡을 때 사용
  • 이름에 띄어쓰기 사용 X

.wrapper {
  display: grid;
  grid-template-rows: repeat(3, 100px);

  grid-template-areas: 'header slider slider' 'header content content' 'header banner footer';
}

.content1 {
  grid-area: header;
}

.content2 {
  grid-area: slider;
}

.content3 {
  grid-area: content;
}

.content4 {
  grid-area: banner;
}

.content5 {
  grid-area: footer;
}

• gap, order: 여백과 순서

 

✅ 기타 팁!

• 하나의 태그에 class는 여러개 가질 수 있지만 id는 무조건 하나만 가능하다.
• 연습할 때 VSCode에서 lorem + 엔터를 치면 아무 의미 없는 문장을 만들어 준다.
• 클래스/아이디 명 작성할 때 대소문자를 주의해야 함 (클래스/아이디 명은 한글말고 영어로 작성하기, 숫자 먼저 작성도 안됨)
• 계층 잘 체크하기 (마크업 순서와 CSS 순서를 같게 해주면 덜 헷갈리게 작업할 수 있다.)

 

 

 

마무리

---

한 주의 강의가 벌써 끝이났다. 많은 내용을 배워서 복습을 하지 않으면 머릿속에 남지 않을 것 같다. 복습은 꾸준히 해야겠다.

 

다음주는 데브코스 시작하자마자 방학이 시작되는데 연말이니까 열심히 먹고 놀고 공부도 틈틈히 해야지!

방학동안 계획은 HTML/CSS 배운 걸로 티스토리 스킨 만드는 거에 도전해 볼 예정이다. 화이팅!