7월 3일_HTML(도스명령어, 블록, 인라인, iframe, CSS)

CLASS_HTML&CSS

by awesong 2024. 7. 3. 17:40

728x90

# CMD 도스 명령어

ASSOC 파일 확장명 연결을 보여주거나 수정합니다.
ATTRIB 파일 속성을 표시하거나 바꿉니다.
BREAK 확장된 CTRL+C 검사를 설정하거나 지웁니다.
BCDEDIT 부팅 로딩을 제어하기 위해 부팅 데이터베이스에서 속성을 설정합니다.
CACLS 파일의 액세스 컨트롤 목록(ACL)을 표시하거나 수정합니다.
CALL 한 일괄 프로그램에서 다른 일괄 프로그램을 호출합니다.
CD 현재 디렉터리 이름을 보여주거나 바꿉니다.
CHCP 활성화된 코드 페이지의 번호를 표시하거나 설정합니다.
CHDIR 현재 디렉터리 이름을 보여주거나 바꿉니다.
CHKDSK 디스크를 검사하고 상태 보고서를 표시합니다.
CHKNTFS 부팅하는 동안 디스크 확인을 화면에 표시하거나 변경합니다.
CLS 화면을 지웁니다.
CMD Windows 명령 인터프리터의 새 인스턴스를 시작합니다.
COLOR 콘솔의 기본색과 배경색을 설정합니다.
COMP 두 개 또는 여러 개의 파일을 비교합니다.
COMPACT NTFS 분할 영역에 있는 파일의 압축을 표시하거나 변경합니다.
CONVERT FAT 볼륨을 NTFS로 변환합니다. 현재 드라이브는 변환할 수 없습니다.
COPY 하나 이상의 파일을 다른 위치로 복사합니다.
DATE 날짜를 보여주거나 설정합니다.
DEL 하나 이상의 파일을 지웁니다.
DIR 디렉터리에 있는 파일과 하위 디렉터리 목록을 보여줍니다.
DISKPART 디스크 파티션 속성을 표시하거나 구성합니다.
DOSKEY 명령줄을 편집하고, Windows 명령을 다시 호출하고, 매크로를 만듭니다.
DRIVERQUERY 현재 장치 드라이버 상태와 속성을 표시합니다.
ECHO 메시지를 표시하거나 ECHO를 켜거나 끕니다.
ENDLOCAL 배치 파일에서 환경 변경의 지역화를 끝냅니다.
ERASE 하나 이상의 파일을 지웁니다.
EXIT CMD.EXE 프로그램(명령 인터프리터)을 종료합니다.
FC 두 파일 또는 파일 집합을 비교하여 다른 점을 표시합니다.
FIND 파일에서 텍스트 문자열을 검색합니다.
FINDSTR 파일에서 문자열을 검색합니다.
FOR 파일 집합의 각 파일에 대해 지정된 명령을 실행합니다.
FORMAT Windows에서 사용할 디스크를 포맷합니다.
FSUTIL 파일 시스템 속성을 표시하거나 구성합니다.
FTYPE 파일 확장명 연결에 사용되는 파일 형식을 표시하거나 수정합니다.
GOTO Windows 명령 인터프리터가 일괄 프로그램에서 이름표가 붙여진 줄로 이동합니다.
GPRESULT 컴퓨터 또는 사용자에 대한 그룹 정책 정보를 표시합니다.
GRAFTABL Windows가 그래픽 모드에서 확장 문자 세트를 표시할 수 있게 합니다.
HELP Windows 명령에 대한 도움말 정보를 제공합니다.
ICACLS 파일과 디렉터리에 대한 ACL을 표시, 수정, 백업 또는 복원합니다.
IF 일괄 프로그램에서 조건 처리를 수행합니다.
LABEL 디스크의 볼륨 이름을 만들거나, 바꾸거나, 지웁니다.
MD 디렉터리를 만듭니다.
MKDIR 디렉터리를 만듭니다.
MKLINK 바로 가기 링크와 하드 링크를 만듭니다.
MODE 시스템 장치를 구성합니다.
MORE 출력을 한번에 한 화면씩 표시합니다.
MOVE 하나 이상의 파일을 한 디렉터리에서 다른 디렉터리로 이동합니다.
OPENFILES 파일 공유에서 원격 사용자에 의해 열린 파일을 표시합니다.
PATH 실행 파일의 찾기 경로를 표시하거나 설정합니다.
PAUSE 배치 파일의 처리를 일시 중단하고 메시지를 표시합니다.
POPD PUSHD에 의해 저장된 현재 디렉터리의 이전 값을 복원합니다.
PRINT 텍스트 파일을 인쇄합니다.
PROMPT Windows 명령 프롬프트를 변경합니다.
PUSHD 현재 디렉터리를 저장한 다음 변경합니다.
RD 디렉터리를 제거합니다.
RECOVER 불량이거나 결함이 있는 디스크에서 읽을 수 있는 정보를 복구합니다.
REM 배치 파일 또는 CONFIG.SYS에 주석을 기록합니다.
REN 파일 이름을 바꿉니다.
RENAME 파일 이름을 바꿉니다.
REPLACE 파일을 바꿉니다.
RMDIR 디렉터리를 제거합니다.
ROBOCOPY 파일과 디렉터리 트리를 복사할 수 있는 고급 유틸리티입니다.
SET Windows 환경 변수를 표시, 설정 또는 제거합니다.
SETLOCAL 배치 파일에서 환경 변경의 지역화를 시작합니다.
SC 서비스(백그라운드 프로세스)를 표시하거나 구성합니다.
SCHTASKS 컴퓨터에서 실행할 명령과 프로그램을 예약합니다.
SHIFT 배치 파일에서 바꿀 수 있는 매개 변수의 위치를 바꿉니다.
SHUTDOWN 컴퓨터의 로컬 또는 원격 종료를 허용합니다.
SORT 입력을 정렬합니다.
START 지정한 프로그램이나 명령을 실행할 별도의 창을 시작합니다.
SUBST 경로를 드라이브 문자에 연결합니다.
SYSTEMINFO 컴퓨터별 속성과 구성을 표시합니다.
TASKLIST 서비스를 포함하여 현재 실행 중인 모든 작업을 표시합니다.
TASKKILL 실행 중인 프로세스나 응용 프로그램을 중단합니다.
TIME 시스템 시간을 표시하거나 설정합니다.
TITLE CMD.EXE 세션에 대한 창 제목을 설정합니다.
TREE 드라이브 또는 경로의 디렉터리 구조를 그래픽으로 표시합니다.
TYPE 텍스트 파일의 내용을 표시합니다.
VER Windows 버전을 표시합니다.
VERIFY 파일이 디스크에 올바로 기록되었는지 검증할지 여부를 지정합니다.
VOL 디스크 볼륨 레이블과 일련 번호를 표시합니다.
XCOPY 파일과 디렉터리 트리를 복사합니다.
WMIC 대화형 명령 셸 내의 WMI 정보를 표시합니다.

# 폼에서 사용하는 여러가지 태그

textarea 텍스트 영역 cols 가로 크기 rows 세로 크기
<select> - <option> 드롭박스 만들기 (사용자가 목록에서 하나 이상의 항목을 선택할 수 있도록 함)
<input> - <datalist> 드롭박스 만들기 (사용자가 입력할 수 있는 값들의 자동 완성 기능 제공)
<button> 버튼 생성 태그 - CSS에서 원하는 형태로 변형이 가능

# 블록(block) 타입의 요소

display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지
- <p>, <div>, <h>, <ul>, <ol>, <form>요소는 display 속성값이 블록(block)인 대표적인 요소

<body>
  <p style="border:1px solid blue">
    한 줄<br>
    p요소는 display 속성값이 블록인 요소<br>
    오늘은 좋은 날 입니다.
  </p>
  <hr>
  <p style="border:1px dashed red">
    긴 점선<br>
    p요소는 display 속성값이 블록인 요소<br>
    오늘은 좋은 날 입니다.
  </p>
  <hr>
  <p style="border:1px dotted red">
    점 점선<br>
    p요소는 display 속성값이 블록인 요소<br>
    오늘은 좋은 날 입니다.
  </p>
  <hr>
  <p style="border:4px double black">
    두 줄<br>
    p요소는 display 속성값이 블록인 요소<br>
    오늘은 좋은 날 입니다.
  </p>
</body>

# 인라인(inline) 타입의 요소

display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않음
요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지
- <span>, <a>, <img>요소는 display 속성값이 인라인(inline)인 대표적인 요소

<hr>
  <h1>div요소를 이용한 스타일 적용</h1>
  <div style="border:1px solid blueviolet">
    <p>이렇게 div요소로 여러 요소들을 묶은 다음에
      style속성과 클래스 등을 이용하여
      한번에 스타일을 적용할 수 있습니다.</p>
  </div>
  <h1 style="border: 1px solid rgb(0, 255, 234); color:tomato">
    div요소를 이용한 스타일 적용<br>
    border 은 박스 요소와 컬러 color은 글자 색
  </h1>
  <hr>
  <div style="border:1px solid blueviolet; background-color: goldenrod">
    <p>background-color 지정</p>
  </div>
  <hr>
  <div style="border: 3px solid royalblue; width: 500px; height: 300px; text-align: center;">
    <p>박스의 크기를 지정<br>
    text-align 텍스트의 위치 지정</p>
  </div>
  <p>
    <span style="color:teal; border:1px solid teal">
      span태그는 한 줄에만 스타일을 적용하는 태그</span>
    <br>
    <strong style="color: rgb(255, 123, 123)">
      strong태그는 적용된 줄의 내용만 굵게적용, 스타일 적용</strong>
  </p>

# iframe 요소

iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입할 수 있음

# CSS 기본 문법

선택자와 선언부로 구성
- 선택자 : CSS를 적용하고자 하는 HTML요소
- 선언부 : ; (세미콜론)으로 구분, { } (중괄호) 사용
- 각 선언은 속성명과 속성값을 가지고 : (콜론)으로 연결

# CSS를 적용하는 방법

인라인 스타일(Inline style) : HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용
내부 스타일 시트(Internal style sheet) : HTML 문서 내의 <head>태그에 <style>태그를 사용하여 CSS 스타일을 적용
외부 스타일 시트(External style sheet) : 웹 사이트 전체의 스타일을 하나의 파일에서 변경

***스타일 적용의 우선순위

!important : 어떤 스타일보다 가장 우선 적용
인라인 스타일 : 해당 태그에만 적용
id 스타일 : 특정 부분에만 적용, 문서 안에서 한번만 사용 **HTML CSS 상에서는 다중 사용해도 결과값은 보이지만 자바나 다른 프로그램으로 넘겨서 사용할 때 문제가 될 수 있기 때문에 한번만 사용해야 함
클래스 스타일 : 특정 부분에만 적용, 문서 안에서 여러번 사용
타입 스타일 : 특정 태그에만 적용, 문서 안의 같은 태그에 모두 적용

# CSS 선택자

스타일을 적용할 HTML 요소를 가리키는 데 사용하는 선택자
- HTML 요소 선택자
- 아이디(id) 선택자
- 클래스(class) 선택자
- 그룹(group) 선택자

저작자표시 비영리 동일조건

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

7월 8일_CSS(float 속성, 요소 위치, 시멘틱태그언어) (0)	2024.07.08
7월 5일_CSS(마진, 패딩, 박스모델) (1)	2024.07.05
7월 4일_CSS(!important, 웹폰트적용, 스타일시트링크, 다양한 스타일 적용) (0)	2024.07.04
7월 2일_HTML(멀티미디어, 폼) (1)	2024.07.02
7월 1일_HTML(프로그램 설치, 기본 문법, 표만들기) (0)	2024.07.01