기본적인 아이콘 및 이미지를 가져와서 index 파일 생성.
-
별도의 브라우저 아이콘을 설정하지 않았는데, 스타벅스 아이콘으 탭에 뜰 수 있는 이유는: 브라우저는 기본적으로 루트 경로에 있는 favicon.ico 파일이 있으면 해당 파일을 탭의 아이콘으로 사용함.
-
별도의 png파일같이 고해상도 아이콘을 사용하고 싶은 경우 link 태그를 통해 rel을 icon으로 지정해서 파일 지정하면 된다.
웹페이지가 소셜 미디어로 공유될 때 우선적으로 활용되는 정보를 지정.
공유되는 링크에 대한 기본적인 메타정보를 요약해서 보여주는 방식.
meta 태그를 이용해서 위와 같은 다양한 정보를 제공할 수 있음.
오픈 그래프와 유사하지만 트위터에서 만든 방식.
오픈그래프나 트위터 카드에 사용하는 SEO이미지를 의미함(구분)
Safari의 폰트와 Chrome의 폰트가 다를 것 처럼 브라우저마다 폰트가 다르기에 일관적인 시각성을 위해 직접 폰트 설정을 하면 좋음.
위 이미지와 같이 폰트를 설정하면 개발자 도구 요소 탭에서 직접 화인도 가능하다.
폰트의 경우 저작권과 밀접한 관계가 있기에 유료 폰트로 사용할 경우 주의해서 사용할 것(라이센스 조심)
구글에서 제공하는 기본 아이콘. 별도의 디자인 리소스가 없는 경우 대중적으로 사용하기 매우 유용한 무료 리소스임.
<div class="material-icons">
search
</div>
구글에서 제공하는 아이콘을 사용할 수 있는 링크를 추가한 후 위 코드를 통해 안에 작성하는 명칭에 따라 아이콘을 쉽게 화용할 수 있음.
이미지 태그는 기본적으로 인라인 속성을 가지고 있음.
이 인라인 태그는 본질적으로 글자(text)를 다루기 위한 요소이므로 베이스라인 아래 부분에 작은 공백이 생김 이미지 태그도 동일한 인라인 요소라서 위 사진처럼 하단에 작은 공백이 생기는 것임.
위 문제를 해결하기 위해 이미지 태그의 css 속성에 display: block; 코드를 추가하면, 이제 이미지 태그를 하나의 글자가 아닌 레이아웃(박스)로 취급하게 됨 => 하단 공백이 사라짐.
position: absolute => 부모 요소의 기준으로 적용.
margin: auto는 top:0, bottom: 0일때 브라우저가 자동으로 해당 상 하단 위치에서 가장 가운데 부분에 요소를 배치시켜줌. 단, 해당 요소의 높이값(height)/너비값(width)이 명시되어 있을 경우임.
- href="#" : URL 해시(HASH)라는 개념을 사용 (나ㅑ중에 배움)
- href="javascript:void(0)" : 자바스크립트의 void(0)이라는 아무 것이 없다는 것을 사용
header .sub-menu ul.menu 와 같이 계층구조로 특정 요소에만 CSS를 적용하는 방법이 가장 좋음
물론 범용적으로 적용할 style이면 상관없지만, 상위 개념을 빼고 ul.menu와 같은 방식으로 CSS를 작성할 경우 다른 영역의 해당 요소에도 영향을 미치기 때문에 가급적이면 상위 개념에서 내려오는 구조로 작성하는 것이 좋다.
해당 부분은 상위 요소를 중복해서 계속 작성하기에 불편하지만, 나중에 SCSS라는 CSS의 전처리에 대한 개념을 배우면 어느정도 해소된다.
위 이미지처럼 HTML의 구조를 먼저 CSS에 작성해둔 후 스타일을 작성해 나가면 HTML파일을 왔다갔다 하면서 찾는 번거로움을 줄일 수 있다.
position:absolute을 사용할 경우 해당 요소는 기본적으로 display:block이 적용되기에 따로 명시하지 않아도 무방하다.
과도한 선택자는 너무 구조를 복잡하게 만들고 코드 가독성을 떨어트린다. 이런 경우 필요하지 않은 중간 선택자는 생략해서 깔끔하게 정리하면 좋음. ex. header .main-menu .item .item__contents .contents__menu 같은 부분에서
.main-menu선택자 같은 애들은 생략.
div 태그를 특정 클래스 이름으로 자동 삽입하는 기능: .클래스_이름 하고 탭을 누르면 자동으로 추가됨!
ul 태그의 main-menu가 메인 메뉴를 모아둔 큰 틀
li 태그의 item이 각각의 아이템을 지정하는 부분, item__name 클래스의 div가 해당 아이템의 이름, item__contents 클래스의 div가 해당 아이템에 마우스를 올리면 보여줄 드롭다운 영역
*CSS의 hover 가상 클래스 선택자를 class명인 item__name 이 아닌 .item 자체에 부여해줘야 된다
CSS에서 요소가 화면에 스택되는 순서를 z-index로 조절할 수 있음.
메인메뉴의 드롭다운 영역이 표시될 때 원래 화면에 있던 배너들이 드롭다운 영역보다 위로 나타나지 않도록 설정해줌.
.contents__menu > ul > li ul li와 같이 특정 요소/클래스의 자식 요소를 지정할 수 있다.
: HTML 클래스 속성의 작명법
- 요소__일부분: 특정 요소의 일부분을 표시하는 방법
- 요소--상태: 특정 요소의 상태를 표시하는 방법
하위 요소를 이해하기 쉽고 다른 사람이 봐도 이해할 수 있도록 하는 작명법(구조를 이해하기 쉬움)
overflow: hidden
특정 요소를 둥글게 만들 경우 둥글게 만든 부분을 튀어 나올 경우 해당 여분을 숨김
특별힌 기능적인 동작은 없음. div처럼 일반적인 태그로 사용되만, section을 사용하면 특정 영역을 만든다는 의미를 명시함.
href와 같은 속성에 아직 정해지지 않았거나, 별도의 기능을 추가하고 싶지 않을 경우 javascript:void(0)으로 작성한다.