✨ 새롭게 알게 된 것
1. HTMl semantic tag
시맨틱 태그란?
: 시맨틱 태그란 시맨틱이 지니고 있는 의미 그대로, 의미를 가지고 있는 혹은 의미론적인 태그를 말한다. 즉, 태그에 특정한 의미를 부여한 태그인 것이다.
대게 HTML로 레이아웃(골격)을 잡을 때 <div></div>를 많이 사용하는데, 무분별하게 div 태그를 사용하는 것보다는 각각의 섹션의 의미를 직관적으로 알아볼 수 있도록 시맨틱 태그를 사용하는 것이 좋다.
👉🏻 (개인적으로) 자주 사용하는 시맨틱 태그
<header></header>/ 웹 페이지의 상단을 표시<main></main>/ 가장 중심이 되는 콘텐츠 표시<section></section>/ 콘텐츠들의 구역을 표시<figcaption></figcaption> + <figure></figure>/ 사진과 간단한 타이틀 혹은 설명을 필요로 하는 리스트형의 카드를 제작할 때 주로 사용<footer></footer>/ 웹 페이지의 하단을 표시
시맨틱 태그 사용을 지향하는 이유에는 크게 2가지가 있다.
1번째는 웹 접근성의 이유다. 시각장애가 있는 웹 사용자들의 경우에는 스크린 리더기를 통해 웹 페이지를 읽게 되는데, 시맨틱 태그를 사용하게 됨으로써 스크린 리더기의 문서 탐색에 도움을 주기 때문이다.
2번째는 가독성 및 유지 보수의 이유다. 개발은 혼자 하는 경우도 있지만 대부분이 협업을 통해 여러 개발자들과 함께 작업을 하게 된다. 이때 의미가 없는 div 태그로만 레이아웃을 구성하게 되면 어디가 어느 부분이고, 어떤 콘텐츠인지 이해하기가 어려워진다. 코드를 공유했을 때 다른 사람도 쉽게 이해할 수 있도록 직관적으로 코드를 작성하는 것도 굉장히 중요하기 때문에 시맨틱 태그 사용을 권장하고 있다.
2. 레이아웃 Flex vs Grid
마크업 개발에 있어 가장 중요한 부분 중 하나라고 생각하는 것이 바로 레이아웃 구성이다. 정보를 어떤 레이아웃으로 나타내야 효과적인지 충분한 고민을 하는 것 역시도 프론트엔드 개발자의 역할 중 하나라고 생각하기 때문이다.
레이아웃을 구성하는 방법은 다양하지만 그중에서도 가장 많이 사용되는 것이 바로 Flex와 Grid다.
이 둘의 가장 큰 차이점은 방향이 아닐까 생각한다. Flex의 경우 1차원으로 수평 혹은 수직의 한 방향으로만 레이아웃을 나눌 수 있다면 Grid는 2차원으로 수직과 수평 상관없이 동시에 레이아웃을 나눌 수 있다.
2차원으로 동시에 영역을 나눌 수 있다고 해서 무작정 grid만 사용하는 것이 좋은 건 아니라고 생각한다. 수직 혹은 수평으로만 레이아웃을 나눌 수 있는 콘텐츠의 경우에는 간단하게 Flex만 사용해서 영역을 나누는 것이 더 효율적일 수 있다.
따라서, 하나의 영역을 수직 혹은 수평으로 나눠 Flex로 레이아웃을 나눌지 혹은 Grid로 한꺼번에 레이아웃을 나눌지는 본인의 취향이라고 생각한다.
하지만, 분명 더 효율적인 방법이 있을 테니 연습을 많이 해보면서 감을 익히는 것이 중요할 것 같다.
👉🏻 flex와 grid 모두 display 속성값으로 선언을 해준다.
display: flex;
display: grid;
flex의 경우 방향, flex 안의 item의 정렬을 통해 영역을 나눈다.
grid의 경우에는 rows, columns으로 영역을 먼저 할당한 후에 해당 영역에 들어갈 콘텐츠를 표시해 준다.
3. CSS 가상 요소 ::before + ::after
CSS 가상 요소란?
: 가상 요소는 선택자로 선택한 요소의 특정한 부분에서 정해진 역할 혹은 기능을 하도록 미리 정의되어 있는 키워드다. 가상 요소를 사용하게 되면 HTML에 콘텐츠를 추가하지 않아도 새로운 콘텐츠를 만들 수 있다는 점에서 유용하게 사용되곤 한다.
여러 가상 요소가 있겠지만 그중에서도 많이 사용되는 가상 요소에는 ::before과 ::after가 있다.
::befor은 요소의 앞쪽에 콘텐츠를 추가하는 가상 요소이고 ::after은 요소의 끝(뒤) 쪽에 콘텐츠를 추가하는 가상 요소다.
새로운 콘텐츠를 추가할 수 있는 기능을 담당하기 때문에 HTML에 따로 코드를 작성하지 않아도 CSS로 간단히 새로운 요소를 만들 수 있다는 점에서 중요한 가상 요소로 많이 사용되고 있다.
::befor과 ::after 가상 요소는 선택된 요소의 하위 요소로 들어가기 때문에 상속받는 요소에 의해 위치가 결정되는데, 위치의 경우에는 배치 속성을 통해 자유롭게 조정할 수 있기 때문에 처음 가상 요소가 생성된 위치를 파악하는 것이 중요하다.
👉🏻 사용 예시
h1::after { content: ""; width: 100px; height: 20px; background-color: blue; bottom: 0px; left: 0px; position: absolute; }
4. SASS(SCSS)
SASS(SCSS)란?
: SASS(SCSS)는 CSS의 전처리기로 CSS로 처리되기 전에 여러 기능들을 미리 처리해서 보다 효율적으로 혹은 특정 기능을 사용할 수 있도록 해주는 CSS의 확장 언어라고 생각하면 될 것 같다.
SASS(SCSS)는 엄밀히 말하면 웹 브라우저가 읽을 수 있는 CSS 언어/파일은 아니기 때문에 SASS(SCSS)로 스타일 코드를 작성한다고 해서 HTML에 바로 적용되는 것은 아니다. 웹 브라우저가 인식할 수 있는 CSS 코드로 컴파일되어야지만 웹 브라우저가 스타일 문서를 읽고 이를 적용할 수 있게 되는 것이다.
컴파일의 경우에는 에디터의 확장 프로그램이 자동으로 컴파일을 해주기도 하기 때문에 확장 프로그램 혹은 그 외의 프로그램을 설치한다면 별도의 과정 없이 컴파일된 CSS 파일을 생성 받을 수 있다.
(자동으로 생성된 CSS 파일을 기존 방식과 동일하게 HTML 링크로 연결하면 된다.)
SASS와 SCSS의 차이점은?
: SASS와 SCSS는 기능적 차이는 없고 문법이 살짝 다르다는 차이점이 있다.
SASS의 경우에는 들여쓰기 문법을 사용한다면 SCSS는 대괄호 문법을 사용한다.
< SASS 표현법 >
body
font: $font-size-title
color: $font-color-title< SCSS 표현법 >
body {
font: $font-size-title;
color: $font-color-title;
}SASS(SCSS)를 사용하는 이유는?
: SASS(SCSS)에는 기존 CSS에서 사용이 불가능했던 변수나 @mixin 등의 추가적인 기능을 사용할 수 있다. 이러한 기능을 사용함으로써 스타일 코드들의 재사용성을 높일 수 있고 무엇보다도 코드의 유지, 보수를 효율적으로 할 수 있게 되었다.
CSS에서는 반복적으로 사용되는 스타일의 경우에도 계속 같은 코드를 작성할 수밖에 없었다면 SASS(SCSS)에서는 변수 기능이 있어 이를 미리 변수로 선언하고 변수명만 가져와 스타일을 적용할 수 있다.
이처럼, 코드의 재사용성을 높여주고 이미 작성된 코드라 할지라도 수정 작업에 큰 어려움이 없기 때문에 SASS(SCSS)를 사용한다.
✨ 회고
마크업 개발을 할 때 정해진 디자인을 그대로 구현하는 것이 가장 중요하다고 생각했었는데, 어떻게 구현을 할지 생각하고 코드에 어떤 의미를 담을 것인지 끊임없이 고민하는 것이 가장 중요하다는 것을 깨닫게 되었다.
또한, 프론트엔드 개발자에게 가장 중요한 언어는 자바스크립트이기 때문에 HTML, CSS의 경우에는 기초만 공부하고 넘어가면 되겠다 생각했었는데 오히려 더 꼼꼼히 공부해야 하는 언어라는 걸 알게 되었다.
가장 기본적인 부분이기에 대충 공부하고 넘어가면 안 되겠다는 생각을 했다.
