[FE - ConnecTo] DAY1 TIL👩🏻‍💻

JUNY·2022년 7월 15일

ConnecTo

📚ZeroBase ConnecTo Front-End

목록 보기

2/53

22.07.11 수업에서 배운 내용과 깨달은 점을 정리하였습니다 😊
피드백은 언제나 환영입니다! 🍊

HTML vs XHTML

XHTML은 EXtensible HTML을 의미하며, HTML과 거의 비슷하지만, 문법의 적용이 조금 더 엄격한 특징을 가지고 있음.

요즘 많은 웹 콘텐츠들이 기존 PC 위주의 환경에서 벗어나 여러 다양한 플랫폼에서 더욱 많이 이용되고 있음.
따라서, 느슨한 HTML을 사용하기 보다, XHTML 문서는 하나의 XML 문서로서 문법적으로 정확하기 때문에 좀 더 엄격한 버전인 XHTML을 사용하게 됨.

🤷🏻‍♀️ 그렇다면 HTML과 XHTML의 차이는 무엇일까?

종료 태그가 없는 빈 태그(empty tag)는 반드시 끝에 공백과 함께 슬래시(/)를 붙여야 함

HTML : <br>
XHTML : <br />
비어있지 않은 요소는 반드시 종료 태그를 가져야 함

HTML : <p>내용1</p> <p>내용
XHTML : <p>내용1</p> <p>내용2</p>
요소들은 반드시 열린 순서대로 닫혀야 함

HTML : <article><title>기사제목</article></title>
XHTML : <article><title>기사제목</title></article>
<img>에는 반드시 alt 속성이 기술되어야 함

HTML : <img src="connecTo.png" />
XHTML : <img src="connecTo.png" alt="explanation" />
모든 텍스트(text)는 반드시 태그로 감싸야 함

HTML : <p>기사내용</p>
XHTML : <body><p>기사내용</p></body>
속성값은 반드시 따옴표로 감싸야 함

HTML : <p class=connecTo>커넥투</p>
XHTML : <p class="connecTo">커넥투</p>
태그 이름이나 속성 이름에는 반드시 소문자만을 사용해야 함

HTML : <ARTICLE><TITLE>기사제목</ARTICLE></TITLE>
XHTML : <article><title>기사제목</title></article>
속성값 생략이 없어졌기 때문에, 반드시 속성값을 명시해야 함

HTML : <textarea readonly>읽기만 가능합니다.</textarea>
XHTML : <textarea readonly="readonly">읽기만 가능합니다.</textarea>

출처 : http://tcpschool.com/html/html_expand_xhtml

웹 접근성과 웹 표준

✔ Web Standard (웹 표준)

브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준으로, 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 동일하게 구현함과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 기법을 의미함.

프론트엔드에서의 웹 표준 관련 기술들은 HTML5, CSS3, JavaScript 3가지가 있음.

이 세 가지를 사람으로 비유하자면, 다음과 그림과 같이 표현할 수 있다.

HTML은 건강한 신체에 비유한 만큼, 최대한 사람도, 기계도 이해하기 쉬운 마크업을 해야 함.
그리고 FE에서는 JavaScript가 꽃이라고 할 수 있음.

✔ Web Accessibility (웹 접근성)

모든 사용자가 신체적·환경적 조건에 관계없이 웹에 접근하여 이용할 수 있도록 보장하는 것을 의미함.

여기서
신체적 조건이란, 일반 사용자는 물론, 장애를 가진 사람, 고령자 등을 의미하며,
환경적 조건이란 다양한 기기(PC, Mobile, PDA 등), OS(운영체제), 웹 브라우저(Internet Explorer, FireFox, Safari,Chrome, Opera 등) 또는 저사양 및 저속회선 사용자나 이미지, 동영상 등을 볼 수 없는 환경 등을 의미함.

출처 : https://seulbinim.github.io/WSA/

💡 Think..
수업 중에 웹 접근성은 내 관점이 아니라, 사용하는 사용자의 관점으로 바라봐야 한다는 점이 새로운 관점이었다.
이 웹 접근성이라는 가치가 대단한 가치는 아니더라도 보편적인 가치가 되었으면 한다는 강사님의 말씀에 공감이 갔다.

Git

따로 공부를 조금 더 한 후에, 추후 따로 정리해서 업로드 예정

💡 Think..
Git을 이번에 처음 사용해봐서 아직은 공부가 더 필요한 것 같다.
추후에 공부해서 다시 정리해봐야겠다.

✍🏻느낀점

웹 퍼블리셔 국비 교육 과정을 들었을 당시에는 XHTML이라는 존재에 대해서 제대로 알지 못했었다.

또한, 반응형 웹 작업을 할 때에도, 다양한 기기에 맞는 웹을 제작하면서도, 웹 접근성에 대해서도 생각하지 않고 제작했었다. 웹 접근성에 대해서 알려주시지 않은 것도 있었지만, 이런 부분들을 고려해야된다고 생각하지 못했다.

코딩이 재미있어서, 프론트엔드 개발자가 되고 싶다고 생각한 이후, 어떤 개발자가 되면 좋을까 생각했을 때, 많은 사람들에게 도움이 되는 개발자가 되고 싶다고 늘 생각했다.

그러다보니, 웹 접근성이 중요하다고 이야기하는 것을 많이 보았고, 또한, 중요하다고만 알고 있었는데, 이렇게 심도있게 내용을 다뤘던 적은 처음이다.

XHTML이라는 것도 구글링을 하다 지나가면서 한 번쯤 접해보긴 했지만, 그냥 단순하게 HTML과 다른 존재라고만 인식하고 있었다.
자세히 알아보려고 하지 않은 이유는 당시 HTML으로 마크업하기에만 급급했었고, HTML로도 내 컴퓨터에 존재하는 Chrome이나 Internet Explorer에서는 작동이 잘 되었기 때문에, 크게 심각하게 생각은 하지 않았던 것이다.

XHTML의 사용으로 다양한 기기에서의 웹 접근성이 좋아진다고 생각하면, 사용하지 않을 이유가 없다는 생각이 들었다.

앞으로의 수업들을 통해 어떻게 하면 웹 접근성과 웹 표준을 잘 지키면서 마크업을 잘 할 수 있을지 배우게 될 것 같아서 기대되고, 공부하면서 틈틈히 이전에 국비 수업 들으면서 개인적으로 진행했던 프로젝트들의 코드들도 다시 한 번 수정해보면 좋겠다는 생각이 들었다! 🍊🐣

이미지 출처

JUNY

성장하는 개발자🌼

이전 포스트

[FE - ConnecTo] 빙글빙글 돌아가는 코린이의 하루🙄😉🌼

다음 포스트