HTML과 CSS

📚 패트스캠퍼스 데브캠프 프론트엔드 4주차 학습 내용을 정리한 내용입니다.
📚 잘못된 정보는 댓글로 알려주시면 정말 감사합니다!

HTML(Hypertext Markup Language)

HTML은 웹 페이지를 구성하는 콘텐츠의 구조를 정의하는 마크업 언어입니다. 즉, HTML을 통해 페이지의 어느 부분이 제목인지, 어느 부분이 본문인지를 표시할 수 있습니다.
문서에 표시해야할 다양한 내용들은 각각 목적에 맞는 태그를 사용해서 표현할 수 있습니다. 예를 들어 이미지를 표시하고 싶다면 img 태그를 사용해야하고, 문서의 제목을 표시하고 싶다면 h1~h6 태그를 사용할 수 있습니다. 이러한 태그들은 절대 암기하는 것이 아닌, 직접 사용해보면서 체득해 나가야합니다.

보다 자세한 내용은 MDN 사이트를 통해 학습할 수 있습니다.

CSS

CSS 학습에 유용한 사이트
CSS 학습내용을 정리하기 전, MDN 사이트 외로 강사님께서 추천해주신 사이트를 소개했습니다.
그러면서 해주셨던 말씀이 두고두고 꺼내보고 싶은 내용이라 먼저 기록해 봅니다.

"학습을 하다보면 시선이 편협해질 수 있고, 학습에 왜곡이 생길 수 있습니다."
본격적인 수업에 시작하기 앞서 웹 기술에는 정답이 없고 동일한 내용도 어떻게 사용하고, 설명하는 가에 따라 얻게되는 인사이트가 다르기 때문에 다양한 관점으로 배우려는 노력이 중요하다는 조언을 해주셨습니다.
강사님의 말씀처럼 웹 기술은 특정 목적에 타켓팅되는 기술이 아닙니다. 하지만 지금까지 저는 웹 기술에 정답이 있는 것처럼 학습해왔고 그로인해 점점 시선이 편협해지고 있었던게 아닌가 곰곰히 생각해보게 되는 시간이 었습니다.

CSS(Cascading Style Sheets)는 스타일 정의는 다양하며 위에서 부터 차곡차곡 쌓여나간다는 의미를 담고 있습니다. 그 의미처럼, CSS는 우선순위에 따라 적용되는 스타일이 달라집니다.

우선순위는 아래와 같이 중요도, 적용범위, (소스에서의)순서에 따라 결정됩니다.

중요도 : 스타일이 어디서 선언 되었는가

1. 사용자 스타일 시트
   예를들어 윈도우의 '고대비' 설정 같은 기능을 사용자가 활성화했다면 제작자는 이를 제어할 수 없습니다.
2. !import가 붙은 스타일
   스타일을 정의할 때 !import 키워드를 정의했다면 다른 어떤 스타일보다 우선 적용됩니다.
3. 일반 스타일
   !import가 붙지 않는 일반적인 스타일은 두번째 기준인 적용범위에 따라 우선순위가 달라집니다.
4. 브라우저 스타일 시트
   브라우저마다 기본적으로 지정하고 있는 스타일입니다.

적용범위 : 적용범위가 얼마나 좁은가(정확한가)

1. 인라인 스타일
2. id 선택자
3. class 선택자
4. 태그 선택자

순서

중요도와 적용범위가 같다면 소스의 순서에 따라 나중에 지정한 스타일이 적용됩니다.