서론
큰일 났다. 그리드를 아직 제대로 안 썼는데 7일 차로 넘어가는 TIL 글이다. 처음에는 그리드가 이틀 정도면 다 쓸 것이라고 생각했었는데, 생각보다 그리드 내용이 너무 방대해서 어떻게 해야 할지 감조차 안 온다.
그래도 7일차 내용을 써야 하니 열심히 쓰도록 하겠다. 그런데 하필 7일 차는 학습이라기보다는 지금까지 배운 내용을 총 망라해서 쓰는 쪽에 가까웠다. 그런 관계로 오늘 분량은 프로그래머스 데브코스 강사님께서 중간중간 언급하신 팁이나 개인적으로 중요하다고 생각한 내용 위주로 서술하도록 하겠다.
실습 내용은 정리해서 안 올리냐고 할 수도 있지만, 솔직히 이미 이전 일차들에서 설명한 내용들이 대부분이다. 그리고 그건 아무리 봐도 저작권에 걸릴 것 같다. 코드의 극히 일부라면 모를까, 한 움큼씩 때와서 전부 설명하면 판사님 앞에서 댄스를 춰야 할지도 모른다.
이번 일자는 HTML/CSS 실습(클론코딩)이다.
핵심 내용
헤더, 메인, 푸터
<header id="header"></header>
<main id="main"></main>
<footer id="footer"></footer><header>, <main>, <footer>이다. 기본적으로 SEO 최적화를 위해서라도 사용하는 것이 좋지만, 더 중요한 것은 해당 태그를 한 번만 사용한다는 것이다. 또한 다시는 사용되는 일이 없도록 각자 id를 선언해놓는 것이 좋다.
초기화
body {
margin: 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
}body나 h1 같은 태그들은 별 다른 설정을 해주지 않는 경우 브라우저가 기본적으로 제공하는 여백값을 가지게 된다. 당연하지만, 특정 요소가 붕 뜨거나 띄워지는 일이 발생할 수도 있다. 이런 일이 없도록 여백 따위를 지우는 것을 초기화라고 한다.
fr
.container {
display: grid;
grid-template-columns: 1fr 2fr;
}fraction의 약어로, 화면을 나눌 때 쓰는 단위이다. 쉽게 말하자면 남은 공간에서의 비율 단위라고 할 수 있다.
만약 위 예시 코드처럼 1fr, 2fr을 할 경우 1:2의 비율로 남은 비율을 나누어 가지게 된다.
CSS보다는 폰트가 먼저
<head>
<!-- 폰트 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
<!-- 코어 -->
<link rel="stylesheet" href="style.css" />
</head>CSS가 적용되기 전에 폰트를 먼저 로딩하고, 이후에 CSS를 불러옴으로써 폰트를 웹페이지에 적용해야 한다.
이 순서가 반대로 된 상태에서 잘못될 경우, 기본 폰트로만 보이다가 갑자기 다운로드 완료된 폰트로 바뀌는 불상사가 벌어질 수도 있다.
웹 폰트
구글 폰트 공식 사이트에서 폰트를 찾은 다음, link 태그를 이용해 웹사이트에 다양한 폰트를 적용할 수 있다. 코드 몇 줄이 필요할 뿐이고, 설치는 필요없다고 해도 무방하다.
다만, 이러한 웹 폰트는 만능이 아니다. 모든 브라우저에 해당 폰트가 작동하지 않을 수도 있고, 기본적으로 다른 웹에서 가져오는 만큼 로딩이 느려지는 것은 감수해야 한다. 큰 폰트 파일이 많으면 더더욱 그럴 수 있기에 조심해야 한다.
a 태그는 어느 레벨 요소?
<a href="https://www.naver.com/" target="_blank">
<div class="icon">
<img src="assets/svg/naver.svg" alt="네이버 아이콘"/>
</div>
<div class="text">NAVER</div>
</a>a 태그는 엄연히 인라인 레벨 요소이다. 그리고 인라인 레벨 요소는 블록 레벨 요소를 감쌀 수 없다.
그러나 a 태그는 내부에 블록 요소 중첩이 가능한 예외적인 부분이 존재한다.
블록 레벨 중앙
#block_1{
margin: 0 auto;
max-width: 600px;
}블록 레벨 요소는 마진 값에 '0 auto'를 주면 가운데로 온다.
물론 크기가 있어야 가운데에 올 수 있다. 꽉 차있으면 처음부터 가운데로 올 여지가 없으니까.
SVG
SVG는 레스터 형태의 이미지와 다르게 수학적인 계산을 통해 만들어지는 이미지 확장자이다. 당연하게도 SVG 파일 내부에는 이미지에 대한 정보가 저장되어 있는데, 이걸 img 태그 대신 사용하여 이미지를 추가할 수도 있다. 단, 코드가 많이 더러워질 뿐이다.
VS Code 코드 복사 팁 (윈도우 기준)
'ALT + SHIFT + ↓방향키' 사용시 드래그되어 있는 줄의 코드들이 형태를 유지한 채 '그대로' 아래에 복사된다.
사실 ↓방향키말고 ↑방향키를 써도 비슷한 효과를 볼 수 있다.
:first-child를 현명하게 쓰는 법
리스트의 첫 요소에만 무언가를 해야 하는 경우가 생길 수도 있다.
예를 들자면 리스트의 맨 위 요소만 상단 여백을 안 주기처럼 말이다.
#main li {
margin-top: 30px;
}
#main li:first-child {
margin-top: 0px;
}이런 경우 위의 코드 블럭처럼 기존 속성을 상쇄시키고자 ':first-child'로 맨 위 요소만 콕 집어서 해당 속성을 상쇄시킨다.
그런데 이런 경우에는 코드가 다소 늘어나게 된다.
#main li:not(:first-child) {
margin-top: 30px;
}발상의 전환을 해서 애당초 첫 번째 이외의 요소에 전부 상단 여백을 먹여버리는 식으로 접근하면 코드를 줄일 수 있다.
즉, :not을 이용해 첫 번째가 아닌 자식들만 적용시키는 방법이라 할 수 있다.
사족
프로그래머스 데브코스가 시작한 이후 처음으로 해보는 클론코딩 실습이다. 꽤 재미가 있으면서도 흥미로웠지만, 한편으로는 여러 생각이 드는 실습이기도 했다. 분명 다 제대로 익힌 줄 알았는데, 영상 따라가기에 급급할 줄은 상상도 못 했다.
일단 이 상태에서 뭘 만들고 했다간 가랑이가 먼저 찢어져서 침몰할지도 모르겠다. 주말에 시간이 남을 때 여러 번 따라 해보는 것만이 유일한 방법 같다. 한편으로는 사람들이 본격적으로 스터디를 모집하기 시작했는데, 나 또한 슬슬 스터디를 알아봐야 할 것 같다.
그런데 프로그래머스 0단계 코테도 겨우 푸는데, 이건 받아줄 스터디가 딱히 없지 않을까. 차라리 내가 스터디를 만들되 좀 눈치를 보다가 널널한 저등급 스터디를 만드는 게 맞지 않나 싶기도 하다. 스터디 이름은 방목형 스터디가 괜찮으려나.
'💻 종합 개발 주제 > 📚 웹앱 데브코스' 카테고리의 다른 글
| 9일차 데브코스 - 클라우딩 어플리케이션 엔지니어링 TIL (6) | 2024.01.09 |
|---|---|
| 8일차 데브코스 - 클라우딩 어플리케이션 엔지니어링 TIL (2) | 2024.01.06 |
| 6일차 데브코스 - 클라우딩 어플리케이션 엔지니어링 TIL (2) | 2024.01.04 |
| 5일차 데브코스 pt.2 - 클라우딩 어플리케이션 엔지니어링 TIL (2) | 2024.01.03 |
| 5일차 데브코스 pt.1 - 클라우딩 어플리케이션 엔지니어링 TIL (2) | 2023.12.23 |
