2주차는 CSS 레이아웃, 실용적 유닉스 커맨드라인, GIt 활용법에 대해 배웠다.
그리고 배운 것을 바탕으로 페이지를 디자인하는 첫번째 스프린트 미션도 진행했다!
순식간에 한 주가 지나간 것 같은데 많은 것을 배울 수 있어서 좋았고, 특히 CSS 레이아웃에 대해 복습할 수 있어서 좋았다. 또 팀 분위기가 처음에는 어색했는데 이제는 많이 가까워져서 다양한 주제들에 대해 이야기 할 수 있어서 많이 배우는 중이다ㅎㅎ
활동기간 동안 팀이 여러번 바뀌겠지만 매 팀마다 열심히 참여해서 내가 모르는 것들과 아는 것들을 공유하며 성장하고 싶다.
2주차 위클리 페이퍼 주제는 아래와 같다.
- 시맨틱 태그를 사용하면 좋은 점을 설명해 주세요.
- position의 속성들과 각각의 특징을 설명해 주세요.
하나씩 살펴보자.
1. 시맨틱 태그를 사용하면 좋은 점을 설명해 주세요.
시맨틱 태그 (Semantic Tag) 는 사람이 이해하기 쉽도록 태그의 이름만 보고도 역할이나 위치를 알 수 있도록 만든 태그들이다.
div나 span과 같이 의미가 없는 태그는 태그 이름만 보고는 어떤 내용인지 유추하기가 어렵다. 반면 <header>, <nav>, <article>, <section>, <footer>, <main> 등 의미가 있는 태그는 각 부분의 역할과 기능을 전달하는데 도움이 된다.
한마디로 정의하자면 시맨틱 태그는 HTML 구조를 설계하는데 있어 태그에 의미를 부여함으로써 웹사이트의 구조를 파악하기 쉽도록 도와주기 위해 만들어진 것 이다.
그렇다면 시맨틱 태그를 사용함으로써 얻는 장점은 어떤게 있을까?
시맨틱 태그 사용의 장점
시맨틱 태그 사용의 장점은 크게 세 가지가 존재한다.
1. 검색엔진최적화(SEO) 향상
검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단한다.
따라서 제목은 h1, 중요한 단어는 strong 또는 em을 사용하는 등 의미에 맞는 올바른 태그를 사용하는 것이 중요하다.
2. 쉬운 소스코드 구조화
브라우저가 웹 문서의 소스 코드를 보고 어느 부분이 헤더인지, 어느 부분이 본문인지를 쉽게 알아낼 수 있다. 따라서 시각장애인의 경우 웹 문서를 분석하는 서비스 (ex. 스크린 리더기) 같은 것들이 있을 때 제목과 본문을 정확하게 구분지을 수 있게 되어 사이트의 구조를 더욱 쉽게 이해할 수 있다.
3. 코드 가독성 및 유지보수가 용이
만약 다른 개발자와 소스코드를 공유할 경우에 수많은 <div>가 중첩된 코드보다 태그 자체가 가지는 시맨틱 태그를 사용했을 때 다른 작업자가 코드를 파악하고, 수정하기가 훨씬 용이해진다.
시맨틱태그의 종류(참고)
<header> : 사이트의 헤더 영역에 사용, 주로 사이트의 로고나 이름 등이 포함된다.
<nav> : 내비게이션을 의미하는 태그로, 주로 메뉴 영역에 사용된다.
<main> : 메인 컨텐츠 영역에 사용되며, <nav>, <aside>, <article> 등이 포함된다.
<section> : 주로 <article>을 포함하는 태그로 섹션별로 나눠줄 때 사용한다.
<article> : 개별 콘텐츠, 반복되는 콘텐츠를 나타낼 때 사용한다.
<aside> : 메인 컨텐츠 이외의 내용을 담을때 주로 사용(사이드), 보통 광고나 사이드바에 사용된다.
<footer> : 페이지의 하단에 주로 고객센터나 회사 정보를 담을때 사용한다.
2. position의 속성들과 각각의 특징을 설명해 주세요.
css에서 position은 HTML 문서 상에서 요소가 배치되는 방식을 결정한다. 주로 top, left, bottom, right 속성과 함꼐 쓰인다. 하나씩 어떤 특징이 있는지 살펴보자
1. position: static
position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용된다.
position 속성이 static인 요소는 HTML 문서 상에서 원래 있어야하는 위치에 배치된다.
2. position: relative
position 속성을 relative로 설정하게 되면, 요소를 원래 위치에서 벗어나게 배치할 수 있게 된다. 요소를 원래 위치를 기준으로 상대적(relative)으로 배치해준다고 생각하면 이해가 쉽다.
3. position: absolute
position 속성이 absolute일 때 해당 요소는 배치 기준을 자신이 아닌 상위 요소에서 찾는다. DOM 트리를 따라 올라가다가 position 속성이 static이 아닌 첫 번째 상위 요소가 해당 요소의 배치 기준으로 설정되는데, 만약 해당 요소 상위에 position 속성이 static이 아닌 요소가 없다면, DOM 트리에 최상위에 있는 <body> 요소가 배치 기준이 된다.
4. position: fixed
position 속성을 fixed로 지정하면 요소를 항상 고정된(fixed) 위치에 배치할 수 있다.
이유는 fixed 속성값의 배치 기준이 자신이나 부모 요소가 아닌 뷰포트(viewport), 즉 브라우저 전체화면이기 때문이다.
5. position: sticky
position 속성의 sticky 값은 CSS에서 비교적 최근에 추가된 속성값이다. 이 속성은 요소를 스크롤이 가능한 컨테이너의 특정 위치에 고정시키는 데 사용된다.
정리하자면 아래와 같다.
| static | 기준점 없음, 기본값(가장 일반적인 상태) |
| relative | 자기 자신을 기준으로 함 |
| absolute | 자신의 부모(조상)을 기준으로 함 |
| fixed | viewport를 기준으로 함 |
| sticky | 스크롤 영역을 기준으로 함 |
이렇게 기준점을 정한 뒤 top, bottom, left, right을 이용해 요소의 위치를 조정하면 된다.
'코드잇 스프린트 > Weekly paper' 카테고리의 다른 글
| [코드잇 스프린트] 6주차 위클리 페이퍼 (0) | 2024.04.13 |
|---|---|
| [코드잇 스프린트] 5주차 위클리 페이퍼 (이벤트 버블링, 캡쳐링, 위임 / HTTP 메소드, 멱등성) (0) | 2024.04.06 |
| [코드잇 스프린트] 4주차 위클리 페이퍼 (0) | 2024.03.30 |
| [코드잇 스프린트] 3주차 위클리 페이퍼 (0) | 2024.03.23 |
| [코드잇 스프린트] 1주차 위클리 페이퍼 (0) | 2024.03.10 |
