비전공자 개발일기

HTML 본문

HTML _CSS

HTML

HiroDaegu 2021. 7. 25. 11:17
728x90
SMALL

프론트 엔드 개발자: HTML, CSS, Javascript를 사용해 데이터를 그래픽 사용자 인터페이스로 변환하고, 그것으로 사용자와 상호작용 할 수 있도록 하는 것 

  • HTML: 웹의 구조
  • CSS: 웹의 정적 표현(시각적)
  • Javascripit: 웹의 동적표현

특수 문자

  1. `   : 백틱, 그레이브(Tab 위의 키)
  2. ~  : 틸드, 물결 표시(Tab 위의 키)
  3. !   : 느낌표, 엑스클러메이션
  4. @ : 앳, 골뱅이
  5. #  : 샾, 넘버, 우물점
  6. $  : 달러
  7. % : 퍼센트
  8. ^ : 캐럿
  9. & : 앰퍼센드
  10. *  : 에스터리스크, 별표
  11. -  : 하이픈, 대쉬
  12. _  : 언더스코어, 로우대쉬
  13. = : 이퀄, 동등
  14. "  : 쿼테이션, 큰 따옴표
  15.  '  : 아포스트로피, 작은 따옴표
  16.  :  : 콜론
  17.  ;  : 세미콜론
  18.  ,  : 콤마, 쉼표
  19.  .  : 피리어드, 닷, 점, 마침표
  20.  ? :  퀘스천, 물음표
  21.  / : 슬래쉬
  22.  | : 버티컬 바
  23. ＼: 백슬래쉬, 역슬래쉬
  24. ( ) : 퍼랜서시스, 소괄호, 괄호
  25. { } : 브레이스, 중괄호
  26. [ ] : 브래킷, 대괄호
  27. < > : 앵글, 브래킷, 꺽쇠괄호

 

Visual Studio code 단축키

  1. Ctrl + b : 사이드 바 열고 닫기
  2. Ctrl + p : 빠른 열기(파일이나 기호 탐색)
  3. Ctrl + Shift + p : 모든 명령 표시
  4. Ctrl + w : 편집기 닫기
  5. Ctrl + f : 찾기(검색)
  6. Ctrl + h : 찾기(검색) / 바꾸기(대체)
  7. Alt + ↑ : 줄 위로 이동
  8. Alt + ↓ : 줄 아래로 이동
  9. Alt + Shift + ↑ : 위에 줄 복사
  10. Alt + Shift + ↓ : 아래에 줄 복사
  11. Ctrl + z : 되돌리기
  12. Ctrl + PgUp : 이전 편집기 열기(좌측창으로 전환)
  13. Ctrl + PgDn : 다음 편집기 열기(우측창으로 전환)
  14. Ctrl + ` : 편집기 분할

HTML의 구조

<!DOCTYPE html>          //  문서의 HTML 버전 지정
<html>
<head>
	<title></title>		 // <title></title> HTML 문서의 제목을 정의
</head>			// <head></head> 문서의 정보를 나타내는 범위

<body>

</body>                  // <body></body> 문서의 구조를 나타내는 범위
</html>				  // <html></html> 문서의 전체 범위

상대 경로와 절대 경로

상대경로 절대경로
   ./ (생략 가능, 주변 탐색) http(https)
 ../ (상위 폴더 탐색) /

 

브라우저 스타일 초기화 코드

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" integrity="sha512-NmLkDIU1C/C88wi324HBc+S2kLhi08PN5GDeUVVVC/BVt/9Izdsc9SVeVfA1UZbY3sHUlDSyRXhCzHfr6hmPPw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

(head 태그 내에서 사용)

 

<태그> 내용 </태그>

  1.  <태그> : 시작(열린) 태그
  2.      내용 : 요소의 내용(Element)
  3. </태그> : 종료(닫힌) 태그
<태그>
	<태그>
    	내용
    </태그>   // 자식 요소
</태그>	    // 부모 요소

<태그 / > : 빈 태그 

<태그 속성 = "값> 내용 </태그>

 

글자 와 상자

 

요소가 화면에 출력되는 특성

  • 인라인(Inline): 글자를 만들기 위한 요소
    • span
      • 대표적인 인라인 요소
      • 본질적으로 아무것도 나타내지 않음, 콘텐츠의 영역을 설정해주는 용도
      • 요소가 수평으로 쌓임
      • 포함한 콘텐츠 크기만큼 자동으로 줄어듬
      • 여백 가능(margin: 외부 여백 / padding: 내부 여백)
      • 글자 요소는 가로, 세로 사이즈를 가질 수 없음
ex) <img src=" 링크 "  alt = "에러시 출력 문자"/> //src, alt = img 태그의 필수 속성
ex) <a href = " 링크" target = "_blank> 내용 </a>// targer = 링크 uri의 표시 위치
ex) <br />
ex) <label> </labal>
ex) <input type = "text" value = ""  placeholder =" " disabled>, 
    <input type = "checkbox" checked>
    <input type = "radio" name = "fruits"> A
    <input type = "radio" name = "fruits"> B  // type = "radio" 사용자에게 체크 여부를 그룹(name)에서 1개만 입력받음
  •  블럭(block): 상자(레이아웃)를 만들기 위한 요소
    • div
      • 대표적인 블럭 요소
      • 본질적으로 아무것도 나타내지 않음, 콘텐츠의 영역을 설정해주는 용도
      • 요소가 수직으로 쌓임
      • 부모 요소의 크기만큼 자동으로 늘어남
      • 여백 가능
      • 블록 요소는 가로, 세로 사이즈를 가질 수 있음
      • 가로 영역을 최대한 많이 사용하려고 함
ex) <h1> </h1>  // 1 ~ 6 까지 가능(숫자가 작을수록 더 중요한 제목)
ex) <p> </P>    // 문장을 의미
ex) <ul>
	<li></li> // 목록 내 각 항목
    </ul>     // 순서가 필요없는 목록들의 
ex) <table>
		<tr>
        	<td>
            </td> // 열
        </tr>     // 행
    </table>      // 테이블요소(블록요소)
   // 제작 순서: 행 -> 열
<span><div></div></span>    // 불가능
<span><span></span></sapn>  // 가능
<div><div></div></div>      // 가능
<div><span></span></div>    // 가능
<!--주석-->

 

전역 속성

<태그 title="설명" style = "스타일" class = "클래스"  id = "아이디" data-name = "데이터">내용</태그>
// title     = 요소의 정보나 설명을 지정(마우스를 해당 내용 위에 올리면 정보가 나옴)
// style     = 요소에 적용할 스타일(CSS)을 지정
// class     = 요소를 지칭하는 중복 가능한 이름
// id        = 요소를 지정하는 중복 불가능한 이름
// data-name = "데이터"  = 요소에 데이터를 지정(Javascript)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90
LIST

'HTML _CSS' 카테고리의 다른 글

CSS - SCSS  (0) 2021.08.01
CSS - BootStrap  (0) 2021.07.31
CSS  (0) 2021.07.27
CSS  (0) 2021.07.26
HTML_CSS_BASIC  (0) 2021.07.19
'HTML _CSS' Related Articles more