겨리의 개발일기

최근 네이버 변경된 UI를 구경하다가 의문이 생겼다! 바로 이 부분인데..! 개발자도구로 들여다보면 각 메뉴의 아이콘 부분에 태그를 사용하지 않고, 아이콘 이미지가 여러개 들어있는 파일을 backgound-image에 넣고 backgound-position 을 이용해서 표현하고 있는 것을 확인할 수 있다. 근데 왜 저렇게 한거지..? 궁금해서 찾아본 내용들을 정리해봤다. HTML 태그는 언제 사용하는 것이 좋을까? 1. 해당 내용이 디자인 요소가 아닌 콘텐츠와 관련된 경우 2. 검색시 노출이 필요한 경우 → 검색 엔진에서 인덱스(색인)를 생성하기 때문에 검색시 노출이 된다. 🔍 좀 더 자세히 알아보자면.. 태그는 시맨틱요소이며 이미지라는 의미를 가진다. 검색엔진이 웹사이트의 정보를 수집할 때 크롤러가 크..

HTML&CSS 2023. 5. 18. 00:33

display 속성 ✅ 모든 요소는 자기가 기본적으로 가지고 있는 display값이 있다. ✅ Display값에 따라 블록레벨, 인라인레벨 등 렌더링 박스의 유형이 결정된다. ✅ Display 속성으로 해당 요소의 렌더링 박스의 유형이 결정되고 렌더링 여부 또한 결정할 수 있다. 속성 값 none 요소가 렌더링 되지 않음 inline inline level 요소처럼 렌더링 block block level 요소처럼 렌더링 inline-block inline level 요소처럼 렌더링(배치)되지만 block level의 성질을 가짐 cf) height 나 width 등과 같은 박스모델 속성을 적용할 수 있음 ✅ 이외에도 list-item, flex, inline-flex, table, table-cell 등..

HTML&CSS 2023. 4. 16. 23:07

가상클래스(Pseduo class) ✅ 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스 ✅ 직접 요소에 클래스를 선언하는 것이 아니다. ✅ 약속된 상황이 되면 브라우저 스스로 클래스를 적용해준다. ✅ 가상클래스는 :(콜론)기호를 써서 나타낸다. 문서 구조와 관련된 가상 클래스 :first-child - 첫 번쨰 자식 요소 선택 :last-child - 마지막 자식 요소 선택 앵커 요소와 관련된 가상 클래스 :link - 하이퍼 링크이면서 아직 방문하지 않은 앵커 :visited - 이미 방문한 하이퍼 링크를 의미 사용자 동작과 관련된 가상 클래스 ✅주로 태그에 많이 쓰인다. :focus - 현재 입력 초점을 가진 요소에 적용된다. - 현재 선택 받는 것을 의미한다. :hover - 마우스 포..

HTML&CSS 2023. 4. 13. 17:39

✅ 자손 선택자 div span { color: red; } /* : 의 자손 요소인 를 선택하는 선택자 자손 선택자는 선택자 사이에 아무 기호없이 그냥 공백으로 구분 */ ✅ 자식 선택자 div > h1 { color: red; } /* : 의 자식 요소인 를 선택하는 선택자 자식 선택자는 선택자 사이에 닫는 꺽쇠 기호(>)를 넣는다. 꺽쇠 기호와 선택자 기호 사이에는 공백은 있거나 없어도 상관없음 */ ✅ 인접 선택자 div + p { color: red; } /* 선택자 사이에 + 기호를 넣는다. 자식 선택자와 마찬가지로 공백은 있거나 없어도 상관 없음 인접 형제 선택자는 형제 관계이면서 바로 뒤에 인접해 있는 요소를 선택하는 선택자이다. */ ✅ 문서 구조 관련 선택자는 위의 선택자들을 조합하여 ..

HTML&CSS 2023. 4. 10. 00:14

CSS구문 h1{color:yellow; font-size:2em;} ✅ CSS 파일은 여러 개의 규칙으로 이루어져있다. ✅ 선택자와 선언부 사이, 선언과 선언 사이는 앞뒤로 개행을 해도 상관이 없지만 속성 이름과 속성 값 사이에는 개행을 하면 안 된다. CSS 적용하는 방법 네 가지 Inline ✅해당 요소에 직접 스타일 속성을 이용해서 규칙들을 선언하는 방법 ✅ 해당 요소에 직접 입력하기 때문에 선택자는 필요하지 않게 되고, 선언부에 내용만 스타일 속성의 값으로 넣어주면 된다. ✅ 코드의 재활용이 되지 않기 때문에 자주 사용 X 내용입니다 Internal ✅ 문서에 External ✅ 외부 스타일 시트 파일을 이용한 방법 ✅ 외부 스타일 시트는 스타일 규칙들을 별도의 외부 파일을 만들어 넣는 방식 ✅..

HTML&CSS 2023. 4. 10. 00:09

시멘틱 마크업 시멘틱마크업이란? ✅ 시멘틱마크업은 POSH(Plain Old Semantic HTML)라고도 불리는데, 단어 그대로 평범하고 오래된 의미론적인 HTML이라는 뜻이다. ✅ 시멘틱 마크업은 적절한 HTML 요소를 올바르게 사용하는 것에서 시작된다. 시멘틱마크업 하기 🤔 어떻게 하면 브라우저가 코드를 잘 이해할 수 있을까 ? 🧐 마크업 할 때 의미에 맞는 태그와 요소를 사용하고, 문서를 표현할 떄 구조화를 잘 해주는 등 정해진 약속을 잘 지키면된다. HTML5 시멘틱 요소 HTML5에서 새로 생긴 Semantic 요소들 : 사이트 내 독립적 구분 게시판, 블로그 본문, 매거진, 뉴스 기사 등 : 문서 주요 내용과 간접적으로 연관된 부분 표현. 사이드바, 콜아웃 박스 등 : Figure 콘텐츠에..

HTML&CSS 2023. 4. 10. 00:07

Content Models HTML5 이전에는 HTML 태그들을 inline과 block 두 가지 요소로만 구분 지었지만, HTML5부터는 태그에 특성에 따라 7개의 카테고리로 분류한다. 1. Metadata Content ✅ 콘텐츠의 스타일, 동작을 설정하거나 다른 문서와의 관계 등 정보를 포함하는 요소들이 포함된다. ✅ 메타 태그, 타이틀 태그, 스타일 태그, 링크 태그가 이에 해당하며 대부분 내에 들어간다는 것이 특징이다. base, link,meta, noscript, script, style, title 2. Flow Content ✅ 문서의 자연스러운 흐름에 의해 배치되는 요소들이 포함된다. ✅ Metadata에 해당하는 일부 태그들만 Flow에서 제외되며 요소 대부분이 Flow에 포함된다. ..

HTML&CSS 2023. 4. 10. 00:04

1. HTML 이해하기 - 기본적으로 HTML은 두 칸 이상의 공백을 모두 무시한다. 2. HTML 태그 1) 태그 ✅ anchor 태그 == a태그 == 앵커 == 링크 e.g. 네이버 href 속성 ✅ hypertext reference 속성 ✅ href 속성의 값은 링크의 목적지가 되는 URL target 속성 ✅ 링크된 리소스를 어디에 표시할지를 나타내는 속성 ✅ 속성값 - _self : 현재 화면에 표시한다는 의미. target 속성이 선언되지 않으면 기본적으로 self와 같이 동작한다. - _blank : 새로운 창에 표시한다는 의미. 외부 페이지가 나타나게끔 하는 속성 - _parent와 _top : 프레임이라는 특정 조건에서만 동작하는 속성. 최근에는 프레임을 잘 쓰지 않는다. 내부링크 ✅..

HTML&CSS 2023. 4. 9. 23:54