기본 콘텐츠로 건너뛰기

Part01 HTML & CSS 첫걸음 / 개요

Part01 HTML & CSS 첫걸음 / 개요

VSCODE 굿 팁
Beautify

코드 가독성을 위해 코드 작성 스타일을 (아름답게) 수정합니다.
입문자들에게 적극 추천합니다.

  1. Preferences > Keyboard Shortcut 선택
  2. HookyQR.beautify를 검색(HookyQR.beautifyFile 아니에요!)
  3. 키 바인딩 선택
  4. 원하는 단축키 등록

“Alt + Ctrl + L”(Windows) / “Alt + Cmd + L”(macOS)을 추천합니다.

Live Server

하단 상태 바(Status bar)에서 Go Live 선택
또는,
HTML 화면에서 우클릭 > Open with Live Server 선택

VS Code 버전에 따라서 이미 설치되어 있을 수 있습니다.

Auto Rename Tag

태그 이름을 수정할 때 열린 태그와 닫힌 태그가 쌍으로 수정됩니다.
각각 수정해야 하는 번거로움을 줄일 수 있습니다.

그 외 추천

다음 확장 기능들이 당장 필요하지는 않을 겁니다.
나중에 살펴보세요.

Terminal
Live Sass Compiler
Turbo Console log
Better Comments
Highlight Matching Tag

GitLens
REST Client

알아두면 좋은 단축키

Preferences > Keyboard Shortcut(바로 가기 키) 에서 단축키를 확인하거나 변경할 수 있습니다.

"를 사용하면 키 바인딩을 검색할 수 있습니다.
"를 닫으면 정확한 검색을 요구하므로 "cmd + p와 같이 "를 닫지 않고 검색하는 것을 추천합니다.

Windows 단축키macOS 단축키설명
“Ctrl + B”“Cmd + B”사이드바 열기/닫기
“Ctrl + P”“Cmd + P”빠른 열기(파일이나 기호 탐색)
“Ctrl + Shift + P”“Cmd + Shift + P”모든 명령 표시(에디터의 모든 명령에 접근)
“Ctrl + F”“Cmd + F”찾기(검색)
“Ctrl + H”“Cmd + Opt(Alt) + F”찾기(검색)/바꾸기(대체)
“Alt + Up”“Alt + Up”줄 위로 이동
“Alt + Down”“Alt + Down”줄 아래로 이동
“Shift + Alt + UpArrow”“Shift + Alt + UpArrow”위에 줄 복사
“Shift + Alt + DownArrow”“Shift + Alt + DownArrow”아래 줄 복사
“Tab”“Tab”들여쓰기
“Shift + Tab”“Shift + Tab”내어쓰기
“Ctrl + PageUp”“Cmd + Shift + [”이전 편집기 열기(좌측 창으로 전환)
“Ctrl + PageDown”“Cmd + Shift + ]”다음 편집기 열기(우측 창으로 전환)
“Ctrl + \”“Cmd + \”편집기 분할(백슬래쉬)
“Ctrl + 숫자”“Cmd + 숫자”숫자번째 분할된 편집기 그룹에 포커스
“Ctrl + W”“Cmd + W”편집기 닫기

약어로 랩핑(Wrap)

  1. 랩핑할 코드 선택
  2. 모든 명령 표시 실행 / “Ctrl + Shift + P”(Windows), “Cmd + Shift + P”(macOs)
  3. Emmet: Wrap with Abbreviation(Emmet: 약어로 랩핑)를 입력하거나 목록에서 선택(“Enter”)
  4. div, span 등의 Emmet 문법(ex: .wrapper, span.bold)을 입력
  5. 완료(“Enter”)

특수 문자 용어 정리

기호영어(발음)한글
`Grave(그레이브)-
~Tilde(틸드)물결표시
!Exclamation(엑스클러메이션) mark느낌표
@At(엣) sign골뱅이
#Number(넘버) sign, Sharp(샵)샵, 우물 정
$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 Entity List

오픈소스 라이선스

Apache License

아파치 소프트웨어 재단에서 자체 소프트웨어에 적용하기 위해 만든 라이선스입니다.
개인적/상업적 이용, 배포, 수정, 특허 신청이 가능합니다.

MIT License

매사추세츠공과대학(MIT)에서 소프트웨어 학생들을 위해 개발한 라이선스입니다.
개인 소스에 이 라이선스를 사용하고 있다는 표시만 지켜주면 되며, 나머지 사용에 대한 제약은 없기 때문에 인기가 많습니다.

BSD License

BSD(Berkeley Software Distribution)는 버클리 캘리포니아대학에서 개발한 라이선스입니다.
MIT와 동일하게 라이선스 표시만 지켜주시면 됩니다.

Beerware

오픈소스 개발자에게 맥주를 사줘야 하는 라이선스입니다.
물론 만날 수 있다면 말이죠!

그 외 더 많은 오픈소스 라이선스에 대한 정보는 OpenSource.org에서 확인하실 수 있습니다.

LINK(CSS 불러오기)

외부 문서를 연결할 때 사용합니다.
특히 HTML 외부에서 작성된 CSS 문서(xxx.css 파일)를 불러와 연결할 때 사용합니다.
빈(Empty) 태그입니다.

<head>
  <link rel="stylesheet" href="./css/main.css">
  <link rel="icon" href="./favicon.png">
</head>

<!-- 다음과 같이 이해할 수 있습니다. -->
<문서의정보범위>
  <외부문서연결 관계="CSS" 문서경로="./css/main.css">
  <외부문서연결 관계="사이트대표아이콘" 문서경로="./favicon.png">
</문서의정보범위>
속성의미값
rel(필수)현재 문서와 외부 문서와의 관계를 지정stylesheet, icon 등..
href외부 문서의 위치를 지정경로

SCRIPT(JS 불러오거나 작성하기)

HTML 문서에서 CSS는, 작성된 CSS를 <link>로 불러오거나 <style></style>안에 작성할 수 있습니다.
JS는 <script></script>로 이 2가지 방식을 모두 사용할 수 있습니다.

<!-- 불러오기 -->
<script src="./js/main.js"></script>

<!-- 작성하기 -->
<script>
  function windowOnClickHandler(event) {
    console.log(event);
  }
  window.addEventListener('click', windowOnClickHandler);
</script>

<!-- 다음과 같이 이해할 수 있습니다. -->

<!-- 불러오기 -->
<자바스크립트 문서경로="./js/main.js"></자바스크립트>

<!-- 작성하기 -->
<자바스크립트>
  <!-- JS 코드 -->
</자바스크립트>

CSS 선언 방식
이제 내가 작성한 CSS 코드를 어떻게 HTML에 적용할 수 있는지 알아봅시다.
태그에 직접 작성하기(인라인)
이 방법은 HTML 태그에 직접 작성하기 때문에 선택자가 필요하지 않습니다.
<div style="color: red;">태그에 직접 작성1</div> <!-- red -->
<div style="color: red;">태그에 직접 작성2</div> <!-- red -->
<div style="color: red;">태그에 직접 작성3</div> <!-- red -->
<div style="color: red;">태그에 직접 작성4</div> <!-- red -->

HTML에 포함하기(내장)
CSS만 따로 작성하기 때문에 선택자가 필요합니다.
CSS 코드가 HTML의 <style></style> 안에 포함되어 있습니다.
<head>
  <style>
    div {
      color: red;
    }
  </style>  
</head>
<body>
  <div>HTML에 포함1</div> <!-- red -->
  <div>HTML에 포함2</div> <!-- red -->
  <div>HTML에 포함3</div> <!-- red -->
</body>

HTML 외부에서 불러오기
CSS 코드를 완전히 분리할 수 있습니다.
분리된 하나의 CSS 파일을 여러 HTML 파일이 불러와서 사용할 수 있겠네요.
<!-- HTML 1 -->
<head>
  <link rel="stylesheet" href="/css/main.css">
</head>
<body>
  <div>HTML에 외부에서 불러오기1</div> <!-- red -->
</body>

<!-- HTML 2 -->
<head>
  <link rel="stylesheet" href="/css/main.css">
</head>
<body>
  <div>HTML에 외부에서 불러오기2</div> <!-- red -->
</body>

/* main.css */
div {
  color: red;

크기
width(가로 너비)
요소의 가로 너비를 지정합니다.
단위는 px(pixels)을 사용합니다.
div {
  width: 300px;
  요소가로너비: 너비값;
}

height(세로 너비)
요소의 세로 너비를 지정합니다.
div {
  height: 150px;
  요소세로너비: 너비값;
}

font-size(글자 크기)
요소 내용(Text)의 글자 크기를 지정합니다.
div {
  font-size: 16px;
  글자크기: 크기값;
}

여백
margin(요소의 바깥 여백)
요소의 바깥 여백을 지정합니다.(단축 속성)
바깥 여백은 요소와 요소 사이의 여백(거리, 공간)을 생성할 때 사용합니다.
div {
  margin: 20px;
  요소바깥여백: 여백값;
}

위 코드는 margin은 요소의 위, 아래, 좌, 우 모두 20px의 여백을 지정하겠다는 의미입니다.(개별 속성)
세분화하기 위해 아래와 같이 한 방향씩 지정할 수도 있습니다.
위 코드와 아래 코드는 같은 의미입니다.
div {
  margin-top: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
  요소바깥여백-위쪽: 여백값;
  요소바깥여백-오른쪽: 여백값;
  요소바깥여백-아래쪽: 여백값;
  요소바깥여백-왼쪽: 여백값;
}

padding(요소의 내부 여백)
요소의 내부 여백을 지정합니다.
내부 여백은 자식 요소를 감싸는 여백을 의미합니다.
div {
  padding: 20px;
  요소내부여백: 여백값;
}

margin과 같이 한 방향씩 지정할 수 있습니다.
div {
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  요소내부여백-위쪽: 여백값;
  요소내부여백-오른쪽: 여백값;
  요소내부여백-아래쪽: 여백값;
  요소내부여백-왼쪽: 여백값;
}
라벨:

댓글

댓글 쓰기

이 블로그의 인기 게시물

mac 맥 맥북 Brew 완전 삭제

맥북에서 Brew 초기화 Brew를 써서 h2를 쓰려고 하는데 brew install h2가 안되서 이리 저리 알아보다가 완전 삭제 후 다시 설치 하니까 되서 그 방법을 남겨놈 1. 터미널에 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall.sh)" 입력후 y랑 뭐 비번.. 2. /usr/local 폴더에서 Homebrew 폴더 삭제 rm -rf Homebrew/ 권한설정으로 잘.....삭제하고 3. 다시 설치 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)" 좀 오래걸리니까 기다려야한다는걸 배움... 출처.... https://discourse.brew.sh/t/error-no-formulae-found-in-taps/8331/9
댓글 쓰기
자세한 내용 보기

ORA-28000 계정이 잠금되었습니다 계정 잠길때

오라클 계정이 잠길때 해제방법 증상 t he account is locked 오류 발생 원인 Oracle 에서 t he account is locked  에러가 나는 원인은 ● 잘못된 패스워드로 설정횟수만큼 접속 시도시 Lock. ●  30일동안(Default) 해당 계정으로 로그인을 하지 않았을 경우 Lock. 등이 있다. 해결방법 command창에서 * 로컬일경우, sqlplus "/as sysdba"  또는  sqlplus /nolog  conn /as sysdba  * 로컬이 아닐 경우, sqlplus /nolog conn sys/password@<sid> 이름/패스워드@sid로 입력 로 접속 후 SELECT username, account_status, lock_date FROM dba_users; 으로 Lock이 된 사용자를 확인한 후 LOCKED<TIMED> 라고 되있으면, 패스워드 설정횟수 입력 오류로, 아래의 Unlock 명령만, EXPIRED & LOCKED 라고 되있으면, 패스워드 기간만료로, Unlock 후 비밀번호를 지정해줘야 한다. ALTER USER 사용자명 ACCOUNT UNLOCK; 로 Lock된 사용자를 Unl ock 시킨다 방금 말했다시피, 다시 Lock된 사용자 확인했는데,  Open되지 않고 EXPIRED되어 있다면, alter user 사용자명 identified by 바꿀패스워드;  로 패스워드를 변경하거나 또는 SQL*PLUS 를 재시작하여 Lock를 해제한 계정(사용자명/패스워드)로 로그인 하면 패스워드 변경 창이 뜬다. 추가로 패스워드 Lock 횟수 확인하는 방법은 SELECT U.USERNAME,P.PROFILE, P.RESOURCE_NAME, P.LIMIT  FROM D
댓글 쓰기
자세한 내용 보기

메이븐으로 라이브러리 인식

 간혹 퍼블릭 jar가 아닌 파일이 있는데 그럴때 쓰면 될듯 <dependency> <groupId> SimpleCryptLib </groupId> <artifactId> SimpleCryptLib </artifactId> <version> 1.1.0 </version> <scope> system </scope> <systemPath> ${basedir}/src/main/webapp/WEB-INF/lib/SimpleCryptLib-1.1.0.jar </systemPath> </dependency> version, scope, systemPath는 꼭 작성해야 한다 groupId, artifactId, version은 암거나 해도 되는거 같음 최근(2021.05.04)스프링 부트    < dependency > < groupId > NiceID </ groupId > < artifactId > NiceID </ artifactId > < version > 1.0 </ version > < scope > system </ scope > < systemPath > ${basedir}/src/main/resources/lib/NiceID.jar </ systemPath > </ dependency > 이걸 추가해주는것도 필요할지도..?? < build > < plugins > < plugin > < groupId > org.springframework.boot </ groupId > < artifactId > spring-boot-maven-plugi
댓글 쓰기
자세한 내용 보기