본문 바로가기
HTML & CSS

1. 웹과 HTML 기본 개념(Tip. 특수문자이름)

by 뽀롱트옌드 2023. 7. 22.

 

웹 표준

W3C(표준화 제정 단체)에서 제정한 권고안에 해당하는 기술이나 규칙을 의미
- 표준화 제정 단계
1. 초안
2. 후보권고안
3. 제안권고안
4. **권고안** 에 해당하는 기술

- 태그의 필수 속성을 지정하지 않으면 웹표준에 어긋남
- CSS 동작가상선택자 :: 로 표기하는게 웹표준

의미있는 마크업(Semantic Markup)

콘텐츠 데이터의 의미(가장 잘 설명및 표현해줄수있는)와 맞는 HTML 태그로 감싸 의미있는 요소 문서를 작성하는 것
SEO에도 도움이됨

[ MDN - Semantic ]

검색 엔진 최적화 (SEO)

search engine optimization
웹사이트가 검색에 더 잘보기에 하기위한 작업

[ MDN - SEO ]

크로스 브라우징

브라우저를 만드는 회사가 다양해 조금 다르게 구동되는 여러 브라우저에서 같은 화면, 동작(동일한 사용자 경험)을 줄 수 있도록 제작하는 기술

하위 호환성

특정한 웹 기술을 다양한 웹 브라우저들의 예전버전환경에서도 호환이 되는지 확인후 사용

🦴 HTML

> ### Doctype(DTD)
Document Type Definition
웹 브라우저가 문서의 어떤 HTML버전의 해석방식으로 페이지를 로드 해야하는지 지정
-> 현재 웹 표준은 HTML5

[ HTML 문서의 기본 구조 ]

<!-- html 버전설정 -->
<!DOCTYPE html> 
<!-- 문서의 전체범위(시작과끝)를 브라우저에게 알려줌, lang속성을 통해 문서의 언어를 지정한다 -->
<html lang="ko">  
  <head>
    <!-- 
           웹페이지의 보이지 않는 정보 작성
        ㄴ <meta />: 문자인코딩 방식- <meta charset="UTF-8">, 
                     웹 페이지의 제작자 내용 키워드 등 여러 정보를 검색엔진과 브라우저에게 제공 
                    (name- 정보의 종류, content- 정보의 값) 
        ㄴ <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
                      viewport: 모바일(패드)장치만 해당 
                      width=device-width: 기기의 가로사이즈에 맞춰 출력
                      initial-scale=1.0 : 기기에서 처음 출력될때 1.0 배수로 출력  
        ㄴ <title>: 웹 페이지의 제목
        ㄴ <link />, <script>: 외부문서를 가져와 연결 (CSS, 파비콘등), rel-  가져올 문서의 종류를 적는 필수속성, href src- 문서의 경로 지정
        ㄴ <style>, <script>: CSS, JS를 HTML 문서안에 작성하는 경우
      -->  
  </head>
  <body>
      <!-- 
        웹 페이지의 보여지는 구조 작성
        문서가 사용자 화면에 보여지는 구조(컨텐츠)
      -->
  </body>
</html>

- 경로

/(//): root 프로젝프의 최상위 경로, 절대 경로
<a href="/" class="logo"></a>
logo를 클릭하면 프로젝트의 최상위의 index.html로 이동

127.0.0.1= localhost
내 컴퓨터에서 개발: 로컬환경
플러그인(Live Server등)이나 다른 도움을 받아 내컴퓨터 내부에서 포트번호로 개발용 서버를 염

- 스타일 초기화 (reset)

브라우저마다 조금씩 다르게 요소에 스타일 값을 지정해놈 크로스 브라우징을 위해 스타일 초기화
ㄴ jsdelivr cdn reset

- emmet

html,css 등을 작성할때 축약형, 자동완성으로 시간을 단축시켜주는 확장기능

🎇 Tip 특수문자용어 이름

  • ` : 백틱, 그레이브 (Backtick, Grave)
  • ~ : 틸드, 물결 (Tilde)
  • ! : 느낌표 (Exclamation mark)
  • @ : 골뱅이 (At sign)
  • ⩨ : 샵, 우물정 (Sharp, Number sign)
  • $ : 달러 (Dollar sign)
  • % : 퍼센트 (Percent sign)
  • ^ : 캐럿 (Caret)_ 이상의 값을 표현할때 사용
  • & : 엠퍼센드 (Ampersand)
  • ⁎ : 에스터리스크, 별 (Asterisk)
  • – : 하이픈, 대시 (Hyphen, Dash)
  • _ : 언더스코어,로대시, 밑줄 (Underscore, Low dash)
  • = : 이퀄, 동등 (Equals sign)
  • " : 쿼테이션, 큰따옴표 (Quotation mark)
  • ' : 아포스트로피, 작은 따옴표 (Apostrophe)
  • : : 콜론 (Colon)
  • ; : 세미콜론 (Semicolon)
  • , : 콤마 (Comma)
  • . : 피리어드, 닷, 마침표 (Period, Dot)
  • ? : 물음표 (Question mark)
  • / : 슬래시 (Slash)
  • | : 버티컬 바 (Vertical bar)
  • \ : 백슬래시 (Backslash)
  • () : 퍼렌서시스, 소괄호 (Parenthesis)
  • {} : 브레이스, 중괄호 (Brace)
  • [] : 브래킷, 대괄호 (Bracket)
  • <> : 앵글 브래킷, 꺽쇠괄호 (Angle Bracket)
저작자표시 비영리 변경금지

'HTML & CSS' 카테고리의 다른 글

4. CCS 스타일(속성)  (0) 2023.08.08
3. CCS 문법, 선언방식, 선택자  (0) 2023.08.08
2. HTML 기본문법과 핵심 요소  (0) 2023.08.06

관련글

티스토리툴바