알토르 코딩 1주차 과제

1. Semantic 태그란 무엇인가?

2. CSS의 Selector/선택자란 무엇인가?

3. CSS에서 position, display, grid, flex란 무엇인가?

---

답 1. Semantic 태그란, 보다 분명하고 확실한 의미가 부여된 태그를 말한다.

'상자의 집합' vs '분명한 기능을 가진 태그의 집합'

위의 예시에서, 좌측 div는 Container/구획이라는 의미만 갖는다.

굉장히 넓은 의미를 가졌기에 어떤 용도로든 사용할 수 있지만, 그런 만큼 좌측 이미지처럼 한 눈에 봤을 때 "그래서 이 div 모음은 무엇인가? 무슨 일을 하기 위해 만들어졌나?" 를 알 수가 없다.

 

반면, 우측 이미지는 div 대신 header, footer 등의 보다 알기 쉽고 직관적인 태그를 사용한다.

HTML에 대해 잘 모르더라도, Head라는 단어로부터 header란 단어의 뜻을 '화면의 상단(=머리 부분)에 배치할 무언가, 또는 그 장소'라고 예상할 수 있다.

같은 논리로, Footer 또한 화면의 하단(=foot 부분)에 배치될 정보들의 모음이라고 예상할 수 있다.

 

위와 같이, 태그의 의미를 한정시키는 대신 더 명확한 기능을 하게 만드는 태그를 Semantic 태그라고 한다.

---

 답 2. Selector란,  CSS 언어에서 주어를 의미한다.

CSS문장의 구조

CSS 문장은 웹 페이지의 겉모습을 꾸민다.

사람의 겉모습에는 이목구비, 피부색, 덩치, 머리숱 등 매우 많은 요소가 있다.

마찬가지로, 웹 페이지의 겉모습에도 매우 많은 구성요소가 존재한다. 

사람의 겉모습이 전부 검거나 희기만 할 수는 없듯, CSS도 각각의 요소마다 다른 특징을 갖게 해야 한다.

 

이를 위해서는 '특정한 대상만 지정해서' '특정한 효과를 넣어줄' 필요가 있다.

선택자는 위의 2가지 역할 중에서 '특정한 대상만을 지정하는' 역할을 한다.

 

또한, 다른 하나인 '특정한 효과를 넣어주는' 역할을 하는 것이 Declaration, 선언자이다.

---

답 3. Position/Display/Grid/Flex?

Position: 화면 내에서, 해당 요소가 시각적으로 어느 위치에 있어야 하는지를 지정한다.

=> 위치의 기준값은 '부모 태그의 좌측 상단'이며, 이로부터 다른 위치가 파생된다.

 

Display: 화면 내에서, 해당 요소가 부모 태그 안에서 갖는 크기를 지정한다.

=> block, inline, inline-block, none으로 나뉜다. 

Block의 경우, 해당 요소가 위치한 모든 라인을 독점한다.

Inline의 경우, 해당 요소의 최소한의 크기를 갖는다.

Inline-block의 경우, 크기를 사용자 뜻대로 조절할 수 있다.

 

Flex: 태그를 1줄로 정렬시킨다.

기준값/기본값은 가로줄 정렬이지만, column 등의 명령어로 다른 정렬로 변경할 수 있다.

단, Flex 태그를 이용한 정렬은 1줄만 가능하다.

 

Grid: 태그를 2줄 이상으로 병렬시킨다.

Flex 태그가 1개의 줄이라면, Grid 태그는 Grid/격자라는 이름 대로 2줄 이상의 정렬이 가능하다.

---

참고문헌

1. https://opentutorials.org/module/2367/13346

선택자와 선언 - CSS

2.https://opentutorials.org/module/1892/10954

의미론적 태그 - HTML 수업

3. https://medium.com/codex/what-is-semantic-markup-and-why-you-should-use-it-44777543c29c

What Is Semantic Markup and Why You Should Use It