멋쟁이사자처럼 프론트엔드스쿨 스터디 질문 정리- 1

갓희·2023년 12월 6일

멋쟁이사자처럼 프론트엔드스쿨 9기

1. margin의 auto 값은 어떻게 적용되는가?

A.
auto값은 브라우저가 남은 너비의 공간을 자동으로 계산해서 좌우 균등하게 배분한다.
margin left: auto; 또는
margin right: auto;로 설정했다면,
element는 지정된 width만큼의 공간을 차지하고,
남은 공간은 균등하게 나누어져 좌, 우 margin이 갖게 되는 것이다.

2. margin과 padding의 차이

margin
- 콘텐츠와 화면과의 여백 (바깥 여백)
- 주변 요소와 거리를 두기 위한 영역임
- 음수 값과 auto 값이 가능하다
padding
- 콘텐츠 내의 내부 여백 (안쪽 여백)
  으로, 콘텐츠와 border사이의 여백임

3. css에서 상속이란?

A.
부모 요소에게 지정된 속성 중 몇 가지가 자식 요소로 값이 전달되는 것이다.
이것은 1-3 수업 정리에 예제와 함께 정리해두었다!

4. css property의 기본값

A.
margin: 0
padding: 0
background-color: transparent
background-image: none
font-size: 16px
display: inline
width: auto

등등...이 있다.

5. Doctype을 사용해야 하는 이유는?

doctype은 최신의 html 버전(living standard)에 맞게 코드를 작성하겠다고 선언하는 것이다.

doctype 사용하지 않으면
: 서로 다른 브라우저 환경에 따라 다른 결과물을 출력하는 경우 발생한다
역할
- 브라우저가 html 문서를 동일하게 인식할 수 있게 한다.
- 문서간 호환성을 높이기 위한다

6. index.html 파일이 가지는 의미

index.html 파일이 뭔데?

웹 사이트의 기본 페이지에 표시되는 파일, 웹 사이트의 기본적인 필수 값을 포함

가장 일반적으로 사용되는 파일 이름임

웹 서버에서는 원하는 모든 파일을 해당 사이트의 기본값으로 인식하도록 구성하는데, 추가 구성 필요 없이 대부분의 서버에서 즉시 인식되는 파일=index.html 이기 때문에 index.html로 사용하는 것을 권장한다.

7. html 요소들의 부모/형제 관계

부모 요소: 해당 요소를 포함하는 가장 가까운 상위 요소
형제 요소: 같은 부모를 가지고 있는 요소

부모 요소의 특징
- 그 요소의 부모 요소는 단 하나
- 자식 요소는 이와 반대로, 자식 요소는 여러 개 일 수 있다.
형제 요소의 특징
- 인접한 관계: 형제 관계에 있는 요소 중 바로 뒤이어 나오는 요소를 인접한 관계에 있다고 한다.
조상과 자손 관계
- 부모와 자식의 관계를 포함해서, 더 확장된 관계
- 조상 요소: 그 요소를 포함하는 모든 요소, 부모 요소를 포함하여 여러 개 일 수 있음
- 자손 요소: 그 요소가 포함하고 있는 모든 요소

Ex.

<html>
	<head>
		<title>aaa</title>
	</head>
	<body>
		<h1>멋사</h1>
		<p>프론트엔드 스쿨</p>
	</body>
</html>

부모-자식 관계: <body>(부모), <h1>, <p>(자식)
형제 관계: <h1>, <p>

8. css에서 타입 셀렉터란?

html 문서에서 지정된 태그를 지칭하는 선택자

Ex.

<html>
	<head>
		<title>aaa</title>
		<style>
			h1 {
					color: red;
					}
			p {
					background-color: grey;
				}
        </style>
         
	</head>
	<body>
		<h1>멋사</h1>
		<p>프론트엔드 스쿨</p>
	</body>
</html>

타입 셀렉터: h1, p

9. div 요소와 h1 요소의 차이점은?

div
- 아무 것도 나타내지 않는 콘텐츠의 영역을 설정
- Ex. <div>나는 감자</div>를 작성했을 때, 웹 사이트에서 보면 '나는 감자' 라는 글자만 나타남
- 이유: div는 영역을 나타내는 역할 외에는 특정한 의미가 없다
- 다른 요소를 포함시키는 용도로도 사용(h1은 X)
h1
- 이 페이지에서 최상위 제목인 텍스트를 감싸는 역할
- 보통 검색 엔진에서 h1 같은 경우는 대제목으로 받아 들임
  -> 알고리즘에서 중요하게 보는 부분
- <h1>나는 감자</h1> 코드를 웹 사이트에서 실행시키면 div와는 다르게 텍스트가 크고 굵게 나타난다.
따라서, div는 영역을 구분할 때, h1은 제목을 표시할 때 사용
div(block 속성)와 span(inline): 검색엔진에서 중요한 의미를 갖지 않음
-> 보통 레이아웃을 잡을 때 div나 span을 사용