CSS
CSS (Cascaing Style Sheets) 는 단계적으로 디자인 스타일을 쌓는다는 의미이다.
CSS는 HTML을 보다 세련되게 표현을 해주는데, HTML로 만든 기본 문서의 모양을 우리가 일상에서 접할 수 있는 예쁜 웹페이지로 만들어주는 것이다.
웹 페이지를 이미지로 만들게 되면 속도가 굉장히 느려지기 때문에 CSS로 이미지가 없더라도 세련되게 꾸며주는 것이다.
(요즘은 CSS 의존도가 높아서 CSS가 없으면 형태가 망가져버린다.)
CSS를 사용하는 방법은 다음과 같다.
1. 해당 태그에 직접 설정
2. HTML 문서 내에 따로 설정 (head에 들어가야 한다. *사이트보여주기 전에 옷을 입히고 보여준다.)
3. CSS 파일외부에서 불러옴
caa에서 자주 사용되는 요소
html 요소
<div> : 특정 영역을 지정하여 스타일을 줄 경우 사용 (눈에는 보이지 않는다.)
<span> : 특정 문자열을 지정하여 스타일을 줄 경우 사용
<details> - <summary> : 요약/상세보기 메뉴를 만들 때 사용
<dialog open> : 알림 팝업 같은 효과를 주고 싶을 때 사용 (open 속성을 안적으면 보이지 않는다) *java script의 힘을 받아야 기능을 할 수 있다
favicon
favicon 은 각 사이트를 대표하는 이미지를 브라우저탭에 표시해 주는 것 이다.
favicon은 ico 또는 png 파일로 만들 수 있다.
생성 방법은 다음과 같다. (head에 위치)
/* head에 위치 */
<link rel="icon" href="../img/chrome.png"> 이모지 넣기
html 문서에 이모지를 넣을 수 있는 방법은 3가지가 있다.
1) char (이미지) 로 넣기 → 그대로 복사-붙여넣기
2) 10진수 코드로 넣기 → &#[10진수코드]
3) 16진수 코드로 넣기 → &#x[16진수코드]
<!-- char로 넣기 -->
<p>✨</p>
<!-- 10진수 코드 이모지 &#[10진수코드] -->
<p>⏰</p>
<!-- 16진수 코드 이모지 &#x[16진수코드] -->
<p>☔</p>