인생 첫 코드 수정 !

어제 직접 작성한 반응형 웹 페이지를 수업에서 직접 다시 작성했다.
새롭게 알게되거나, 해결된 궁금증들을 모아서 작성한다.

1. w3c validation

웹 페이지를 직접 만들었다면, 제일 먼저 거쳐야하는 단계가 있다.
HTML과 CSS에 문제는 없는지 확인하는 작업이다.

w3c validation 을 구글링 해서 코드를 copy & paste 하여 오류는 없는지 확인한다.

기본중의 기본이다. 통과되었다고 구조가 잘 짜여진, 효율이 좋은 코드는 아니라는 뜻!

무려 10개나 나온 warning과 error를 검토해본다.(중복있음!)

1.1 Section lacks heading

구간을 나눠주려고 사용한 section을 사용했다.
이 때, 구간마다 가지는 의미를 나타내는 헤딩태그를 써야한다고 권장한다.
(웹 상에서 안보이게 하는 방법은 추후에 다룬다.)

1.2 … name, id on input : Must not be Empty

input태그의 id, name은 비어있으면 안된다.
마크업을 고려하지 않고 레이아웃만 고려하면서 작성하여 생긴 오류이다!!!

다시는 마크업을 무시하지 않는다.

1.3 Duplicate ID

위의 사항과 관련된다. 공백으로 남긴 input의 id가 동일하다고 판단되어 발생했다.

1.4 The first occurrence of ID was here

처음으로 id가 비어있는 줄의 line을 알려준다.

---

2. 의미가 없는 이미지 삽입

의미가 없는 이미지를 HTML상에서 img태그로 삽입하는 것은 semantic한 구조라고 보기 어렵다.
그럴 때 사용하는 방법이 가상 요소를 생성하여 background-image를 삽입하는 것이다.

2.1 Pseudo element

가상 요소는 기본적으로 inline 속성이다.

이미지를 삽입하기 위해선,

1. display: block; content: ''; 추가
2. 이미지의 크기만큼 width height 추가
3. background-image: url(); 추가
4. 이미지의 원래 사이즈가 위에(2번) 작성된 크기를 넘어가버리면 짤리게 된다.
   background-size로 위의 크기와 맞춰준다.
5. position: absolute;를 사용하여 위치를 조정한다. (부모에 relative있는지 확인)

위와 같은 처리들이 필요하다.

2.2 정가운데 정렬 방법

이렇게 삽입한 이미지를 부모요소의 정가운데에 위치시키고 싶은 경우가 있다.
이 때 사용하는 두 가지 방법을 알아보자.

😂 이미지 크기를 모를 때

position: absolute;
top: 50%
left: 50%
transform: translate(-50%, -50%);

😁 이미지 크기를 알 때

position: absolute;
top: 50%
left: 50%
margin-top: -(이미지 너비의 절반)px;
margin-left: -(이미지 높이의 절반)px;

두 가지 모두 의미는 같다. 부모를 기준으로 좌상단에서 50%씩 이동시키고,
자기 자신의 크기의 절반 만큼, 다시 역으로 이동시키는 행위이다.

2.3 z-index

이렇게 의미가 없는 이미지는 어떠한 섹션의 배경으로 쓰고 싶은 경우가 많다.
즉, 보여주고자 하는 요소의 뒤에 배치시키는 일이 필요하다.
이 때, 사용하는게 z-index이다.

z-index를 사용하려면, 반드시 position값을 주어야 한다!!!!!!!!!!!!!

---

3. 반응형과 max-width

최대-너비 : 말 그대로 지정해준 요소의 최대 너비를 지정해준다.
max-width: 480px;

만약 이미지라면, 이미지의 최대 너비가 480px이다. 즉, 479px부터는 줄어든다!!
만약 <p>라면, 글을 담고 있는 박스가 스-르르륵 줄어들 것이다.

---

4. 작성을 하는 중에 수정?!

CSS작성을 하던 중,

"엇, 이거 방금전에도 작성한 스타일인데,,?"

하는 상황이 발생한다.

주저하지 말고, CSS 수정에 들어가자.
(나처럼 입문자의 경우, 위에서 아래로 쭉 스타일을 작성하기 마련인데,
그러다 보면 중복된 스타일들을 확인할 수 있다. 글씨크기와 간격 + 버튼의 스타일 등등)

이 때는 동일한 코드를 또 반복하지 않도록 바로바로 수정을 해주자!!!!

이를 Refactoring이라고도 부르는데, 일단은 이정도로만 알아두자.
(주로 가독성을 높이고 유지보수를 편하게 해주는 행위인데, 두꺼운 책으로도 나올 정도이다;;)

5. Button의 Size 지정?!

버튼이 있다고 했을 때, 이를 너비와 높이 값을 지정해줄지 패딩으로 처리할지 고민하였다.

피그마를 확인해라!! (만약 버튼 값들의 패딩들이 동일하다면, 패딩처리하고 다중 선택을하자!)

버튼의 스타일을 입힐 때, 가장 고민이 되었던 부분이다.

결과로는, 피그마에서 패딩값을 확인하자는 결론이다.
대부분의 경우, 패딩 값이 공통적일 수 있다.
이러한 경우, 불필요한 코드 작성을 피하기 위해 다중 선택을 하여 일괄적인 스타일 처리를 하자.

---

6. Screen Reader Only!!

구조적인 마크업 + 웹 접근성을 고려하여서

if) 내가 소리만 듣고도 이 페이지가 어떤 페이지인지 알 수 있을까??

에 대한 고민을 하고 구조를 짤 것!!!!
위에서 발견한 오류와 같은 맥락으로, 의미있는 img에 alt값을 반드시 준다거나,
section 으로 나눈 구간들에 heading 태그를 넣고 웹 상에서 '보이지만' 않게 처리해주는
작업들이 필요하다.

.sr-only {
    /* display: none;은 스크린리더가 읽지 않음 */
    position: absolute;
    left: -9999px;
    top: auto;
    /* 0px로하면 스크린리더가 못읽는경우도 있다 */
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.blind {
    border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

두 가지의 방법이 있고, 화면상에서만 숨기고자 하는 요소에 class값을 주자!!!

---

7. Nav Skip

접근성을 위한 일종의 추가작업이다.
랜딩을 하자마자 tab키를 누르면 페이지 내부에서 해당 부분으로 갈 수 있도록 작업하는 것이다.

<div class="nav-skip">
  <a href="#cont-nav">영화 목록 바로가기</a>
  <a href="#cont-company">회사정보 바로가기</a>
</div>

.nav-skip a {
  position: absolute;
  top: -200px;
  left: 0;
  width: 300px;
  line-height: 30px;
  border: 1px solid #fff;
  color: #fff;
  background-color: #333;
  text-align: center;
}
.nav-skip a:active, .nav-skip a:focus {
  top: 0;
}

위의 html구문을 body의 시작부분에 넣어준다.
그리고 평상시의 .nav-skip 클래스들은 화면밖으로 잠시 밀어놓는다.
랜딩시에 tab키 입력시 .nav-skip가 활성화되면서 화면으로 나타나게 된다.
가고자 하는 부분에 id값을 반드시 입력해야만, 해당 부분으로 갈 수 있다.

✅ 끝으로

위에 적어놓은 사항 전~~부 수업 때 들으며 고개를 끄덕였던 개념들이다.
하지만 직접 구현할 때 헷갈렸거나, 까먹게 되었던 개념들이다.
배우기만 해서는 발전이 없음을 느낀다.

요즘, 내가 너무 배우기만 하는게 아닌가라는 생각이 든다.
익히자!! 알고만 있는 것은 내겐 큰 의미가 없다!!! 1도 없다😎
주말간에 할 일을 꼭 작성하자!!

---