본문 바로가기

전체 글294

시맨틱 태그를 사용하고 웹 표준을 지키는 이유 시맨틱 요소(Semantic Elements) : 시맨틱 요소는 브라우저와 개발자에게 태그의 의미를 명확하게 설명해주는 것을 말한다. ex) non-semantic 요소인 , 태그는 어떠한 의미를 담고있지 않음 반대로 semantic 요소인 , , 등의 태그는 그 내용을 명확하게 정의함 시맨틱 태그를 사용하는 이유 1. 검색 엔진 최적화(SEO): 시맨틱 태그는 웹 페이지의 구조와 내용을 명확하게 정의하기 때문에 검색 엔진이 웹 페이지를 더 잘 이해할 수 있다. 이를 통해 검색 결과 페이지에서 노출될 확률과 검색 엔진 순위를 높일 수 있다. 2. 좋은 웹 접근성: 시맨틱 태그는 웹 페이지의 구조를 명확하게 정의하기 때문에 스크린 리더 등 보조 기술을 사용하는 사용자들도 웹 페이지를 더 쉽게 이해할 수 있.. 2023. 4. 27.
[제로베이스]2주차 학습요약 2주차에는 CSS 와 운영체제, Git 소스트리 사용방법을 공부했다. CSS 의 display 나 position 부분은 이전에 제대로 알지 못해서 그때그때 적용되는 걸 사용해왔는데 이번에 제대로 알게되어 좋았다. 필요한 부분을 메모하며 들었는데 실제로 여러 번 사용해보며 내것으로 만들어야 할 것 같다. 컨테이너에 적용하는 속성과 그 안에 있는 아이템에 적용하는 속성이 다르다는 것도 배우고 나니 이전에는 헷갈렸던 것들이 하나씩 정리되어가는 느낌이라 좋았다. 기본을 알지 못한채로 무작정 코딩만 했던게 이럴 때는 도움이 되는 것 같다. 이론을 배우면서 내가 코딩하며 했던 실수들이 떠오르고, 이제는 그 실수를 어떻게 고쳐야 하는지 알게됐다는 점이 좋았다. 러닝메이트 강의는 이론 위주였지만 자세하고 이해가 잘 .. 2023. 4. 16.
CSS Selector - 타입 선택자 1. :first-of-type 같은 타입 중 첫 번째 요소를 선택한다. Movie List Toy Story Zootopia Inside Out Finding Nemo Coco p:first-of-type { color: red; } :first-child 를 사용하면 무조건 부모의 첫 번째 자식을 선택하기 때문에 section 태그의 첫 번째 자식인 Toy Story 가 p 태그가 아니라는 이유로 글자색이 변경되지 않지만, :first-of-type 선택자는 같은 타입 중 첫 번째 자식을 선택하여 글자색이 변경되는 것이다. 이때 만약 서로 다른 태그들이 같은 class 를 가지고 있다면 상황이 달라진다. Movie List Toy Story Zootopia Inside Out Finding Nemo .. 2023. 4. 15.
CSS Selector - 자식 선택자 1. first-child 부모의 첫 번째 자식을 선택함 Movie List Toy Story Zootopia Inside Out Coco Finding Nemo .movie:first-child { font-size: 26px; } 코드를 이렇게 작성하면 movie 클래스를 가지고 있는 요소 중 첫 번째인 Zootopia 의 폰트 사이즈가 바뀔거라 생각하지만 실제론 아무런 변화도 일어나지 않는다. ☆ first-child 는 말 그대도 부모의 첫 번째 자식을 선택하는 것인데, movie 클래스를 가진 li 요소의 부모는 ul 태그이고, ul 태그의 첫 번째 자식인 Toy Story 가 movie 클래스를 가지지 않기 때문에 해당하는 것이 없어 폰트 사이즈가 바뀌지 않는 것이다. 2. last-child.. 2023. 4. 15.

티스토리툴바