멋쟁이사자처럼 프론트엔드스쿨 1-3

갓희·2023년 12월 6일

CSS html 멋쟁이사자처럼 프론트엔드

멋쟁이사자처럼

목록 보기

2/6

느낀 점

오늘 수업은 어제보다 더 재미있게 들었다!
수업시간에 간간히 정리하며 이해했지만, 확실히 벨로그로 한 번 더 정리를 하게 되니 더 기억에 오래 남는 것 같다.
앞으로도 꾸준히 써야지

html 문서에서 css파일 연동하기

<!doctype html>
<html>
	<head>
		<link rel="stylesheet" href="CSS 파일위치">
	</head>
	<body>
	</body>
</html>

./ 현재 경로 위치
../ 이전 경로 위치
초보자라면 html을 완성해서 css로 꾸미기보단,
html로 간단한 영역만 나누고(최소한의 html 구축),
css로 레이아웃을 어느정도 내 눈에 보이게 직관적으로(Ex. h1이 어느 정도의 영역을 가지는지) 고친 후,
내가 원하는 디자인을 대강 적용해두고 다시 html을 수정하는 것이 더 편할 수 있다고 하셨다!
html 문서의 내용은 계속 변할 수 있기 때문이다!
(확실히 과제 내주셨을 때 그렇게 해봤는데 시간도 단축되고 속성 값이 어떻게 나타나는지도 시각적으로 더 쉽게 보여서 좋았다.)
html과 css를 분리했을 때
- 관리가 용이하다
- 여러 페이지를 하나의 css 파일로 컨트롤 할 수 있다
- html 마크업이 더 명확하게 보인다.

브라우저 기본 세팅값을 없애고 시작하자 (CSS Reset)

브라우저마다 각각의 기본 세팅값이 다르다.(User Agent Stylesheet)
css reset을 하는 이유는 브라우저 간 세팅값이 각각 다르기 때문에 이 차이를 최대한 없애는 코드를 넣어서
브라우저 요소들의 스타일이 0인 상태에서 시작하기 위한 것이다.

 /* UA Reset */	
body {
		margin: 0; 
			}
/* Componets */
body {
		background-color: orange;
			}

예제에서는 margin을 사용했기 때문에 margin으로 설명한다

(0) 내가 쓰는 크롬 브라우저에서는 body의 margin 기본 세팅값은 8px로 지정되어 있기 때문에,
이것을 아예 margin의 초기값(initial value)으로 지정하고 시작한다.
(1) margin의 초기값으로 세팅한 후,
(2) 같은 type selector라도, reset한 selector와 Components가 있는 selector는 따로 표기한다.
(3) 초기값으로 셋팅한 부분엔 위에 주석으로 UA Reset으로 구분해두면 나중에 보기 편하다!

Block-level element의 width나 margin 값이 auto일 때,

브라우저는 auto 값을 어떻게 계산할까?

직계 부모가 제공해주는 콘텐츠 영역(Containing block)의 너비,
즉, 부모의 너비만큼 가득 차게 자동으로 계산해서 적용한다.
그렇다면 width나 margin의 값을 지정해준 후 남는 공간은 어떤 공간인가?
→ 사용 가능한 여유 공간 (available space)

오늘 수업에서 앞뜰, 정원 등등 다양한 비유가 나왔다. 정확한 명칭은 사용가능한 공간! 앞으론 이렇게 알기

Ex 1. width 값 지정 후 사용 가능한 공간은?

div {
		width: auto;
        }

일 경우: div의 너비는 브라우저가 부모 요소가 제공해주는 컨텐츠 영역을 자동으로 계산한다.
따라서, 사용 가능한 공간은 전체 너비로 사용된다.
(집(눈에 보이는 것)과 마당(눈에 보이지 않는 것)으로 비유하자면, 집이 마당 영역을 다 차지하고 있는 것이다.)

* width: 100%;와 width: auto; 다른 점

width: 100%;: 100%로 픽스한다. 마진/패딩을 넣게 된다면 전체 크기가 커져서 옆으로 삐져나가는 현상 발생.
width: auto;: 브라우저가 자동으로 계산해서 마진/패딩을 넣게 되어도, 브라우저가 이것을 고려하여 컨테이너 블록의 크기에 맞게 지정한다.

Ex 2.

div {
		margin: auto;
        }

일 경우: 사용 가능한 공간은 div의 여백으로 사용된다.
(집과 마당으로 비유하자면, 여백이 되어 보이지 않을 뿐, 여전히 마당이 내 소유인 것처럼, 여백 공간도 div 소유)

상속 Inheritance

부모 요소에게 지정된 속성 중 몇 가지는 자식 요소로 값이 전달되는 것
상속의 우선 순위: 부모의 지정 값 < 자식의 지정 값

상속이 되는 property: text-align, line-height, color, font 등
상속 불가한 property: width, height, padding, margin, border, display, background 등

Ex 1.

부모 {
			color: black;
}
자식 {
			
}

위의 상황에서 color속성은 상속이 가능한 속성이다.
-> 자식의 color 값= 부모에게 상속된 black

Ex 2.

부모 {
			color: black;
}
자식 {
			color: red;
}

위 상황에서 자식의 color 값은 red로 지정되었기 때문에
-> 부모 요소에서 color값 상속되지 않음

Ex 3. 만약 부모요소가 div이고 img가 자식요소일 때

div {
		display: block;
        }
img {
		display: 뭘까요?
        }

위 상황에서 div 내부에 display: block이 설정되어 있더라도 display 속성은 상속이 되지 않기 때문에 img에 상속이 되지 않는다.
따라서 img의 display 값은 inline(기본값)이다.

(그러나, img에 display: inherit; 을 추가하면 강제로 상속이 되게 할 수 있다.)

block-level element와 inline element의 차이점

Block (Container)

* 모든 inline 요소를 포함할 수 있고, 다른 block 요소 또한 일부 포함 가능
* 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태
* 한 줄 전체 공간을 차지 (한 줄에 하나씩)
-> block-level element 뒤에는 줄바꿈 O
- box-model 정상 적용
- width와 height를 통해 사이즈 조절 가능
  - 지정이 되지 않을 때:
    width: 화면에서 한 줄을 다 차지함 (100&와 전부를 구별하자)
    height: 컨텐츠만큼 차지
- <div>, <ul>, <h1~6>, <p>, <article>, <section> 등
inline (Contents)

* 항상 block 요소 안에 포함되어 있으며,
inline 요소 안 다른 inline 요소가 포함될 수 있다.
* 컨텐츠만큼의 크기를 가진다.
(컨텐츠가 끝나는 지점까지 넓이로 가짐=줄바꿈X)
-> 각 줄 안에서 inline element는 쓰기 모드에 따라 수직or수평 모드로 정렬
- box-model 부분 적용
- width와 height의 개념 자체가 없다.
  왜? 컨텐츠만큼 너비가 잡히니까!
- 상하 margin 적용X, 공간도 차지하지 않음
- 상하 padding 적용X, 시각적으론 보이지만 공간을 차지하진 않는다. ~~그래서 예제 떄 겹쳐보였던 것~~
- 따라서 box-model이 부분 적용된다.
- 부모에게 line-height나 text-align을 줌으로써 텍스트의 중앙, 좌&우측 정렬 가능
- 예외: img 요소
  - inline element지만 width 값, height 값이 이미 적용되어 있다.
  - 상하 margin, padding 또한 적용 가능
- <a>, <img>, <span>,<script>, <em>, <map> 등
inline-block

* inline의 특성과 block의 특성을 합친 것
* 컨텐츠 만큼의 크기를 가진다
* 줄바꿈 X
- 내부: block 취급, 외부: inline 취급
  : 자기 자신을 봤을 땐 block이지만, 배치된 바깥 레벨에서는 inline으로 취급함
- inline의 특성을 가지기 때문에
  - 컨텐츠 양만큼 전체 너비가 자동 조절된다
  - 부모에게 지정된 text-align 속성에 영향 받는다
  - 정렬에 용이하나 한계를 안고 있다
- block의 특성을 가지기 때문에
  - 원하는 width값과 height값을 지정 가능
  - margin과 padding의 상하 간격 지정 가능
inline or block or inline-block element 라도 display 속성에 원하는 값을 넣으면 바꿀 수 있다!
Ex. inline을 block으로 바꿀 때
: 원하는 셀렉터에 display: block; 을 추가한다

어제 과제에서 이거 때문에 정말 머리가 아팠다... 일단 `block`과 `inline`의 차이도 몰랐었기도 하고, 레이아웃을 제대로 짜지도 않고 시작해서 막상 꾸미려고 보니 `h1`과 `p`의 여백 및 가운데 정렬이 해결이 안됐다ㅡㅡ; 겨우 검색해서 대충 이해하고 넘어갔었으나, 막상 원리를 설명해보라면 왜인지 설명할 수가 없었다. 하지만 오늘 수업을 통해 `block`과 `inline`의 차이점을 정확하게 알게 되었고, 내가 무엇을 착각했는지와 해결 원리도 이해할 수 있었다.

자투리 지식

Q. h1에 text-align: center를 넣었는데, h1의 위치는 그대로고 안의 내용(콘텐츠)만 중앙 정렬이 되었어요!

h1은 block-level element 이다.
또한, text-align은 h1 자체를 가운데로 옮기는 것이 아닌 h1의 콘텐츠만 가운데로 정렬한다.
따라서, h1 뿐만 아니라 p, ... 등등의 block 속성을 가진 셀렉터에도 text-align 속성을 사용하고 싶다면,
그 요소의 부모 요소에 적용해야 한다.
!!! block 속성을 가진 태그에는 콘텐츠만 가운데로 정렬이 된다!!!

margin의 단축속성

margin: 0 auto 40px;: 상 | 좌우 | 하

margin: 5% auto;: 상하 | 좌우

margin: 2px 1em 0 auto;: 상 | 우 | 하 | 좌

margin: 100px;: 네 면 모두 적용
시계방향으로 돌아간다고 생각하면 된다

끝.

갓희

나의 개발일지

이전 포스트

멋쟁이사자처럼 프론트엔드스쿨 1-2

다음 포스트

멋쟁이사자처럼 프론트엔드스쿨 1-4

2개의 댓글

타닥타닥

2023년 12월 7일

inline-block 헷갈렸었는데 정리가 잘되었습니다 감사합니다!

1개의 답글