디버그 코딩 여정 블로그 페이지

Source: Dev.to

워크숍 개요

오늘 포스트는 freeCodeCamp의 접근성 섹션, 반응형 웹 디자인 인증서에 있는 다음 워크숍에 관한 내용입니다. 이 워크숍은 어제 마친 접근성 이론 수업 시리즈를 바탕으로 진행되며, 배운 내용이 워크숍을 원활하게 진행하는 데 도움이 되길 바랍니다.

헤딩 요소 수정

워크숍은 접근성 문제가 있는 블로그 페이지를 보여주는 것으로 시작합니다. 첫 번째 단계는 헤딩 요소의 문제를 해결하는 것입니다:

## My Journey Learning to Code
I started learning to code a few months ago and it's been a wild ride!

#### Early Challenges
At first, syntax was really confusing.

#### Breakthroughs
Eventually things started to click.

## Accessibility Matters
Today I learned that not everyone uses the web the same way I do.

Screen Readers
These tools help visually impaired users browse websites.

## What's Next?
 I'm excited to dive into JavaScript and build interactive features!

### Coming soon: My first JavaScript project!
Stay tuned for some exciting interactive blog features.

내비게이션 추가

네 번째 연습에서는 내비게이션 섹션을 “ 요소로 감싸도록 요구합니다:

## Navigation
- [My Journey](#post1)
- [Accessibility](#post2)
- [Next Steps](#post3)

시맨틱 요소 사용

다음으로, 수업에서는 일반 요소를 시맨틱 요소로 교체하고 누락된 “ 요소를 삽입하도록 안내합니다:

## My Journey Learning to Code
I started learning to code a few months ago and it's been a wild ride!

### Early Challenges
At first, syntax was really confusing.

### Breakthroughs
Eventually things started to click.

## Accessibility Matters
Today I learned that not everyone uses the web the same way I do.

### Screen Readers
These tools help visually impaired users browse websites.

## What's Next?
 I'm excited to dive into JavaScript and build interactive features!

### Coming soon: My first JavaScript project!
Stay tuned for some exciting interactive blog features.

푸터 및 메일투 링크 추가

마지막 연습에서는 푸터를 추가하고, 다른 헤딩을 약간 수정하며, 메일투 링크를 삽입하도록 안내합니다. 아래는 메일투 링크 예시입니다:

Email me at [janedoe@email.com](mailto:janedoe@email.com)

결론

아홉 단계 모두를 성공적으로 마치면서, 웹 페이지를 코딩할 때 발생할 수 있는 접근성 문제에 대해 확실한 통찰을 얻었다고 느낍니다. 앞으로 주의해야 할 중요한 사항들이 많이 있네요!

내일은 접근 가능한 표와 폼 작업에 관한 이론 수업을 몇 개 진행한 뒤 다음 워크숍으로 넘어갈 예정입니다. 그때까지 코딩을 계속하세요!