HTML CSS 기초 메모

    id값은 고유해야 하므로 하나의 id는 한번만 사용.
    html css에서는 문제가 없어보일 수 있지만,
    자바스크립트에서 중복된 id값을 다루면 문제가 생길 수 있음
    
    하나의 태그에 여러개의 클래스를 설정할 수 있음 띄어쓰기로 구분하여 작성
    ex <p class="title-color title-size">
    but id는 이런식으로 코딩 안함. 어차피 고유한 id이기 때문에

    단축키
    p 엔터 치면 <p>< /p> 만들어짐
    p.title 엔터 치면 클래스가 title 인 p태그 만들어짐
    <p class="title"></p>
    p#title 엔터 치면 id가 title 인 p태그 만들어짐
    <p id="title"></p>
    p*5 엔터 -> p태그 5개 만들어짐
    ul>li*5 ul 태그 안에 li태그 5개 만들어짐
    alt shift 방향키 -> 한줄씩 복붙
    더블클릭 하고 cntl d -> 다중 선택
    
    
    espape 문법
    다 외울 필요 없음 
    html entities검색해서 찾으면 됨
    &; 사용해서 꺽쇠나 공백 표시
    꺽쇠  &lt; &gt;
    공백 &amp; or &npsp;


    <link rel="stylesheet" href="style.css">
    rel 어떤 파일을 가져오는지 정의
    href 어디서 가져오는지 경로와 이름

    유용한 확장
    css peek
    html에 적용된 css 바로 확인
    파일-기본설정-바로가기 키-정의 피킹 단축키 쉽게 수정해서 사용하기
    beauty
    정렬 예쁘게 해줌
    material theme
    코드 컬러 테마 적용

    목록 태그 속성
    1. ol 태그의 start 속성
    ex) <ol start="5">
        지정한 숫자 5부터 li태그가 시작    
    2. li 태그의 value 속성
    ex) <li value="10">
        ol태그를 무시하고 지정한 10으로 숫자가 시작됨
    3. 목록태그 안에 새로운 목록태그를 만들 수 있음
    4. list 스타일 속성 
    list-style: none 을 사용하면 앞머리 기호 사라짐
    ex) <ol style="list-style: none;">
        <ul style="list-style: none;">
    list-style-type: 지정하여 앞머리기호 스타일 설정 가능
    ex) <ul style="list-style-type: circle;">
    
    폰트 스타일을 위한 태그
    <b></b> -> 볼드
    <i></i> -> 기울기

    시맨틱 태그(고유한 의미를 가진 태그)
    <strong></strong> -> 볼드, 중요한 내용 강조
    <em></em> -> 기울기, 중요한 내용을 강조
    <u></u> -> 언더라인 (고유명사, 철자가 틀렸을 때)
    <s></s> -> 취소선, 문서의 내용이 틀렸을 때
    <del></del> -> 취소선, 최신 버전에는 삭제된 내용
    <sup></sup> -> 윗첨자
    <sub></sub> -> 아랫첨자
    <abbr></abbr> -> title 속성으로 풀 의미 설명하는 기능
    ex) <abbr title:"hyper text markup language">HTML</abbr>

    브라우저 상에서 경로를 표시하는 방법
    1. 절대 경로
    : 인터넷, URL로 접속 가능한 경로
    2. 상대경로
    : 개발 환경에서 시작되는 경로
    ***
    . : 현재 파일이 위치한 경로
    .. : 상위 경로
    /: 다음 경로로 이동하기 전 구분
    ex1)
    <a href="./test/sample.html">안뇽</a>
    현재 경로 -> test 폴더 -> sample.html
    ex2)
    <a href="../sample.html">안뇽</a>
    상위 경로로 이동 -> sample.html
    ***
    현재 경로에서 바로 파일로 이동할 때는 ./ 생략 가능
    <a href="sample2.html">안뇽</a>
    <link rel="stylesheet" href="style.css">