⭑HTML : (Hypertext Markup Language) 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어
⭑HTML5 : 구조, 뼈대
⭑CSS3 : 디자인, 표현
⭑웹표준 : 웹 기술의 공식적인 표준, 어느 웹 브라우저나 동일하게 적용, HTML5
⭑웹접근성 : 누구든지 원활하게 웹 페이지를 이용하는 것 ex)시각장애인을 위한 음성지원 등
⭑서버(server): 클라이언트 요청을 받으면 데이터나 서비스를 제공하는 컴퓨터 프로그램,
요청을 받으면 데이터를 보내주는 기계
⭑클라이언트(client): 서버를 네트워크를 통해 사용하는 컴퓨터, 서버를 이용하는 사용자(컴퓨터)
⭑마크업 : 태그를 사용해 표시하는 것 ex)<>
⭑웹 편집기 : 노트패드++, 에디트플러스, 코다, 텍스트 메이트(잘 사용X), 드림위버(잘 사용X), 비주얼 스튜디오 코드 등..
⭑젠코딩=emmet (빠르게 코딩 태그 쳐지는거) vs코드는 알아서 됨 , 다른프로그램은 깔아야할 수도
⭑주석처리 :
/*css주석내용*/
<!--html주석내용-->
⭑파일명: 한글x, 띄어쓰기x, 띄어쓰기 대신 _ , -이거 사용, 영문숫자o
⭑특수문자: 변환해서 사용
[HTML]
⭑tag=요소 element
-대소문자 구별x, 보통 소문자 사용, <>로 표시
ex)<p></p>
⭑속성="값" (attribute="value")
-쌍따옴포""나 외따옴표'' 둘 다 사용 가능
ex) <img src="img.jpg" alt="시계이미지"
⭑head: 문서의 기본적인 정보 적기
⭑title: 문서의 제목
⭑body: 페이지 구성부분, 실제 브라우저 표시될 내용
⭑footer: 웹페이지 하단 영역
- 저자(author) 정보
- 저작권 정보
- 주소, 연락처
- 사이트맵(sitemap)
- 페이지 맨 위로 되돌아갈 수 있는 Top 버튼
- 연관 페이지, 회사정책, 고객센터 정보
⭑<meta>:데이터 기본적인걸 설명해주는 것, utf-8문자세트 사용
-<meta charset='utf-8'> :꼭 쓰기, 안 쓰면 한글 엑박뜸, (charset:글자 , utf-8:다국어가 지원된다.)
⭑html 공백: 띄어쓰기 하면 한 칸만 인식됨, 엔터하면 띄어쓰기 한 칸 인식
-여러개 공백: 특수기호로 사용
-<>태그말고 그냥 < 특수문자로 나타내고 싶을때는 다른 표기법으로 사용
-엔티티 기호(엔티티 이름): 특수문자를 코드로 나타냄
https://www.toptal.com/designers/htmlarrows/arrows/
https://dev.w3.org/html5/html-author/charref
⭑<pre></pre>: 공백 그대로 나타내는태그, 이 태그 안에서 띄어쓰기하면 그대로 다 나타남, but 음성지원에서 읽어주지 않기 때문에 장애인들이 이용하기엔 불편, 웹 접근성이 떨어져서 잘 쓰진 않음.
#박스모델
*display:block;
inline;
-기본 값은 정해져 있지만 바꿔서 설정가능
*블록: 넓이와 높이 쓸 수 있음, 왼쪽부터 오른쪽까지 전체 공간이용
*인라인: 넓이와 높이가 안 먹기때문에, 블록이나 인라인블록으로 속성을 바꿔야됨, 콘텐츠 크기만큼만 자리차지
#텍스트를 블록으로 묶어주는 태그
⭑<hn></hn>: heading 제목 태그
-<h1>~<h6>까지 표현, 1이 제일 중요
-사이트 왼쪽 로고 같은 경우 대부분 h1 사용
-태그 안에 <p>쓰는 것 x, 문단태그 들어가면 문법적 오류
⭑<p></p>: paragraph 텍스트 단락
⭑<br>: 줄바꿈, 단독태그 (잘 사용x)
⭑<hr>: 수평 줄 표시, 단독태그 (잘 사용x)
⭑<blockquote></blockquote>: 인용문
-안으로 들여 써짐
⭑<pre></pre>: (잘 사용x)
#텍스트를 한 줄로 표시하는 태그 (인라인)
⭑굵게 표시
-<b></b>: 의미가 없고 물리적으로 그냥 굵게 표현
-<strong></strong>: 의미 강조가 됨, 낭독번역기 사용시 다르게 읽어줌
⭑이탤릭체로 기울게 표시
-<i></i>:단순 이탤릭체로 표시-<em></em>:중요하게 의미 강조하며 이탤릭체 표시
⭑<q></q>: quote. 인용 내용 표시-<blockquote>은 block이지만 q는 inline이기 때문에 함께 한 줄로 표시, 줄바꿈x, 안 들여써짐, 알아서 인용 내용에 ""따옴표 붙여짐-ex) <q cite="http://www.naver.com/aa">웹의 힘은 보편성에 있다.</p>
⭑<mark></mark>: 형광펜 효과
⭑<span></span>: 특정 영역 묶을 때 사용
⭑<ruby></ruby>: 동아사아 글자 표시, 주석을 함께 표기하기 위해 사용. 다른 나라 작업할 땐 사용, 잘 사용x,
-주석으로 표시할 내용을 안에 <rt></rt>태그로 표시(주석은 ruby글자 위에 작게 표현됨)
-ex)<ruby>내용<rt>주석</rt></ruby>
(기타 텍스트 관련 인라인 태그들)
⭑<abbr></abbr>: 약자 표시, title 속성을 함께 사용 가능
-ex)<abbr title="internet of Things">IOT</abbr>
⭑<cite></cite>: 웹 문서나 포스트에서 참고 내용 표시
-ex)<p>내가 경험한 누군가를 만나는 ....-영화, <cite>비포선셋</cite>중</p>
⭑<code></code>: 컴퓨터 인식을 위한 소스코드
-ex)<pre><code>function savetheLocal{...}</code></pre>
⭑<kbd></kbd>: 키보드 입력이나 음성 명령같은 사용자 입력 내용
-ex)<kbd>F5</kbd>키를 ..
⭑<small></small>: 부가정보를 작게 표시해도 되는 텍스트 (부가세 별도)..이런 거
⭑<sub></sub>: 아래 첨자
-ex) H2에서 2를 아래에 표현
⭑<sup></sup>: 위 첨자(2승 이런거)
⭑<s></s>: 취소선
⭑<u></u>: 밑줄
#목록 태그
⭑<ul></ul>: 순서x , 자식태그 <li></li>만 와야됨
⭑<ol></ol>: 순서o, li만 와야됨
⭑<dl></dl>: 설명목록
ex) <dl>
<dt>제목</dt>
<dd>설명</dd>
</dl>
-dl dt dd는 제목설명목록
-dl자식으로 dt와 dd
-dt와 dd는 부모자식x , 형제관계o
#링크 이동
⭑절대경로: ex)<a href=''http://www.kfdkfjkdf.com"></a>
- '/' 기준 -> '/' 는 웹사이트의 루트 폴더(최상위) >ex: /01.html
⭑상대경로: 현재문서 기준으로 연결할 문서나 이미지의 위치 지정, ex)dd.html
-같은위치: 같은 디렉토리 상에 위치(같은 폴더에 위치)
-위에 위치: ../파일명.확장자
-아래위치: 폴더명/파일명.확장자 >ex: file/03.html
-현재디렉토리: ./ (맨앞에서 생략가능)> ex: ./01.html = 01.html
⭑다른 사이트 특정 페이지의 특정 위치id로 이동할 때
ex:<a href="이동할 페이지의 주소(URL)#jangmi">장미 구경하세요</a>
⭑이미지
<img src="https://t1.daum.net/bknbkfji.png" alt="다음">
-alt: 웹 접근성때문에 필수로 적기!
-alt='' →빈알트 라고 하는데 그냥 줄처럼 아무 의미없이 꾸민 거에만 사용가능, 아니면 로고+네이버 이런식으로 써있는거에 이미 내용이 있기때문에 두번 중복 내용 안 되게 건너 띄도록 사용가능.
-배너광고에 alt='광고' 이렇게 대충말고 배너 이미지면 문구까지 다 적어주기
⭑이미지와 설명태그
-<figure>: 삽화나 다이어그램, 사진 등을 담는 컨테이너 역할 (문서의 주요 흐름과는 독립적인 콘텐츠를 정의할 때 사용)
-<figcaption>: 설명하는 문구 / figure 안에 위치
*wrapper 래퍼 : 전체 싸주는 묶음, div class로 많이 사용
'HTML & CSS' 카테고리의 다른 글
| 태그 호출 사용법 (0) | 2022.05.06 |
|---|---|
| class 와 id (0) | 2022.05.06 |
| 이미지- 이미지 가운데 배치하기, 이미지 포지션으로 조정해 해당 영역만 보이게 하기 (0) | 2022.05.06 |
| css 박스 모델 (0) | 2022.05.06 |
| CSS 용어 및 기본 정리 (0) | 2022.05.06 |